Skip to content

Commit

Permalink
Sebastian review
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviertassinari
oliviertassinari committed Jul 1, 2019
1 parent 47fae20 commit 49113f7
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 28 deletions.
3 changes: 3 additions & 0 deletions packages/material-ui-lab/src/Slider/index.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { Slider } from '@material-ui/core';

export default Slider;
16 changes: 16 additions & 0 deletions packages/material-ui-lab/src/Slider/index.js
View file
Original file line number Diff line number Diff line change
@@ -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 <Slider ref={ref} {...props} />;
});
1 change: 1 addition & 0 deletions packages/material-ui-lab/src/index.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
68 changes: 40 additions & 28 deletions packages/material-ui/src/Slider/Slider.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,13 @@ describe('<Slider />', () => {
);

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);
Expand Down Expand Up @@ -141,9 +142,10 @@ describe('<Slider />', () => {
});

describe('prop: orientation', () => {
it('should render with the default and vertical classes', () => {
const { container } = render(<Slider orientation="vertical" value={0} />);
it('should render with the vertical classes', () => {
const { container, getByRole } = render(<Slider orientation="vertical" value={0} />);
expect(container.firstChild).to.have.class(classes.vertical);
expect(getByRole('slider').getAttribute('aria-orientation')).to.equal('vertical');
});

it('should report the right position', () => {
Expand Down Expand Up @@ -175,16 +177,18 @@ describe('<Slider />', () => {

describe('range', () => {
it('should support keyboard', () => {
const { container } = render(<Slider defaultValue={[20, 30]} />);
const thumb1 = container.querySelectorAll('[role="slider"]')[0];
const thumb2 = container.querySelectorAll('[role="slider"]')[1];
const { getAllByRole } = render(<Slider defaultValue={[20, 30]} />);
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');
Expand Down Expand Up @@ -242,12 +246,13 @@ describe('<Slider />', () => {
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');
Expand All @@ -256,37 +261,39 @@ describe('<Slider />', () => {

describe('prop: disabled', () => {
it('should render the disabled classes', () => {
const { container } = render(<Slider disabled value={0} />);
const { container, getByRole } = render(<Slider disabled value={0} />);
expect(container.firstChild).to.have.class(classes.disabled);
expect(getByRole('slider').getAttribute('tabIndex')).to.equal(null);
});
});

describe('keyboard', () => {
it('should handle all the keys', () => {
const { getByRole } = render(<Slider defaultValue={50} />);
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');
Expand All @@ -302,42 +309,45 @@ describe('<Slider />', () => {
it('should reach right edge value', () => {
const { getByRole } = render(<Slider defaultValue={90} min={6} max={108} step={10} />);
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(<Slider defaultValue={20} min={6} max={108} step={10} />);
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(<Slider defaultValue={0.2} min={0} max={1} step={0.1} />);
const thumb = getByRole('slider');
thumb.focus();

fireEvent.keyDown(thumb, moveRightEvent);
fireEvent.keyDown(document.activeElement, moveRightEvent);
expect(thumb.getAttribute('aria-valuenow')).to.equal('0.3');
});

Expand All @@ -346,8 +356,9 @@ describe('<Slider />', () => {
<Slider defaultValue={0.00000002} min={0} max={0.00000005} step={0.00000001} />,
);
const thumb = getByRole('slider');
thumb.focus();

fireEvent.keyDown(thumb, moveRightEvent);
fireEvent.keyDown(document.activeElement, moveRightEvent);
expect(thumb.getAttribute('aria-valuenow')).to.equal('3e-8');
});

Expand All @@ -356,8 +367,9 @@ describe('<Slider />', () => {
<Slider defaultValue={-0.00000002} min={-0.00000005} max={0} step={0.00000001} />,
);
const thumb = getByRole('slider');
thumb.focus();

fireEvent.keyDown(thumb, moveLeftEvent);
fireEvent.keyDown(document.activeElement, moveLeftEvent);
expect(thumb.getAttribute('aria-valuenow')).to.equal('-3e-8');
});
});
Expand Down

0 comments on commit 49113f7

Please sign in to comment.