From aefa2d8065eec582515e14e70bfdd244081b167d Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Mon, 30 Oct 2023 16:19:49 +0000
Subject: [PATCH] test(rtl): commonKit
---
.../CommonKit/Card/StyledCard.spec.tsx | 14 +--
.../Card/StyledEcogestureCard.spec.tsx | 16 +---
.../__snapshots__/StyledCard.spec.tsx.snap | 72 +++++++++++---
.../StyledEcogestureCard.spec.tsx.snap | 30 +++---
.../FormNavigation/FormNavigation.spec.tsx | 37 +++----
.../CommonKit/Icon/StyledIcon.spec.tsx | 19 +---
.../__snapshots__/StyledIcon.spec.tsx.snap | 17 +++-
.../IconButton/StyledIconButton.spec.tsx | 14 +--
.../StyledIconButton.spec.tsx.snap | 31 ++++--
.../CommonKit/Switch/StyledSwitch.spec.tsx | 19 ++--
.../__snapshots__/StyledSwitch.spec.tsx.snap | 96 +++++++++++++++++--
11 files changed, 240 insertions(+), 125 deletions(-)
diff --git a/src/components/CommonKit/Card/StyledCard.spec.tsx b/src/components/CommonKit/Card/StyledCard.spec.tsx
index 0ef9813d2..bfbf4c3dd 100644
--- a/src/components/CommonKit/Card/StyledCard.spec.tsx
+++ b/src/components/CommonKit/Card/StyledCard.spec.tsx
@@ -1,27 +1,27 @@
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import StyledCard from './StyledCard'
+import { render } from '@testing-library/react'
describe('StyledCard component test', () => {
it('should render correctly Electricity StyledCard', () => {
- const wrapper = mount(
+ const { container } = render(
<StyledCard fluidType={FluidType.ELECTRICITY}>children</StyledCard>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should render correctly Water StyledCard', () => {
- const wrapper = mount(
+ const { container } = render(
<StyledCard fluidType={FluidType.WATER}>children</StyledCard>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should render correctly Gas StyledCard', () => {
- const wrapper = mount(
+ const { container } = render(
<StyledCard fluidType={FluidType.GAS}>children</StyledCard>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/CommonKit/Card/StyledEcogestureCard.spec.tsx b/src/components/CommonKit/Card/StyledEcogestureCard.spec.tsx
index 6b6aac0e0..44d473250 100644
--- a/src/components/CommonKit/Card/StyledEcogestureCard.spec.tsx
+++ b/src/components/CommonKit/Card/StyledEcogestureCard.spec.tsx
@@ -1,20 +1,10 @@
-import { mount } from 'enzyme'
+import { render } from '@testing-library/react'
import React from 'react'
import StyledEcogestureCard from './StyledEcogestureCard'
describe('StyledEcogestureCard component test', () => {
it('should render correctly border StyledEcogestureCard', () => {
- const wrapper = mount(<StyledEcogestureCard />)
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-
- it('should render correctly new ecogesture StyledEcogestureCard with newEcogesture', () => {
- const wrapper = mount(<StyledEcogestureCard newEcogesture={true} />)
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-
- it('should render correctly border StyledEcogestureCard with border', () => {
- const wrapper = mount(<StyledEcogestureCard border={true} />)
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(<StyledEcogestureCard />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/CommonKit/Card/__snapshots__/StyledCard.spec.tsx.snap b/src/components/CommonKit/Card/__snapshots__/StyledCard.spec.tsx.snap
index 520b00750..11a9f998a 100644
--- a/src/components/CommonKit/Card/__snapshots__/StyledCard.spec.tsx.snap
+++ b/src/components/CommonKit/Card/__snapshots__/StyledCard.spec.tsx.snap
@@ -1,25 +1,67 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StyledCard component test should render correctly Electricity StyledCard 1`] = `
-<StyledCard
- fluidType={0}
->
- children
-</StyledCard>
+<div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined electricity"
+ tabindex="0"
+ type="button"
+ >
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+ >
+ children
+ </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
exports[`StyledCard component test should render correctly Gas StyledCard 1`] = `
-<StyledCard
- fluidType={2}
->
- children
-</StyledCard>
+<div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-5 undefined gas"
+ tabindex="0"
+ type="button"
+ >
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-6"
+ >
+ children
+ </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
exports[`StyledCard component test should render correctly Water StyledCard 1`] = `
-<StyledCard
- fluidType={1}
->
- children
-</StyledCard>
+<div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-3 undefined water"
+ tabindex="0"
+ type="button"
+ >
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-4"
+ >
+ children
+ </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/CommonKit/Card/__snapshots__/StyledEcogestureCard.spec.tsx.snap b/src/components/CommonKit/Card/__snapshots__/StyledEcogestureCard.spec.tsx.snap
index a370edbda..b5e28e392 100644
--- a/src/components/CommonKit/Card/__snapshots__/StyledEcogestureCard.spec.tsx.snap
+++ b/src/components/CommonKit/Card/__snapshots__/StyledEcogestureCard.spec.tsx.snap
@@ -1,15 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`StyledEcogestureCard component test should render correctly border StyledEcogestureCard 1`] = `<StyledEcogestureCard />`;
-
-exports[`StyledEcogestureCard component test should render correctly border StyledEcogestureCard with border 1`] = `
-<StyledEcogestureCard
- border={true}
-/>
-`;
-
-exports[`StyledEcogestureCard component test should render correctly new ecogesture StyledEcogestureCard with newEcogesture 1`] = `
-<StyledEcogestureCard
- newEcogesture={true}
-/>
+exports[`StyledEcogestureCard component test should render correctly border StyledEcogestureCard 1`] = `
+<div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
+ tabindex="0"
+ type="button"
+ >
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+ />
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx b/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx
index 27cd6d1ee..c28c83226 100644
--- a/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx
+++ b/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx
@@ -1,32 +1,25 @@
-import Button from '@material-ui/core/Button'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { ProfileTypeStepForm } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
-import { Provider } from 'react-redux'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
import FormNavigation from './FormNavigation'
describe('FormNavigation component', () => {
- const store = createMockEcolyoStore()
-
- it('should be rendered correctly', () => {
+ it('should call next & previous methods', async () => {
const mockHandlePrevious = jest.fn()
const mockHandleNext = jest.fn()
- const wrapper = mount(
- <Provider store={store}>
- <FormNavigation
- step={ProfileTypeStepForm.COOKING_FLUID}
- handlePrevious={mockHandlePrevious}
- handleNext={mockHandleNext}
- disableNextButton={false}
- />
- </Provider>
+ render(
+ <FormNavigation
+ step={ProfileTypeStepForm.COOKING_FLUID}
+ handlePrevious={mockHandlePrevious}
+ handleNext={mockHandleNext}
+ disableNextButton={false}
+ />
)
- wrapper.find(Button).at(0).simulate('click')
- wrapper.find(Button).at(1).simulate('click')
- expect(wrapper.find('profile-navigation')).toBeTruthy()
- expect(wrapper.find(Button)).toBeTruthy()
- expect(mockHandlePrevious.mock.calls.length).toEqual(1)
- expect(mockHandleNext.mock.calls.length).toEqual(1)
+ const [prevButton, nextButton] = screen.getAllByRole('button')
+ await userEvent.click(prevButton)
+ expect(mockHandlePrevious).toHaveBeenCalled()
+ await userEvent.click(nextButton)
+ expect(mockHandleNext).toHaveBeenCalled()
})
})
diff --git a/src/components/CommonKit/Icon/StyledIcon.spec.tsx b/src/components/CommonKit/Icon/StyledIcon.spec.tsx
index 737e4c756..1649ff7ef 100644
--- a/src/components/CommonKit/Icon/StyledIcon.spec.tsx
+++ b/src/components/CommonKit/Icon/StyledIcon.spec.tsx
@@ -1,23 +1,12 @@
-import { mount } from 'enzyme'
+import { render } from '@testing-library/react'
import React from 'react'
import StyledIcon from './StyledIcon'
describe('StyledIcon component test', () => {
it('should render correctly Icon', () => {
- const mockProps = {
- className: 'className',
- icon: 'icon',
- size: 10,
- }
-
- const wrapper = mount(
- <StyledIcon
- className={mockProps.className}
- icon={mockProps.icon}
- size={mockProps.size}
- />
+ const { container } = render(
+ <StyledIcon className="class" icon="icon" size={10} />
)
-
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/CommonKit/Icon/__snapshots__/StyledIcon.spec.tsx.snap b/src/components/CommonKit/Icon/__snapshots__/StyledIcon.spec.tsx.snap
index d0fc8b872..995720a23 100644
--- a/src/components/CommonKit/Icon/__snapshots__/StyledIcon.spec.tsx.snap
+++ b/src/components/CommonKit/Icon/__snapshots__/StyledIcon.spec.tsx.snap
@@ -1,9 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StyledIcon component test should render correctly Icon 1`] = `
-<StyledIcon
- className="className"
- icon="icon"
- size={10}
-/>
+<div>
+ <svg
+ aria-hidden="true"
+ class="class styles__icon___23x3R"
+ height="10"
+ width="10"
+ >
+ <use
+ xlink:href="#icon"
+ />
+ </svg>
+</div>
`;
diff --git a/src/components/CommonKit/IconButton/StyledIconButton.spec.tsx b/src/components/CommonKit/IconButton/StyledIconButton.spec.tsx
index d621190f2..b202c401e 100644
--- a/src/components/CommonKit/IconButton/StyledIconButton.spec.tsx
+++ b/src/components/CommonKit/IconButton/StyledIconButton.spec.tsx
@@ -1,18 +1,10 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
import React from 'react'
import StyledIconButton from './StyledIconButton'
describe('StyledIconButton component test', () => {
it('should render correctly StyledIconButton', () => {
- const mockProps = {
- icon: 'icon',
- size: 15,
- }
-
- const wrapper = shallow(
- <StyledIconButton icon={mockProps.icon} sized={mockProps.size} />
- )
-
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(<StyledIconButton icon="icon" sized={15} />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap b/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
index f91cdd498..1b0375865 100644
--- a/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
+++ b/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
@@ -1,10 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StyledIconButton component test should render correctly StyledIconButton 1`] = `
-<WithStyles(WithStyles(ForwardRef(IconButton)))>
- <StyledIcon
- icon="icon"
- size={15}
- />
-</WithStyles(WithStyles(ForwardRef(IconButton)))>
+<div>
+ <button
+ class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="15"
+ width="15"
+ >
+ <use
+ xlink:href="#icon"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/CommonKit/Switch/StyledSwitch.spec.tsx b/src/components/CommonKit/Switch/StyledSwitch.spec.tsx
index 8af7bc846..17a5b04de 100644
--- a/src/components/CommonKit/Switch/StyledSwitch.spec.tsx
+++ b/src/components/CommonKit/Switch/StyledSwitch.spec.tsx
@@ -1,24 +1,23 @@
+import { render } from '@testing-library/react'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import StyledSwitch from './StyledSwitch'
describe('StyledSwitch component test', () => {
it('should render correctly electricity StyledSwitch', () => {
- const wrapper = mount(<StyledSwitch fluidType={FluidType.ELECTRICITY} />)
-
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(
+ <StyledSwitch fluidType={FluidType.ELECTRICITY} />
+ )
+ expect(container).toMatchSnapshot()
})
it('should render correctly water StyledSwitch', () => {
- const wrapper = mount(<StyledSwitch fluidType={FluidType.WATER} />)
-
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(<StyledSwitch fluidType={FluidType.WATER} />)
+ expect(container).toMatchSnapshot()
})
it('should render correctly gas StyledSwitch', () => {
- const wrapper = mount(<StyledSwitch fluidType={FluidType.GAS} />)
-
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(<StyledSwitch fluidType={FluidType.GAS} />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/CommonKit/Switch/__snapshots__/StyledSwitch.spec.tsx.snap b/src/components/CommonKit/Switch/__snapshots__/StyledSwitch.spec.tsx.snap
index a69f06614..b93dd31b3 100644
--- a/src/components/CommonKit/Switch/__snapshots__/StyledSwitch.spec.tsx.snap
+++ b/src/components/CommonKit/Switch/__snapshots__/StyledSwitch.spec.tsx.snap
@@ -1,19 +1,97 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StyledSwitch component test should render correctly electricity StyledSwitch 1`] = `
-<StyledSwitch
- fluidType={0}
-/>
+<div>
+ <span
+ class="MuiSwitch-root WithStyles(ForwardRef(Switch))-root-4"
+ >
+ <span
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-8 MuiSwitch-switchBase WithStyles(ForwardRef(Switch))-switchBase-5 WithStyles(WithStyles(ForwardRef(Switch)))-switchBase-1 MuiSwitch-colorSecondary"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <input
+ class="PrivateSwitchBase-input-11 MuiSwitch-input"
+ type="checkbox"
+ value=""
+ />
+ <span
+ class="MuiSwitch-thumb"
+ />
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </span>
+ <span
+ class="MuiSwitch-track WithStyles(ForwardRef(Switch))-track-7 WithStyles(WithStyles(ForwardRef(Switch)))-track-3"
+ />
+ </span>
+</div>
`;
exports[`StyledSwitch component test should render correctly gas StyledSwitch 1`] = `
-<StyledSwitch
- fluidType={2}
-/>
+<div>
+ <span
+ class="MuiSwitch-root WithStyles(ForwardRef(Switch))-root-26"
+ >
+ <span
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-30 MuiSwitch-switchBase WithStyles(ForwardRef(Switch))-switchBase-27 WithStyles(WithStyles(ForwardRef(Switch)))-switchBase-23 MuiSwitch-colorSecondary"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <input
+ class="PrivateSwitchBase-input-33 MuiSwitch-input"
+ type="checkbox"
+ value=""
+ />
+ <span
+ class="MuiSwitch-thumb"
+ />
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </span>
+ <span
+ class="MuiSwitch-track WithStyles(ForwardRef(Switch))-track-29 WithStyles(WithStyles(ForwardRef(Switch)))-track-25"
+ />
+ </span>
+</div>
`;
exports[`StyledSwitch component test should render correctly water StyledSwitch 1`] = `
-<StyledSwitch
- fluidType={1}
-/>
+<div>
+ <span
+ class="MuiSwitch-root WithStyles(ForwardRef(Switch))-root-15"
+ >
+ <span
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-19 MuiSwitch-switchBase WithStyles(ForwardRef(Switch))-switchBase-16 WithStyles(WithStyles(ForwardRef(Switch)))-switchBase-12 MuiSwitch-colorSecondary"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <input
+ class="PrivateSwitchBase-input-22 MuiSwitch-input"
+ type="checkbox"
+ value=""
+ />
+ <span
+ class="MuiSwitch-thumb"
+ />
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </span>
+ <span
+ class="MuiSwitch-track WithStyles(ForwardRef(Switch))-track-18 WithStyles(WithStyles(ForwardRef(Switch)))-track-14"
+ />
+ </span>
+</div>
`;
--
GitLab