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
No related branches found
No related tags found
2 merge requests!10622.7 Release,!1040test(rtl): date navigator
Hide 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,90 +15,56 @@ const mockedDate = DateTime.local(2021, 7, 1) ...@@ -17,90 +15,56 @@ 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}
handleNextDate={mockHandleNextDate} handleNextDate={mockHandleNextDate}
handlePrevDate={mockHandlePrevDate} handlePrevDate={mockHandlePrevDate}
navigatorDate={mockedDate} navigatorDate={mockedDate}
timeStep={TimeStep.MONTH} timeStep={TimeStep.MONTH}
/> />
) )
wrapper.find(IconButton).first().simulate('click') const [prevIcon, nextIcon] = screen.getAllByRole('button')
expect(mockHandlePrevDate).toHaveBeenCalledTimes(1) await userEvent.click(prevIcon)
}) 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 () => { expect(mockHandleNextDate).toHaveBeenCalledTimes(1)
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)
})
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)) <button
aria-label="consumption.accessibility.button_previous_value" aria-label="consumption.accessibility.button_previous_value"
className="date-navigator-button" class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
disabled={false} tabindex="0"
onClick={[MockFunction]} type="button"
> >
<ForwardRef(IconButton) <span
aria-label="consumption.accessibility.button_previous_value" class="MuiIconButton-label"
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)) <svg
aria-label="consumption.accessibility.button_previous_value" class="styles__icon___23x3R"
centerRipple={true} height="16"
className="MuiIconButton-root date-navigator-button" width="16"
disabled={false}
focusRipple={true}
onClick={[MockFunction]}
> >
<ForwardRef(ButtonBase) <use
aria-label="consumption.accessibility.button_previous_value" xlink:href="#test-file-stub"
centerRipple={true} />
className="MuiIconButton-root date-navigator-button" </svg>
classes={ </span>
Object { <span
"disabled": "Mui-disabled", class="MuiTouchRipple-root"
"focusVisible": "Mui-focusVisible", />
"root": "MuiButtonBase-root", </button>
}
}
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))>
<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)) <button
aria-label="consumption.accessibility.button_next_value" aria-label="consumption.accessibility.button_next_value"
className="date-navigator-button" class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
disabled={false} tabindex="0"
onClick={[MockFunction]} type="button"
> >
<ForwardRef(IconButton) <span
aria-label="consumption.accessibility.button_next_value" class="MuiIconButton-label"
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)) <svg
aria-label="consumption.accessibility.button_next_value" class="styles__icon___23x3R"
centerRipple={true} height="16"
className="MuiIconButton-root date-navigator-button" width="16"
disabled={false}
focusRipple={true}
onClick={[MockFunction]}
> >
<ForwardRef(ButtonBase) <use
aria-label="consumption.accessibility.button_next_value" xlink:href="#test-file-stub"
centerRipple={true} />
className="MuiIconButton-root date-navigator-button" </svg>
classes={ </span>
Object { <span
"disabled": "Mui-disabled", class="MuiTouchRipple-root"
"focusVisible": "Mui-focusVisible", />
"root": "MuiButtonBase-root", </button>
}
}
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))>
</div> </div>
</DateNavigator> </div>
`; `;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment