diff --git a/src/components/DateNavigator/DateNavigator.spec.tsx b/src/components/DateNavigator/DateNavigator.spec.tsx index 8cd2494ef27ec449db23f6afc6184dce346eb196..4f26b7be1a47c5e48378b25712069ade3571ef97 100644 --- a/src/components/DateNavigator/DateNavigator.spec.tsx +++ b/src/components/DateNavigator/DateNavigator.spec.tsx @@ -1,10 +1,8 @@ -import { IconButton } from '@material-ui/core' +import { render, screen } from '@testing-library/react' +import { userEvent } from '@testing-library/user-event' import { TimeStep } from 'enums' -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import { DateTime } from 'luxon' import React from 'react' -import { waitForComponentToPaint } from 'tests/__mocks__/testUtils' import DateNavigator from './DateNavigator' jest.mock( @@ -17,90 +15,56 @@ const mockedDate = DateTime.local(2021, 7, 1) keepLocalTime: true, }) .startOf('day') + describe('DateNavigator component', () => { - const mockHandleNextDate = jest.fn() - const mockHandlePrevDate = jest.fn() - beforeEach(() => { - jest.clearAllMocks() - }) it('should be rendered correctly', async () => { - const wrapper = mount( + const { container } = render( <DateNavigator disableNext={false} disablePrev={false} - handleNextDate={mockHandleNextDate} - handlePrevDate={mockHandlePrevDate} + handleNextDate={jest.fn()} + handlePrevDate={jest.fn()} navigatorDate={mockedDate} timeStep={TimeStep.MONTH} /> ) - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) - describe('should test navigation functions', () => { - describe('should test previous arrow', () => { - it('should call handlePrevDate', async () => { - const wrapper = mount( - <DateNavigator - disableNext={false} - disablePrev={false} - handleNextDate={mockHandleNextDate} - handlePrevDate={mockHandlePrevDate} - navigatorDate={mockedDate} - timeStep={TimeStep.MONTH} - /> - ) - wrapper.find(IconButton).first().simulate('click') - expect(mockHandlePrevDate).toHaveBeenCalledTimes(1) - }) - - it('should NOT call handlePrevDate if disablePrev is true', async () => { - const wrapper = mount( - <DateNavigator - disableNext={false} - disablePrev={true} - handleNextDate={mockHandleNextDate} - handlePrevDate={mockHandlePrevDate} - navigatorDate={mockedDate} - timeStep={TimeStep.MONTH} - /> - ) - wrapper.find(IconButton).first().simulate('click') - expect(mockHandlePrevDate).toHaveBeenCalledTimes(0) - }) - }) + it('should test navigation functions', async () => { + const mockHandleNextDate = jest.fn() + const mockHandlePrevDate = jest.fn() + render( + <DateNavigator + disableNext={false} + disablePrev={false} + handleNextDate={mockHandleNextDate} + handlePrevDate={mockHandlePrevDate} + navigatorDate={mockedDate} + timeStep={TimeStep.MONTH} + /> + ) + const [prevIcon, nextIcon] = screen.getAllByRole('button') + await userEvent.click(prevIcon) + expect(mockHandlePrevDate).toHaveBeenCalledTimes(1) - describe('should test next arrow', () => { - it('should call mockHandleNextDate', async () => { - const wrapper = mount( - <DateNavigator - disableNext={false} - disablePrev={false} - handleNextDate={mockHandleNextDate} - handlePrevDate={mockHandlePrevDate} - navigatorDate={mockedDate} - timeStep={TimeStep.MONTH} - /> - ) - wrapper.find(IconButton).at(1).simulate('click') - expect(mockHandleNextDate).toHaveBeenCalledTimes(1) - }) + await userEvent.click(nextIcon) + expect(mockHandleNextDate).toHaveBeenCalledTimes(1) + }) - it('should NOT call mockHandleNextDate if disableNext is true', async () => { - const wrapper = mount( - <DateNavigator - disableNext={true} - disablePrev={false} - handleNextDate={mockHandleNextDate} - handlePrevDate={mockHandlePrevDate} - navigatorDate={mockedDate} - timeStep={TimeStep.MONTH} - /> - ) - wrapper.find(IconButton).at(1).simulate('click') - expect(mockHandleNextDate).toHaveBeenCalledTimes(0) - }) - }) + it('should not be able to click nav buttons', async () => { + render( + <DateNavigator + disableNext={true} + disablePrev={true} + handleNextDate={jest.fn()} + handlePrevDate={jest.fn()} + navigatorDate={mockedDate} + timeStep={TimeStep.MONTH} + /> + ) + const [prevIcon, nextButton] = screen.getAllByRole('button') + expect(prevIcon).toBeDisabled() + expect(nextButton).toBeDisabled() }) }) diff --git a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap index 8daf2089343eeaee62c17f6c24f86038176a0d71..aef335f2e5a5c2279374f2c02a5e1c608975850e 100644 --- a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap +++ b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap @@ -1,276 +1,61 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DateNavigator component should be rendered correctly 1`] = ` -<DateNavigator - disableNext={false} - disablePrev={false} - handleNextDate={[MockFunction]} - handlePrevDate={[MockFunction]} - navigatorDate={"2021-07-01T00:00:00.000Z"} - timeStep={40} -> +<div> <div - className="date-navigator" + class="date-navigator" > - <WithStyles(ForwardRef(IconButton)) + <button aria-label="consumption.accessibility.button_previous_value" - className="date-navigator-button" - disabled={false} - onClick={[MockFunction]} + class="MuiButtonBase-root MuiIconButton-root date-navigator-button" + tabindex="0" + type="button" > - <ForwardRef(IconButton) - aria-label="consumption.accessibility.button_previous_value" - className="date-navigator-button" - classes={ - Object { - "colorInherit": "MuiIconButton-colorInherit", - "colorPrimary": "MuiIconButton-colorPrimary", - "colorSecondary": "MuiIconButton-colorSecondary", - "disabled": "Mui-disabled", - "edgeEnd": "MuiIconButton-edgeEnd", - "edgeStart": "MuiIconButton-edgeStart", - "label": "MuiIconButton-label", - "root": "MuiIconButton-root", - "sizeSmall": "MuiIconButton-sizeSmall", - } - } - disabled={false} - onClick={[MockFunction]} + <span + class="MuiIconButton-label" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="consumption.accessibility.button_previous_value" - centerRipple={true} - className="MuiIconButton-root date-navigator-button" - disabled={false} - focusRipple={true} - onClick={[MockFunction]} + <svg + class="styles__icon___23x3R" + height="16" + width="16" > - <ForwardRef(ButtonBase) - aria-label="consumption.accessibility.button_previous_value" - centerRipple={true} - className="MuiIconButton-root date-navigator-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[MockFunction]} - > - <button - aria-label="consumption.accessibility.button_previous_value" - className="MuiButtonBase-root MuiIconButton-root date-navigator-button" - disabled={false} - onBlur={[Function]} - onClick={[MockFunction]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <Icon - icon="test-file-stub" - size={16} - spin={false} - > - <Component - className="styles__icon___23x3R" - height={16} - style={Object {}} - width={16} - > - <svg - className="styles__icon___23x3R" - height={16} - style={Object {}} - width={16} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> <mock-date-navigator-format - date={"2021-07-01T00:00:00.000Z"} - inline={false} - timeStep={40} + date="1625097600000" + inline="false" + timestep="40" /> - <WithStyles(ForwardRef(IconButton)) + <button aria-label="consumption.accessibility.button_next_value" - className="date-navigator-button" - disabled={false} - onClick={[MockFunction]} + class="MuiButtonBase-root MuiIconButton-root date-navigator-button" + tabindex="0" + type="button" > - <ForwardRef(IconButton) - aria-label="consumption.accessibility.button_next_value" - className="date-navigator-button" - classes={ - Object { - "colorInherit": "MuiIconButton-colorInherit", - "colorPrimary": "MuiIconButton-colorPrimary", - "colorSecondary": "MuiIconButton-colorSecondary", - "disabled": "Mui-disabled", - "edgeEnd": "MuiIconButton-edgeEnd", - "edgeStart": "MuiIconButton-edgeStart", - "label": "MuiIconButton-label", - "root": "MuiIconButton-root", - "sizeSmall": "MuiIconButton-sizeSmall", - } - } - disabled={false} - onClick={[MockFunction]} + <span + class="MuiIconButton-label" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="consumption.accessibility.button_next_value" - centerRipple={true} - className="MuiIconButton-root date-navigator-button" - disabled={false} - focusRipple={true} - onClick={[MockFunction]} + <svg + class="styles__icon___23x3R" + height="16" + width="16" > - <ForwardRef(ButtonBase) - aria-label="consumption.accessibility.button_next_value" - centerRipple={true} - className="MuiIconButton-root date-navigator-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[MockFunction]} - > - <button - aria-label="consumption.accessibility.button_next_value" - className="MuiButtonBase-root MuiIconButton-root date-navigator-button" - disabled={false} - onBlur={[Function]} - onClick={[MockFunction]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <Icon - icon="test-file-stub" - size={16} - spin={false} - > - <Component - className="styles__icon___23x3R" - height={16} - style={Object {}} - width={16} - > - <svg - className="styles__icon___23x3R" - height={16} - style={Object {}} - width={16} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> </div> -</DateNavigator> +</div> `;