From 1475b07793d05c933a7fcbebe7b6da72f0388e23 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Tue, 1 Mar 2022 20:35:56 -0800 Subject: [PATCH 1/6] convert Slider to testing-library --- .../src/components/Slider/Slider.test.tsx | 306 ++++++++---------- 1 file changed, 142 insertions(+), 164 deletions(-) diff --git a/packages/react/src/components/Slider/Slider.test.tsx b/packages/react/src/components/Slider/Slider.test.tsx index 6db2d567794e88..e5177d8791ca1d 100644 --- a/packages/react/src/components/Slider/Slider.test.tsx +++ b/packages/react/src/components/Slider/Slider.test.tsx @@ -1,9 +1,6 @@ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import * as ReactTestUtils from 'react-dom/test-utils'; -import { mount, ReactWrapper } from 'enzyme'; -import { resetIds, KeyCodes } from '@fluentui/utilities'; -import { create } from '@fluentui/utilities/lib/test'; +import { resetIds, KeyCodes } from '../../Utilities'; +import { fireEvent, render, screen } from '@testing-library/react'; import { Slider } from './Slider'; import { isConformant } from '../../common/isConformant'; import type { ISlider } from './Slider.types'; @@ -12,17 +9,11 @@ const MIN_PREFIX = 'min'; const MAX_PREFIX = 'max'; describe('Slider', () => { - let wrapper: ReactWrapper | undefined; - beforeEach(() => { resetIds(); }); afterEach(() => { - if (wrapper) { - wrapper.unmount(); - wrapper = undefined; - } if ((setTimeout as any).mock) { jest.useRealTimers(); } @@ -34,71 +25,67 @@ describe('Slider', () => { }); it('renders correctly', () => { - const component = create(); - const tree = component.toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render(); + expect(container).toMatchSnapshot(); }); it('renders range slider correctly', () => { - const component = create(); - const tree = component.toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render(); + expect(container).toMatchSnapshot(); }); it('can set aria-labelledby attribute', () => { - wrapper = mount(); - const sliderSlideBox = wrapper.find('.ms-Slider-slideBox'); - expect(sliderSlideBox.getDOMNode().getAttribute('aria-labelledby')).toEqual('custom-label'); + render(); + // expect(sliderSlideBox.getDOMNode().getAttribute('aria-labelledby')).toEqual('custom-label'); + expect(screen.getByRole('slider').getAttribute('aria-labelledby')).toBe('custom-label'); }); it('can provide the current value', () => { const slider = React.createRef(); - wrapper = mount(); + render(); expect(slider.current?.value).toEqual(12); }); it('can provide the current range', () => { const slider = React.createRef(); - wrapper = mount(); + render(); expect(slider.current?.range).toEqual([0, 12]); }); it('can set id', () => { - wrapper = mount(); + const { container } = render(); - const sliderSlideBox = wrapper.find('.ms-Slider-slideBox'); - expect(sliderSlideBox.getDOMNode().id).toEqual('test_id'); + expect(screen.getByRole('slider').id).toEqual('test_id'); // properly associates label with custom id - const label = wrapper.find('label.test_label'); - expect(label.prop('htmlFor')).toBe('test_id'); + const label = container.getElementsByClassName('test_label')[0]; + expect(label.getAttribute('for')).toBe('test_id'); }); it('can set id via buttonProps', () => { // Not the recommended way of doing things, but it should work consistently still - wrapper = mount(); + const { container } = render(); - const sliderSlideBox = wrapper.find('.ms-Slider-slideBox'); - expect(sliderSlideBox.getDOMNode().id).toEqual('test_id'); + expect(screen.getByRole('slider').id).toEqual('test_id'); // properly associates label with custom id - const label = wrapper.find('label.test_label'); - expect(label.prop('htmlFor')).toBe('test_id'); + const label = container.getElementsByClassName('test_label')[0]; + expect(label.getAttribute('for')).toBe('test_id'); }); it('handles zero default value', () => { const slider = React.createRef(); - wrapper = mount(); + render(); expect(slider.current!.value).toEqual(0); }); it('handles zero value', () => { const slider = React.createRef(); - wrapper = mount(); + render(); expect(slider.current!.value).toEqual(0); }); @@ -106,15 +93,17 @@ describe('Slider', () => { const onChange = jest.fn(); const onChanged = jest.fn(); const slider = React.createRef(); - wrapper = mount(); + const { container, getByRole } = render( + , + ); - const sliderLine = wrapper.find('.ms-Slider-line'); - const sliderThumb = wrapper.find('.ms-Slider-slideBox'); + const sliderLine = container.getElementsByClassName('ms-Slider-line')[0]; + const sliderThumb = getByRole('slider'); - sliderLine.getDOMNode().getBoundingClientRect = () => + sliderLine.getBoundingClientRect = () => ({ left: 0, top: 0, right: 100, bottom: 40, width: 100, height: 40 } as DOMRect); - sliderThumb.simulate('mousedown', { type: 'mousedown', clientX: 0, clientY: 0 }); + fireEvent.mouseDown(sliderThumb, { clientX: 0, clientY: 0 }); // Default min is 0. expect(onChange).toHaveBeenCalledTimes(1); expect(onChange.mock.calls[0][0]).toEqual(0); @@ -122,7 +111,7 @@ describe('Slider', () => { expect(slider.current!.value).toBe(0); // have to use a real event to trigger onChanged - window.dispatchEvent(new Event('mouseup')); + fireEvent.mouseUp(sliderThumb); expect(onChange).toHaveBeenCalledTimes(1); // not called again expect(onChanged).toHaveBeenCalledTimes(1); expect(onChanged.mock.calls[0][1]).toEqual(0); @@ -132,22 +121,24 @@ describe('Slider', () => { const onChange = jest.fn(); const onChanged = jest.fn(); const slider = React.createRef(); - wrapper = mount(); + const { container } = render( + , + ); - const sliderLine = wrapper.find('.ms-Slider-line'); - const sliderThumb = wrapper.find('.ms-Slider-slideBox'); + const sliderLine = container.getElementsByClassName('ms-Slider-line')[0]; + const sliderThumb = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderLine.getDOMNode().getBoundingClientRect = () => + sliderLine.getBoundingClientRect = () => ({ left: 0, top: 0, right: 100, bottom: 40, width: 100, height: 40 } as DOMRect); - sliderThumb.simulate('mousedown', { type: 'mousedown', clientX: 0, clientY: 0 }); + fireEvent.mouseDown(sliderThumb, { clientX: 0, clientY: 0 }); // Default min is 0. expect(onChange).toHaveBeenCalledTimes(1); expect(onChange.mock.calls[0][1]).toEqual([0, 5]); expect(onChanged).toHaveBeenCalledTimes(0); expect(slider.current!.range).toEqual([0, 5]); - window.dispatchEvent(new Event('mouseup')); + fireEvent.mouseUp(sliderThumb); expect(onChange).toHaveBeenCalledTimes(1); expect(onChanged).toHaveBeenCalledTimes(1); expect(onChanged.mock.calls[0][2]).toEqual([0, 5]); @@ -156,40 +147,39 @@ describe('Slider', () => { it('does not call onChange or onChanged with range when ranged is false', () => { const onChange = jest.fn(); const onChanged = jest.fn(); - wrapper = mount(); + const { container } = render(); - const sliderLine = wrapper.find('.ms-Slider-line'); - const sliderThumb = wrapper.find('.ms-Slider-slideBox'); + const sliderLine = container.getElementsByClassName('ms-Slider-line')[0]; + const sliderThumb = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderLine.getDOMNode().getBoundingClientRect = () => + sliderLine.getBoundingClientRect = () => ({ left: 0, top: 0, right: 100, bottom: 40, width: 100, height: 40 } as DOMRect); - sliderThumb.simulate('mousedown', { type: 'mousedown', clientX: 0, clientY: 0 }); - + fireEvent.mouseDown(sliderThumb, { clientX: 0, clientY: 0 }); expect(onChange.mock.calls[0][1]).toBeUndefined(); - window.dispatchEvent(new Event('mouseup')); + fireEvent.mouseUp(sliderThumb); expect(onChanged.mock.calls[0][2]).toBeUndefined(); }); it('can slide to default min/max and execute onChange', () => { const onChange = jest.fn(); - wrapper = mount(); + const { container } = render(); - const sliderLine = wrapper.find('.ms-Slider-line'); - const sliderThumb = wrapper.find('.ms-Slider-slideBox'); + const sliderLine = container.getElementsByClassName('ms-Slider-line')[0]; + const sliderThumb = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderLine.getDOMNode().getBoundingClientRect = () => + sliderLine.getBoundingClientRect = () => ({ left: 0, top: 0, right: 100, bottom: 40, width: 100, height: 40 } as DOMRect); - sliderThumb.simulate('mousedown', { type: 'mousedown', clientX: 100, clientY: 0 }); + fireEvent.mouseDown(sliderThumb, { clientX: 100, clientY: 0 }); // Default max is 10. expect(onChange).toHaveBeenCalledTimes(1); expect(onChange.mock.calls[0][0]).toEqual(10); - sliderThumb.simulate('mousedown', { type: 'mousedown', clientX: 0, clientY: 0 }); + fireEvent.mouseDown(sliderThumb, { clientX: 0, clientY: 0 }); // Default min is 0. expect(onChange).toHaveBeenCalledTimes(2); @@ -199,15 +189,15 @@ describe('Slider', () => { it('updates the upper value thumb when click to the right side of it', () => { const onChange = jest.fn(); - wrapper = mount(); + const { container } = render(); - const sliderLine = wrapper.find('.ms-Slider-line'); - const sliderThumb = wrapper.find('.ms-Slider-slideBox'); + const sliderLine = container.getElementsByClassName('ms-Slider-line')[0]; + const sliderThumb = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderLine.getDOMNode().getBoundingClientRect = () => + sliderLine.getBoundingClientRect = () => ({ left: 0, top: 0, right: 100, bottom: 40, width: 100, height: 40 } as DOMRect); - sliderThumb.simulate('mousedown', { type: 'mousedown', clientX: 80, clientY: 0 }); + fireEvent.mouseDown(sliderThumb, { clientX: 80, clientY: 0 }); expect(onChange).toHaveBeenCalledTimes(1); expect(onChange.mock.calls[0][1]).toEqual([0, 8]); @@ -216,15 +206,15 @@ describe('Slider', () => { it('updates the upper value thumb when click close to it', () => { const onChange = jest.fn(); - wrapper = mount(); + const { container } = render(); - const sliderLine = wrapper.find('.ms-Slider-line'); - const sliderThumb = wrapper.find('.ms-Slider-slideBox'); + const sliderLine = container.getElementsByClassName('ms-Slider-line')[0]; + const sliderThumb = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderLine.getDOMNode().getBoundingClientRect = () => + sliderLine.getBoundingClientRect = () => ({ left: 0, top: 0, right: 100, bottom: 40, width: 100, height: 40 } as DOMRect); - sliderThumb.simulate('mousedown', { type: 'mousedown', clientX: 40, clientY: 0 }); + fireEvent.mouseDown(sliderThumb, { clientX: 40, clientY: 0 }); expect(onChange).toHaveBeenCalledTimes(1); expect(onChange.mock.calls[0][1]).toEqual([0, 4]); @@ -234,21 +224,21 @@ describe('Slider', () => { const onChange = jest.fn(); const onChanged = jest.fn(); - wrapper = mount(); + const { container } = render(); - const sliderLine = wrapper.find('.ms-Slider-line'); - const sliderThumb = wrapper.find('.ms-Slider-slideBox'); + const sliderLine = container.getElementsByClassName('ms-Slider-line')[0]; + const sliderThumb = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderLine.getDOMNode().getBoundingClientRect = () => + sliderLine.getBoundingClientRect = () => ({ left: 0, top: 0, right: 100, bottom: 40, width: 100, height: 40 } as DOMRect); - sliderThumb.simulate('mousedown', { type: 'mousedown', clientX: 10, clientY: 0 }); + fireEvent.mouseDown(sliderThumb, { clientX: 10, clientY: 0 }); expect(onChange).toHaveBeenCalledTimes(1); expect(onChange.mock.calls[0][1]).toEqual([1, 5]); // test onChanged here too, since the earlier tests don't cover the lower thumb - window.dispatchEvent(new Event('mouseup')); + fireEvent.mouseUp(sliderThumb); expect(onChanged).toHaveBeenCalledTimes(1); expect(onChanged.mock.calls[0][2]).toEqual([1, 5]); }); @@ -259,84 +249,74 @@ describe('Slider', () => { range = sliderRange; }; - wrapper = mount(); + const { container } = render(); - const sliderLine = wrapper.find('.ms-Slider-line'); - const sliderThumb = wrapper.find('.ms-Slider-slideBox'); + const sliderLine = container.getElementsByClassName('ms-Slider-line')[0]; + const sliderThumb = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderLine.getDOMNode().getBoundingClientRect = () => + sliderLine.getBoundingClientRect = () => ({ left: 0, top: 0, right: 100, bottom: 40, width: 100, height: 40 } as DOMRect); - sliderThumb.simulate('mousedown', { type: 'mousedown', clientX: 10, clientY: 0 }); - - sliderThumb.simulate('mousedown', { type: 'mousedown', clientX: 20, clientY: 0 }); + fireEvent.mouseDown(sliderThumb, { clientX: 10, clientY: 0 }); + fireEvent.mouseDown(sliderThumb, { clientX: 20, clientY: 0 }); expect(range).toEqual([2, 5]); }); - it('has type=button on all buttons', () => { - wrapper = mount(); - - wrapper.find('button').forEach(button => { - expect(button.prop('type')).toEqual('button'); - }); - }); - it('renders correct aria-valuetext', () => { - wrapper = mount(); + const { getByRole, rerender } = render(); - expect(wrapper.find('.ms-Slider-slideBox').prop('aria-valuetext')).toEqual('0'); + expect(getByRole('slider').getAttribute('aria-valuetext')).toEqual('0'); const values = ['small', 'medium', 'large']; const selected = 1; const getTextValue = (value: number) => values[value]; - wrapper.unmount(); - wrapper = mount(); + rerender(); - expect(wrapper.find('.ms-Slider-slideBox').prop('aria-valuetext')).toEqual(values[selected]); + expect(getByRole('slider').getAttribute('aria-valuetext')).toEqual(values[selected]); }); it('renders correct aria properties for range slider', () => { - wrapper = mount(); + const { getAllByRole } = render(); - const lowerValueThumb = wrapper.find('.ms-Slider-thumb').at(0); + const lowerValueThumb = getAllByRole('slider')[0]; - expect(lowerValueThumb.prop('aria-valuemax')).toEqual(5); - expect(lowerValueThumb.prop('aria-valuemin')).toEqual(0); - expect(lowerValueThumb.prop('aria-valuenow')).toEqual(0); - expect(lowerValueThumb.prop('aria-label')).toEqual(`${MIN_PREFIX} range`); + expect(lowerValueThumb.getAttribute('aria-valuemax')).toEqual('5'); + expect(lowerValueThumb.getAttribute('aria-valuemin')).toEqual('0'); + expect(lowerValueThumb.getAttribute('aria-valuenow')).toEqual('0'); + expect(lowerValueThumb.getAttribute('aria-label')).toEqual(`${MIN_PREFIX} range`); - const upperValueThumb = wrapper.find('.ms-Slider-thumb').at(1); + const upperValueThumb = getAllByRole('slider')[1]; - expect(upperValueThumb.prop('aria-valuemax')).toEqual(10); - expect(upperValueThumb.prop('aria-valuemin')).toEqual(0); - expect(upperValueThumb.prop('aria-valuenow')).toEqual(5); - expect(upperValueThumb.prop('aria-label')).toEqual(`${MAX_PREFIX} range`); + expect(upperValueThumb.getAttribute('aria-valuemax')).toEqual('10'); + expect(upperValueThumb.getAttribute('aria-valuemin')).toEqual('0'); + expect(upperValueThumb.getAttribute('aria-valuenow')).toEqual('5'); + expect(upperValueThumb.getAttribute('aria-label')).toEqual(`${MAX_PREFIX} range`); }); it('formats the value when a format function is passed', () => { const value = 10; const valueFormat = (val: number) => `${val}%`; - wrapper = mount(); + const { container } = render(); - expect(wrapper.find('label.ms-Label.ms-Slider-value').text()).toEqual(valueFormat(value)); + expect(container.getElementsByClassName('ms-Slider-value')[0].textContent).toEqual(valueFormat(value)); }); it('updates value correctly when down and up are pressed', () => { const slider = React.createRef(); const onChange = jest.fn(); - wrapper = mount( + const { container } = render( , ); - const sliderSlideBox = wrapper.find('.ms-Slider-slideBox'); + const sliderSlideBox = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderSlideBox.simulate('keydown', { which: KeyCodes.down }); - sliderSlideBox.simulate('keydown', { which: KeyCodes.down }); - sliderSlideBox.simulate('keydown', { which: KeyCodes.down }); - sliderSlideBox.simulate('keydown', { which: KeyCodes.up }); - sliderSlideBox.simulate('keydown', { which: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.up }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); expect(slider.current?.value).toEqual(9); @@ -347,16 +327,16 @@ describe('Slider', () => { const slider = React.createRef(); const onChange = jest.fn(); - wrapper = mount( + const { getAllByRole } = render( , ); - const lowerValueThumb = wrapper.find('.ms-Slider-thumb').at(0); + const lowerValueThumb = getAllByRole('slider')[0]; - lowerValueThumb.simulate('keydown', { which: KeyCodes.down }); - lowerValueThumb.simulate('keydown', { which: KeyCodes.down }); - lowerValueThumb.simulate('keydown', { which: KeyCodes.down }); - lowerValueThumb.simulate('keydown', { which: KeyCodes.up }); - lowerValueThumb.simulate('keydown', { which: KeyCodes.down }); + fireEvent.keyDown(lowerValueThumb, { keyCode: KeyCodes.down }); + fireEvent.keyDown(lowerValueThumb, { keyCode: KeyCodes.down }); + fireEvent.keyDown(lowerValueThumb, { keyCode: KeyCodes.down }); + fireEvent.keyDown(lowerValueThumb, { keyCode: KeyCodes.up }); + fireEvent.keyDown(lowerValueThumb, { keyCode: KeyCodes.down }); expect(slider.current?.value).toEqual(17); @@ -367,17 +347,14 @@ describe('Slider', () => { jest.useFakeTimers(); const onChanged = jest.fn(); - const container = document.createElement('div'); - document.body.appendChild(container); + const { container } = render(); + const sliderSlideBox = container.getElementsByClassName('ms-Slider-slideBox')[0]; - ReactDOM.render(, container); - const sliderSlideBox = container.querySelector('.ms-Slider-slideBox') as HTMLElement; - - ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.down }); - ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.down }); - ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.down }); - ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.up }); - ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.up }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); expect(sliderSlideBox.getAttribute('aria-valuenow')).toEqual('9'); @@ -391,17 +368,14 @@ describe('Slider', () => { jest.useFakeTimers(); const onChanged = jest.fn(); - const container = document.createElement('div'); - document.body.appendChild(container); - - ReactDOM.render(, container); - const sliderSlideBox = container.querySelector('.ms-Slider-slideBox') as HTMLElement; + const { container } = render(); + const sliderSlideBox = container.getElementsByClassName('ms-Slider-slideBox')[0]; - ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.down }); - ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.down }); - ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.down }); - ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.up }); - ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.up }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); // onChanged should only be called after a delay expect(onChanged).toHaveBeenCalledTimes(0); @@ -414,10 +388,12 @@ describe('Slider', () => { const slider = React.createRef(); const onChange = jest.fn(); - wrapper = mount(); - const sliderSlideBox = wrapper.find('.ms-Slider-slideBox'); + const { container } = render( + , + ); + const sliderSlideBox = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderSlideBox.simulate('keydown', { which: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); expect(slider.current?.value).toEqual(3); @@ -428,10 +404,12 @@ describe('Slider', () => { const slider = React.createRef(); const onChange = jest.fn(); - wrapper = mount(); - const sliderSlideBox = wrapper.find('.ms-Slider-slideBox'); + const { container } = render( + , + ); + const sliderSlideBox = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderSlideBox.simulate('keydown', { which: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); expect(slider.current?.value).toEqual(3); @@ -443,12 +421,12 @@ describe('Slider', () => { const slider = React.createRef(); const onChange = jest.fn(); - wrapper = mount( + const { container } = render( , ); - const sliderSlideBox = wrapper.find('.ms-Slider-slideBox'); + const sliderSlideBox = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderSlideBox.simulate('keydown', { which: KeyCodes.down }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down }); expect(slider.current?.range).toEqual([0, 3]); @@ -460,12 +438,14 @@ describe('Slider', () => { const slider = React.createRef(); const onChange = jest.fn(); - wrapper = mount(); - const sliderSlideBox = wrapper.find('.ms-Slider-slideBox'); + const { container } = render( + , + ); + const sliderSlideBox = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderSlideBox.simulate('keydown', { which: KeyCodes.up }); - sliderSlideBox.simulate('keydown', { which: KeyCodes.up }); - sliderSlideBox.simulate('keydown', { which: KeyCodes.up }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.up }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.up }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.up }); expect(slider.current?.value).toEqual(3); @@ -477,23 +457,22 @@ describe('Slider', () => { const slider = React.createRef(); const onChange = jest.fn(); - wrapper = mount( + const { container } = render( , ); - const sliderSlideBox = wrapper.find('.ms-Slider-slideBox'); + const sliderSlideBox = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderSlideBox.simulate('keydown', { which: KeyCodes.up }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.up }); expect(slider.current?.value).toEqual(7); }); it('correctly changes value with decimal steps', () => { - const container = document.createElement('div'); const slider = React.createRef(); const onChange = jest.fn(); const step = 0.0000001; const defaultValue = 10; - wrapper = mount( + const { container } = render( { onChange={onChange} />, ); - const sliderSlideBox = wrapper.find('.ms-Slider-slideBox'); + const sliderSlideBox = container.getElementsByClassName('ms-Slider-slideBox')[0]; - sliderSlideBox.simulate('keydown', { which: KeyCodes.up }); + fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.up }); expect(slider.current?.value).toEqual(defaultValue + step); - ReactDOM.unmountComponentAtNode(container); }); }); From 18b2bed0ced40c887f1a292e05a037a1458aeb78 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Tue, 1 Mar 2022 20:36:10 -0800 Subject: [PATCH 2/6] update Slider snapshots --- .../Slider/__snapshots__/Slider.test.tsx.snap | 1124 ++++++++--------- 1 file changed, 542 insertions(+), 582 deletions(-) diff --git a/packages/react/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/packages/react/src/components/Slider/__snapshots__/Slider.test.tsx.snap index 9518ddf35f6579..1747cf9228bc9a 100644 --- a/packages/react/src/components/Slider/__snapshots__/Slider.test.tsx.snap +++ b/packages/react/src/components/Slider/__snapshots__/Slider.test.tsx.snap @@ -1,350 +1,296 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Slider renders correctly 1`] = ` -
-