From 4b6da7c946c41481bcb66b5fab46d1423f7fba99 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 30 Jun 2019 18:05:28 +0200 Subject: [PATCH] increase test coverage --- packages/material-ui/src/Slider/Slider.js | 10 +- .../material-ui/src/Slider/Slider.test.js | 101 +++++++++++++++++- 2 files changed, 102 insertions(+), 9 deletions(-) diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 22492e9f43520d..49d411d6932db7 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -450,7 +450,7 @@ const Slider = React.forwardRef(function Slider(props, ref) { axis += '-reverse'; } - const getNewValue = React.useCallback( + const getFingerNewValue = React.useCallback( ({ finger, move = false, values: values2, source }) => { const { current: slider } = sliderRef; const { width, height, bottom, left } = slider.getBoundingClientRect(); @@ -509,7 +509,7 @@ const Slider = React.forwardRef(function Slider(props, ref) { return; } - const { newValue, activeIndex } = getNewValue({ + const { newValue, activeIndex } = getFingerNewValue({ finger, move: true, values, @@ -532,7 +532,7 @@ const Slider = React.forwardRef(function Slider(props, ref) { return; } - const { newValue } = getNewValue({ finger, values, source: valueDerived }); + const { newValue } = getFingerNewValue({ finger, values, source: valueDerived }); setActive(-1); if (event.type === 'touchend') { @@ -569,7 +569,7 @@ const Slider = React.forwardRef(function Slider(props, ref) { touchId.current = touch.identifier; } const finger = trackFinger(event, touchId); - const { newValue, activeIndex } = getNewValue({ finger, values, source: valueDerived }); + const { newValue, activeIndex } = getFingerNewValue({ finger, values, source: valueDerived }); focusThumb({ sliderRef, activeIndex, setActive }); if (!isControlled) { @@ -612,7 +612,7 @@ const Slider = React.forwardRef(function Slider(props, ref) { event.preventDefault(); const finger = trackFinger(event, touchId); - const { newValue, activeIndex } = getNewValue({ finger, values, source: valueDerived }); + const { newValue, activeIndex } = getFingerNewValue({ finger, values, source: valueDerived }); focusThumb({ sliderRef, activeIndex, setActive }); if (!isControlled) { diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js index 501b3c8f4022d9..ab29e44e50361c 100644 --- a/packages/material-ui/src/Slider/Slider.test.js +++ b/packages/material-ui/src/Slider/Slider.test.js @@ -82,16 +82,25 @@ describe('', () => { container.firstChild.dispatchEvent(event); expect(handleChange.callCount).to.equal(1); expect(handleChangeCommitted.callCount).to.equal(0); + fireBodyMouseEvent('touchend', { changedTouches: touchList([{ identifier: 2 }]), }); expect(handleChange.callCount).to.equal(1); expect(handleChangeCommitted.callCount).to.equal(0); + fireBodyMouseEvent('touchmove', { changedTouches: touchList([{ identifier: 1 }]), }); expect(handleChange.callCount).to.equal(2); expect(handleChangeCommitted.callCount).to.equal(0); + + fireBodyMouseEvent('touchmove', { + changedTouches: touchList([{ identifier: 2 }]), + }); + expect(handleChange.callCount).to.equal(2); + expect(handleChangeCommitted.callCount).to.equal(0); + fireBodyMouseEvent('touchend', { changedTouches: touchList([{ identifier: 1 }]), }); @@ -136,6 +145,32 @@ describe('', () => { const { container } = render(); expect(container.firstChild).to.have.class(classes.vertical); }); + + it('should report the right position', () => { + const handleChange = spy(); + const { container } = render( + , + ); + stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({ + width: 10, + height: 100, + bottom: 100, + left: 0, + })); + + const event = fireBodyMouseEvent('touchstart', { + changedTouches: touchList([{ identifier: 1, pageX: 0, pageY: 20 }]), + }); + container.firstChild.dispatchEvent(event); + + fireBodyMouseEvent('touchmove', { + changedTouches: touchList([{ identifier: 1, pageX: 0, pageY: 22 }]), + }); + + expect(handleChange.callCount).to.equal(2); + expect(handleChange.args[0][1]).to.equal(80); + expect(handleChange.args[1][1]).to.equal(78); + }); }); describe('range', () => { @@ -154,6 +189,34 @@ describe('', () => { }); expect(thumb2.getAttribute('aria-valuenow')).to.equal('29'); }); + + it('should support mouse events', () => { + const handleChange = spy(); + const { container } = render(); + stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({ + width: 100, + height: 10, + bottom: 10, + left: 0, + })); + + const event = fireBodyMouseEvent('touchstart', { + changedTouches: touchList([{ identifier: 1, pageX: 21, pageY: 0 }]), + }); + container.firstChild.dispatchEvent(event); + + fireBodyMouseEvent('touchmove', { + changedTouches: touchList([{ identifier: 1, pageX: 22, pageY: 0 }]), + }); + fireBodyMouseEvent('touchmove', { + changedTouches: touchList([{ identifier: 1, pageX: 22, pageY: 0 }]), + }); + + expect(handleChange.callCount).to.equal(3); + expect(handleChange.args[0][1]).to.deep.equal([21, 30]); + expect(handleChange.args[1][1]).to.deep.equal([22, 30]); + expect(handleChange.args[2][1]).to.equal(handleChange.args[1][1]); + }); }); describe('prop: step', () => { @@ -173,12 +236,21 @@ describe('', () => { })); const thumb = getByRole('slider'); - const touches = { pageX: 21, pageY: 0 }; const event = fireBodyMouseEvent('touchstart', { - changedTouches: touchList([{ identifier: 1, ...touches }]), + changedTouches: touchList([{ identifier: 1, pageX: 21, pageY: 0 }]), }); container.firstChild.dispatchEvent(event); expect(thumb.getAttribute('aria-valuenow')).to.equal('20'); + + fireEvent.keyDown(thumb, { + key: 'ArrowUp', + }); + expect(thumb.getAttribute('aria-valuenow')).to.equal('30'); + + fireEvent.keyDown(thumb, { + key: 'ArrowDown', + }); + expect(thumb.getAttribute('aria-valuenow')).to.equal('20'); }); }); @@ -344,17 +416,38 @@ describe('', () => { }); it('should handle RTL', () => { - const { getByRole } = render( + const handleChange = spy(); + const { container, getByRole } = render( - + , ); const thumb = getByRole('slider'); expect(thumb.style.right).to.equal('30%'); + + stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({ + width: 100, + height: 10, + bottom: 10, + left: 0, + })); + + const event = fireBodyMouseEvent('touchstart', { + changedTouches: touchList([{ identifier: 1, pageX: 20, pageY: 0 }]), + }); + container.firstChild.dispatchEvent(event); + + fireBodyMouseEvent('touchmove', { + changedTouches: touchList([{ identifier: 1, pageX: 22, pageY: 0 }]), + }); + + expect(handleChange.callCount).to.equal(2); + expect(handleChange.args[0][1]).to.equal(80); + expect(handleChange.args[1][1]).to.equal(78); }); describe('warnings', () => {