diff --git a/.vscode/settings.json b/.vscode/settings.json
index 325a5229314536c00e319825ddf59d387927980b..15141b2b1109d66af939735e2bd715e2e0aa28bc 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -121,6 +121,7 @@
"multifluid",
"MULTIFLUID",
"mutlifluid",
+ "notif",
"numerique",
"oeufs",
"picto",
diff --git a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx
index 939ab0b35537bc2dce47ce8195a6ae29ec30f0db..78b2dc508218534047f0cde124a05df356038db7 100644
--- a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx
+++ b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx
@@ -1,47 +1,19 @@
+import { render } from '@testing-library/react'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import ConsumptionDetails from './ConsumptionDetails'
describe('ConsumptionDetails component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ConsumptionDetails fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
- })
-
- it('should not render connection card', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ConsumptionDetails fluidType={FluidType.MULTIFLUID} />
- </Provider>
- )
- expect(wrapper.contains('.fluidcard-link')).toBeFalsy()
- })
- it('should render one connection card', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ConsumptionDetails fluidType={FluidType.MULTIFLUID} />
- </Provider>
- )
- expect(wrapper.find('.fluidcard-link')).toBeTruthy()
- })
- it('should not render connection card and show multifluid link', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ConsumptionDetails fluidType={FluidType.ELECTRICITY} />
- </Provider>
- )
- expect(wrapper.find('.multi-link')).toBeTruthy()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Consumption/ConsumptionDetails/__snapshots__/ConsumptionDetails.spec.tsx.snap b/src/components/Consumption/ConsumptionDetails/__snapshots__/ConsumptionDetails.spec.tsx.snap
index 77eb4e2b0d3fb4d9348ff85138d62a5014dad889..8c78033304758d0eafb1a1cf706afff8f575341b 100644
--- a/src/components/Consumption/ConsumptionDetails/__snapshots__/ConsumptionDetails.spec.tsx.snap
+++ b/src/components/Consumption/ConsumptionDetails/__snapshots__/ConsumptionDetails.spec.tsx.snap
@@ -1,85 +1,45 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ConsumptionDetails component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ConsumptionDetails
- fluidType={0}
+<div>
+ <div
+ class="consumption-details-root"
>
<div
- className="consumption-details-root"
+ class="consumption-details-content"
>
<div
- className="consumption-details-content"
+ class="consumption-details-header text-16-normal-uppercase details-title"
>
- <div
- className="consumption-details-header text-16-normal-uppercase details-title"
- />
- <TotalConsumption
- fluidType={0}
+
+ </div>
+ <div
+ class="icon-line "
+ >
+ <svg
+ aria-hidden="true"
+ class="pile-icon styles__icon___23x3R"
+ height="36"
+ width="36"
>
- <div
- className="icon-line "
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div>
+ <span
+ class="euro-value"
+ >
+ -----
+ </span>
+ <span
+ class="euro-symbol"
>
- <StyledIcon
- className="pile-icon"
- icon="test-file-stub"
- size={36}
- >
- <Icon
- aria-hidden={true}
- className="pile-icon"
- icon="test-file-stub"
- size={36}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="pile-icon styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <svg
- aria-hidden={true}
- className="pile-icon styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div>
- <span
- className="euro-value"
- >
- -----
- </span>
- <span
- className="euro-symbol"
- >
- €
- </span>
- </div>
- </div>
- </TotalConsumption>
+ €
+ </span>
+ </div>
</div>
</div>
- </ConsumptionDetails>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Consumption/ConsumptionView.spec.tsx b/src/components/Consumption/ConsumptionView.spec.tsx
index 75ce5755c9f38d4c15dd4d29afa7687580e14fc0..124c51accc0156479fc86be1bff71ee0f3e76bf9 100644
--- a/src/components/Consumption/ConsumptionView.spec.tsx
+++ b/src/components/Consumption/ConsumptionView.spec.tsx
@@ -1,6 +1,5 @@
-import Loader from 'components/Loader/Loader'
+import { render, screen } from '@testing-library/react'
import { FluidState, FluidType, TimeStep } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import * as chartActions from 'store/chart/chart.slice'
@@ -43,15 +42,6 @@ jest.mock(
'components/Konnector/KonnectorViewerCard',
() => 'mock-konnectorViewerCard'
)
-jest.mock(
- 'components/PartnerIssue/PartnerIssueModal',
- () => 'mock-partnerIssueModal'
-)
-jest.mock('components/CustomPopup/CustomPopupModal', () => 'mock-customPopup')
-jest.mock(
- 'components/ReleaseNotesModal/ReleaseNotesModal',
- () => 'mock-releaseNotes'
-)
jest.mock(
'components/Connection/SGEConnect/SgeConnectView',
() => 'mock-SgeConnectView'
@@ -78,17 +68,19 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
- expect(wrapper.find('mock-header').exists()).toBeTruthy()
- expect(wrapper.find('mock-dateNavigator').exists()).toBeTruthy()
- expect(wrapper.find('mock-fluidButtons').exists()).toBeTruthy()
- expect(wrapper.find('mock-fluidchart').exists()).toBeTruthy()
- expect(wrapper.find('mock-consumptionDetails').exists()).toBeTruthy()
+ expect(container.getElementsByTagName('mock-cozybar')[0]).toBeTruthy()
+ expect(container.getElementsByTagName('mock-header')[0]).toBeTruthy()
+ expect(container.getElementsByTagName('mock-dateNavigator')[0]).toBeTruthy()
+ expect(container.getElementsByTagName('mock-fluidButtons')[0]).toBeTruthy()
+ expect(container.getElementsByTagName('mock-fluidchart')[0]).toBeTruthy()
+ expect(
+ container.getElementsByTagName('mock-consumptionDetails')[0]
+ ).toBeTruthy()
})
it('should display a spinner when fluid connected and is loading', () => {
@@ -104,15 +96,12 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
- expect(wrapper.find('mock-header').exists()).toBeTruthy()
- expect(wrapper.find('mock-dateNavigator').exists()).toBeTruthy()
- expect(wrapper.find(Loader).exists()).toBeTruthy()
+ expect(screen.getByRole('progressbar')).toBeInTheDocument()
})
it('should set CurrentTimeStep to WEEK when fluid != ELECTRICITY and timeStep = HALF_AN_HOUR', () => {
@@ -127,7 +116,7 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.GAS} />
</Provider>
@@ -145,12 +134,14 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.MULTIFLUID} />
</Provider>
)
- expect(wrapper.find('mock-consumptionDetails').exists()).toBeTruthy()
+ expect(
+ container.getElementsByTagName('mock-consumptionDetails')[0]
+ ).toBeTruthy()
})
it('should render mutlifluid consumption if at least one fluid is connected', () => {
@@ -162,12 +153,14 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.MULTIFLUID} />
</Provider>
)
- expect(wrapper.find('.consumptionview-content').exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('consumptionview-content')[0]
+ ).toBeInTheDocument()
})
it('should render Electricity when elec is connected', () => {
@@ -179,13 +172,17 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(wrapper.find('.consumptionview-content').exists()).toBeTruthy()
- expect(wrapper.find('mock-consumptionDetails').exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('consumptionview-content').item(0)
+ ).toBeInTheDocument()
+ expect(
+ container.getElementsByTagName('mock-consumptionDetails').item(0)
+ ).toBeInTheDocument()
})
// todo describe and add multiple fluids ?
@@ -198,15 +195,18 @@ describe('ConsumptionView component', () => {
fluidStatus: updatedStatus,
releaseNotes: mockInitialEcolyoState.global.releaseNotes,
},
- modal: { partnersIssueModal: { enedis: false, grdf: false, egl: true } },
+ modal: {
+ ...mockModalState,
+ partnersIssueModal: { enedis: false, grdf: false, egl: true },
+ },
})
mockUpdateProfile.mockResolvedValue(mockTestProfile1)
- const wrapper = mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(wrapper.find('mock-partnerIssueModal').exists()).toBeTruthy()
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
it('should show expired modal when a GRDF consent is expired', () => {
const updatedStatus = mockInitialEcolyoState.global.fluidStatus
@@ -219,12 +219,12 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.GAS} />
</Provider>
)
- expect(wrapper.find('.title').text()).toBe('consent_outdated.title.2')
+ expect(screen.getByText('consent_outdated.title.2')).toBeInTheDocument()
})
it('should show expired modal when a Enedis consent is expired', () => {
const updatedStatus = mockInitialEcolyoState.global.fluidStatus
@@ -237,13 +237,12 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
-
- expect(wrapper.find('.title').text()).toBe('consent_outdated.title.0')
+ expect(screen.getByText('consent_outdated.title.0')).toBeInTheDocument()
})
it('should render customPopup Modal', async () => {
const store = createMockEcolyoStore({
@@ -258,12 +257,12 @@ describe('ConsumptionView component', () => {
},
})
mockUpdateProfile.mockResolvedValue(mockTestProfile1)
- const wrapper = mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(wrapper.find('mock-customPopup').exists()).toBeTruthy()
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
it('should render releaseNotesModal if releaseNotes.show is true', async () => {
const store = createMockEcolyoStore({
@@ -278,11 +277,11 @@ describe('ConsumptionView component', () => {
modal: mockModalState,
})
mockUpdateProfile.mockResolvedValue(mockTestProfile1)
- const wrapper = mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(wrapper.find('mock-releaseNotes').exists()).toBeTruthy()
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
})
diff --git a/src/components/Consumption/FluidButtons/FluidButton.spec.tsx b/src/components/Consumption/FluidButtons/FluidButton.spec.tsx
index 28699710e7d5fa9239d9b75d879c894a85d1104a..dac6e52ceb74f3fad1ce7ee4c889971a420d16d1 100644
--- a/src/components/Consumption/FluidButtons/FluidButton.spec.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButton.spec.tsx
@@ -1,54 +1,55 @@
+import { render } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { FluidState, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { GlobalState } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import UsageEventService from 'services/usageEvent.service'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import FluidButton from './FluidButton'
+const mockAddEvent = jest.fn()
+jest.mock('services/usageEvent.service')
+UsageEventService.addEvent = mockAddEvent
+
describe('FluidButton component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<FluidButton fluidType={FluidType.ELECTRICITY} isActive={false} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should render multifluidButton', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<FluidButton fluidType={FluidType.MULTIFLUID} isActive={false} />
</Provider>
)
- expect(wrapper.find('.multifluid')).toBeTruthy()
+ const element = container.getElementsByClassName('multifluid').item(0)
+ expect(element).toBeInTheDocument()
})
it('should render active button', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
- <FluidButton fluidType={FluidType.GAS} isActive={false} />
+ <FluidButton fluidType={FluidType.GAS} isActive={true} />
</Provider>
)
- expect(wrapper.find('.active')).toBeTruthy()
+ expect(container.getElementsByClassName('active').length).toBeTruthy()
})
- it('should trigger nav event', () => {
- jest.mock('services/usageEvent.service')
- const mockAddEvent = jest.fn()
- UsageEventService.addEvent = mockAddEvent
- const wrapper = mount(
+ it('should trigger nav event', async () => {
+ const { container } = render(
<Provider store={store}>
<FluidButton fluidType={FluidType.GAS} isActive={false} />
</Provider>
)
- wrapper.find('.fluid-button').simulate('click')
+ const navButton = container.getElementsByClassName('fluid-button')[0]
+ await userEvent.click(navButton)
expect(mockAddEvent).toHaveBeenCalled()
})
@@ -60,11 +61,12 @@ describe('FluidButton component', () => {
const store = createMockEcolyoStore({
global: updatedInitialState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<FluidButton fluidType={FluidType.GAS} isActive={false} />
</Provider>
)
- expect(wrapper.find('.notif-error')).toBeTruthy()
+ const element = container.getElementsByClassName('notif-error').item(0)
+ expect(element).toBeInTheDocument()
})
})
diff --git a/src/components/Consumption/FluidButtons/FluidButton.tsx b/src/components/Consumption/FluidButtons/FluidButton.tsx
index 0d78a7cc350dc20b364284efcd6bb63cd8968dda..80e2a2da4ee4c94231c9159900a4c81493fa3207 100644
--- a/src/components/Consumption/FluidButtons/FluidButton.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButton.tsx
@@ -1,3 +1,4 @@
+import { IconButton } from '@material-ui/core'
import ErrorNotif from 'assets/icons/ico/notif_error.svg'
import PartnerIssueNotif from 'assets/icons/ico/notif_maintenance.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
@@ -64,10 +65,10 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
}
}, [fluidStatus, fluidType, isConnected, isErrored])
return (
- <div
- className={`fluid-title ${FluidType[
+ <IconButton
+ className={`fluid-title fluid-button ${FluidType[
fluidType
- ].toLowerCase()} fluid-button`}
+ ].toLowerCase()}`}
onClick={goToFluid}
>
<StyledIcon
@@ -93,7 +94,7 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
>
{t(`FLUID.${FluidType[fluidType]}.LABEL`)}
</div>
- </div>
+ </IconButton>
)
}
diff --git a/src/components/Consumption/FluidButtons/FluidButtons.spec.tsx b/src/components/Consumption/FluidButtons/FluidButtons.spec.tsx
index 4517997e1748978a089adc3a5dcf152e6c69f8ee..111456ecb5c280068e07928dbedfe1e66b91a0bc 100644
--- a/src/components/Consumption/FluidButtons/FluidButtons.spec.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButtons.spec.tsx
@@ -1,22 +1,19 @@
+import { render } from '@testing-library/react'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import FluidButtons from './FluidButtons'
describe('FluidButtons component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<FluidButtons activeFluid={FluidType.ELECTRICITY} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap b/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap
index bc20bd2d993c50ea082e2e9273a3cde505707457..fe1b616b62680d6c6b7ee1b248b93117710d356b 100644
--- a/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap
+++ b/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap
@@ -1,65 +1,34 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FluidButton component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <FluidButton
- fluidType={0}
- isActive={false}
+<div>
+ <button
+ class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button electricity"
+ tabindex="0"
+ type="button"
>
- <div
- className="fluid-title electricity fluid-button"
- onClick={[Function]}
+ <span
+ class="MuiIconButton-label"
>
- <StyledIcon
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
+ <svg
+ aria-hidden="true"
+ class="fluid-icon styles__icon___23x3R"
+ height="32"
+ width="32"
>
- <Icon
- aria-hidden={true}
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <svg
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="fluid-title electricity false text-14-normal"
+ class="fluid-title electricity false text-14-normal"
>
FLUID.ELECTRICITY.LABEL
</div>
- </div>
- </FluidButton>
-</Provider>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap b/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
index 3925c6abe1b2547a032e4a5584952504432ed89e..d7c42349c2df0fcf66d258cf58ac289aee11f4da 100644
--- a/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
+++ b/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
@@ -1,225 +1,126 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FluidButtons component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <FluidButtons
- activeFluid={0}
+<div>
+ <div
+ class="fluid-buttons"
>
<div
- className="fluid-buttons"
+ class="content"
>
- <div
- className="content"
+ <button
+ class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button multifluid"
+ tabindex="0"
+ type="button"
>
- <FluidButton
- fluidType={3}
- isActive={false}
- key="3"
+ <span
+ class="MuiIconButton-label"
>
+ <svg
+ aria-hidden="true"
+ class="fluid-icon styles__icon___23x3R"
+ height="36"
+ width="36"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="fluid-title multifluid fluid-button"
- onClick={[Function]}
+ class="fluid-title multifluid false text-14-normal"
>
- <StyledIcon
- className="fluid-icon"
- icon="test-file-stub"
- size={36}
- >
- <Icon
- aria-hidden={true}
- className="fluid-icon"
- icon="test-file-stub"
- size={36}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <svg
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="fluid-title multifluid false text-14-normal"
- >
- FLUID.MULTIFLUID.LABEL
- </div>
+ FLUID.MULTIFLUID.LABEL
</div>
- </FluidButton>
- <FluidButton
- fluidType={0}
- isActive={true}
- key="0"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button electricity"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
+ <svg
+ aria-hidden="true"
+ class="fluid-icon styles__icon___23x3R"
+ height="32"
+ width="32"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="fluid-title electricity fluid-button"
- onClick={[Function]}
+ class="fluid-title electricity active text-14-normal"
>
- <StyledIcon
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- >
- <Icon
- aria-hidden={true}
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <svg
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="fluid-title electricity active text-14-normal"
- >
- FLUID.ELECTRICITY.LABEL
- </div>
+ FLUID.ELECTRICITY.LABEL
</div>
- </FluidButton>
- <FluidButton
- fluidType={1}
- isActive={false}
- key="1"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button water"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
+ <svg
+ aria-hidden="true"
+ class="fluid-icon styles__icon___23x3R"
+ height="32"
+ width="32"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="fluid-title water fluid-button"
- onClick={[Function]}
+ class="fluid-title water false text-14-normal"
>
- <StyledIcon
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- >
- <Icon
- aria-hidden={true}
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <svg
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="fluid-title water false text-14-normal"
- >
- FLUID.WATER.LABEL
- </div>
+ FLUID.WATER.LABEL
</div>
- </FluidButton>
- <FluidButton
- fluidType={2}
- isActive={false}
- key="2"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button gas"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
+ <svg
+ aria-hidden="true"
+ class="fluid-icon styles__icon___23x3R"
+ height="32"
+ width="32"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="fluid-title gas fluid-button"
- onClick={[Function]}
+ class="fluid-title gas false text-14-normal"
>
- <StyledIcon
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- >
- <Icon
- aria-hidden={true}
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <svg
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="fluid-title gas false text-14-normal"
- >
- FLUID.GAS.LABEL
- </div>
+ FLUID.GAS.LABEL
</div>
- </FluidButton>
- </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </FluidButtons>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
index f36f95c46eea6dec72f6361eeb29895eb943ae1c..7fa1dbb1615dcc28d8740dd163daec49aa78dfd0 100644
--- a/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
@@ -438,7 +438,8 @@ exports[`KonnectorModal component should be rendered correctly 1`] = `
<div
aria-busy="true"
aria-label="common.accessibility.loading"
- class="bars "
+ class="bars"
+ role="progressbar"
title="common.accessibility.loading"
>
<div
@@ -804,7 +805,8 @@ exports[`KonnectorModal component should be rendered correctly 1`] = `
<div
aria-busy="true"
aria-label="common.accessibility.loading"
- className="bars "
+ className="bars"
+ role="progressbar"
title="common.accessibility.loading"
>
<div
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
index 838a7c341ecd768a77f7c10c9f4225a77cdb327c..2567549f2907564269e56c5070d7eb8b843f4f1f 100644
--- a/src/components/Loader/Loader.tsx
+++ b/src/components/Loader/Loader.tsx
@@ -33,8 +33,9 @@ const Loader = ({ color = 'gold', fluidType, text }: LoaderProps) => {
return (
<div className={`loader ${variant}`}>
<div
- className={`bars `}
+ className="bars"
aria-busy="true"
+ role="progressbar"
aria-label={t('common.accessibility.loading')}
title={t('common.accessibility.loading')}
>
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
index 22a9f14391b2fcdb2a7ccb004275a9f6a546d5fd..e39a1f1ebe6c60db5ae88d87c07deb43c297ae1a 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
@@ -456,7 +456,8 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
<div
aria-busy="true"
aria-label="common.accessibility.loading"
- class="bars "
+ class="bars"
+ role="progressbar"
title="common.accessibility.loading"
>
<div
@@ -855,7 +856,8 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
<div
aria-busy="true"
aria-label="common.accessibility.loading"
- className="bars "
+ className="bars"
+ role="progressbar"
title="common.accessibility.loading"
>
<div