diff --git a/src/components/Analysis/AnalysisView.spec.tsx b/src/components/Analysis/AnalysisView.spec.tsx
index 6c2515b5bddbd28e139821fb3c3f6486befa8453..6be3d34fd982adc52708f5ae0ee4bb254aecb820 100644
--- a/src/components/Analysis/AnalysisView.spec.tsx
+++ b/src/components/Analysis/AnalysisView.spec.tsx
@@ -1,5 +1,5 @@
+import { render } from '@testing-library/react'
import AnalysisView from 'components/Analysis/AnalysisView'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import * as globalActions from 'store/global/global.slice'
@@ -39,15 +39,13 @@ describe('AnalysisView component', () => {
})
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<AnalysisView />
</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-monthlyanalysis').exists()).toBeTruthy()
+ expect(container.querySelector('mock-datenavigator')).toBeInTheDocument()
+ expect(container.querySelector('mock-monthlyanalysis')).toBeInTheDocument()
})
it('should update profile and toggle analysis notification to false if notification is true', () => {
@@ -58,15 +56,13 @@ describe('AnalysisView component', () => {
profile: { ...mockProfileState, haveSeenLastAnalysis: true },
})
mockAppDispatch.mockReturnValue(jest.fn())
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<AnalysisView />
</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-monthlyanalysis').exists()).toBeTruthy()
+ expect(container.querySelector('mock-datenavigator')).toBeInTheDocument()
+ expect(container.querySelector('mock-monthlyanalysis')).toBeInTheDocument()
expect(updateProfileSpy).toHaveBeenCalledTimes(1)
expect(updateProfileSpy).toHaveBeenCalledWith({
haveSeenLastAnalysis: true,
diff --git a/src/components/Analysis/AnalysisView.tsx b/src/components/Analysis/AnalysisView.tsx
index 424dcb2f2ee56666b019cecdd4d36673ff59e146..0047d6c501a1a73776a2652111f7b460de643e6e 100644
--- a/src/components/Analysis/AnalysisView.tsx
+++ b/src/components/Analysis/AnalysisView.tsx
@@ -94,12 +94,6 @@ const AnalysisView = () => {
client,
])
- const disablePrev =
- analysisMonth <
- DateTime.local(0, 1, 1).setZone('utc', {
- keepLocalTime: true,
- })
-
const handleMoveDate = (increment: number) => {
const updatedDate = dateChartService.incrementDate(
TimeStep.MONTH,
@@ -118,7 +112,7 @@ const AnalysisView = () => {
>
<DateNavigator
disableNext={isLastDateReached(analysisMonth, TimeStep.MONTH)}
- disablePrev={disablePrev}
+ disablePrev={false}
handleNextDate={() => handleMoveDate(1)}
handlePrevDate={() => handleMoveDate(-1)}
inlineDateDisplay={true}
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx
index 58ecd0b3ad642f3c2f5a56a1b92fb606a45aeb30..dabce7334c669a599f8df2b25cd9cc87fd2546b9 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx
@@ -1,5 +1,4 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import { DateTime } from 'luxon'
import React from 'react'
import { Provider } from 'react-redux'
@@ -23,19 +22,19 @@ describe('ElecHalfHourChart component', () => {
global: mockGlobalState,
})
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ElecHalfHourChart dataLoad={dataLoadArray} isWeekend={true} />
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should render week data', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ElecHalfHourChart dataLoad={dataLoadArray} isWeekend={false} />
</Provider>
)
- expect(wrapper.find('.week')).toBeTruthy()
+ expect(container.getElementsByClassName('week').length).toBeTruthy()
})
})
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
index 57088eb6d58a8c290fcfd722290ff7cf01da4596..f62d1ff5506e91ef57d8d556b8d805d03f32eaaf 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
@@ -1,6 +1,5 @@
-import { IconButton } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { PerformanceIndicator } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
@@ -10,7 +9,6 @@ import {
} from 'tests/__mocks__/enedisMonthlyAnalysisData.mock'
import { allLastFluidPrices } from 'tests/__mocks__/fluidPrice.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import ElecHalfHourMonthlyAnalysis from './ElecHalfHourMonthlyAnalysis'
jest.mock('components/Hooks/useExploration', () => {
@@ -21,10 +19,6 @@ jest.mock(
'components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart',
() => 'mock-elechalfhourchart'
)
-jest.mock(
- 'components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal',
- () => 'mock-elecinfomodal'
-)
const mockCheckDoctypeEntries = jest.fn()
jest.mock('services/consumption.service', () => {
@@ -62,13 +56,13 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
it('should be rendered correctly when isHalfHourActivated is false', async () => {
mockCheckDoctypeEntries.mockResolvedValueOnce(false)
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
it('should be rendered correctly when isHalfHourActivated is true', async () => {
@@ -81,13 +75,13 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
)
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
it('should change from weekend to week', async () => {
@@ -99,15 +93,14 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
mockDataLoadEnedisAnalysis
)
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find(IconButton).first().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.week').exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ await userEvent.click(screen.getAllByRole('button')[0])
+ expect(container.getElementsByClassName('week').length).toBeTruthy()
})
it('should call the ElecInfoModal with open = true when click on the button', async () => {
@@ -120,16 +113,13 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
)
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find('.btnText').first().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('mock-elecinfomodal').prop('open')?.valueOf()).toBe(
- true
- )
+ await waitFor(() => null, { container })
+ await userEvent.click(await screen.findByText('special_elec.showModal'))
+ expect(await screen.findByRole('dialog')).toBeInTheDocument()
})
})
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.spec.tsx
index 9524348096134b9c11095febedd2255ee79e62ab..f41b110bfd9928fd4e04cdd8b6d7a72aceec2cf1 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.spec.tsx
@@ -1,13 +1,12 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import React from 'react'
import ElecInfoModal from './ElecInfoModal'
describe('ElecInfoModal component', () => {
it('should be rendered correctly', () => {
- const component = mount(
+ const { baseElement } = render(
<ElecInfoModal open={true} handleCloseClick={jest.fn()} />
)
- expect(toJson(component)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
})
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
index e6a14291099cc5cd7e0e7255efc6f0e2513423df..8c4b0ebdce5bb65be7f044c0c3a84336cc594f8c 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
@@ -1,134 +1,119 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ElecHalfHourChart
- dataLoad={
- Array [
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- ]
- }
- isWeekend={true}
+<div>
+ <div
+ class="graph-elec-half-hour"
>
- <div
- className="graph-elec-half-hour"
+ <svg
+ height="170"
+ width="940"
>
- <svg
- height={170}
- width={940}
+ <g
+ class="axis y"
+ fill="none"
+ font-family="sans-serif"
+ font-size="10"
+ text-anchor="start"
+ transform="translate(880, 0)"
>
- <AxisRight
- fluidType={0}
- isAnalysis={true}
- marginRight={60}
- marginTop={0}
- width={940}
- yScale={[Function]}
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,140.5)"
>
- <g
- className="axis y"
- transform="translate(880, 0)"
+ <line
+ stroke="currentColor"
+ x2="-940"
/>
- </AxisRight>
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0
+ </text>
+ </g>
<g
- transform="translate(10,0)"
+ class="tick"
+ opacity="1"
+ transform="translate(0,82.16666666666666)"
>
- <Bar
- compare={false}
- compareDataload={null}
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- height={140}
- index={0}
- isDuel={false}
- isSwitching={false}
- key="0"
- timeStep={10}
- weekdays="weekend"
- xScale={[Function]}
- yScale={[Function]}
+ <line
+ stroke="currentColor"
+ x2="-940"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
>
- <g>
- <g
- className="barContainer "
- transform="translate(79.09090909090912, -40)"
+ 5 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,23.83333333333333)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-940"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 10 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ </g>
+ <g
+ transform="translate(10,0)"
+ >
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ class="background-undefined"
+ fill="#E0E0E0"
+ height="180"
+ width="711.8181818181818"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <rect
- className="background-undefined"
- fill="#E0E0E0"
- height={180}
- onClick={[Function]}
- width={711.8181818181818}
- x="0"
- y="0"
+ <stop
+ id="stop-color-1"
+ offset="0%"
/>
- </g>
- <g
- className="barFill"
- transform="translate(79.09090909090912, 0)"
- >
- <defs>
- <linearGradient
- id="gradient"
- x1="0"
- x2="0"
- y1="0"
- y2="1"
- >
- <stop
- id="stop-color-1"
- offset="0%"
- />
- <stop
- id="stop-color-2"
- offset="100%"
- />
- </linearGradient>
- </defs>
- <path
- className="bar-ELECTRICITY weekend bounce-3 delay--0"
- d="
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--0"
+ d="
M0,4
a4,4 0 0 1 4,-4
h-5
@@ -136,35 +121,33 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
v136
h-3
z"
- onAnimationEnd={[Function]}
- onClick={[Function]}
- />
- </g>
- <g
- transform="translate(79.09090909090912, 0)"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY weekend bounce-3 delay--0"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <defs>
- <linearGradient
- className="bar-ELECTRICITY weekend bounce-3 delay--0"
- id="gradient"
- x1="0"
- x2="0"
- y1="0"
- y2="1"
- >
- <stop
- id="stop-color-1"
- offset="0%"
- />
- <stop
- id="stop-color-2"
- offset="100%"
- />
- </linearGradient>
- </defs>
- <path
- className="bar-ELECTRICITY weekend bounce-3 delay--0"
- d="
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--0"
+ d="
M0,4
a4,4 0 0 1 4,-4
h-5
@@ -172,74 +155,48 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
v136
h-3
z"
- onAnimationEnd={[Function]}
- onClick={[Function]}
- />
- </g>
- </g>
- </Bar>
- <Bar
- compare={false}
- compareDataload={null}
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- height={140}
- index={1}
- isDuel={false}
- isSwitching={false}
- key="1"
- timeStep={10}
- weekdays="weekend"
- xScale={[Function]}
- yScale={[Function]}
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ class="background-undefined"
+ fill="#E0E0E0"
+ height="180"
+ width="711.8181818181818"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(79.09090909090912, 0)"
>
- <g>
- <g
- className="barContainer "
- transform="translate(79.09090909090912, -40)"
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <rect
- className="background-undefined"
- fill="#E0E0E0"
- height={180}
- onClick={[Function]}
- width={711.8181818181818}
- x="0"
- y="0"
+ <stop
+ id="stop-color-1"
+ offset="0%"
/>
- </g>
- <g
- className="barFill"
- transform="translate(79.09090909090912, 0)"
- >
- <defs>
- <linearGradient
- id="gradient"
- x1="0"
- x2="0"
- y1="0"
- y2="1"
- >
- <stop
- id="stop-color-1"
- offset="0%"
- />
- <stop
- id="stop-color-2"
- offset="100%"
- />
- </linearGradient>
- </defs>
- <path
- className="bar-ELECTRICITY weekend bounce-3 delay--1"
- d="
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--1"
+ d="
M0,4
a4,4 0 0 1 4,-4
h-5
@@ -247,35 +204,33 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
v136
h-3
z"
- onAnimationEnd={[Function]}
- onClick={[Function]}
- />
- </g>
- <g
- transform="translate(79.09090909090912, 0)"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY weekend bounce-3 delay--1"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <defs>
- <linearGradient
- className="bar-ELECTRICITY weekend bounce-3 delay--1"
- id="gradient"
- x1="0"
- x2="0"
- y1="0"
- y2="1"
- >
- <stop
- id="stop-color-1"
- offset="0%"
- />
- <stop
- id="stop-color-2"
- offset="100%"
- />
- </linearGradient>
- </defs>
- <path
- className="bar-ELECTRICITY weekend bounce-3 delay--1"
- d="
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--1"
+ d="
M0,4
a4,4 0 0 1 4,-4
h-5
@@ -283,74 +238,48 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
v136
h-3
z"
- onAnimationEnd={[Function]}
- onClick={[Function]}
- />
- </g>
- </g>
- </Bar>
- <Bar
- compare={false}
- compareDataload={null}
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- height={140}
- index={2}
- isDuel={false}
- isSwitching={false}
- key="2"
- timeStep={10}
- weekdays="weekend"
- xScale={[Function]}
- yScale={[Function]}
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ class="background-undefined"
+ fill="#E0E0E0"
+ height="180"
+ width="711.8181818181818"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(79.09090909090912, 0)"
>
- <g>
- <g
- className="barContainer "
- transform="translate(79.09090909090912, -40)"
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <rect
- className="background-undefined"
- fill="#E0E0E0"
- height={180}
- onClick={[Function]}
- width={711.8181818181818}
- x="0"
- y="0"
+ <stop
+ id="stop-color-1"
+ offset="0%"
/>
- </g>
- <g
- className="barFill"
- transform="translate(79.09090909090912, 0)"
- >
- <defs>
- <linearGradient
- id="gradient"
- x1="0"
- x2="0"
- y1="0"
- y2="1"
- >
- <stop
- id="stop-color-1"
- offset="0%"
- />
- <stop
- id="stop-color-2"
- offset="100%"
- />
- </linearGradient>
- </defs>
- <path
- className="bar-ELECTRICITY weekend bounce-3 delay--2"
- d="
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--2"
+ d="
M0,4
a4,4 0 0 1 4,-4
h-5
@@ -358,35 +287,33 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
v136
h-3
z"
- onAnimationEnd={[Function]}
- onClick={[Function]}
- />
- </g>
- <g
- transform="translate(79.09090909090912, 0)"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY weekend bounce-3 delay--2"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <defs>
- <linearGradient
- className="bar-ELECTRICITY weekend bounce-3 delay--2"
- id="gradient"
- x1="0"
- x2="0"
- y1="0"
- y2="1"
- >
- <stop
- id="stop-color-1"
- offset="0%"
- />
- <stop
- id="stop-color-2"
- offset="100%"
- />
- </linearGradient>
- </defs>
- <path
- className="bar-ELECTRICITY weekend bounce-3 delay--2"
- d="
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--2"
+ d="
M0,4
a4,4 0 0 1 4,-4
h-5
@@ -394,74 +321,48 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
v136
h-3
z"
- onAnimationEnd={[Function]}
- onClick={[Function]}
- />
- </g>
- </g>
- </Bar>
- <Bar
- compare={false}
- compareDataload={null}
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- height={140}
- index={3}
- isDuel={false}
- isSwitching={false}
- key="3"
- timeStep={10}
- weekdays="weekend"
- xScale={[Function]}
- yScale={[Function]}
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(79.09090909090912, -40)"
>
- <g>
- <g
- className="barContainer "
- transform="translate(79.09090909090912, -40)"
+ <rect
+ class="background-undefined"
+ fill="#E0E0E0"
+ height="180"
+ width="711.8181818181818"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <rect
- className="background-undefined"
- fill="#E0E0E0"
- height={180}
- onClick={[Function]}
- width={711.8181818181818}
- x="0"
- y="0"
+ <stop
+ id="stop-color-1"
+ offset="0%"
/>
- </g>
- <g
- className="barFill"
- transform="translate(79.09090909090912, 0)"
- >
- <defs>
- <linearGradient
- id="gradient"
- x1="0"
- x2="0"
- y1="0"
- y2="1"
- >
- <stop
- id="stop-color-1"
- offset="0%"
- />
- <stop
- id="stop-color-2"
- offset="100%"
- />
- </linearGradient>
- </defs>
- <path
- className="bar-ELECTRICITY weekend bounce-3 delay--3"
- d="
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--3"
+ d="
M0,4
a4,4 0 0 1 4,-4
h-5
@@ -469,35 +370,33 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
v136
h-3
z"
- onAnimationEnd={[Function]}
- onClick={[Function]}
- />
- </g>
- <g
- transform="translate(79.09090909090912, 0)"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY weekend bounce-3 delay--3"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <defs>
- <linearGradient
- className="bar-ELECTRICITY weekend bounce-3 delay--3"
- id="gradient"
- x1="0"
- x2="0"
- y1="0"
- y2="1"
- >
- <stop
- id="stop-color-1"
- offset="0%"
- />
- <stop
- id="stop-color-2"
- offset="100%"
- />
- </linearGradient>
- </defs>
- <path
- className="bar-ELECTRICITY weekend bounce-3 delay--3"
- d="
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--3"
+ d="
M0,4
a4,4 0 0 1 4,-4
h-5
@@ -505,158 +404,50 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
v136
h-3
z"
- onAnimationEnd={[Function]}
- onClick={[Function]}
- />
- </g>
- </g>
- </Bar>
+ />
+ </g>
</g>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- ]
- }
- height={170}
- isDuel={false}
- marginBottom={30}
- marginLeft={10}
- timeStep={10}
- xScale={[Function]}
+ </g>
+ <g
+ class="axis x"
+ transform="translate(10, 140)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(79.09090909090912, 0)"
>
- <g
- className="axis x"
- transform="translate(10, 140)"
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ x="355.9090909090909"
+ y="10"
>
- <g
- className="tick"
- key="0"
- opacity="1"
- transform="translate(79.09090909090912, 0)"
- >
- <TextAxis
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- displayAllDays={false}
- index={0}
- selectedDate={"2021-07-01T00:00:00.000Z"}
- timeStep={10}
- width={355.9090909090909}
- >
- <text
- dy="0.71em"
- x={355.9090909090909}
- y="10"
- >
- <tspan
- className="tick-text chart-ticks-x-text"
- textAnchor="middle"
- >
- 0
- </tspan>
- </text>
- </TextAxis>
- </g>
- <g
- className="tick"
- key="1"
- opacity="1"
- transform="translate(79.09090909090912, 0)"
- >
- <TextAxis
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- displayAllDays={false}
- index={1}
- selectedDate={"2021-07-01T00:00:00.000Z"}
- timeStep={10}
- width={355.9090909090909}
- />
- </g>
- <g
- className="tick"
- key="2"
- opacity="1"
- transform="translate(79.09090909090912, 0)"
- >
- <TextAxis
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- displayAllDays={false}
- index={2}
- selectedDate={"2021-07-01T00:00:00.000Z"}
- timeStep={10}
- width={355.9090909090909}
- />
- </g>
- <g
- className="tick"
- key="3"
- opacity="1"
- transform="translate(79.09090909090912, 0)"
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ text-anchor="middle"
>
- <TextAxis
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- displayAllDays={false}
- index={3}
- selectedDate={"2021-07-01T00:00:00.000Z"}
- timeStep={10}
- width={355.9090909090909}
- />
- </g>
- </g>
- </AxisBottom>
- </svg>
- </div>
- </ElecHalfHourChart>
-</Provider>
+ 0
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(79.09090909090912, 0)"
+ />
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(79.09090909090912, 0)"
+ />
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(79.09090909090912, 0)"
+ />
+ </g>
+ </svg>
+ </div>
+</div>
`;
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index 001bf7012bf8018fbd8c6957ecdaccdb47b07921..e4058feef99e3df1d3e78658d97e488bcf281631 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -1,413 +1,127 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when isHalfHourActivated is false 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ElecHalfHourMonthlyAnalysis
- perfIndicator={
- Object {
- "compareValue": null,
- "percentageVariation": null,
- "price": null,
- "value": 10,
- }
- }
+<div>
+ <div
+ class="special-elec-container"
>
- <div
- className="special-elec-container"
+ <svg
+ class="elec-icon styles__icon___23x3R"
+ height="42"
+ width="42"
>
- <Icon
- className="elec-icon"
- icon="test-file-stub"
- size={42}
- spin={false}
- >
- <Component
- className="elec-icon styles__icon___23x3R"
- height={42}
- style={Object {}}
- width={42}
- >
- <svg
- className="elec-icon styles__icon___23x3R"
- height={42}
- style={Object {}}
- width={42}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <div
- className="text-18-normal title"
- >
- special_elec.title
- </div>
- <div
- className="activation-text text-18-normal"
- >
- timestep.half_an_hour.analysis_waiting_data
- </div>
- <mock-elecinfomodal
- handleCloseClick={[Function]}
- open={false}
+ <use
+ xlink:href="#test-file-stub"
/>
+ </svg>
+ <div
+ class="text-18-normal title"
+ >
+ special_elec.title
</div>
- </ElecHalfHourMonthlyAnalysis>
-</Provider>
+ <div
+ class="activation-text text-18-normal"
+ >
+ timestep.half_an_hour.analysis_waiting_data
+ </div>
+ </div>
+</div>
`;
exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when isHalfHourActivated is true 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ElecHalfHourMonthlyAnalysis
- perfIndicator={
- Object {
- "compareValue": null,
- "percentageVariation": null,
- "price": null,
- "value": 10,
- }
- }
+<div>
+ <div
+ class="special-elec-container"
>
+ <svg
+ class="elec-icon styles__icon___23x3R"
+ height="42"
+ width="42"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="special-elec-container"
+ class="text-18-normal title"
>
- <Icon
- className="elec-icon"
- icon="test-file-stub"
- size={42}
- spin={false}
+ special_elec.title
+ </div>
+ <div
+ class="navigator"
+ >
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ class="MuiButtonBase-root MuiIconButton-root arrow-prev"
+ tabindex="0"
+ type="button"
>
- <Component
- className="elec-icon styles__icon___23x3R"
- height={42}
- style={Object {}}
- width={42}
+ <span
+ class="MuiIconButton-label"
>
<svg
- className="elec-icon styles__icon___23x3R"
- height={42}
- style={Object {}}
- width={42}
+ class="styles__icon___23x3R"
+ height="24"
+ width="24"
>
<use
- xlinkHref="#test-file-stub"
+ xlink:href="#test-file-stub"
/>
</svg>
- </Component>
- </Icon>
- <div
- className="text-18-normal title"
- >
- special_elec.title
- </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
<div
- className="navigator"
+ class="average text-18-normal"
>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-prev"
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-prev"
- 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",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-prev"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-prev"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="consumption.accessibility.button_previous_value"
- className="MuiButtonBase-root MuiIconButton-root arrow-prev"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- 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={24}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <svg
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <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
- className="average text-18-normal"
+ class="text-1"
>
- <div
- className="text-1"
- >
- special_elec.average
- </div>
- <div
- className="text-2 text-18-bold"
- >
- special_elec.weektype
-
- <span
- className="weekend"
- >
- special_elec.weekend
- </span>
- </div>
+ special_elec.average
</div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-next"
- onClick={[Function]}
+ <div
+ class="text-2 text-18-bold"
>
- <ForwardRef(IconButton)
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-next"
- 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",
- }
- }
- onClick={[Function]}
+ special_elec.weektype
+
+ <span
+ class="weekend"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-next"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-next"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="consumption.accessibility.button_previous_value"
- className="MuiButtonBase-root MuiIconButton-root arrow-next"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- 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={24}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <svg
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <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))>
+ special_elec.weekend
+ </span>
+ </div>
</div>
- <p
- className="text-20-bold no_data"
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ class="MuiButtonBase-root MuiIconButton-root arrow-next"
+ tabindex="0"
+ type="button"
>
- analysis.no_data
- </p>
- <mock-elecinfomodal
- handleCloseClick={[Function]}
- open={false}
- />
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="24"
+ width="24"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </ElecHalfHourMonthlyAnalysis>
-</Provider>
+ <p
+ class="text-20-bold no_data"
+ >
+ analysis.no_data
+ </p>
+ </div>
+</div>
`;
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
index d77706c0830547b97016cdb499cc9751fc49dbf1..55b41b0e8aa630ef74c40b99539bdeea6581b22d 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
@@ -1,849 +1,101 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ElecInfoModal component should be rendered correctly 1`] = `
-<ElecInfoModal
- handleCloseClick={[MockFunction]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- elec_info_modal.accessibility.window_title
- </div>
- <button
- aria-label="elec_info_modal.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="elecInfoModal"
- >
- <div
- class="title text-18-bold"
- >
- elec_info_modal.title1
- </div>
- <div
- class="text"
- >
- elec_info_modal.text1
- <br />
- elec_info_modal.text2
- </div>
- <div
- class="title text-18-bold"
- >
- elec_info_modal.title2
- </div>
- <div
- class="text"
- >
- elec_info_modal.text3
- <br />
- elec_info_modal.text4
- <br />
- elec_info_modal.text5
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ elec_info_modal.accessibility.window_title
+ </div>
+ <button
+ aria-label="elec_info_modal.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- elec_info_modal.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="elec_info_modal.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="elec_info_modal.accessibility.button_close"
- className="modal-paper-close-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",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="elec_info_modal.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="elec_info_modal.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="elec_info_modal.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-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
- className="elecInfoModal"
- >
- <div
- className="title text-18-bold"
- >
- elec_info_modal.title1
- </div>
- <div
- className="text"
- >
- elec_info_modal.text1
- <br />
- elec_info_modal.text2
- </div>
- <div
- className="title text-18-bold"
- >
- elec_info_modal.title2
- </div>
- <div
- className="text"
- >
- elec_info_modal.text3
- <br />
- elec_info_modal.text4
- <br />
- elec_info_modal.text5
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</ElecInfoModal>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="elecInfoModal"
+ >
+ <div
+ class="title text-18-bold"
+ >
+ elec_info_modal.title1
+ </div>
+ <div
+ class="text"
+ >
+ elec_info_modal.text1
+ <br />
+ elec_info_modal.text2
+ </div>
+ <div
+ class="title text-18-bold"
+ >
+ elec_info_modal.title2
+ </div>
+ <div
+ class="text"
+ >
+ elec_info_modal.text3
+ <br />
+ elec_info_modal.text4
+ <br />
+ elec_info_modal.text5
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.spec.tsx b/src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.spec.tsx
index 85a452c6db5e384be71fdd6129a52102096fbf82..01090f414664dc1c87ae48cda7eaea5e1d4b19dd 100644
--- a/src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.spec.tsx
+++ b/src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.spec.tsx
@@ -1,15 +1,17 @@
+import { render, screen } from '@testing-library/react'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import IncompleteDataWarning from './IncompleteDataWarning'
describe('IncompleteDataWarning', () => {
- it('renders component correctly', () => {
+ it('renders component correctly and have correct snapshot', async () => {
const incompleteFluidTypes = [FluidType.ELECTRICITY, FluidType.GAS]
- const wrapper = mount(
+ const { container } = render(
<IncompleteDataWarning incompleteDataFluids={incompleteFluidTypes} />
)
- expect(wrapper.find('h1').text()).toBe('analysis.warning_title')
- expect(wrapper.find('p').text()).toBe('analysis.warning_text')
+ expect(await screen.findByRole('heading')).toHaveTextContent(
+ 'analysis.warning_title'
+ )
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Analysis/IncompleteDataWarning/__snapshots__/IncompleteDataWarning.spec.tsx.snap b/src/components/Analysis/IncompleteDataWarning/__snapshots__/IncompleteDataWarning.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..a289c727dac65068df8abecf0c6ec289f80bf64d
--- /dev/null
+++ b/src/components/Analysis/IncompleteDataWarning/__snapshots__/IncompleteDataWarning.spec.tsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IncompleteDataWarning renders component correctly and have correct snapshot 1`] = `
+<div>
+ <div
+ class="analysis-warning"
+ >
+ <div
+ class="warning-header"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="30"
+ width="30"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <h1>
+ analysis.warning_title
+ </h1>
+ </div>
+ <div
+ class="warning-content"
+ >
+ <p>
+ analysis.warning_text
+ </p>
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx
index 8dda881935a9c200430556bf76648e16b79fa0f0..18977eb0ddad4f84dfd778067a7610ab5b7d9b52 100644
--- a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx
+++ b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx
@@ -1,70 +1,71 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { graphData } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import MaxConsumptionCard from './MaxConsumptionCard'
-const mockGetMaxLoad = jest.fn(() => 0)
const mockGetGraphData = jest.fn(() => graphData)
jest.mock('services/consumption.service', () => {
return jest.fn(() => ({
- getMaxLoad: mockGetMaxLoad,
+ getMaxLoad: jest.fn(() => 0),
getGraphData: mockGetGraphData,
}))
})
-jest.mock('components/Charts/BarChart', () => 'mock-BarChart')
-
describe('MaxConsumptionCard component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<MaxConsumptionCard
fluidsWithData={[FluidType.ELECTRICITY, FluidType.GAS]}
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
- expect(wrapper.find('mock-BarChart').exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
it('should be rendered with one fluid and not display arrows', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<MaxConsumptionCard fluidsWithData={[FluidType.ELECTRICITY]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.arrow').exists()).toBeFalsy()
+ await waitFor(() => null, { container })
+ const [prevButton, nextButton] = screen.getAllByRole('button')
+ expect(prevButton).toBeDisabled()
+ expect(nextButton).toBeDisabled()
})
it('should be rendered with several fluids and click navigate between fluid', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<MaxConsumptionCard
fluidsWithData={[FluidType.ELECTRICITY, FluidType.GAS]}
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.arrow-next').exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ const [prevButton, nextButton] = screen.getAllByRole('button')
+
// navigate next
- wrapper.find('.arrow-next').first().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluid').text()).toBe('FLUID.GAS.LABEL')
- wrapper.find('.arrow-next').first().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluid').text()).toBe('FLUID.ELECTRICITY.LABEL')
+ await userEvent.click(nextButton)
+ await waitFor(() => null, { container })
+ expect(screen.getByText('FLUID.GAS.LABEL')).toBeInTheDocument()
+
+ await userEvent.click(nextButton)
+ await waitFor(() => null, { container })
+ expect(screen.getByText('FLUID.ELECTRICITY.LABEL')).toBeInTheDocument()
+
// navigate prev
- wrapper.find('.arrow-prev').first().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluid').text()).toBe('FLUID.GAS.LABEL')
- wrapper.find('.arrow-prev').first().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluid').text()).toBe('FLUID.ELECTRICITY.LABEL')
+ await userEvent.click(prevButton)
+ await waitFor(() => null, { container })
+ expect(screen.getByText('FLUID.GAS.LABEL')).toBeInTheDocument()
+
+ await userEvent.click(prevButton)
+ await waitFor(() => null, { container })
+ expect(screen.getByText('FLUID.ELECTRICITY.LABEL')).toBeInTheDocument()
})
})
diff --git a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
index 3f71b5b1e9143890683e03ac244492606594c03f..42429b5af412be83452c3d86aceef5db57b6677a 100644
--- a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
+++ b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
@@ -112,6 +112,7 @@ const MaxConsumptionCard = ({
aria-label={t('consumption.accessibility.button_previous_value')}
onClick={() => handleFluidChange(-1)}
className="arrow-prev"
+ disabled={fluidsWithData.length <= 1}
>
<Icon icon={LeftArrowIcon} size={24} />
</IconButton>
@@ -122,6 +123,7 @@ const MaxConsumptionCard = ({
aria-label={t('consumption.accessibility.button_next_value')}
onClick={() => handleFluidChange(1)}
className="arrow-next"
+ disabled={fluidsWithData.length <= 1}
>
<Icon icon={RightArrowIcon} size={24} />
</IconButton>
@@ -132,11 +134,11 @@ const MaxConsumptionCard = ({
<StyledIcon icon={GraphIcon} size={38} />
<div className="text-16-normal title">{t('analysis.max_day')}</div>
<div className="fluid-navigation">
- {fluidsWithData.length > 1 && buttonPrev()}
+ {buttonPrev()}
<div className={`text-20-bold fluid ${currentFluidSlug.toLowerCase()}`}>
{t(`FLUID.${currentFluidSlug}.LABEL`)}
</div>
- {fluidsWithData.length > 1 && buttonNext()}
+ {buttonNext()}
</div>
<div className="data-container">
diff --git a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index 10886a7a5e2e3a63fc7d358651ab0e4b56f360b9..3ab2406153e28c2d338addd47c2d264f0a895368 100644
--- a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -1,540 +1,456 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <MaxConsumptionCard
- fluidsWithData={
- Array [
- 0,
- 2,
- ]
- }
+<div>
+ <div
+ class="max-consumption-container"
>
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="text-16-normal title"
+ >
+ analysis.max_day
+ </div>
<div
- className="max-consumption-container"
+ class="fluid-navigation"
>
- <StyledIcon
- icon="test-file-stub"
- size={38}
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ class="MuiButtonBase-root MuiIconButton-root arrow-prev"
+ tabindex="0"
+ type="button"
>
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={38}
- spin={false}
+ <span
+ class="MuiIconButton-label"
>
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={38}
- style={Object {}}
- width={38}
+ <svg
+ class="styles__icon___23x3R"
+ height="24"
+ width="24"
>
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={38}
- style={Object {}}
- width={38}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
<div
- className="text-16-normal title"
+ class="text-20-bold fluid electricity"
>
- analysis.max_day
+ FLUID.ELECTRICITY.LABEL
</div>
- <div
- className="fluid-navigation"
+ <button
+ aria-label="consumption.accessibility.button_next_value"
+ class="MuiButtonBase-root MuiIconButton-root arrow-next"
+ tabindex="0"
+ type="button"
>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-prev"
- onClick={[Function]}
+ <span
+ class="MuiIconButton-label"
>
- <ForwardRef(IconButton)
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-prev"
- 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",
- }
- }
- onClick={[Function]}
+ <svg
+ class="styles__icon___23x3R"
+ height="24"
+ width="24"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-prev"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-prev"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="consumption.accessibility.button_previous_value"
- className="MuiButtonBase-root MuiIconButton-root arrow-prev"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- 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={24}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <svg
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <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>
+ <div
+ class="data-container"
+ >
+ <div
+ class="text-24-bold maxDay-date"
+ >
+ jeudi 01 octobre
+ </div>
+ <div>
<div
- className="text-20-bold fluid electricity"
- >
- FLUID.ELECTRICITY.LABEL
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption.accessibility.button_next_value"
- className="arrow-next"
- onClick={[Function]}
+ class="dataloadvisualizer-section"
>
- <ForwardRef(IconButton)
- aria-label="consumption.accessibility.button_next_value"
- className="arrow-next"
- 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",
- }
- }
- onClick={[Function]}
+ <div
+ class="dataloadvisualizer-value text-36-bold electricity"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption.accessibility.button_next_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-next"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
+ 69,18
+ <span
+ class="text-18-normal"
>
- <ForwardRef(ButtonBase)
- aria-label="consumption.accessibility.button_next_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-next"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="consumption.accessibility.button_next_value"
- className="MuiButtonBase-root MuiIconButton-root arrow-next"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- 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={24}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <svg
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <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))>
+ FLUID.ELECTRICITY.UNIT
+ </span>
+ </div>
+ <div
+ class="dataloadvisualizer-euro text-16-normal electricity"
+ >
+ 12,04 €
+ </div>
+ </div>
</div>
- <div
- className="data-container"
+ <svg
+ height="250"
+ width="940"
>
- <div
- className="text-24-bold maxDay-date"
+ <g
+ class="axis y"
+ fill="none"
+ font-family="sans-serif"
+ font-size="10"
+ text-anchor="start"
+ transform="translate(885, 20)"
>
- jeudi 01 octobre
- </div>
- <div>
- <DataloadSection
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[Function]}
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,180.5)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-940"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,128.46206434490742)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-940"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 20 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,76.42412868981485)"
>
- <div
- className="dataloadvisualizer-section"
+ <line
+ stroke="currentColor"
+ x2="-940"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
>
- <div
- className="dataloadvisualizer-value text-36-bold electricity"
- >
- <DataloadSectionValue
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[Function]}
+ 40 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,24.386193034722293)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-940"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 60 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ </g>
+ <g
+ transform="translate(10,20)"
+ >
+ <g>
+ <g
+ class="barContainer disabled"
+ transform="translate(54.6875, -40)"
+ >
+ <rect
+ class="background-false"
+ fill="#E0E0E0"
+ height="220"
+ width="218.75"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(54.6875, 0)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- 69,18
- <span
- className="text-18-normal"
- >
- FLUID.ELECTRICITY.UNIT
- </span>
- </DataloadSectionValue>
- </div>
- <DataloadSectionDetail
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- >
- <div
- className="dataloadvisualizer-euro text-16-normal electricity"
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined disabled bounce-3 delay--0"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h210.75
+ a4,4 0 0 1 4,4
+ v176
+ h-218.75
+ z"
+ />
+ </g>
+ <g
+ transform="translate(54.6875, 0)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY undefined disabled bounce-3 delay--0"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- 12,04 €
- </div>
- </DataloadSectionDetail>
- </div>
- </DataloadSection>
- </div>
- <mock-BarChart
- chartData={
- Object {
- "actualData": Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ],
- "comparisonData": Array [
- Object {
- "date": "2020-09-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 54.090509999999995,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 35.284358,
- },
- Object {
- "state": "VALID",
- "value": 0.707513,
- },
- Object {
- "state": "VALID",
- "value": 18.098639,
- },
- ],
- },
- Object {
- "date": "2020-09-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 56.57427,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 36.904565999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.740001,
- },
- Object {
- "state": "VALID",
- "value": 18.929703,
- },
- ],
- },
- Object {
- "date": "2020-09-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ],
- }
- }
- clickable={false}
- fluidType={0}
- height={250}
- isSwitching={false}
- showCompare={false}
- timeStep={20}
- width={940}
- />
- </div>
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined disabled bounce-3 delay--0"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h210.75
+ a4,4 0 0 1 4,4
+ v176
+ h-218.75
+ z"
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer disabled"
+ transform="translate(328.125, -40)"
+ >
+ <rect
+ class="background-false"
+ fill="#E0E0E0"
+ height="220"
+ width="218.75"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(328.125, 19.57862281603289)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined disabled bounce-3 delay--1"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h210.75
+ a4,4 0 0 1 4,4
+ v156.4213771839671
+ h-218.75
+ z"
+ />
+ </g>
+ <g
+ transform="translate(328.125, 19.57862281603289)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY undefined disabled bounce-3 delay--1"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined disabled bounce-3 delay--1"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h210.75
+ a4,4 0 0 1 4,4
+ v156.4213771839671
+ h-218.75
+ z"
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer disabled"
+ transform="translate(601.5625, -40)"
+ >
+ <rect
+ class="background-false"
+ fill="#E0E0E0"
+ height="220"
+ width="218.75"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(601.5625, 168.73935065329292)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY bar-UNCOMING undefined disabled bounce-3 delay--2"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h210.75
+ a4,4 0 0 1 4,4
+ v7.260649346707083
+ h-218.75
+ z"
+ />
+ </g>
+ </g>
+ </g>
+ <g
+ class="axis x"
+ transform="translate(10, 200)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(54.6875, 0)"
+ >
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ transform="translate(109.375)"
+ y="10"
+ />
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(328.125, 0)"
+ >
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ transform="translate(109.375)"
+ y="10"
+ />
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(601.5625, 0)"
+ >
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ transform="translate(109.375)"
+ y="10"
+ />
+ </g>
+ </g>
+ </svg>
</div>
- </MaxConsumptionCard>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Analysis/MonthlyAnalysis.spec.tsx b/src/components/Analysis/MonthlyAnalysis.spec.tsx
index b6f18e5460fa79ce0379d5e9560cfb91fee9f7f3..061b40454e8797e69f5397a17c55e3ff396a1ad6 100644
--- a/src/components/Analysis/MonthlyAnalysis.spec.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.spec.tsx
@@ -1,12 +1,10 @@
+import { render, waitFor } from '@testing-library/react'
import MonthlyAnalysis from 'components/Analysis/MonthlyAnalysis'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { PerformanceIndicator } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
const mockPI: PerformanceIndicator[] = [
{ value: 5, compareValue: 10, percentageVariation: 50 },
@@ -14,13 +12,11 @@ const mockPI: PerformanceIndicator[] = [
]
jest.mock('services/consumption.service', () => {
- return jest.fn(() => {
- return {
- getFluidsWithDataForTimePeriod: jest.fn(() => [0, 1, 2]),
- getFluidsWithIncompleteData: jest.fn(() => [0]),
- getPerformanceIndicators: jest.fn(() => mockPI),
- }
- })
+ return jest.fn(() => ({
+ getFluidsWithDataForTimePeriod: jest.fn(() => [0, 1, 2]),
+ getFluidsWithIncompleteData: jest.fn(() => [0]),
+ getPerformanceIndicators: jest.fn(() => mockPI),
+ }))
})
jest.mock('components/Analysis/Comparison/Comparison', () => 'mock-comparison')
@@ -46,7 +42,7 @@ window.scrollTo = jest.fn()
describe('MonthlyAnalysis component', () => {
it('should be rendered correctly', async () => {
const store = createMockEcolyoStore()
- const wrapper = mount(
+ const { container } = render(
<BrowserRouter>
<Provider store={store}>
<MonthlyAnalysis
@@ -56,7 +52,7 @@ describe('MonthlyAnalysis component', () => {
</Provider>
</BrowserRouter>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Analysis/NoKonnector/NoAnalysisModal.spec.tsx b/src/components/Analysis/NoKonnector/NoAnalysisModal.spec.tsx
index fd629dca0cdd45dd563fb49607c3840e39e1ceb3..8245f6e52dbcebc615b1e833afadd06d4132e2cf 100644
--- a/src/components/Analysis/NoKonnector/NoAnalysisModal.spec.tsx
+++ b/src/components/Analysis/NoKonnector/NoAnalysisModal.spec.tsx
@@ -1,13 +1,11 @@
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
import React from 'react'
import NoAnalysisModal from './NoAnalysisModal'
describe('NoAnalysisModal component', () => {
- it('should be rendered correctly', () => {
- const wrapper = mount(<NoAnalysisModal open={true} onClose={jest.fn()} />)
- expect(wrapper.find(Dialog).exists()).toBeTruthy()
- expect(wrapper.find(Button).exists()).toBeTruthy()
+ it('should be render a modal with a button', () => {
+ render(<NoAnalysisModal open={true} onClose={jest.fn()} />)
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ expect(screen.getAllByRole('button').length).toBe(2)
})
})
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx b/src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx
index 8bb603abffedaf7fcc092ff60504c77e2440f05c..20b645a30b567aa285443488c39d063fcc157972 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx
@@ -1,18 +1,13 @@
-/* eslint-disable react/display-name */
-import { Accordion } from '@material-ui/core'
-import Button from '@material-ui/core/Button'
-import { FluidType } from 'enums'
-import { mount } from 'enzyme'
-import { PerformanceIndicator } from 'models'
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import { profileData } from 'tests/__mocks__/profileData.mock'
import {
- mockMonthlyForecastJanuaryTestProfile1,
- profileTypeData,
-} from 'tests/__mocks__/profileType.mock'
-import { createMockEcolyoStore, mockAnalysisState } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
+ createMockEcolyoStore,
+ mockAnalysisState,
+ mockProfileState,
+} from 'tests/__mocks__/store'
import ProfileComparator from './ProfileComparator'
const mockedNavigate = jest.fn()
@@ -28,10 +23,9 @@ jest.mock('services/profileType.service', () => {
}))
})
-const mockGetProfileTypeData = jest.fn()
jest.mock('services/profileTypeEntity.service', () => {
return jest.fn(() => ({
- getProfileType: mockGetProfileTypeData,
+ getProfileType: jest.fn(),
}))
})
@@ -40,9 +34,9 @@ jest.mock(
() => 'mock-profileComparatorRow'
)
-const modifiedProfile = { ...profileData, isProfileTypeCompleted: true }
-const store = createMockEcolyoStore({
- profile: modifiedProfile,
+const profileCompleted = { ...profileData, isProfileTypeCompleted: true }
+const storeProfileCompleted = createMockEcolyoStore({
+ profile: profileCompleted,
analysis: mockAnalysisState,
})
@@ -70,141 +64,41 @@ const performanceIndicators = [
]
describe('AnalysisConsumption component', () => {
- it('should be rendered correctly', async () => {
- const wrapper = mount(
- <Provider store={store}>
- <ProfileComparator
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find(Accordion).exists()).toBeTruthy()
- expect(wrapper.find('mock-profileComparatorRow').length).toBe(4)
- })
-
- it('should be rendered correctly with no profil set', async () => {
- const mockAggregatedPerformanceIndicator: PerformanceIndicator = {
- compareValue: 160.42797399999998,
- percentageVariation: null,
- value: null,
- }
- const wrapper = mount(
- <Provider store={store}>
- <ProfileComparator
- aggregatedPerformanceIndicator={mockAggregatedPerformanceIndicator}
- performanceIndicators={performanceIndicators}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find(Button).exists()).toBeTruthy()
- })
-
- it('should be rendered correctly with null aggregated performance indicator', async () => {
- const mockAggregatedPerformanceIndicator: PerformanceIndicator = {
- compareValue: 160.42797399999998,
- percentageVariation: null,
- value: null,
- }
- const wrapper = mount(
- <Provider store={store}>
- <ProfileComparator
- aggregatedPerformanceIndicator={mockAggregatedPerformanceIndicator}
- performanceIndicators={performanceIndicators}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find(Accordion).exists()).toBeTruthy()
- expect(wrapper.find('mock-profileComparatorRow').length).toBe(4)
- })
-
- it('should be rendered correctly without fluid', async () => {
- const wrapper = mount(
- <Provider store={store}>
- <ProfileComparator
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(
- wrapper.find('mock-profileComparatorRow').first().prop('fluid')
- ).toBe(FluidType.MULTIFLUID)
- })
-
- it('should be rendered correctly with all fluids connected', async () => {
- const store = createMockEcolyoStore({
- profile: modifiedProfile,
- profileType: profileTypeData,
- global: {
- fluidTypes: [FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS],
- },
- analysis: {
- ...mockAnalysisState,
- analysisMonth: profileData.monthlyAnalysisDate,
- },
+ it('should be rendered correctly with profile NOT completed and go to profile button', async () => {
+ const storeProfileNotCompleted = createMockEcolyoStore({
+ profile: mockProfileState,
+ analysis: mockAnalysisState,
})
- mockGetMonthlyForecast.mockReturnValue(
- mockMonthlyForecastJanuaryTestProfile1
- )
- const wrapper = mount(
- <Provider store={store}>
+ const { container } = render(
+ <Provider store={storeProfileNotCompleted}>
<ProfileComparator
aggregatedPerformanceIndicator={performanceIndicator}
performanceIndicators={performanceIndicators}
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(mockGetMonthlyForecast).toHaveBeenCalledWith(
- profileData.monthlyAnalysisDate.month - 1
- )
- expect(
- wrapper.find('mock-profileComparatorRow').first().prop('fluid')
- ).toBe(FluidType.MULTIFLUID)
- })
-
- it('should be rendered correctly with 2 fluids connected', async () => {
- const store = createMockEcolyoStore({
- profile: modifiedProfile,
- global: { fluidTypes: [FluidType.ELECTRICITY, FluidType.WATER] },
- analysis: { analysisMonth: profileData.monthlyAnalysisDate },
- })
- mockGetMonthlyForecast.mockReturnValue(
- mockMonthlyForecastJanuaryTestProfile1
- )
- const wrapper = mount(
- <Provider store={store}>
- <ProfileComparator
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(mockGetMonthlyForecast).toHaveBeenCalledWith(
- profileData.monthlyAnalysisDate.month - 1
- )
- expect(
- wrapper.find('mock-profileComparatorRow').first().prop('fluid')
- ).toBe(FluidType.MULTIFLUID)
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
+ expect(screen.getByTestId('goToProfile')).toBeInTheDocument()
+ expect(screen.queryByTestId('iconGoToProfile')).not.toBeInTheDocument()
})
- it('should redirect to profileType form when click on mui button', async () => {
- const wrapper = mount(
- <Provider store={store}>
+ it('should be rendered correctly with profile completed and go to profile edition on click', async () => {
+ const { container } = render(
+ <Provider store={storeProfileCompleted}>
<ProfileComparator
aggregatedPerformanceIndicator={performanceIndicator}
performanceIndicators={performanceIndicators}
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find(Button).first().simulate('click')
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
+ const rows = container.querySelectorAll('mock-profilecomparatorrow')
+ expect(rows.length).toBe(4)
+ expect(screen.getByTestId('iconGoToProfile')).toBeInTheDocument()
+ expect(screen.queryByTestId('goToProfile')).not.toBeInTheDocument()
+ await userEvent.click(screen.getByTestId('iconGoToProfile'))
expect(mockedNavigate).toHaveBeenCalledWith('/profileType')
})
})
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
index 052085402dae779978c894671a7bd5bb0c815757..638f38b08de144e8a56400a3141ae0cd3d23574b 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
@@ -140,6 +140,7 @@ const ProfileComparator = ({
label: 'text-18-bold',
}}
size="large"
+ data-testid="goToProfile"
>
{t('analysis.accessibility.button_go_to_profil')}
</Button>
@@ -253,6 +254,7 @@ const ProfileComparator = ({
aria-label={t('analysis.accessibility.button_go_to_profil')}
onClick={() => navigate('/profileType')}
className="btnIcon"
+ data-testid="iconGoToProfile"
>
<StyledIcon icon={ProfileEditIcon} size={40} />
</Button>
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx
index bf62f78673d796a587fb730f9716389a48084137..c1f7609879ef1d7bd1bd3e18a9515a17f560732e 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx
@@ -1,5 +1,5 @@
+import { render, screen } from '@testing-library/react'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
import { MonthlyForecast } from 'models'
import React from 'react'
import { mockMonthlyForecastJanuaryTestProfile1 } from 'tests/__mocks__/profileType.mock'
@@ -8,152 +8,182 @@ import ProfileComparatorRow from './ProfileComparatorRow'
describe('AnalysisConsumptionRow component', () => {
const userPriceConsumption = 20
const homePriceConsumption = 18
- const performanceValue: number | null = 25
- const forecast: MonthlyForecast = mockMonthlyForecastJanuaryTestProfile1
- const connected = true
- const noData = false
+ const performanceValue = 25
- it('should be rendered correctly for Multifluid and at least fluid connected', async () => {
- const mockPerformanceValue: number | null = null
- const wrapper = mount(
- <ProfileComparatorRow
- fluid={FluidType.MULTIFLUID}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={mockPerformanceValue}
- forecast={forecast}
- connected={connected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-multifluid').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe('20,00 €')
- expect(wrapper.find('.price').last().text()).toBe('18,00 €')
- expect(wrapper.find('.graph').exists()).toBeTruthy()
- expect(wrapper.find('.not-connected').exists()).toBeFalsy()
- })
+ describe('Multifluid row', () => {
+ it('should be rendered correctly for Multifluid and at least fluid connected', async () => {
+ const { container } = render(
+ <ProfileComparatorRow
+ fluid={FluidType.MULTIFLUID}
+ userPriceConsumption={20}
+ homePriceConsumption={18}
+ performanceValue={null}
+ forecast={mockMonthlyForecastJanuaryTestProfile1}
+ connected={true}
+ noData={false}
+ />
+ )
+ expect(
+ container.getElementsByClassName('consumption-multifluid').length
+ ).toBeTruthy()
+ expect(screen.getByTestId('userPrice')).toHaveTextContent('20,00 €')
+ expect(screen.getByTestId('averagePrice')).toHaveTextContent('18,00 €')
+ expect(container.getElementsByClassName('graph').length).toBeTruthy()
+ expect(
+ container.getElementsByClassName('not-connected').length
+ ).toBeFalsy()
+ })
- it('should be rendered correctly for Multifluid and at none fluid connected', async () => {
- const mockPerformanceValue: number | null = null
- const mockConnected = false
- const wrapper = mount(
- <ProfileComparatorRow
- fluid={FluidType.MULTIFLUID}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={mockPerformanceValue}
- forecast={forecast}
- connected={mockConnected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-multifluid').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe('analysis.no_data')
- expect(wrapper.find('.price').last().text()).toBe('18,00 €')
- expect(wrapper.find('.graph').exists()).toBeFalsy()
- expect(wrapper.find('.not-connected').exists()).toBeTruthy()
+ it('should be rendered correctly for Multifluid and at none fluid connected', async () => {
+ const mockConnected = false
+ const { container } = render(
+ <ProfileComparatorRow
+ fluid={FluidType.MULTIFLUID}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={null}
+ forecast={mockMonthlyForecastJanuaryTestProfile1}
+ connected={mockConnected}
+ noData={false}
+ />
+ )
+ expect(
+ container.getElementsByClassName('consumption-multifluid').length
+ ).toBeTruthy()
+ expect(screen.getByTestId('userPrice')).toHaveTextContent(
+ 'analysis.no_data'
+ )
+ expect(screen.getByTestId('averagePrice')).toHaveTextContent('18,00 €')
+ expect(container.getElementsByClassName('graph').length).toBeFalsy()
+ expect(
+ container.getElementsByClassName('not-connected').length
+ ).toBeTruthy()
+ })
})
- it('should be rendered correctly for singleFluid connected for average', async () => {
- const wrapper = mount(
- <ProfileComparatorRow
- fluid={FluidType.ELECTRICITY}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={performanceValue}
- forecast={forecast}
- connected={connected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe(
- '25 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.price').last().text()).toBe(
- '4340 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.graph').exists()).toBeTruthy()
- expect(wrapper.find('.not-connected').exists()).toBeFalsy()
- })
+ describe('Single fluid row', () => {
+ it('should be rendered correctly for singleFluid connected for average', async () => {
+ const { container } = render(
+ <ProfileComparatorRow
+ fluid={FluidType.ELECTRICITY}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={performanceValue}
+ forecast={mockMonthlyForecastJanuaryTestProfile1}
+ connected={true}
+ noData={false}
+ />
+ )
- it('should be rendered correctly for singleFluid not connected', async () => {
- const mockConnected = false
- const wrapper = mount(
- <ProfileComparatorRow
- fluid={FluidType.ELECTRICITY}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={performanceValue}
- forecast={forecast}
- connected={mockConnected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe('analysis.no_data')
- expect(wrapper.find('.price').last().text()).toBe(
- '4340 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.graph').exists()).toBeFalsy()
- expect(wrapper.find('.not-connected').exists()).toBeTruthy()
- })
+ expect(
+ container.getElementsByClassName('consumption-electricity').length
+ ).toBeTruthy()
+ expect(screen.getByTestId('userPrice')).toHaveTextContent(
+ '25 FLUID.ELECTRICITY.UNIT'
+ )
+ expect(screen.getByTestId('averagePrice')).toHaveTextContent(
+ '4340 FLUID.ELECTRICITY.UNIT'
+ )
+ expect(container.getElementsByClassName('graph').length).toBeTruthy()
+ expect(
+ container.getElementsByClassName('not-connected').length
+ ).toBeFalsy()
+ })
- it('should be rendered correctly for singleFluid with none performance value', async () => {
- const mockPerformanceValue: number | null = null
- const wrapper = mount(
- <ProfileComparatorRow
- fluid={FluidType.ELECTRICITY}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={mockPerformanceValue}
- forecast={forecast}
- connected={connected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe('-')
- expect(wrapper.find('.price').last().text()).toBe(
- '4340 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.graph').exists()).toBeTruthy()
- expect(wrapper.find('.not-connected').exists()).toBeFalsy()
- })
+ it('should be rendered correctly for singleFluid not connected', async () => {
+ const mockConnected = false
+ const { container } = render(
+ <ProfileComparatorRow
+ fluid={FluidType.ELECTRICITY}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={performanceValue}
+ forecast={mockMonthlyForecastJanuaryTestProfile1}
+ connected={mockConnected}
+ noData={false}
+ />
+ )
+
+ expect(
+ container.getElementsByClassName('consumption-electricity').length
+ ).toBeTruthy()
+ expect(screen.getByTestId('userPrice')).toHaveTextContent(
+ 'analysis.no_data'
+ )
+ expect(screen.getByTestId('averagePrice')).toHaveTextContent(
+ '4340 FLUID.ELECTRICITY.UNIT'
+ )
+ expect(container.getElementsByClassName('graph').length).toBeFalsy()
+ expect(
+ container.getElementsByClassName('not-connected').length
+ ).toBeTruthy()
+ })
+
+ it('should be rendered correctly for singleFluid with none performance value', async () => {
+ const mockPerformanceValue: number | null = null
+ const { container } = render(
+ <ProfileComparatorRow
+ fluid={FluidType.ELECTRICITY}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={mockPerformanceValue}
+ forecast={mockMonthlyForecastJanuaryTestProfile1}
+ connected={true}
+ noData={false}
+ />
+ )
+
+ expect(
+ container.getElementsByClassName('consumption-electricity').length
+ ).toBeTruthy()
+ expect(screen.getByTestId('userPrice')).toHaveTextContent('-')
+ expect(screen.getByTestId('averagePrice')).toHaveTextContent(
+ '4340 FLUID.ELECTRICITY.UNIT'
+ )
+ expect(container.getElementsByClassName('graph').length).toBeTruthy()
+ expect(
+ container.getElementsByClassName('not-connected').length
+ ).toBeFalsy()
+ })
- it('should be rendered correctly with unit', async () => {
- const mockforecast: MonthlyForecast = {
- ...mockMonthlyForecastJanuaryTestProfile1,
- fluidForecast: [
- {
- detailsMonthlyForecast:
- mockMonthlyForecastJanuaryTestProfile1.fluidForecast[0]
- .detailsMonthlyForecast,
- fluidType: 0,
- load: 50,
- value: 25,
- },
- ],
- }
- const wrapper = mount(
- <ProfileComparatorRow
- fluid={FluidType.ELECTRICITY}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={performanceValue}
- forecast={mockforecast}
- connected={connected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe(
- '25 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.price').last().text()).toBe(
- '50 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.graph').exists()).toBeTruthy()
- expect(wrapper.find('.not-connected').exists()).toBeFalsy()
+ it('should be rendered correctly with unit', async () => {
+ const mockForecast: MonthlyForecast = {
+ ...mockMonthlyForecastJanuaryTestProfile1,
+ fluidForecast: [
+ {
+ detailsMonthlyForecast:
+ mockMonthlyForecastJanuaryTestProfile1.fluidForecast[0]
+ .detailsMonthlyForecast,
+ fluidType: 0,
+ load: 50,
+ value: 25,
+ },
+ ],
+ }
+ const { container } = render(
+ <ProfileComparatorRow
+ fluid={FluidType.ELECTRICITY}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={performanceValue}
+ forecast={mockForecast}
+ connected={true}
+ noData={false}
+ />
+ )
+ expect(
+ container.getElementsByClassName('consumption-electricity').length
+ ).toBeTruthy()
+ expect(screen.getByTestId('userPrice')).toHaveTextContent(
+ '25 FLUID.ELECTRICITY.UNIT'
+ )
+ expect(screen.getByTestId('averagePrice')).toHaveTextContent(
+ '50 FLUID.ELECTRICITY.UNIT'
+ )
+ expect(container.getElementsByClassName('graph').length).toBeTruthy()
+ expect(
+ container.getElementsByClassName('not-connected').length
+ ).toBeFalsy()
+ })
})
})
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
index adea63d2cefc1d774c9a6ab354ec8227e64d318e..0ba4dd6f8bd20e733be73cf931d4f7fc505be4e2 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
@@ -118,6 +118,7 @@ const ProfileComparatorRow = ({
className={classNames('price', 'text-15-bold', {
['not-connected']: !connected || noData,
})}
+ data-testid="userPrice"
>
{comparaisonText}
</div>
@@ -156,6 +157,7 @@ const ProfileComparatorRow = ({
className={classNames('price', 'text-15-bold', {
['not-connected']: !connected,
})}
+ data-testid="averagePrice"
>
{formatFluidConsumptionForForecast(fluid)}
</div>
diff --git a/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap b/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..bcb5b25883c896920cc746a8a40bb53224c071e4
--- /dev/null
+++ b/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap
@@ -0,0 +1,241 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnalysisConsumption component should be rendered correctly with profile NOT completed and go to profile button 1`] = `
+<div>
+ <div
+ class="status-header"
+ >
+ <div>
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="44"
+ width="44"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <p
+ class="text-16-normal"
+ >
+ analysis.compare.title
+ </p>
+ </div>
+ </div>
+ <div
+ class="analysis-graph"
+ >
+ <div
+ class="no-profile"
+ >
+ <div
+ class="text-16-normal"
+ >
+ analysis.approximative_description
+ </div>
+ <button
+ aria-label="analysis.accessibility.button_go_to_profil"
+ class="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
+ data-testid="goToProfile"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-18-bold"
+ >
+ analysis.accessibility.button_go_to_profil
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <svg
+ alt="pas de profil remplis"
+ class="styles__icon___23x3R"
+ height="60%"
+ width="100%"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`AnalysisConsumption component should be rendered correctly with profile completed and go to profile edition on click 1`] = `
+<div>
+ <div
+ class="status-header"
+ >
+ <div>
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="44"
+ width="44"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <p
+ class="text-16-normal"
+ >
+ analysis.compare.title
+ </p>
+ </div>
+ <button
+ aria-label="analysis.accessibility.button_go_to_profil"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnIcon"
+ data-testid="iconGoToProfile"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="40"
+ width="40"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ <div
+ class="analysis-graph"
+ >
+ <div
+ class="analysis-graph"
+ >
+ <div
+ class="consumption-title text-20-bold"
+ >
+ <div
+ class="user-title"
+ >
+ analysis.user_consumption
+ </div>
+ <div />
+ <div
+ class="average-title"
+ >
+ analysis.comparison
+ </div>
+ </div>
+ <mock-profilecomparatorrow
+ connected="true"
+ fluid="3"
+ homepriceconsumption="0"
+ nodata="false"
+ userpriceconsumption="156.161853"
+ />
+ <mock-profilecomparatorrow
+ connected="true"
+ fluid="0"
+ homepriceconsumption="0"
+ nodata="false"
+ performancevalue="178.54"
+ userpriceconsumption="156.161853"
+ />
+ <mock-profilecomparatorrow
+ connected="true"
+ fluid="1"
+ homepriceconsumption="0"
+ nodata="false"
+ performancevalue="7763.98"
+ userpriceconsumption="156.161853"
+ />
+ <mock-profilecomparatorrow
+ connected="true"
+ fluid="2"
+ homepriceconsumption="0"
+ nodata="false"
+ performancevalue="1317.67"
+ userpriceconsumption="156.161853"
+ />
+ <div
+ class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+ >
+ <div
+ aria-disabled="false"
+ aria-expanded="false"
+ aria-label="profile_type.accessibility.button_toggle_average_home"
+ class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
+ role="button"
+ tabindex="0"
+ >
+ <div
+ class="MuiAccordionSummary-content expansion-panel-content"
+ >
+ <div
+ class="accordion-title accordion-title"
+ >
+ analysis.average_home
+ </div>
+ </div>
+ <div
+ aria-disabled="false"
+ aria-hidden="true"
+ class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="accordion-icon styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </div>
+ </div>
+ <div
+ class="MuiCollapse-root MuiCollapse-hidden"
+ style="min-height: 0px;"
+ >
+ <div
+ class="MuiCollapse-wrapper"
+ >
+ <div
+ class="MuiCollapse-wrapperInner"
+ >
+ <div
+ role="region"
+ >
+ <div
+ class="MuiAccordionDetails-root expansion-panel-details"
+ >
+ <span
+ class="accordion-desc text-16-normal"
+ >
+ analysis.average_home_description
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/components/Analysis/TotalAnalysisChart/PieChart.spec.tsx b/src/components/Analysis/TotalAnalysisChart/PieChart.spec.tsx
index c866cabdfc46bb9b18fb06bc7a13fe3ceb9305ca..39dcf7202b3615c56b1b76bd70b05684b4c43d62 100644
--- a/src/components/Analysis/TotalAnalysisChart/PieChart.spec.tsx
+++ b/src/components/Analysis/TotalAnalysisChart/PieChart.spec.tsx
@@ -1,6 +1,5 @@
+import { render } from '@testing-library/react'
import { DataloadState } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { DataloadValueDetail } from 'models'
import React from 'react'
import PieChart from './PieChart'
@@ -12,7 +11,7 @@ describe('PieChart component', () => {
{ value: 30, state: DataloadState.VALID },
]
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<PieChart
radius={300}
outerRadius={300}
@@ -22,6 +21,6 @@ describe('PieChart component', () => {
child with value and text to render
</PieChart>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.spec.tsx b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.spec.tsx
index 4bcfcc3a643b781db65fc4cb74f4a0d43d3d1f1e..9770921aa26098e5f3a68a5c116231044e40645b 100644
--- a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.spec.tsx
+++ b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.spec.tsx
@@ -1,13 +1,11 @@
+import { render, waitFor } from '@testing-library/react'
import { DataloadState, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import { Datachart } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import { graphMonthData } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import TotalAnalysisChart from './TotalAnalysisChart'
const mockGetGraphData = jest.fn()
@@ -28,17 +26,17 @@ jest.mock(
describe('TotalAnalysisChart component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<TotalAnalysisChart fluidsWithData={[FluidType.ELECTRICITY]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
it('should render several fluids and display month data', async () => {
mockGetGraphData.mockResolvedValue(graphMonthData)
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<TotalAnalysisChart
fluidsWithData={[
@@ -49,8 +47,8 @@ describe('TotalAnalysisChart component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluidconso').exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(container.getElementsByClassName('fluidconso').length).toBeTruthy()
})
it('should render empty price', async () => {
const emptyData: Datachart = {
@@ -67,15 +65,17 @@ describe('TotalAnalysisChart component', () => {
comparisonData: null,
}
mockGetGraphData.mockResolvedValue(emptyData)
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<TotalAnalysisChart
fluidsWithData={[FluidType.ELECTRICITY, FluidType.WATER]}
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluidconso').text()).toBe('--- €')
+ await waitFor(() => null, { container })
+ expect(
+ container.getElementsByClassName('fluidconso').item(0)
+ ).toHaveTextContent('--- €')
})
it('should render empty price for one fluid', async () => {
const emptyData: Datachart = {
@@ -92,12 +92,12 @@ describe('TotalAnalysisChart component', () => {
comparisonData: null,
}
mockGetGraphData.mockResolvedValue(emptyData)
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<TotalAnalysisChart fluidsWithData={[FluidType.ELECTRICITY]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluidconso').exists()).toBe(false)
+ await waitFor(() => null, { container })
+ expect(container.getElementsByClassName('fluidconso').length).toBe(0)
})
})
diff --git a/src/components/Analysis/TotalAnalysisChart/__snapshots__/PieChart.spec.tsx.snap b/src/components/Analysis/TotalAnalysisChart/__snapshots__/PieChart.spec.tsx.snap
index 03b1ba56bc4c61e0cb75e8ac3c6e4ce7d50fc623..a64f3b602ba4bb7cafaa83dbb124dbb29b1f0064 100644
--- a/src/components/Analysis/TotalAnalysisChart/__snapshots__/PieChart.spec.tsx.snap
+++ b/src/components/Analysis/TotalAnalysisChart/__snapshots__/PieChart.spec.tsx.snap
@@ -1,39 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PieChart component should be rendered correctly 1`] = `
-<PieChart
- dataloadValueDetailArray={
- Array [
- Object {
- "state": "VALID",
- "value": 10,
- },
- Object {
- "state": "VALID",
- "value": 20,
- },
- Object {
- "state": "VALID",
- "value": 30,
- },
- ]
- }
- innerRadius={300}
- outerRadius={300}
- radius={300}
->
+<div>
<div
- className="pie-container"
- style={
- Object {
- "height": 300,
- "width": 300,
- }
- }
+ class="pie-container"
+ style="width: 300px; height: 300px;"
>
<svg
- height={300}
- width={300}
+ height="300"
+ width="300"
>
<defs>
<filter
@@ -43,48 +18,65 @@ exports[`PieChart component should be rendered correctly 1`] = `
x="-75%"
y="-75%"
>
- <feGaussianBlur
+ <fegaussianblur
result="coloredBlur"
stdDeviation="10"
/>
- <feMerge>
- <feMergeNode
+ <femerge>
+ <femergenode
in="coloredBlur"
/>
- <feMergeNode
+ <femergenode
in="SourceGraphic"
/>
- </feMerge>
+ </femerge>
</filter>
</defs>
<g
transform="translate(300 300)"
- />
+ >
+ <g
+ class="arc"
+ filter="url(#glow)"
+ >
+ <path
+ class="arc"
+ d="M1.8369701987210297e-14,-300A300,300,0,0,1,259.8076211353316,-150A300,300,0,0,0,1.8369701987210297e-14,-300Z"
+ fill="#D87B39"
+ />
+ </g>
+ <g
+ class="arc"
+ filter="url(#glow)"
+ >
+ <path
+ class="arc"
+ d="M259.8076211353316,-150A300,300,0,0,1,1.8369701987210297e-14,300A300,300,0,0,0,259.8076211353316,-150Z"
+ fill="#3A98EC"
+ />
+ </g>
+ <g
+ class="arc"
+ filter="url(#glow)"
+ >
+ <path
+ class="arc"
+ d="M1.8369701987210297e-14,300A300,300,0,1,1,-5.510910596163089e-14,-300A300,300,0,1,0,1.8369701987210297e-14,300Z"
+ fill="#45D1B8"
+ />
+ </g>
+ </g>
</svg>
<div
- className="pie-center"
- style={
- Object {
- "height": 300,
- "left": 0,
- "top": 0,
- "width": 300,
- }
- }
+ class="pie-center"
+ style="width: 300px; height: 300px; top: 0px; left: 0px;"
>
child with value and text to render
<div
- className="circle"
- style={
- Object {
- "height": 300,
- "left": 0,
- "top": 0,
- "width": 300,
- }
- }
+ class="circle"
+ style="width: 300px; height: 300px; top: 0px; left: 0px;"
/>
</div>
</div>
-</PieChart>
+</div>
`;
diff --git a/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap b/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap
index 9daddac9757bf7b5981c9b335677645cebeb6137..fa1ae890431cdfee5d4df73a942af9cdae1db911 100644
--- a/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap
+++ b/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap
@@ -1,61 +1,38 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`TotalAnalysisChart component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <TotalAnalysisChart
- fluidsWithData={
- Array [
- 0,
- ]
- }
+<div>
+ <div
+ class="totalAnalysis-container"
+ style="min-height: 475px;"
>
<div
- className="totalAnalysis-container"
- style={
- Object {
- "minHeight": 475,
- }
- }
+ class="text-24-normal title"
+ >
+ analysis_pie.total
+ </div>
+ <mock-piechart
+ dataloadvaluedetailarray=""
+ innerradius="157.5"
+ outerradius="187.5"
+ radius="375"
>
<div
- className="text-24-normal title"
+ class="text-36-bold"
>
- analysis_pie.total
+ 0,00
+ <span
+ class="euro-unit"
+ >
+ FLUID.MULTIFLUID.UNIT
+ </span>
</div>
- <mock-piechart
- dataloadValueDetailArray={Array []}
- innerRadius={157.5}
- outerRadius={187.5}
- radius={375}
+ <div
+ class="text-20-bold no_data"
>
- <div
- className="text-36-bold"
- >
- 0,00
- <span
- className="euro-unit"
- >
- FLUID.MULTIFLUID.UNIT
- </span>
- </div>
- <div
- className="text-20-bold no_data"
- >
- analysis.no_data
- </div>
- </mock-piechart>
- </div>
- </TotalAnalysisChart>
-</Provider>
+ analysis.no_data
+ </div>
+ </mock-piechart>
+ </div>
+</div>
`;
diff --git a/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
index e6d74e926365b96a4f8ac6ff342c75b182eb9806..34d20704df4e3baf4914755c134fd50401fdb940 100644
--- a/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
@@ -1,632 +1,96 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MonthlyAnalysis component should be rendered correctly 1`] = `
-<BrowserRouter>
- <Router
- location={
- Object {
- "hash": "",
- "key": "default",
- "pathname": "/",
- "search": "",
- "state": null,
- }
- }
- navigationType="POP"
- navigator={
- Object {
- "action": "POP",
- "createHref": [Function],
- "encodeLocation": [Function],
- "go": [Function],
- "listen": [Function],
- "location": Object {
- "hash": "",
- "key": "default",
- "pathname": "/",
- "search": "",
- "state": null,
- },
- "push": [Function],
- "replace": [Function],
- }
- }
+<div>
+ <div
+ class="analysis-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
>
- <Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
+ <div
+ class="analysis-content"
>
- <MonthlyAnalysis
- saveLastScrollPosition={[MockFunction]}
- scrollPosition={0}
+ <div
+ class="analysis-warning"
>
- <NoAnalysisModal
- onClose={[Function]}
- open={false}
+ <div
+ class="warning-header"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={false}
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="30"
+ width="30"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={false}
- />
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </NoAnalysisModal>
- <ForwardRef(Fade)
- in={true}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <h1>
+ analysis.warning_title
+ </h1>
+ </div>
+ <div
+ class="warning-content"
>
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="analysis-root"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- >
- <div
- className="analysis-content"
- >
- <IncompleteDataWarning
- incompleteDataFluids={
- Array [
- 0,
- ]
- }
- >
- <div
- className="analysis-warning"
- >
- <div
- className="warning-header"
- >
- <StyledIcon
- icon="test-file-stub"
- size={30}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={30}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={30}
- style={Object {}}
- width={30}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={30}
- style={Object {}}
- width={30}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <h1>
- analysis.warning_title
- </h1>
- </div>
- <div
- className="warning-content"
- >
- <p>
- analysis.warning_text
- </p>
- </div>
- </div>
- </IncompleteDataWarning>
- </div>
- <div
- className="analysis-content"
- >
- <mock-comparison
- fluidsWithData={
- Array [
- 0,
- 1,
- 2,
- ]
- }
- monthPerformanceIndicators={
- Array [
- Object {
- "compareValue": 10,
- "percentageVariation": 50,
- "value": 5,
- },
- Object {
- "compareValue": 10,
- "percentageVariation": 50,
- "value": 5,
- },
- ]
- }
- />
- </div>
- <div
- className="analysis-content"
- >
- <div
- className="card rich-card"
- >
- <mock-total-analysis
- fluidsWithData={
- Array [
- 0,
- 1,
- 2,
- ]
- }
- />
- </div>
- </div>
- <div
- className="analysis-content"
- >
- <div
- className="card rich-card"
- >
- <mock-max-consumption
- fluidsWithData={
- Array [
- 0,
- 1,
- 2,
- ]
- }
- />
- </div>
- </div>
- <div
- className="analysis-content"
- >
- <div
- className="card rich-card"
- >
- <mock-analysis
- aggregatedPerformanceIndicator={
- Object {
- "compareValue": 1.7718999999999998,
- "percentageVariation": -0.5,
- "value": 0.8859499999999999,
- }
- }
- performanceIndicators={
- Array [
- Object {
- "compareValue": 10,
- "percentageVariation": 50,
- "value": 5,
- },
- Object {
- "compareValue": 10,
- "percentageVariation": 50,
- "value": 5,
- },
- ]
- }
- />
- </div>
- </div>
- <div
- className="analysis-content"
- >
- <div
- className="card"
- >
- <mock-half-hour-analysis
- perfIndicator={
- Object {
- "compareValue": 10,
- "percentageVariation": 50,
- "value": 5,
- }
- }
- />
- </div>
- </div>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- </MonthlyAnalysis>
- </Provider>
- </Router>
-</BrowserRouter>
+ <p>
+ analysis.warning_text
+ </p>
+ </div>
+ </div>
+ </div>
+ <div
+ class="analysis-content"
+ >
+ <mock-comparison
+ fluidswithdata="0,1,2"
+ monthperformanceindicators="[object Object],[object Object]"
+ />
+ </div>
+ <div
+ class="analysis-content"
+ >
+ <div
+ class="card rich-card"
+ >
+ <mock-total-analysis
+ fluidswithdata="0,1,2"
+ />
+ </div>
+ </div>
+ <div
+ class="analysis-content"
+ >
+ <div
+ class="card rich-card"
+ >
+ <mock-max-consumption
+ fluidswithdata="0,1,2"
+ />
+ </div>
+ </div>
+ <div
+ class="analysis-content"
+ >
+ <div
+ class="card rich-card"
+ >
+ <mock-analysis
+ aggregatedperformanceindicator="[object Object]"
+ performanceindicators="[object Object],[object Object]"
+ />
+ </div>
+ </div>
+ <div
+ class="analysis-content"
+ >
+ <div
+ class="card"
+ >
+ <mock-half-hour-analysis
+ perfindicator="[object Object]"
+ />
+ </div>
+ </div>
+ </div>
+</div>
`;