From 49113f7cbca016304f710ca52ddf6d2b17b91c74 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 1 Jul 2019 21:28:15 +0200 Subject: [PATCH] Sebastian review --- .../material-ui-lab/src/Slider/index.d.ts | 3 + packages/material-ui-lab/src/Slider/index.js | 16 +++++ packages/material-ui-lab/src/index.js | 1 + .../material-ui/src/Slider/Slider.test.js | 68 +++++++++++-------- 4 files changed, 60 insertions(+), 28 deletions(-) create mode 100644 packages/material-ui-lab/src/Slider/index.d.ts create mode 100644 packages/material-ui-lab/src/Slider/index.js diff --git a/packages/material-ui-lab/src/Slider/index.d.ts b/packages/material-ui-lab/src/Slider/index.d.ts new file mode 100644 index 00000000000000..9e13d71f7708a4 --- /dev/null +++ b/packages/material-ui-lab/src/Slider/index.d.ts @@ -0,0 +1,3 @@ +import { Slider } from '@material-ui/core'; + +export default Slider; diff --git a/packages/material-ui-lab/src/Slider/index.js b/packages/material-ui-lab/src/Slider/index.js new file mode 100644 index 00000000000000..6bd4faa20ed154 --- /dev/null +++ b/packages/material-ui-lab/src/Slider/index.js @@ -0,0 +1,16 @@ +import React from 'react'; +import warning from 'warning'; +import Slider from '@material-ui/core/Slider'; + +export default React.forwardRef(function DeprecatedSlider(props, ref) { + warning( + false, + [ + 'Material-UI: the Slider component was moved from the lab to the core.', + "You should use `import { Slider } from '@material-ui/core'`", + "or `import Slider from '@material-ui/core/Slider'`", + ].join('\n'), + ); + + return ; +}); diff --git a/packages/material-ui-lab/src/index.js b/packages/material-ui-lab/src/index.js index 31fe668c93d257..2e6be5847f9d2f 100644 --- a/packages/material-ui-lab/src/index.js +++ b/packages/material-ui-lab/src/index.js @@ -1,3 +1,4 @@ +export { default as Slider } from './Slider'; export { default as SpeedDial } from './SpeedDial'; export { default as SpeedDialAction } from './SpeedDialAction'; export { default as SpeedDialIcon } from './SpeedDialIcon'; diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js index ab29e44e50361c..dac213d549c321 100644 --- a/packages/material-ui/src/Slider/Slider.test.js +++ b/packages/material-ui/src/Slider/Slider.test.js @@ -57,12 +57,13 @@ describe('', () => { ); fireEvent.mouseDown(container.firstChild); - document.body.dispatchEvent(new window.MouseEvent('mouseup')); + fireEvent.mouseUp(document.body); expect(handleChange.callCount).to.equal(1); expect(handleChangeCommitted.callCount).to.equal(1); - fireEvent.keyDown(getByRole('slider'), { + getByRole('slider').focus(); + fireEvent.keyDown(document.activeElement, { key: 'Home', }); expect(handleChange.callCount).to.equal(2); @@ -141,9 +142,10 @@ describe('', () => { }); describe('prop: orientation', () => { - it('should render with the default and vertical classes', () => { - const { container } = render(); + it('should render with the vertical classes', () => { + const { container, getByRole } = render(); expect(container.firstChild).to.have.class(classes.vertical); + expect(getByRole('slider').getAttribute('aria-orientation')).to.equal('vertical'); }); it('should report the right position', () => { @@ -175,16 +177,18 @@ describe('', () => { describe('range', () => { it('should support keyboard', () => { - const { container } = render(); - const thumb1 = container.querySelectorAll('[role="slider"]')[0]; - const thumb2 = container.querySelectorAll('[role="slider"]')[1]; + const { getAllByRole } = render(); + const thumb1 = getAllByRole('slider')[0]; + const thumb2 = getAllByRole('slider')[1]; - fireEvent.keyDown(thumb1, { + thumb1.focus(); + fireEvent.keyDown(document.activeElement, { key: 'ArrowRight', }); expect(thumb1.getAttribute('aria-valuenow')).to.equal('21'); - fireEvent.keyDown(thumb2, { + thumb2.focus(); + fireEvent.keyDown(document.activeElement, { key: 'ArrowLeft', }); expect(thumb2.getAttribute('aria-valuenow')).to.equal('29'); @@ -242,12 +246,13 @@ describe('', () => { container.firstChild.dispatchEvent(event); expect(thumb.getAttribute('aria-valuenow')).to.equal('20'); - fireEvent.keyDown(thumb, { + thumb.focus(); + fireEvent.keyDown(document.activeElement, { key: 'ArrowUp', }); expect(thumb.getAttribute('aria-valuenow')).to.equal('30'); - fireEvent.keyDown(thumb, { + fireEvent.keyDown(document.activeElement, { key: 'ArrowDown', }); expect(thumb.getAttribute('aria-valuenow')).to.equal('20'); @@ -256,8 +261,9 @@ describe('', () => { describe('prop: disabled', () => { it('should render the disabled classes', () => { - const { container } = render(); + const { container, getByRole } = render(); expect(container.firstChild).to.have.class(classes.disabled); + expect(getByRole('slider').getAttribute('tabIndex')).to.equal(null); }); }); @@ -265,28 +271,29 @@ describe('', () => { it('should handle all the keys', () => { const { getByRole } = render(); const thumb = getByRole('slider'); + thumb.focus(); - fireEvent.keyDown(thumb, { + fireEvent.keyDown(document.activeElement, { key: 'Home', }); expect(thumb.getAttribute('aria-valuenow')).to.equal('0'); - fireEvent.keyDown(thumb, { + fireEvent.keyDown(document.activeElement, { key: 'End', }); expect(thumb.getAttribute('aria-valuenow')).to.equal('100'); - fireEvent.keyDown(thumb, { + fireEvent.keyDown(document.activeElement, { key: 'PageDown', }); expect(thumb.getAttribute('aria-valuenow')).to.equal('90'); - fireEvent.keyDown(thumb, { + fireEvent.keyDown(document.activeElement, { key: 'Escape', }); expect(thumb.getAttribute('aria-valuenow')).to.equal('90'); - fireEvent.keyDown(thumb, { + fireEvent.keyDown(document.activeElement, { key: 'PageUp', }); expect(thumb.getAttribute('aria-valuenow')).to.equal('100'); @@ -302,42 +309,45 @@ describe('', () => { it('should reach right edge value', () => { const { getByRole } = render(); const thumb = getByRole('slider'); + thumb.focus(); - fireEvent.keyDown(thumb, moveRightEvent); + fireEvent.keyDown(document.activeElement, moveRightEvent); expect(thumb.getAttribute('aria-valuenow')).to.equal('100'); - fireEvent.keyDown(thumb, moveRightEvent); + fireEvent.keyDown(document.activeElement, moveRightEvent); expect(thumb.getAttribute('aria-valuenow')).to.equal('108'); - fireEvent.keyDown(thumb, moveLeftEvent); + fireEvent.keyDown(document.activeElement, moveLeftEvent); expect(thumb.getAttribute('aria-valuenow')).to.equal('100'); - fireEvent.keyDown(thumb, moveLeftEvent); + fireEvent.keyDown(document.activeElement, moveLeftEvent); expect(thumb.getAttribute('aria-valuenow')).to.equal('90'); }); it('should reach left edge value', () => { const { getByRole } = render(); const thumb = getByRole('slider'); + thumb.focus(); - fireEvent.keyDown(thumb, moveLeftEvent); + fireEvent.keyDown(document.activeElement, moveLeftEvent); expect(thumb.getAttribute('aria-valuenow')).to.equal('10'); - fireEvent.keyDown(thumb, moveLeftEvent); + fireEvent.keyDown(document.activeElement, moveLeftEvent); expect(thumb.getAttribute('aria-valuenow')).to.equal('6'); - fireEvent.keyDown(thumb, moveRightEvent); + fireEvent.keyDown(document.activeElement, moveRightEvent); expect(thumb.getAttribute('aria-valuenow')).to.equal('20'); - fireEvent.keyDown(thumb, moveRightEvent); + fireEvent.keyDown(document.activeElement, moveRightEvent); expect(thumb.getAttribute('aria-valuenow')).to.equal('30'); }); it('should round value to step precision', () => { const { getByRole } = render(); const thumb = getByRole('slider'); + thumb.focus(); - fireEvent.keyDown(thumb, moveRightEvent); + fireEvent.keyDown(document.activeElement, moveRightEvent); expect(thumb.getAttribute('aria-valuenow')).to.equal('0.3'); }); @@ -346,8 +356,9 @@ describe('', () => { , ); const thumb = getByRole('slider'); + thumb.focus(); - fireEvent.keyDown(thumb, moveRightEvent); + fireEvent.keyDown(document.activeElement, moveRightEvent); expect(thumb.getAttribute('aria-valuenow')).to.equal('3e-8'); }); @@ -356,8 +367,9 @@ describe('', () => { , ); const thumb = getByRole('slider'); + thumb.focus(); - fireEvent.keyDown(thumb, moveLeftEvent); + fireEvent.keyDown(document.activeElement, moveLeftEvent); expect(thumb.getAttribute('aria-valuenow')).to.equal('-3e-8'); }); });