diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js index 8b8d868434dbbd..8498815e1ff923 100644 --- a/packages/mui-material/src/Slider/Slider.test.js +++ b/packages/mui-material/src/Slider/Slider.test.js @@ -254,6 +254,50 @@ describe('', () => { expect(handleChange.args[0][1]).to.equal(80); expect(handleChange.args[1][1]).to.equal(78); }); + + describe('vertical orientation', () => { + describe('keyboard interactions', () => { + it('ArrowLeft and ArrowDown decrements the value', () => { + const { getByRole } = render(); + + const slider = getByRole('slider'); + + expect(slider).to.have.attribute('aria-valuenow', '50'); + + act(() => { + slider.focus(); + }); + + fireEvent.keyDown(slider, { key: 'ArrowLeft' }); + + expect(slider).to.have.attribute('aria-valuenow', '49'); + + fireEvent.keyDown(slider, { key: 'ArrowDown' }); + + expect(slider).to.have.attribute('aria-valuenow', '48'); + }); + + it('ArrowRight and ArrowUp increments the value', () => { + const { getByRole } = render(); + + const slider = getByRole('slider'); + + expect(slider).to.have.attribute('aria-valuenow', '50'); + + act(() => { + slider.focus(); + }); + + fireEvent.keyDown(slider, { key: 'ArrowRight' }); + + expect(slider).to.have.attribute('aria-valuenow', '51'); + + fireEvent.keyDown(slider, { key: 'ArrowUp' }); + + expect(slider).to.have.attribute('aria-valuenow', '52'); + }); + }); + }); }); describe('range', () => { @@ -421,41 +465,157 @@ describe('', () => { }); describe('prop: step', () => { - it('should handle a null step', () => { - const { getByRole, container } = render( - , - ); - stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({ - width: 100, - height: 10, - bottom: 10, - left: 0, - })); - const slider = getByRole('slider'); + describe('when step is `null`', () => { + it('values are defined by mark values', () => { + const { getByRole, container } = render( + , + ); + stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({ + width: 100, + height: 10, + bottom: 10, + left: 0, + })); + const slider = getByRole('slider'); + + fireEvent.touchStart( + container.firstChild, + createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]), + ); + expect(slider).to.have.attribute('aria-valuenow', '20'); - fireEvent.touchStart( - container.firstChild, - createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]), - ); - expect(slider).to.have.attribute('aria-valuenow', '20'); + fireEvent.change(slider, { + target: { + value: 21, + }, + }); + expect(slider).to.have.attribute('aria-valuenow', '30'); - fireEvent.change(slider, { - target: { - value: 21, - }, + fireEvent.change(slider, { + target: { + value: 29, + }, + }); + expect(slider).to.have.attribute('aria-valuenow', '20'); }); - expect(slider).to.have.attribute('aria-valuenow', '30'); - fireEvent.change(slider, { - target: { - value: 29, - }, + describe('keyboard interactions', () => { + describe('horizontal orientation', () => { + it('ArrowLeft and ArrowDown decrements the value', () => { + const { getByRole } = render( + , + ); + + const slider = getByRole('slider'); + + expect(slider).to.have.attribute('aria-valuenow', '79'); + + act(() => { + slider.focus(); + }); + + fireEvent.keyDown(slider, { key: 'ArrowLeft' }); + + expect(slider).to.have.attribute('aria-valuenow', '29'); + + fireEvent.keyDown(slider, { key: 'ArrowDown' }); + + expect(slider).to.have.attribute('aria-valuenow', '19'); + }); + + it('ArrowRight and ArrowUp increments the value', () => { + const { getByRole } = render( + , + ); + + const slider = getByRole('slider'); + + expect(slider).to.have.attribute('aria-valuenow', '9'); + + act(() => { + slider.focus(); + }); + + fireEvent.keyDown(slider, { key: 'ArrowRight' }); + + expect(slider).to.have.attribute('aria-valuenow', '19'); + + fireEvent.keyDown(slider, { key: 'ArrowUp' }); + + expect(slider).to.have.attribute('aria-valuenow', '29'); + }); + }); + + describe('vertical orientation', () => { + it('ArrowLeft and ArrowDown decrements the value', () => { + const { getByRole } = render( + , + ); + + const slider = getByRole('slider'); + + expect(slider).to.have.attribute('aria-valuenow', '79'); + + act(() => { + slider.focus(); + }); + + fireEvent.keyDown(slider, { key: 'ArrowLeft' }); + + expect(slider).to.have.attribute('aria-valuenow', '29'); + + fireEvent.keyDown(slider, { key: 'ArrowDown' }); + + expect(slider).to.have.attribute('aria-valuenow', '19'); + }); + + it('ArrowRight and ArrowUp increments the value', () => { + const { getByRole } = render( + , + ); + + const slider = getByRole('slider'); + + expect(slider).to.have.attribute('aria-valuenow', '9'); + + act(() => { + slider.focus(); + }); + + fireEvent.keyDown(slider, { key: 'ArrowRight' }); + + expect(slider).to.have.attribute('aria-valuenow', '19'); + + fireEvent.keyDown(slider, { key: 'ArrowUp' }); + + expect(slider).to.have.attribute('aria-valuenow', '29'); + }); + }); }); - expect(slider).to.have.attribute('aria-valuenow', '20'); }); it('change events with non integer numbers should work', () => { @@ -986,6 +1146,112 @@ describe('', () => { expect(handleChange.args[0][1]).to.equal(80); expect(handleChange.args[1][1]).to.equal(78); }); + + describe('keyboard interactions', () => { + it('ArrowRight and ArrowDown decrements the value', () => { + const { getByRole } = render( + + + , + ); + + const slider = getByRole('slider'); + + expect(slider).to.have.attribute('aria-valuenow', '50'); + + act(() => { + slider.focus(); + }); + + fireEvent.keyDown(slider, { key: 'ArrowRight' }); + + expect(slider).to.have.attribute('aria-valuenow', '49'); + + fireEvent.keyDown(slider, { key: 'ArrowDown' }); + + expect(slider).to.have.attribute('aria-valuenow', '48'); + }); + + it('ArrowLeft and ArrowUp increments the value', () => { + const { getByRole } = render( + + + , + ); + + const slider = getByRole('slider'); + + expect(slider).to.have.attribute('aria-valuenow', '50'); + + act(() => { + slider.focus(); + }); + + fireEvent.keyDown(slider, { key: 'ArrowLeft' }); + + expect(slider).to.have.attribute('aria-valuenow', '51'); + + fireEvent.keyDown(slider, { key: 'ArrowUp' }); + + expect(slider).to.have.attribute('aria-valuenow', '52'); + }); + + it('End key sets the value to max', () => { + const { getByRole } = render( + + + , + ); + + const slider = getByRole('slider'); + + expect(slider).to.have.attribute('aria-valuenow', '50'); + + act(() => { + slider.focus(); + }); + + fireEvent.keyDown(slider, { key: 'End' }); + + expect(slider).to.have.attribute('aria-valuenow', '99'); + }); + + it('Home key sets the value to min', () => { + const { getByRole } = render( + + + , + ); + + const slider = getByRole('slider'); + + expect(slider).to.have.attribute('aria-valuenow', '50'); + + act(() => { + slider.focus(); + }); + + fireEvent.keyDown(slider, { key: 'Home' }); + + expect(slider).to.have.attribute('aria-valuenow', '1'); + }); + }); }); describe('warnings', () => {