From 2422b2f5f52dc5c3ed68bd3b44fa06886cb4b643 Mon Sep 17 00:00:00 2001 From: zegfrre Date: Thu, 23 Apr 2020 12:46:33 +0200 Subject: [PATCH 1/8] issue#19: include onMouseUp onMouseDown and onContextMenu events --- .../components/MessageList/MessageList.less | 14 +++- .../MessageList/MessageList.test.tsx | 15 +++++ .../components/MessageList/MessageList.tsx | 65 ++++++++++++++----- 3 files changed, 76 insertions(+), 18 deletions(-) diff --git a/03 Tests samples/src/components/MessageList/MessageList.less b/03 Tests samples/src/components/MessageList/MessageList.less index 5ad4777..86d7c93 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.less +++ b/03 Tests samples/src/components/MessageList/MessageList.less @@ -5,7 +5,7 @@ .messages-table{ border: @tableBorder; - width: 80%; + width: 100%; border-collapse: collapse; td, th { border: @tableBorder; @@ -26,4 +26,14 @@ } } } -}; \ No newline at end of file +}; + +.messages-table-container { + width: 80%; + margin-left: 20px; +} + +.context-menu-info { + margin-top: 12px; + border: @tableBorder; +} \ No newline at end of file diff --git a/03 Tests samples/src/components/MessageList/MessageList.test.tsx b/03 Tests samples/src/components/MessageList/MessageList.test.tsx index 465ceff..7dc55d7 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.test.tsx +++ b/03 Tests samples/src/components/MessageList/MessageList.test.tsx @@ -44,4 +44,19 @@ describe('Message List component test', () => { component = shallow(< MessageList messages={messages}/>); expect(component.find('td')).toHaveLength(2); }); + + it('should set color red on mouse down on the tr', () =>{ + let messages = [ + { + id: 1, + subject: 'Hello world', + body: 'Hello world' + } + ]; + component = shallow(< MessageList messages={messages}/>); + const bodyMessages = component.find('tr').at(1); + bodyMessages.simulate('mousedown'); + console.log('aaaaaaaaaaaaaaaaaaaaaaa', component); + expect(bodyMessages).toContain(''); + }); }); \ No newline at end of file diff --git a/03 Tests samples/src/components/MessageList/MessageList.tsx b/03 Tests samples/src/components/MessageList/MessageList.tsx index 2f9863f..eca546e 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.tsx +++ b/03 Tests samples/src/components/MessageList/MessageList.tsx @@ -7,20 +7,53 @@ interface MessageListProps { } export const MessageList = (props: MessageListProps) => { - return ( - - - - - - - - {props.messages.map(message => { - return ( - - - ); - })} - -
SubjectBody
{message.subject}{message.body}
); + const [rowColor, setRowColor] = React.useState('white'); + const [clickPosition, setClickPosition] = React.useState({ clientX: 0, clientY: 0 }); + const [showContextMenu, setShowContextMenu] = React.useState(false); + + const handleOnMouseDown = (event: React.MouseEvent) => { + event.type === "mousedown" ? setRowColor('red') : setRowColor('white'); + }; + + const handleContextMenu = (event: React.MouseEvent) => { + setClickPosition({ clientX: event.clientX, clientY: event.clientY }); + event.preventDefault(); + document.addEventListener('mousedown', handleClickAfterContextMenuOpen); + setShowContextMenu(true); + }; + + const handleClickAfterContextMenuOpen = (e: MouseEvent) => { + // Only if the left button is clicked - number 1 + // We need to perform this check since this method will also get called when right-clicking + if (e.which === 1) { + document.removeEventListener('mousedown', handleClickAfterContextMenuOpen); + setTimeout(() => setShowContextMenu(false), 200); + } + }; + + return ( +
+ + + + + + + + + {props.messages.map(message => ( + + + + + ))} + +
SubjectBody
{message.subject}{message.body}
+ {showContextMenu && ( +
+ {`Top position:${clickPosition.clientY} left-position:${clickPosition.clientX}`} +
+ )} +
+ ); }; From 703699409e7587e1eb7a2156408764306aa5514d Mon Sep 17 00:00:00 2001 From: zegfrre Date: Fri, 24 Apr 2020 11:14:33 +0200 Subject: [PATCH 2/8] feature/issue#19: tests onMouse first approach --- .../MessageList/MessageList.test.tsx | 22 +++++++++++++------ .../components/MessageList/MessageList.tsx | 17 +++++++++----- 2 files changed, 26 insertions(+), 13 deletions(-) diff --git a/03 Tests samples/src/components/MessageList/MessageList.test.tsx b/03 Tests samples/src/components/MessageList/MessageList.test.tsx index 7dc55d7..ed899df 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.test.tsx +++ b/03 Tests samples/src/components/MessageList/MessageList.test.tsx @@ -1,18 +1,25 @@ 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 { act } from 'react-dom/test-utils'; import {MessageList} from './MessageList'; describe('Message List component test', () => { configure({ adapter: new Adapter() }); let component; + const setState = jest.fn(); + const useStateMock: any = (init) => [init, setState]; beforeEach(() => { component = shallow(< MessageList messages={[]}/>); }); + afterEach(() => { + jest.clearAllMocks(); + }); + it('should render a table', () =>{ expect(component.find('table')).toHaveLength(1); }); @@ -45,7 +52,8 @@ describe('Message List component test', () => { expect(component.find('td')).toHaveLength(2); }); - it('should set color red on mouse down on the tr', () =>{ + it('should set color red on mouse down on the tr', () => { + jest.spyOn(React, 'useState').mockImplementation(useStateMock); let messages = [ { id: 1, @@ -54,9 +62,9 @@ describe('Message List component test', () => { } ]; component = shallow(< MessageList messages={messages}/>); - const bodyMessages = component.find('tr').at(1); - bodyMessages.simulate('mousedown'); - console.log('aaaaaaaaaaaaaaaaaaaaaaa', component); - expect(bodyMessages).toContain(''); + // const bodyMessages = component.find('tr').at(1); + // bodyMessages.simulate('mousedown', { type: "mousedown" }); + expect(setState).toHaveBeenCalledTimes(1); + // expect(bodyMessages.props().style).toHaveProperty('backgroundColor', 'blue'); }); -}); \ No newline at end of file +}); diff --git a/03 Tests samples/src/components/MessageList/MessageList.tsx b/03 Tests samples/src/components/MessageList/MessageList.tsx index eca546e..fca6a12 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.tsx +++ b/03 Tests samples/src/components/MessageList/MessageList.tsx @@ -11,9 +11,9 @@ export const MessageList = (props: MessageListProps) => { const [clickPosition, setClickPosition] = React.useState({ clientX: 0, clientY: 0 }); const [showContextMenu, setShowContextMenu] = React.useState(false); - const handleOnMouseDown = (event: React.MouseEvent) => { - event.type === "mousedown" ? setRowColor('red') : setRowColor('white'); - }; + // const handleOnMouse = (event: React.MouseEvent) => { + // event.type === "mousedown" ? setRowColor('red') : setRowColor('blue'); + // }; const handleContextMenu = (event: React.MouseEvent) => { setClickPosition({ clientX: event.clientX, clientY: event.clientY }); @@ -27,7 +27,7 @@ export const MessageList = (props: MessageListProps) => { // We need to perform this check since this method will also get called when right-clicking if (e.which === 1) { document.removeEventListener('mousedown', handleClickAfterContextMenuOpen); - setTimeout(() => setShowContextMenu(false), 200); + setTimeout(() => setShowContextMenu(false), 100); } }; @@ -40,9 +40,13 @@ export const MessageList = (props: MessageListProps) => { Body - + {console.log('return', rowColor)} {props.messages.map(message => ( - + setRowColor('red')} + onMouseUp={() => setRowColor('blue')} + style={{backgroundColor: rowColor}}> {message.subject} {message.body} @@ -51,6 +55,7 @@ export const MessageList = (props: MessageListProps) => { {showContextMenu && (
+ Context menu {`Top position:${clickPosition.clientY} left-position:${clickPosition.clientX}`}
)} From 5e111f6406fced2965cfc9e24062629230a2b5ac Mon Sep 17 00:00:00 2001 From: zegfrre Date: Mon, 27 Apr 2020 08:48:10 +0200 Subject: [PATCH 3/8] feature/issue#19-onMouseUp-onMouseDown-tests: fix context menu display --- .../components/MessageList/MessageList.less | 3 ++- .../components/MessageList/MessageList.tsx | 25 +++---------------- 2 files changed, 6 insertions(+), 22 deletions(-) diff --git a/03 Tests samples/src/components/MessageList/MessageList.less b/03 Tests samples/src/components/MessageList/MessageList.less index 86d7c93..bb1917a 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.less +++ b/03 Tests samples/src/components/MessageList/MessageList.less @@ -34,6 +34,7 @@ } .context-menu-info { - margin-top: 12px; + padding: 8px; border: @tableBorder; + position: absolute; } \ No newline at end of file diff --git a/03 Tests samples/src/components/MessageList/MessageList.tsx b/03 Tests samples/src/components/MessageList/MessageList.tsx index 4be3494..729c3d2 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.tsx +++ b/03 Tests samples/src/components/MessageList/MessageList.tsx @@ -7,7 +7,6 @@ interface MessageListProps { } export const MessageList = (props: MessageListProps) => { -<<<<<<< HEAD const [rowColor, setRowColor] = React.useState('white'); const [clickPosition, setClickPosition] = React.useState({ clientX: 0, clientY: 0 }); const [showContextMenu, setShowContextMenu] = React.useState(false); @@ -56,28 +55,12 @@ export const MessageList = (props: MessageListProps) => { {showContextMenu && (
- Context menu - {`Top position:${clickPosition.clientY} left-position:${clickPosition.clientX}`} +
+ Context menu + {`Top position:${clickPosition.clientY} left-position:${clickPosition.clientX}`} +
)} ); -======= - return ( - - - - - - - - {props.messages.map(message => { - return ( - - - ); - })} - -
SubjectBody
{message.subject}{message.body}
); ->>>>>>> 72da5827271a3a5c4ed610ce3f8c0aeb66b2b37c }; From a770d9586e3eac90efd3464d29c8b329a50b7258 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathew=20Mu=C3=B1oz?= Date: Mon, 27 Apr 2020 10:36:04 +0100 Subject: [PATCH 4/8] issue#19: Add onMouseUp and onMouseDown tests --- .../MessageList/MessageList.test.tsx | 101 +++++++++--------- .../components/MessageList/MessageList.tsx | 37 ++++--- 2 files changed, 69 insertions(+), 69 deletions(-) diff --git a/03 Tests samples/src/components/MessageList/MessageList.test.tsx b/03 Tests samples/src/components/MessageList/MessageList.test.tsx index 9ce5fa3..c0edb9f 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.test.tsx +++ b/03 Tests samples/src/components/MessageList/MessageList.test.tsx @@ -1,70 +1,67 @@ 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 { act } from 'react-dom/test-utils'; -import {MessageList} from './MessageList'; +import { MessageList } from './MessageList'; describe('Message List component test', () => { configure({ adapter: new Adapter() }); - let component; - const setState = jest.fn(); - const useStateMock: any = (init) => [init, setState]; - - beforeEach(() => { - component = shallow(< MessageList messages={[]}/>); - }); + let component; + const messages = [ + { + id: 1, + subject: 'Hello world', + body: 'Hello world', + }, + ]; - afterEach(() => { + beforeEach(() => { + component = shallow(); + }); + + afterEach(() => { jest.clearAllMocks(); }); - it('should render a table', () =>{ - expect(component.find('table')).toHaveLength(1); - }); + it('should render a table', () => { + expect(component.find('table')).toHaveLength(1); + }); - it('should render two th', () =>{ - expect(component.find('th')).toHaveLength(2); - }); + it('should render two th', () => { + expect(component.find('th')).toHaveLength(2); + }); - it('should render a thead', () =>{ - expect(component.find('thead')).toHaveLength(1); - }); + it('should render a thead', () => { + expect(component.find('thead')).toHaveLength(1); + }); - it('should render a tbody', () =>{ - expect(component.find('tbody')).toHaveLength(1); - }); + it('should render a tbody', () => { + expect(component.find('tbody')).toHaveLength(1); + }); - it('should render none td', () =>{ - expect(component.find('td')).toHaveLength(0); - }); + it('should render none td', () => { + expect(component.find('td')).toHaveLength(0); + }); - it('should render two td', () => { - let messages = [ - { - id: 1, - subject: 'Hello world', - body: 'Hello world' - } - ]; - component = shallow(< MessageList messages={messages}/>); - expect(component.find('td')).toHaveLength(2); - }); + it('should render two td', () => { + component = shallow(); + expect(component.find('td')).toHaveLength(2); + }); - it('should set color red on mouse down on the tr', () => { - jest.spyOn(React, 'useState').mockImplementation(useStateMock); - let messages = [ - { - id: 1, - subject: 'Hello world', - body: 'Hello world' - } - ]; - component = shallow(< MessageList messages={messages}/>); - // const bodyMessages = component.find('tr').at(1); - // bodyMessages.simulate('mousedown', { type: "mousedown" }); - expect(setState).toHaveBeenCalledTimes(1); - // expect(bodyMessages.props().style).toHaveProperty('backgroundColor', 'blue'); - }); + it('should alert mousedown on mouse down on the tr', () => { + jest.spyOn(window, 'alert').mockImplementation(() => {}); + component = shallow(); + const bodyMessages = component.find('tr').at(1); + bodyMessages.simulate('mousedown', { type: 'mousedown' }); + expect(window.alert).toBeCalledWith('mousedown'); + }); + + it('should alert mouseup on mouse up on the tr', () => { + jest.spyOn(window, 'alert').mockImplementation(() => {}); + component = shallow(); + const bodyMessages = component.find('tr').at(1); + bodyMessages.simulate('mouseup', { type: 'mouseup' }); + expect(window.alert).toBeCalledWith('mouseup'); + }); }); diff --git a/03 Tests samples/src/components/MessageList/MessageList.tsx b/03 Tests samples/src/components/MessageList/MessageList.tsx index 729c3d2..5dcf78f 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.tsx +++ b/03 Tests samples/src/components/MessageList/MessageList.tsx @@ -3,30 +3,33 @@ import './MessageList.less'; import { Message } from '../../model'; interface MessageListProps { - messages: Message[], + messages: Message[]; } export const MessageList = (props: MessageListProps) => { - const [rowColor, setRowColor] = React.useState('white'); + // const [rowColor, setRowColor] = React.useState('white'); const [clickPosition, setClickPosition] = React.useState({ clientX: 0, clientY: 0 }); const [showContextMenu, setShowContextMenu] = React.useState(false); - // const handleOnMouse = (event: React.MouseEvent) => { - // event.type === "mousedown" ? setRowColor('red') : setRowColor('blue'); - // }; - - const handleContextMenu = (event: React.MouseEvent) => { + const handleOnMouse = (event: React.MouseEvent) => { + event.type === 'mousedown' ? alert('mousedown') : alert('mouseup'); + }; + + const handleContextMenu = (event: React.MouseEvent) => { setClickPosition({ clientX: event.clientX, clientY: event.clientY }); event.preventDefault(); document.addEventListener('mousedown', handleClickAfterContextMenuOpen); setShowContextMenu(true); - }; - - const handleClickAfterContextMenuOpen = (e: MouseEvent) => { + }; + + const handleClickAfterContextMenuOpen = (e: MouseEvent) => { // Only if the left button is clicked - number 1 // We need to perform this check since this method will also get called when right-clicking if (e.which === 1) { - document.removeEventListener('mousedown', handleClickAfterContextMenuOpen); + document.removeEventListener( + 'mousedown', + handleClickAfterContextMenuOpen + ); setTimeout(() => setShowContextMenu(false), 100); } }; @@ -40,13 +43,13 @@ export const MessageList = (props: MessageListProps) => { Body - {console.log('return', rowColor)} + {props.messages.map(message => ( - setRowColor('red')} - onMouseUp={() => setRowColor('blue')} - style={{backgroundColor: rowColor}}> + {message.subject} {message.body} From 8fa7d611bb60ada038f915c90ef1ee83318726e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathew=20Mu=C3=B1oz?= Date: Mon, 27 Apr 2020 11:06:23 +0100 Subject: [PATCH 5/8] issue#19: Fix lint errors and delete unnecessary comments --- .../components/MessageList/MessageList.tsx | 75 ++++++++++--------- 1 file changed, 40 insertions(+), 35 deletions(-) diff --git a/03 Tests samples/src/components/MessageList/MessageList.tsx b/03 Tests samples/src/components/MessageList/MessageList.tsx index 5dcf78f..b63d240 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.tsx +++ b/03 Tests samples/src/components/MessageList/MessageList.tsx @@ -7,9 +7,11 @@ interface MessageListProps { } export const MessageList = (props: MessageListProps) => { - // const [rowColor, setRowColor] = React.useState('white'); - const [clickPosition, setClickPosition] = React.useState({ clientX: 0, clientY: 0 }); - const [showContextMenu, setShowContextMenu] = React.useState(false); + const [clickPosition, setClickPosition] = React.useState({ + clientX: 0, + clientY: 0, + }); + const [showContextMenu, setShowContextMenu] = React.useState(false); const handleOnMouse = (event: React.MouseEvent) => { event.type === 'mousedown' ? alert('mousedown') : alert('mouseup'); @@ -34,36 +36,39 @@ export const MessageList = (props: MessageListProps) => { } }; - return ( -
- - - - - - - - - {props.messages.map(message => ( - - - - - ))} - -
SubjectBody
{message.subject}{message.body}
- {showContextMenu && ( -
-
- Context menu - {`Top position:${clickPosition.clientY} left-position:${clickPosition.clientX}`} -
-
- )} -
- ); + return ( +
+ + + + + + + + + {props.messages.map((message) => ( + + + + + ))} + +
SubjectBody
{message.subject}{message.body}
+ {showContextMenu && ( +
+
+ Context menu + {`Top position:${clickPosition.clientY} left-position:${clickPosition.clientX}`} +
+
+ )} +
+ ); }; From cbc44f403058b94c90af63a3c16493b40545b371 Mon Sep 17 00:00:00 2001 From: zegfrre Date: Mon, 27 Apr 2020 13:50:10 +0200 Subject: [PATCH 6/8] feature/issue#19-onMouseUp-onMouseDown-tests: test menu context --- .../components/MessageList/MessageList.tsx | 90 +++++++++---------- .../MessageList/onContextMenu.test.tsx | 33 +++++++ 2 files changed, 73 insertions(+), 50 deletions(-) create mode 100644 03 Tests samples/src/components/MessageList/onContextMenu.test.tsx diff --git a/03 Tests samples/src/components/MessageList/MessageList.tsx b/03 Tests samples/src/components/MessageList/MessageList.tsx index b63d240..66db06c 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.tsx +++ b/03 Tests samples/src/components/MessageList/MessageList.tsx @@ -7,68 +7,58 @@ interface MessageListProps { } export const MessageList = (props: MessageListProps) => { - const [clickPosition, setClickPosition] = React.useState({ - clientX: 0, - clientY: 0, - }); - const [showContextMenu, setShowContextMenu] = React.useState(false); - - const handleOnMouse = (event: React.MouseEvent) => { - event.type === 'mousedown' ? alert('mousedown') : alert('mouseup'); - }; - - const handleContextMenu = (event: React.MouseEvent) => { + const [clickPosition, setClickPosition] = React.useState({ clientX: 0, clientY: 0 }); + const [showContextMenu, setShowContextMenu] = React.useState(false); + + const handleContextMenu = (event: React.MouseEvent) => { setClickPosition({ clientX: event.clientX, clientY: event.clientY }); event.preventDefault(); document.addEventListener('mousedown', handleClickAfterContextMenuOpen); setShowContextMenu(true); + }; + + const handleOnMouse = (event: React.MouseEvent) => { + event.type === 'mousedown' ? alert('mousedown') : alert('mouseup'); }; const handleClickAfterContextMenuOpen = (e: MouseEvent) => { // Only if the left button is clicked - number 1 // We need to perform this check since this method will also get called when right-clicking if (e.which === 1) { - document.removeEventListener( - 'mousedown', - handleClickAfterContextMenuOpen - ); + document.removeEventListener('mousedown',handleClickAfterContextMenuOpen); setTimeout(() => setShowContextMenu(false), 100); } }; - return ( -
- - - - - - - - - {props.messages.map((message) => ( - - - - - ))} - -
SubjectBody
{message.subject}{message.body}
- {showContextMenu && ( -
-
- Context menu - {`Top position:${clickPosition.clientY} left-position:${clickPosition.clientX}`} -
-
- )} -
- ); + return ( +
+ + + + + + + + + {props.messages.map(message => ( + + + + + ))} + +
SubjectBody
{message.subject}{message.body}
+ {showContextMenu && ( +
+
+ {`Context menu top-position:${clickPosition.clientY} left-position:${clickPosition.clientX}`} +
+
+ )} +
+ ); }; diff --git a/03 Tests samples/src/components/MessageList/onContextMenu.test.tsx b/03 Tests samples/src/components/MessageList/onContextMenu.test.tsx new file mode 100644 index 0000000..ebcb335 --- /dev/null +++ b/03 Tests samples/src/components/MessageList/onContextMenu.test.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { shallow, mount } from 'enzyme'; +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; +import {MessageList} from './MessageList'; + +describe('Message List component test', () => { + configure({ adapter: new Adapter() }); + + let component; + + beforeEach(() => { + component = shallow(< MessageList messages={[]}/>); + }); + + afterEach(() => { + jest.clearAllMocks(); + }); + + it('should open a context-menu on right clicking on the table', () => { + const preventDefault = jest.fn(); + component.find('div').at(0).simulate('contextMenu', { clientX: 969, clientY: 140, preventDefault }); + expect(component.find('.context-menu-info')).toHaveLength(1); + }); + it('should close context menu', () => { + const preventDefault = jest.fn(); + component.find('div').at(0).simulate('contextMenu', { clientX: 969, clientY: 140, preventDefault }); + component.find('div').at(0).simulate('mousedown', { which: 1 }); + setTimeout(() => { + expect(component.find('.context-menu-info')).toHaveLength(0); + }, 150); + }); +}); \ No newline at end of file From c6e7c978b349852e998aaf983e1728d2357affee Mon Sep 17 00:00:00 2001 From: zegfrre Date: Mon, 27 Apr 2020 14:38:54 +0200 Subject: [PATCH 7/8] feature/issue#19-onMouseUp-onMouseDown-tests: add comment --- .../src/components/MessageList/onContextMenu.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/03 Tests samples/src/components/MessageList/onContextMenu.test.tsx b/03 Tests samples/src/components/MessageList/onContextMenu.test.tsx index ebcb335..bf603ec 100644 --- a/03 Tests samples/src/components/MessageList/onContextMenu.test.tsx +++ b/03 Tests samples/src/components/MessageList/onContextMenu.test.tsx @@ -22,6 +22,7 @@ describe('Message List component test', () => { component.find('div').at(0).simulate('contextMenu', { clientX: 969, clientY: 140, preventDefault }); expect(component.find('.context-menu-info')).toHaveLength(1); }); + // This test passes due to the setTimeout function, we should work over this. it('should close context menu', () => { const preventDefault = jest.fn(); component.find('div').at(0).simulate('contextMenu', { clientX: 969, clientY: 140, preventDefault }); From d4c29ba127f563a64e4f988582dc34d214213cd0 Mon Sep 17 00:00:00 2001 From: zegfrre Date: Mon, 27 Apr 2020 15:00:13 +0200 Subject: [PATCH 8/8] feature/issue#19-onMouseUp-onMouseDown-tests: fix linter --- .../MessageList/MessageList.test.tsx | 2 +- .../components/MessageList/MessageList.tsx | 87 ++++++++++--------- .../MessageList/onContextMenu.test.tsx | 24 +++-- 3 files changed, 64 insertions(+), 49 deletions(-) diff --git a/03 Tests samples/src/components/MessageList/MessageList.test.tsx b/03 Tests samples/src/components/MessageList/MessageList.test.tsx index c0edb9f..ab06e79 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.test.tsx +++ b/03 Tests samples/src/components/MessageList/MessageList.test.tsx @@ -56,7 +56,7 @@ describe('Message List component test', () => { bodyMessages.simulate('mousedown', { type: 'mousedown' }); expect(window.alert).toBeCalledWith('mousedown'); }); - + it('should alert mouseup on mouse up on the tr', () => { jest.spyOn(window, 'alert').mockImplementation(() => {}); component = shallow(); diff --git a/03 Tests samples/src/components/MessageList/MessageList.tsx b/03 Tests samples/src/components/MessageList/MessageList.tsx index 66db06c..23c9054 100644 --- a/03 Tests samples/src/components/MessageList/MessageList.tsx +++ b/03 Tests samples/src/components/MessageList/MessageList.tsx @@ -7,17 +7,20 @@ interface MessageListProps { } export const MessageList = (props: MessageListProps) => { - const [clickPosition, setClickPosition] = React.useState({ clientX: 0, clientY: 0 }); - const [showContextMenu, setShowContextMenu] = React.useState(false); - - const handleContextMenu = (event: React.MouseEvent) => { + const [clickPosition, setClickPosition] = React.useState({ + clientX: 0, + clientY: 0, + }); + const [showContextMenu, setShowContextMenu] = React.useState(false); + + const handleContextMenu = (event: React.MouseEvent) => { setClickPosition({ clientX: event.clientX, clientY: event.clientY }); event.preventDefault(); document.addEventListener('mousedown', handleClickAfterContextMenuOpen); setShowContextMenu(true); - }; - - const handleOnMouse = (event: React.MouseEvent) => { + }; + + const handleOnMouse = (event: React.MouseEvent) => { event.type === 'mousedown' ? alert('mousedown') : alert('mouseup'); }; @@ -25,40 +28,46 @@ export const MessageList = (props: MessageListProps) => { // Only if the left button is clicked - number 1 // We need to perform this check since this method will also get called when right-clicking if (e.which === 1) { - document.removeEventListener('mousedown',handleClickAfterContextMenuOpen); + document.removeEventListener( + 'mousedown', + handleClickAfterContextMenuOpen + ); setTimeout(() => setShowContextMenu(false), 100); } }; - return ( -
- - - - - - - - - {props.messages.map(message => ( - - - - - ))} - -
SubjectBody
{message.subject}{message.body}
- {showContextMenu && ( -
-
- {`Context menu top-position:${clickPosition.clientY} left-position:${clickPosition.clientX}`} -
-
- )} -
- ); + return ( +
+ + + + + + + + + {props.messages.map((message) => ( + + + + + ))} + +
SubjectBody
{message.subject}{message.body}
+ {showContextMenu && ( +
+
+ {`Context menu top-position:${clickPosition.clientY} left-position:${clickPosition.clientX}`} +
+
+ )} +
+ ); }; diff --git a/03 Tests samples/src/components/MessageList/onContextMenu.test.tsx b/03 Tests samples/src/components/MessageList/onContextMenu.test.tsx index bf603ec..baf5319 100644 --- a/03 Tests samples/src/components/MessageList/onContextMenu.test.tsx +++ b/03 Tests samples/src/components/MessageList/onContextMenu.test.tsx @@ -1,8 +1,8 @@ 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 {MessageList} from './MessageList'; +import { MessageList } from './MessageList'; describe('Message List component test', () => { configure({ adapter: new Adapter() }); @@ -10,25 +10,31 @@ describe('Message List component test', () => { let component; beforeEach(() => { - component = shallow(< MessageList messages={[]}/>); - }); + component = shallow(); + }); - afterEach(() => { + afterEach(() => { jest.clearAllMocks(); }); it('should open a context-menu on right clicking on the table', () => { const preventDefault = jest.fn(); - component.find('div').at(0).simulate('contextMenu', { clientX: 969, clientY: 140, preventDefault }); + component + .find('div') + .at(0) + .simulate('contextMenu', { clientX: 969, clientY: 140, preventDefault }); expect(component.find('.context-menu-info')).toHaveLength(1); }); // This test passes due to the setTimeout function, we should work over this. it('should close context menu', () => { const preventDefault = jest.fn(); - component.find('div').at(0).simulate('contextMenu', { clientX: 969, clientY: 140, preventDefault }); + component + .find('div') + .at(0) + .simulate('contextMenu', { clientX: 969, clientY: 140, preventDefault }); component.find('div').at(0).simulate('mousedown', { which: 1 }); setTimeout(() => { expect(component.find('.context-menu-info')).toHaveLength(0); - }, 150); + }, 150); }); -}); \ No newline at end of file +});