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>
`;