From 397d9995825ab410d9802260e183b15e5c9e14db Mon Sep 17 00:00:00 2001 From: Aurora de Juan Ojeda Date: Fri, 24 Apr 2020 17:58:00 +0200 Subject: [PATCH 1/3] issue#21 --- 03 Tests samples/README.md | 2 +- .../components/MessageList/MessageList.less | 49 +++++++++++-------- .../components/MessageList/MessageList.tsx | 40 ++++++++------- .../MessagesSection/MessagesSection.test.tsx | 1 - .../MessagesSection/MessagesSection.tsx | 3 +- .../src/components/NameForm/NameForm.test.tsx | 24 +++++++++ .../src/components/NameForm/NameForm.tsx | 42 ++++++++++++++++ 03 Tests samples/src/components/index.ts | 3 +- 8 files changed, 123 insertions(+), 41 deletions(-) create mode 100644 03 Tests samples/src/components/NameForm/NameForm.test.tsx create mode 100644 03 Tests samples/src/components/NameForm/NameForm.tsx diff --git a/03 Tests samples/README.md b/03 Tests samples/README.md index 6ba94f2..d3c0ba3 100644 --- a/03 Tests samples/README.md +++ b/03 Tests samples/README.md @@ -21,7 +21,7 @@ - Tests samples for events onScroll (Daily) - Test samples for onMouseUp and onMouseDown (Regina) - Test samples for onContextMenu (Regina) -- Test samples for onSubmit (Aurora) +- Test samples for onSubmit [onSubmitTest](./src/components/NameForm/NameForm.test.tsx) - Tests samples for useSuscribeToScroll (Daily) - Tests samples using ref an useRef hook (Regina, Daily) diff --git a/03 Tests samples/src/components/MessageList/MessageList.less b/03 Tests samples/src/components/MessageList/MessageList.less index 5ad4777..dbab41d 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.less +++ b/03 Tests samples/src/components/MessageList/MessageList.less @@ -2,28 +2,37 @@ @headerBackgroundColor: gainsboro; @evenTrBackgroundColor: #ffe8e8; @oddTrBackgroundColor: white; - -.messages-table{ - border: @tableBorder; - width: 80%; - border-collapse: collapse; - td, th { +div { + width: 100%; + display: flex; + flex-direction: column; + .messages-table{ border: @tableBorder; - }; - thead{ - tr{ - background-color: @headerBackgroundColor; - text-align: left; - } - } - tbody{ - tr{ - &:nth-child(even){ - background-color: @evenTrBackgroundColor; + width: 80%; + border-collapse: collapse; + td, th { + border: @tableBorder; + }; + thead{ + tr{ + background-color: @headerBackgroundColor; + text-align: left; } - &:nth-child(odd){ - background-color: @oddTrBackgroundColor; + } + tbody{ + tr{ + &:nth-child(even){ + background-color: @evenTrBackgroundColor; + } + &:nth-child(odd){ + background-color: @oddTrBackgroundColor; + } } } } -}; \ No newline at end of file + button { + width: 20%; + background-color: black; + color: white; + } +}; diff --git a/03 Tests samples/src/components/MessageList/MessageList.tsx b/03 Tests samples/src/components/MessageList/MessageList.tsx index 2f9863f..4f5b012 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.tsx +++ b/03 Tests samples/src/components/MessageList/MessageList.tsx @@ -3,24 +3,30 @@ import './MessageList.less'; import { Message } from '../../model'; interface MessageListProps { - messages: Message[], + messages: Message[]; } export const MessageList = (props: MessageListProps) => { - return ( - - - - - - - - {props.messages.map(message => { - return ( - - - ); - })} - -
SubjectBody
{message.subject}{message.body}
); + return ( +
+ + + + + + + + + {props.messages.map((message) => { + return ( + + + + + ); + })} + +
SubjectBody
{message.subject}{message.body}
+
+ ); }; diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx b/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx index 2fbe1b1..644e286 100644 --- a/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx +++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx @@ -5,7 +5,6 @@ import Adapter from 'enzyme-adapter-react-16'; import sinon from 'sinon'; import { MessagesSectionComponent } from './MessagesSection'; - describe('Message List component test', () => { configure({ adapter: new Adapter() }); diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx index 8c16d8a..8e44d3e 100644 --- a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx +++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { MessageForm, MessageList } from '../index'; +import { MessageForm, MessageList, NameForm } from '../index'; import { connect } from 'react-redux'; import { getAllMessages } from '../../redux/actions/MessagesActions'; import './MessagesSection.less'; @@ -34,6 +34,7 @@ export class MessagesSectionComponent extends React.ComponentMessages management sample, deployed + ); } diff --git a/03 Tests samples/src/components/NameForm/NameForm.test.tsx b/03 Tests samples/src/components/NameForm/NameForm.test.tsx new file mode 100644 index 0000000..974c40e --- /dev/null +++ b/03 Tests samples/src/components/NameForm/NameForm.test.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import { NameForm } from './NameForm'; +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +describe(' { + configure({ adapter: new Adapter() }); + it('Should call alert() when submit button is clicked', () => { + const component = mount(); + window.alert = jest.fn(); + component.setState({ value: 'Hello' }); + const expectedValue = 'A name was submitted: Hello'; + component.find('form').simulate('submit'); + expect(window.alert).toHaveBeenCalledWith(expectedValue); + }); + it('Should handle state changes', () => { + const component = mount(); + component.setState({clicked: false}); + expect(component.state().clicked).toBe(false); + component.find('form').simulate('submit'); + expect(component.state().clicked).toBe(true); + }); +}); diff --git a/03 Tests samples/src/components/NameForm/NameForm.tsx b/03 Tests samples/src/components/NameForm/NameForm.tsx new file mode 100644 index 0000000..b0bf19a --- /dev/null +++ b/03 Tests samples/src/components/NameForm/NameForm.tsx @@ -0,0 +1,42 @@ +import React from 'react'; + + +interface MyState { + value: string; + clicked: boolean; +} +export class NameForm extends React.Component<{}, MyState> { + constructor(props: MyState) { + super(props); + this.state = { value: '' , clicked: false }; + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + + handleChange(event) { + this.setState({ value: event.target.value }); + } + + handleSubmit(event) { + alert('A name was submitted: ' + this.state.value); + this.setState({clicked: true}); + event.preventDefault(); + } + + render() { + return ( +
+ + +
+ ); + } +} diff --git a/03 Tests samples/src/components/index.ts b/03 Tests samples/src/components/index.ts index 3554148..269551a 100644 --- a/03 Tests samples/src/components/index.ts +++ b/03 Tests samples/src/components/index.ts @@ -1,11 +1,12 @@ import {MessageList} from './MessageList/MessageList'; import {MessageForm} from './MessageForm/MessageForm'; import {MessagesSection} from './MessagesSection/MessagesSection'; - +import {NameForm} from './NameForm/NameForm'; export { MessageList, MessageForm, MessagesSection, + NameForm, }; \ No newline at end of file From be8f2ee36d77aeaf488644eaaaa0dab74b037198 Mon Sep 17 00:00:00 2001 From: Aurora de Juan Ojeda Date: Wed, 29 Apr 2020 09:16:57 +0200 Subject: [PATCH 2/3] issue#21-some-comments --- .../src/components/NameForm/NameForm.test.tsx | 34 ++++++----- .../src/components/NameForm/NameForm.tsx | 58 +++++++++---------- 2 files changed, 46 insertions(+), 46 deletions(-) diff --git a/03 Tests samples/src/components/NameForm/NameForm.test.tsx b/03 Tests samples/src/components/NameForm/NameForm.test.tsx index 974c40e..b9de289 100644 --- a/03 Tests samples/src/components/NameForm/NameForm.test.tsx +++ b/03 Tests samples/src/components/NameForm/NameForm.test.tsx @@ -5,20 +5,22 @@ import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; describe(' { - configure({ adapter: new Adapter() }); - it('Should call alert() when submit button is clicked', () => { - const component = mount(); - window.alert = jest.fn(); - component.setState({ value: 'Hello' }); - const expectedValue = 'A name was submitted: Hello'; - component.find('form').simulate('submit'); - expect(window.alert).toHaveBeenCalledWith(expectedValue); - }); - it('Should handle state changes', () => { - const component = mount(); - component.setState({clicked: false}); - expect(component.state().clicked).toBe(false); - component.find('form').simulate('submit'); - expect(component.state().clicked).toBe(true); - }); + configure({ adapter: new Adapter() }); + let component; + beforeEach(() => { + component = mount(); + }); + it('Should call alert() when submit button is clicked', () => { + window.alert = jest.fn(); + component.setState({ value: 'Hello' }); + const expectedValue = 'A name was submitted: Hello'; + component.find('form').simulate('submit'); + expect(window.alert).toHaveBeenCalledWith(expectedValue); + }); + it('Should handle state changes', () => { + component.setState({clicked: false}); + expect(component.state().clicked).toBe(false); + component.find('form').simulate('submit'); + expect(component.state().clicked).toBe(true); + }); }); diff --git a/03 Tests samples/src/components/NameForm/NameForm.tsx b/03 Tests samples/src/components/NameForm/NameForm.tsx index b0bf19a..178984d 100644 --- a/03 Tests samples/src/components/NameForm/NameForm.tsx +++ b/03 Tests samples/src/components/NameForm/NameForm.tsx @@ -1,42 +1,40 @@ import React from 'react'; - interface MyState { value: string; clicked: boolean; } export class NameForm extends React.Component<{}, MyState> { - constructor(props: MyState) { - super(props); - this.state = { value: '' , clicked: false }; - - this.handleChange = this.handleChange.bind(this); - this.handleSubmit = this.handleSubmit.bind(this); - } + constructor(props: MyState) { + super(props); + this.state = { value: '' , clicked: false }; + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } - handleChange(event) { - this.setState({ value: event.target.value }); - } + handleChange(event) { + this.setState({ value: event.target.value }); + } - handleSubmit(event) { - alert('A name was submitted: ' + this.state.value); - this.setState({clicked: true}); - event.preventDefault(); - } + handleSubmit(event) { + alert('A name was submitted: ' + this.state.value); + this.setState({clicked: true}); + event.preventDefault(); + } - render() { - return ( -
-
+ + + ); + } } From 110ab6fb12c1d2ab28a5a3c8123a80a4415dfac3 Mon Sep 17 00:00:00 2001 From: Aurora de Juan Ojeda Date: Wed, 29 Apr 2020 09:18:34 +0200 Subject: [PATCH 3/3] index-line --- 03 Tests samples/src/components/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/03 Tests samples/src/components/index.ts b/03 Tests samples/src/components/index.ts index 8b21637..d260c22 100644 --- a/03 Tests samples/src/components/index.ts +++ b/03 Tests samples/src/components/index.ts @@ -3,7 +3,6 @@ import {MessageForm} from './MessageForm/MessageForm'; import {MessagesSection} from './MessagesSection/MessagesSection'; import {NameForm} from './NameForm/NameForm'; - export { MessageList, MessageForm,