Skip to content
Snippets Groups Projects
Commit 2b319e21 authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

Merge branch 'rtl-date-navigator' into 'dev' 

test(rtl): date navigator

See merge request !1040
parents f166c555 3353f948
Branches
Tags
2 merge requests!10622.7 Release,!1040test(rtl): date navigator
Show whitespace changes
Inline Side-by-side
src/components/DateNavigator/DateNavigator.spec.tsx
+ 40
− 76
View file @ 2b319e21
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 { TimeStep } from 'enums'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon' import { DateTime } from 'luxon'
import React from 'react' import React from 'react'
import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import DateNavigator from './DateNavigator' import DateNavigator from './DateNavigator'
jest.mock( jest.mock(
...@@ -17,31 +15,26 @@ const mockedDate = DateTime.local(2021, 7, 1) ...@@ -17,31 +15,26 @@ const mockedDate = DateTime.local(2021, 7, 1)
keepLocalTime: true, keepLocalTime: true,
}) })
.startOf('day') .startOf('day')
describe('DateNavigator component', () => { describe('DateNavigator component', () => {
const mockHandleNextDate = jest.fn()
const mockHandlePrevDate = jest.fn()
beforeEach(() => {
jest.clearAllMocks()
})
it('should be rendered correctly', async () => { it('should be rendered correctly', async () => {
const wrapper = mount( const { container } = render(
<DateNavigator <DateNavigator
disableNext={false} disableNext={false}
disablePrev={false} disablePrev={false}
handleNextDate={mockHandleNextDate} handleNextDate={jest.fn()}
handlePrevDate={mockHandlePrevDate} handlePrevDate={jest.fn()}
navigatorDate={mockedDate} navigatorDate={mockedDate}
timeStep={TimeStep.MONTH} timeStep={TimeStep.MONTH}
/> />
) )
await waitForComponentToPaint(wrapper) expect(container).toMatchSnapshot()
expect(toJson(wrapper)).toMatchSnapshot()
}) })
describe('should test navigation functions', () => { it('should test navigation functions', async () => {
describe('should test previous arrow', () => { const mockHandleNextDate = jest.fn()
it('should call handlePrevDate', async () => { const mockHandlePrevDate = jest.fn()
const wrapper = mount( render(
<DateNavigator <DateNavigator
disableNext={false} disableNext={false}
disablePrev={false} disablePrev={false}
...@@ -51,56 +44,27 @@ describe('DateNavigator component', () => { ...@@ -51,56 +44,27 @@ describe('DateNavigator component', () => {
timeStep={TimeStep.MONTH} timeStep={TimeStep.MONTH}
/> />
) )
wrapper.find(IconButton).first().simulate('click') const [prevIcon, nextIcon] = screen.getAllByRole('button')
await userEvent.click(prevIcon)
expect(mockHandlePrevDate).toHaveBeenCalledTimes(1) 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)
})
})
describe('should test next arrow', () => { await userEvent.click(nextIcon)
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) expect(mockHandleNextDate).toHaveBeenCalledTimes(1)
}) })
it('should NOT call mockHandleNextDate if disableNext is true', async () => { it('should not be able to click nav buttons', async () => {
const wrapper = mount( render(
<DateNavigator <DateNavigator
disableNext={true} disableNext={true}
disablePrev={false} disablePrev={true}
handleNextDate={mockHandleNextDate} handleNextDate={jest.fn()}
handlePrevDate={mockHandlePrevDate} handlePrevDate={jest.fn()}
navigatorDate={mockedDate} navigatorDate={mockedDate}
timeStep={TimeStep.MONTH} timeStep={TimeStep.MONTH}
/> />
) )
wrapper.find(IconButton).at(1).simulate('click') const [prevIcon, nextButton] = screen.getAllByRole('button')
expect(mockHandleNextDate).toHaveBeenCalledTimes(0) expect(prevIcon).toBeDisabled()
}) expect(nextButton).toBeDisabled()
})
}) })
}) })
src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
+ 44
− 259
View file @ 2b319e21
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DateNavigator component should be rendered correctly 1`] = ` exports[`DateNavigator component should be rendered correctly 1`] = `
<DateNavigator <div>
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))
aria-label="consumption.accessibility.button_previous_value"
className="date-navigator-button"
disabled={false}
onClick={[MockFunction]}
>
<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]}
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="consumption.accessibility.button_previous_value"
centerRipple={true}
className="MuiIconButton-root date-navigator-button"
disabled={false}
focusRipple={true}
onClick={[MockFunction]}
>
<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 <button
aria-label="consumption.accessibility.button_previous_value" aria-label="consumption.accessibility.button_previous_value"
className="MuiButtonBase-root MuiIconButton-root date-navigator-button" class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
disabled={false} tabindex="0"
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" type="button"
> >
<span <span
className="MuiIconButton-label" class="MuiIconButton-label"
>
<Icon
icon="test-file-stub"
size={16}
spin={false}
>
<Component
className="styles__icon___23x3R"
height={16}
style={Object {}}
width={16}
> >
<svg <svg
className="styles__icon___23x3R" class="styles__icon___23x3R"
height={16} height="16"
style={Object {}} width="16"
width={16}
> >
<use <use
xlinkHref="#test-file-stub" xlink:href="#test-file-stub"
/> />
</svg> </svg>
</Component>
</Icon>
</span> </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 <span
className="MuiTouchRipple-root" class="MuiTouchRipple-root"
>
<TransitionGroup
childFactory={[Function]}
component={null}
exit={true}
/> />
</span>
</ForwardRef(TouchRipple)>
</WithStyles(memo)>
</button> </button>
</ForwardRef(ButtonBase)>
</WithStyles(ForwardRef(ButtonBase))>
</ForwardRef(IconButton)>
</WithStyles(ForwardRef(IconButton))>
<mock-date-navigator-format <mock-date-navigator-format
date={"2021-07-01T00:00:00.000Z"} date="1625097600000"
inline={false} inline="false"
timeStep={40} timestep="40"
/> />
<WithStyles(ForwardRef(IconButton))
aria-label="consumption.accessibility.button_next_value"
className="date-navigator-button"
disabled={false}
onClick={[MockFunction]}
>
<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]}
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="consumption.accessibility.button_next_value"
centerRipple={true}
className="MuiIconButton-root date-navigator-button"
disabled={false}
focusRipple={true}
onClick={[MockFunction]}
>
<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 <button
aria-label="consumption.accessibility.button_next_value" aria-label="consumption.accessibility.button_next_value"
className="MuiButtonBase-root MuiIconButton-root date-navigator-button" class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
disabled={false} tabindex="0"
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" type="button"
> >
<span <span
className="MuiIconButton-label" class="MuiIconButton-label"
>
<Icon
icon="test-file-stub"
size={16}
spin={false}
>
<Component
className="styles__icon___23x3R"
height={16}
style={Object {}}
width={16}
> >
<svg <svg
className="styles__icon___23x3R" class="styles__icon___23x3R"
height={16} height="16"
style={Object {}} width="16"
width={16}
> >
<use <use
xlinkHref="#test-file-stub" xlink:href="#test-file-stub"
/> />
</svg> </svg>
</Component>
</Icon>
</span> </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 <span
className="MuiTouchRipple-root" class="MuiTouchRipple-root"
>
<TransitionGroup
childFactory={[Function]}
component={null}
exit={true}
/> />
</span>
</ForwardRef(TouchRipple)>
</WithStyles(memo)>
</button> </button>
</ForwardRef(ButtonBase)>
</WithStyles(ForwardRef(ButtonBase))>
</ForwardRef(IconButton)>
</WithStyles(ForwardRef(IconButton))>
</div> </div>
</DateNavigator> </div>
`; `;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment