From e570b16091599725b9e34107fa9946534ad95562 Mon Sep 17 00:00:00 2001 From: Aurora de Juan Ojeda Date: Thu, 23 Apr 2020 08:41:08 +0200 Subject: [PATCH 01/11] onlick-test-added --- .../src/components/MessageForm/MessageForm.test.tsx | 12 ++++++++++-- .../src/components/MessageForm/MessageForm.tsx | 5 ++++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx b/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx index 12fab58..6f3f460 100644 --- a/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx +++ b/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { shallow } from 'enzyme'; +import { shallow, mount } from 'enzyme'; import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import sinon from 'sinon'; @@ -10,7 +10,7 @@ describe('Message Form component test', () => { configure({ adapter: new Adapter() }); - let component, addMessageSpy; + let component, addMessageSpy, truncComponent; let event = { preventDefault: () => { }}; @@ -24,6 +24,7 @@ describe('Message Form component test', () => { }; jest.spyOn(event, 'preventDefault'); component = shallow(< MessageFormComponent {...props}/>); + truncComponent = mount(< MessageFormComponent {...props}/>); }); it('should render message form properyl', () =>{ @@ -39,6 +40,13 @@ describe('Message Form component test', () => { expect(addMessageSpy.calledOnce).toBe(true); }); + it('should click on component div',()=>{ + truncComponent.find('.dButton').simulate('click'); + const consoleSpy = jest.spyOn(console, 'log'); + console.log('clicked'); + expect(consoleSpy).toHaveBeenCalledWith('clicked'); + }); + it('should handleChange change input and textarea values', ()=>{ const newMessage = component.state().newMessage; const inputValue = 'Hello world'; diff --git a/03 Tests samples/src/components/MessageForm/MessageForm.tsx b/03 Tests samples/src/components/MessageForm/MessageForm.tsx index c4f95bf..43672f0 100644 --- a/03 Tests samples/src/components/MessageForm/MessageForm.tsx +++ b/03 Tests samples/src/components/MessageForm/MessageForm.tsx @@ -30,7 +30,9 @@ export class MessageFormComponent extends React.Component { + console.log("clicked") +} handleSubmit(event) { event.preventDefault(); let { addMessage } = this.props; @@ -73,6 +75,7 @@ export class MessageFormComponent extends React.Component { this.handleChange(event); }} cols={30} rows={10}> +
Hi, click me!
); } From a37ea88fe78ca41809e76dd1a93ce6f718562d23 Mon Sep 17 00:00:00 2001 From: Aurora de Juan Ojeda Date: Thu, 23 Apr 2020 09:21:13 +0200 Subject: [PATCH 02/11] render-div --- 03 Tests samples/src/components/MessageForm/MessageForm.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx b/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx index 6f3f460..8f04888 100644 --- a/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx +++ b/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx @@ -33,6 +33,7 @@ describe('Message Form component test', () => { expect(component.find('.message-form input')).toHaveLength(1); expect(component.find('.message-form textarea')).toHaveLength(1); expect(component.find('.message-form button')).toHaveLength(1); + expect(component.find('.message-form div')).toHaveLength(1); }); it('should click on component button call add Message', () => { From 24edd5b83de6a118621695c22f5b9f6e07fc06b2 Mon Sep 17 00:00:00 2001 From: Aurora de Juan Ojeda Date: Thu, 23 Apr 2020 09:26:12 +0200 Subject: [PATCH 03/11] readme-updated --- 03 Tests samples/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/03 Tests samples/README.md b/03 Tests samples/README.md index 6ba94f2..a4c473e 100644 --- a/03 Tests samples/README.md +++ b/03 Tests samples/README.md @@ -17,7 +17,7 @@ - **Model-mappers** test sample: - Tests samples for events onChange ( simulate, fireEvent, ...) (Regina) -- Tests samples for events onClick (Aurora) +- Tests samples for events onClick [simulateClick](./src/redux/actions/MessagesActions.test.tsx) - Tests samples for events onScroll (Daily) - Test samples for onMouseUp and onMouseDown (Regina) - Test samples for onContextMenu (Regina) From 5421c0c475bb9f39c1771762414f8cada73998d0 Mon Sep 17 00:00:00 2001 From: Aurora de Juan Ojeda Date: Thu, 23 Apr 2020 09:37:22 +0200 Subject: [PATCH 04/11] lint --- .../src/components/MessageForm/MessageForm.test.tsx | 6 +++--- 03 Tests samples/src/components/MessageForm/MessageForm.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx b/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx index 8f04888..692ca8c 100644 --- a/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx +++ b/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx @@ -43,9 +43,9 @@ describe('Message Form component test', () => { it('should click on component div',()=>{ truncComponent.find('.dButton').simulate('click'); - const consoleSpy = jest.spyOn(console, 'log'); - console.log('clicked'); - expect(consoleSpy).toHaveBeenCalledWith('clicked'); + const consoleSpy = jest.spyOn(console, 'log'); + console.log('clicked'); + expect(consoleSpy).toHaveBeenCalledWith('clicked'); }); it('should handleChange change input and textarea values', ()=>{ diff --git a/03 Tests samples/src/components/MessageForm/MessageForm.tsx b/03 Tests samples/src/components/MessageForm/MessageForm.tsx index 43672f0..4dcf3b6 100644 --- a/03 Tests samples/src/components/MessageForm/MessageForm.tsx +++ b/03 Tests samples/src/components/MessageForm/MessageForm.tsx @@ -30,7 +30,7 @@ export class MessageFormComponent extends React.Component { + handleOnClick = () => { console.log("clicked") } handleSubmit(event) { From 0c2731977ed9b11fac50079a6c130828a2672e97 Mon Sep 17 00:00:00 2001 From: Aurora de Juan Ojeda Date: Thu, 23 Apr 2020 14:52:26 +0200 Subject: [PATCH 05/11] component --- .../src/components/Button/Button.less | 11 +++++++++++ .../src/components/Button/Button.tsx | 16 ++++++++++++++++ .../components/MessageForm/MessageForm.test.tsx | 8 -------- .../src/components/MessageForm/MessageForm.tsx | 7 +++---- .../MessagesSection/MessagesSection.test.tsx | 10 ++++++++++ .../MessagesSection/MessagesSection.tsx | 12 +++++++++++- 03 Tests samples/src/components/index.ts | 3 ++- 7 files changed, 53 insertions(+), 14 deletions(-) create mode 100644 03 Tests samples/src/components/Button/Button.less create mode 100644 03 Tests samples/src/components/Button/Button.tsx diff --git a/03 Tests samples/src/components/Button/Button.less b/03 Tests samples/src/components/Button/Button.less new file mode 100644 index 0000000..ab2a972 --- /dev/null +++ b/03 Tests samples/src/components/Button/Button.less @@ -0,0 +1,11 @@ +@whiteColor: white; +@purpleColor: rgb(184, 40, 184); +@borderRadius: 10px; + +button { + background-color: @purpleColor; + border: @purpleColor; + color: @whiteColor; + display: flex; + width: 100%; +} \ No newline at end of file diff --git a/03 Tests samples/src/components/Button/Button.tsx b/03 Tests samples/src/components/Button/Button.tsx new file mode 100644 index 0000000..4371ecf --- /dev/null +++ b/03 Tests samples/src/components/Button/Button.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import './Button.less'; + +interface ButtonProps{ + onClickButton: (event) => void; + +} + +export const Button = (props:ButtonProps) =>{ + const handleOnClick = () => { + props.onClickButton(event); +} + return ( + + ) +} \ No newline at end of file diff --git a/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx b/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx index 692ca8c..ff76684 100644 --- a/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx +++ b/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx @@ -33,7 +33,6 @@ describe('Message Form component test', () => { expect(component.find('.message-form input')).toHaveLength(1); expect(component.find('.message-form textarea')).toHaveLength(1); expect(component.find('.message-form button')).toHaveLength(1); - expect(component.find('.message-form div')).toHaveLength(1); }); it('should click on component button call add Message', () => { @@ -41,13 +40,6 @@ describe('Message Form component test', () => { expect(addMessageSpy.calledOnce).toBe(true); }); - it('should click on component div',()=>{ - truncComponent.find('.dButton').simulate('click'); - const consoleSpy = jest.spyOn(console, 'log'); - console.log('clicked'); - expect(consoleSpy).toHaveBeenCalledWith('clicked'); - }); - it('should handleChange change input and textarea values', ()=>{ const newMessage = component.state().newMessage; const inputValue = 'Hello world'; diff --git a/03 Tests samples/src/components/MessageForm/MessageForm.tsx b/03 Tests samples/src/components/MessageForm/MessageForm.tsx index 4dcf3b6..68475f8 100644 --- a/03 Tests samples/src/components/MessageForm/MessageForm.tsx +++ b/03 Tests samples/src/components/MessageForm/MessageForm.tsx @@ -4,6 +4,7 @@ import { connect } from 'react-redux'; import { Message } from '../../model'; import './MessageForm.less'; + interface MessageFormProps { messages: Message[], addMessage?: (newMessage: Message) => Promise, @@ -30,9 +31,7 @@ export class MessageFormComponent extends React.Component { - console.log("clicked") -} + handleSubmit(event) { event.preventDefault(); let { addMessage } = this.props; @@ -75,7 +74,7 @@ export class MessageFormComponent extends React.Component { this.handleChange(event); }} cols={30} rows={10}> -
Hi, click me!
+ ); } diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx b/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx index 2fbe1b1..3cd3b84 100644 --- a/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx +++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx @@ -4,6 +4,7 @@ import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import sinon from 'sinon'; import { MessagesSectionComponent } from './MessagesSection'; +import { Button } from '../Button/Button'; describe('Message List component test', () => { @@ -27,5 +28,14 @@ describe('Message List component test', () => { it('should getMessages be called in ComponentDidMound', () =>{ expect(getMessagesSpy.calledOnce).toBe(true); }); + it('should handle the click event', () =>{ + // window.alert=jest.fn(); + // component.find(Button).at(0).prop('onClickButton'); + //expect(window.alert).toBeCalledTimes(1); + + expect( + typeof component.find(Button).at(0).prop('onClickButton')).toBe('function'); + + }); }); \ No newline at end of file diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx index 8c16d8a..c6f5ee1 100644 --- a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx +++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx @@ -1,9 +1,11 @@ import React from 'react'; + import { MessageForm, MessageList } from '../index'; import { connect } from 'react-redux'; import { getAllMessages } from '../../redux/actions/MessagesActions'; import './MessagesSection.less'; import { Message } from '../../model'; +import { Button } from '..'; interface MessagesSectionProps { getMessages: () => Promise, @@ -19,13 +21,17 @@ export class MessagesSectionComponent extends React.ComponentMessages management sample, deployed +
+ +
+ ); } } diff --git a/03 Tests samples/src/components/index.ts b/03 Tests samples/src/components/index.ts index 3554148..50eb78e 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 {Button} from './Button/Button'; export { MessageList, MessageForm, MessagesSection, + Button, }; \ No newline at end of file From 035f074bac355e6a7a97207258b6a778219df8b8 Mon Sep 17 00:00:00 2001 From: Aurora de Juan Ojeda Date: Thu, 23 Apr 2020 14:58:48 +0200 Subject: [PATCH 06/11] lint --- 03 Tests samples/src/components/MessageForm/MessageForm.test.tsx | 1 - .../src/components/MessagesSection/MessagesSection.tsx | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx b/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx index ff76684..417563f 100644 --- a/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx +++ b/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx @@ -24,7 +24,6 @@ describe('Message Form component test', () => { }; jest.spyOn(event, 'preventDefault'); component = shallow(< MessageFormComponent {...props}/>); - truncComponent = mount(< MessageFormComponent {...props}/>); }); it('should render message form properyl', () =>{ diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx index c6f5ee1..9fc070d 100644 --- a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx +++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx @@ -31,6 +31,7 @@ export class MessagesSectionComponent extends React.Component Date: Fri, 24 Apr 2020 08:34:04 +0200 Subject: [PATCH 07/11] remove-comments --- .../src/components/MessagesSection/MessagesSection.test.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx b/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx index 3cd3b84..41f21b0 100644 --- a/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx +++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx @@ -29,10 +29,6 @@ describe('Message List component test', () => { expect(getMessagesSpy.calledOnce).toBe(true); }); it('should handle the click event', () =>{ - // window.alert=jest.fn(); - // component.find(Button).at(0).prop('onClickButton'); - //expect(window.alert).toBeCalledTimes(1); - expect( typeof component.find(Button).at(0).prop('onClickButton')).toBe('function'); From 0ad3a552cb2d207ab2aa38ad1598fdff62167af6 Mon Sep 17 00:00:00 2001 From: Aurora de Juan Ojeda Date: Fri, 24 Apr 2020 08:42:50 +0200 Subject: [PATCH 08/11] lint-ok --- 03 Tests samples/src/components/Button/Button.tsx | 14 +++++++------- .../components/MessageForm/MessageForm.test.tsx | 4 ++-- .../components/MessagesSection/MessagesSection.tsx | 6 +++--- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/03 Tests samples/src/components/Button/Button.tsx b/03 Tests samples/src/components/Button/Button.tsx index 4371ecf..45a6cb9 100644 --- a/03 Tests samples/src/components/Button/Button.tsx +++ b/03 Tests samples/src/components/Button/Button.tsx @@ -7,10 +7,10 @@ interface ButtonProps{ } export const Button = (props:ButtonProps) =>{ - const handleOnClick = () => { - props.onClickButton(event); -} - return ( - - ) -} \ No newline at end of file + const handleOnClick = () => { + props.onClickButton(event); + }; + return ( + + ); +}; \ No newline at end of file diff --git a/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx b/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx index 417563f..12fab58 100644 --- a/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx +++ b/03 Tests samples/src/components/MessageForm/MessageForm.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { shallow, mount } from 'enzyme'; +import { shallow } from 'enzyme'; import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import sinon from 'sinon'; @@ -10,7 +10,7 @@ describe('Message Form component test', () => { configure({ adapter: new Adapter() }); - let component, addMessageSpy, truncComponent; + let component, addMessageSpy; let event = { preventDefault: () => { }}; diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx index 9fc070d..c309b91 100644 --- a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx +++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx @@ -30,8 +30,8 @@ export class MessagesSectionComponent extends React.Component
- +
From 4b8dad75487ed22ad79470e22e30780bc3da816b Mon Sep 17 00:00:00 2001 From: Aurora de Juan Ojeda Date: Fri, 24 Apr 2020 08:46:49 +0200 Subject: [PATCH 09/11] conflicts --- 03 Tests samples/README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/03 Tests samples/README.md b/03 Tests samples/README.md index a4c473e..6653b37 100644 --- a/03 Tests samples/README.md +++ b/03 Tests samples/README.md @@ -17,14 +17,14 @@ - **Model-mappers** test sample: - Tests samples for events onChange ( simulate, fireEvent, ...) (Regina) -- Tests samples for events onClick [simulateClick](./src/redux/actions/MessagesActions.test.tsx) -- Tests samples for events onScroll (Daily) -- Test samples for onMouseUp and onMouseDown (Regina) -- Test samples for onContextMenu (Regina) -- Test samples for onSubmit (Aurora) - -- Tests samples for useSuscribeToScroll (Daily) -- Tests samples using ref an useRef hook (Regina, Daily) +- Tests samples for events onClick [simulateClick](./src/redux/actions/MessagesSection.test.tsx) +- Tests samples for events onScroll +- Test samples for onMouseUp and onMouseDown +- Test samples for onContextMenu +- Test samples for onSubmit + +- Tests samples for useSuscribeToScroll +- Tests samples using ref an useRef hook From 81e217890c11e894d65cefee916500d348fe024a Mon Sep 17 00:00:00 2001 From: Aurora de Juan Ojeda Date: Fri, 24 Apr 2020 10:49:41 +0200 Subject: [PATCH 10/11] issue#18-formatting-code --- .../src/components/Button/Button.tsx | 12 ++-- .../MessagesSection/MessagesSection.test.tsx | 14 ++-- .../MessagesSection/MessagesSection.tsx | 69 ++++++++++--------- 03 Tests samples/src/components/index.ts | 8 +-- 4 files changed, 53 insertions(+), 50 deletions(-) diff --git a/03 Tests samples/src/components/Button/Button.tsx b/03 Tests samples/src/components/Button/Button.tsx index 45a6cb9..3ce4d57 100644 --- a/03 Tests samples/src/components/Button/Button.tsx +++ b/03 Tests samples/src/components/Button/Button.tsx @@ -7,10 +7,10 @@ interface ButtonProps{ } export const Button = (props:ButtonProps) =>{ - const handleOnClick = () => { - props.onClickButton(event); - }; - return ( - - ); + const handleOnClick = () => { + props.onClickButton(event); + }; + return ( + + ); }; \ No newline at end of file diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx b/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx index e8f2060..f41aab4 100644 --- a/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx +++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx @@ -25,13 +25,13 @@ describe('Message List component test', () => { expect(component.find('.message-section')).toHaveLength(1); }); - it('should getMessages be called in ComponentDidMound', () =>{ - expect(getMessagesSpy.calledOnce).toBe(true); - }); - it('should handle the click event', () =>{ - expect( - typeof component.find(Button).at(0).prop('onClickButton')).toBe('function'); + it('should getMessages be called in ComponentDidMound', () =>{ + expect(getMessagesSpy.calledOnce).toBe(true); + }); + it('should handle the click event', () =>{ + expect( + typeof component.find(Button).at(0).prop('onClickButton')).toBe('function'); - }); + }); }); \ No newline at end of file diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx index 7d1e9cb..a133caa 100644 --- a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx +++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx @@ -12,42 +12,45 @@ interface MessagesSectionProps { messages?: Message[]; } -export class MessagesSectionComponent extends React.Component { - static defaultProps = { - messages: [], - } +export class MessagesSectionComponent extends React.Component< + MessagesSectionProps +> { + static defaultProps = { + messages: [], + }; - constructor(props) { - super(props); - this.state = { - messages: [], - - }; - - } + constructor(props) { + super(props); + this.state = { + messages: [], + }; + } - componentDidMount() { - this.props.getMessages(); - } - handleCallAlert(event){ - alert('Hello! I am an alert box!'); - console.log('alert',event); - } - render() { - const { messages } = this.props; + componentDidMount() { + this.props.getMessages(); + } + handleCallAlert(event) { + alert('Hello! I am an alert box!'); + console.log('alert', event); + } + render() { + const { messages } = this.props; - return ( -
-

Messages management sample, deployed

- - -
- -
-
- - ); - } + return ( +
+

Messages management sample, deployed

+ + +
+ +
+
+ ); + } } const mapStateToProps = (state) => { diff --git a/03 Tests samples/src/components/index.ts b/03 Tests samples/src/components/index.ts index 50eb78e..cdd7755 100644 --- a/03 Tests samples/src/components/index.ts +++ b/03 Tests samples/src/components/index.ts @@ -5,8 +5,8 @@ import {Button} from './Button/Button'; export { - MessageList, - MessageForm, - MessagesSection, - Button, + MessageList, + MessageForm, + MessagesSection, + Button, }; \ No newline at end of file From a90b604027f1aed8633a8d680d4a3427a78e9378 Mon Sep 17 00:00:00 2001 From: Aurora de Juan Ojeda Date: Mon, 27 Apr 2020 10:47:15 +0200 Subject: [PATCH 11/11] issue#18-comments-solved --- 03 Tests samples/src/components/Button/Button.less | 3 ++- .../components/MessagesSection/MessagesSection.less | 1 + .../MessagesSection/MessagesSection.test.tsx | 9 +++++---- .../components/MessagesSection/MessagesSection.tsx | 12 +++++------- 4 files changed, 13 insertions(+), 12 deletions(-) diff --git a/03 Tests samples/src/components/Button/Button.less b/03 Tests samples/src/components/Button/Button.less index ab2a972..4abf3ba 100644 --- a/03 Tests samples/src/components/Button/Button.less +++ b/03 Tests samples/src/components/Button/Button.less @@ -7,5 +7,6 @@ button { border: @purpleColor; color: @whiteColor; display: flex; - width: 100%; + width: 20%; + height: 10%; } \ No newline at end of file diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.less b/03 Tests samples/src/components/MessagesSection/MessagesSection.less index 6d9b40b..3063278 100644 --- a/03 Tests samples/src/components/MessagesSection/MessagesSection.less +++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.less @@ -4,4 +4,5 @@ justify-content: space-between; width: 80%; margin: 0 auto; + } \ No newline at end of file diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx b/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx index f41aab4..ee63571 100644 --- a/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx +++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx @@ -29,9 +29,10 @@ describe('Message List component test', () => { expect(getMessagesSpy.calledOnce).toBe(true); }); it('should handle the click event', () =>{ - expect( - typeof component.find(Button).at(0).prop('onClickButton')).toBe('function'); - + window.alert = jest.fn(); + expect(typeof component.find(Button).at(0).prop('onClickButton')).toBe('function'); + component.find(Button).at(0).prop('onClickButton')(); + expect(window.alert).toHaveBeenCalledTimes(1); }); - + }); \ No newline at end of file diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx index a133caa..272a82e 100644 --- a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx +++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx @@ -41,13 +41,11 @@ export class MessagesSectionComponent extends React.Component<

Messages management sample, deployed

-
- -
+