Skip to content

Commit

Permalink
increase test coverage
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviertassinari
oliviertassinari committed Jun 30, 2019
1 parent c44ab17 commit 4171aad
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 9 deletions.
10 changes: 5 additions & 5 deletions packages/material-ui/src/Slider/Slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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,
Expand All @@ -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') {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down
105 changes: 101 additions & 4 deletions packages/material-ui/src/Slider/Slider.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,16 +82,25 @@ describe('<Slider />', () => {
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 }]),
});
Expand Down Expand Up @@ -136,6 +145,33 @@ describe('<Slider />', () => {
const { container } = render(<Slider orientation="vertical" value={0} />);
expect(container.firstChild).to.have.class(classes.vertical);
});

it('should report the right position', () => {
const handleChange = spy();
const { container } = render(
<Slider orientation="vertical" defaultValue={20} onChange={handleChange} />,
);
stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
width: 10,
height: 100,
bottom: 100,
left: 0,
}));

const event = fireBodyMouseEvent('mousedown', {
pageX: 0,
pageY: 20,
});
container.firstChild.dispatchEvent(event);
fireBodyMouseEvent('mousemove', {
pageX: 0,
pageY: 22,
});
document.body.dispatchEvent(new window.MouseEvent('mouseup'));
expect(handleChange.callCount).to.equal(2);
expect(handleChange.args[0][1]).to.equal(80);
expect(handleChange.args[1][1]).to.equal(78);
});
});

describe('range', () => {
Expand All @@ -154,6 +190,36 @@ describe('<Slider />', () => {
});
expect(thumb2.getAttribute('aria-valuenow')).to.equal('29');
});

it('should support mouse events', () => {
const handleChange = spy();
const { container } = render(<Slider defaultValue={[20, 30]} onChange={handleChange} />);
stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
width: 100,
height: 10,
bottom: 10,
left: 0,
}));

const event = fireBodyMouseEvent('mousedown', {
pageX: 21,
pageY: 0,
});
container.firstChild.dispatchEvent(event);
fireBodyMouseEvent('mousemove', {
pageX: 22,
pageY: 0,
});
fireBodyMouseEvent('mousemove', {
pageX: 22,
pageY: 0,
});
document.body.dispatchEvent(new window.MouseEvent('mouseup'));
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', () => {
Expand All @@ -173,12 +239,21 @@ describe('<Slider />', () => {
}));
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');
});
});

Expand Down Expand Up @@ -344,17 +419,39 @@ describe('<Slider />', () => {
});

it('should handle RTL', () => {
const { getByRole } = render(
const handleChange = spy();
const { container, getByRole } = render(
<MuiThemeProvider
theme={createMuiTheme({
direction: 'rtl',
})}
>
<Slider value={30} />
<Slider value={30} onChange={handleChange} />
</MuiThemeProvider>,
);
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('mousedown', {
pageX: 20,
pageY: 0,
});
container.firstChild.dispatchEvent(event);
fireBodyMouseEvent('mousemove', {
pageX: 22,
pageY: 0,
});
document.body.dispatchEvent(new window.MouseEvent('mouseup'));
expect(handleChange.callCount).to.equal(2);
expect(handleChange.args[0][1]).to.equal(80);
expect(handleChange.args[1][1]).to.equal(78);
});

describe('warnings', () => {
Expand Down

0 comments on commit 4171aad

Please sign in to comment.