diff options
Diffstat (limited to 'test/components')
| -rw-r--r-- | test/components/Switch.spec.js | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/test/components/Switch.spec.js b/test/components/Switch.spec.js new file mode 100644 index 0000000000..78258b1d40 --- /dev/null +++ b/test/components/Switch.spec.js @@ -0,0 +1,104 @@ +// @flow + +import { expect } from 'chai'; +import React from 'react'; +import ReactTestUtils, { Simulate } from 'react-dom/test-utils'; +import Switch from '../../app/components/Switch'; + +describe('components/Switch', () => { + + it('should switch on', (done) => { + const onChange = (isOn) => { + expect(isOn).to.be.true; + done(); + }; + const component = ReactTestUtils.renderIntoDocument( + <Switch isOn={ false } onChange={ onChange } /> + ); + const domNode = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'input'); + + Simulate.mouseDown(domNode, { clientX: 100, clientY: 0 }); + Simulate.mouseUp(domNode, { clientX: 100, clientY: 0 }); + + domNode.checked = true; + Simulate.change(domNode); + }); + + it('should switch off', (done) => { + const onChange = (isOn) => { + expect(isOn).to.be.false; + done(); + }; + const component = ReactTestUtils.renderIntoDocument( + <Switch isOn={ true } onChange={ onChange } /> + ); + const domNode = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'input'); + + Simulate.mouseDown(domNode, { clientX: 100, clientY: 0 }); + Simulate.mouseUp(domNode, { clientX: 100, clientY: 0 }); + + domNode.checked = false; + Simulate.change(domNode); + }); + + it('should handle left to right swipe', (done) => { + const onChange = (isOn) => { + expect(isOn).to.be.true; + done(); + }; + const component = ReactTestUtils.renderIntoDocument( + <Switch isOn={ false } onChange={ onChange } /> + ); + const domNode = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'input'); + + Simulate.mouseDown(domNode, { clientX: 100, clientY: 0 }); + + // Switch listens to events on document + document.dispatchEvent(new MouseEvent('mousemove', { clientX: 150, clientY: 0 })); + document.dispatchEvent(new MouseEvent('mouseup', { clientX: 150, clientY: 0 })); + }); + + it('should handle right to left swipe', (done) => { + const onChange = (isOn) => { + expect(isOn).to.be.false; + done(); + }; + const component = ReactTestUtils.renderIntoDocument( + <Switch isOn={ true } onChange={ onChange } /> + ); + const domNode = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'input'); + + Simulate.mouseDown(domNode, { clientX: 150, clientY: 0 }); + + // Switch listens to events on document + document.dispatchEvent(new MouseEvent('mousemove', { clientX: 100, clientY: 0 })); + document.dispatchEvent(new MouseEvent('mouseup', { clientX: 100, clientY: 0 })); + }); + + it('should timeout when user holds knob for too long without moving', (done) => { + const onChange = () => { + throw new Error('onChange should not be called on timeout.'); + }; + + const component = ReactTestUtils.renderIntoDocument( + <Switch isOn={ false } onChange={ onChange } /> + ); + const domNode = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'input'); + + Simulate.mouseDown(domNode, { clientX: 100, clientY: 0 }); + + setTimeout(() => { + // Switch listens to events on document + document.dispatchEvent(new MouseEvent('mouseup', { clientX: 100, clientY: 0 })); + + try { + // should not trigger onChange() + Simulate.change(domNode); + done(); + } catch(e) { + done(e); + } + }, 1000); + }); + +});
\ No newline at end of file |