diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
index 7dda1e01b6dc024cb11e920b99b21fda890d103e..f492d59e1824998ce1162220e7946128b106057d 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
@@ -1,15 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { DataloadState, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import { Dataload } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import UsageEventService from 'services/usageEvent.service'
-import { baseDataLoad } from 'tests/__mocks__/chartData.mock'
+import {
+ baseDataLoad,
+ baseMultiFluidDataLoad,
+} from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import DataloadConsumptionVisualizer from './DataloadConsumptionVisualizer'
jest.mock('services/fluidsPrices.service', () => {
@@ -43,9 +45,23 @@ const dataLoadWithValueDetail: Dataload = {
describe('Dataload consumption visualizer component', () => {
const store = createMockEcolyoStore()
+
+ it('should render with single fluid', async () => {
+ const { container } = render(
+ <Provider store={store}>
+ <DataloadConsumptionVisualizer
+ fluidType={FluidType.ELECTRICITY}
+ dataload={baseDataLoad}
+ compareDataload={baseDataLoad}
+ setActive={jest.fn()}
+ />
+ </Provider>
+ )
+ expect(container).toMatchSnapshot()
+ })
describe('should render nothing', () => {
it('should render nothing if dataload is null', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DataloadConsumptionVisualizer
fluidType={FluidType.ELECTRICITY}
@@ -55,12 +71,13 @@ describe('Dataload consumption visualizer component', () => {
/>
</Provider>
)
- expect(wrapper.find('.dataloadvisualizer-root').children()).toHaveLength(
- 0
- )
+ const element = container
+ .getElementsByClassName('dataloadvisualizer-root')
+ .item(0)
+ expect(element?.children.length).toBe(0)
})
it('should render nothing if dataload is in the future', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DataloadConsumptionVisualizer
fluidType={FluidType.ELECTRICITY}
@@ -70,14 +87,15 @@ describe('Dataload consumption visualizer component', () => {
/>
</Provider>
)
- expect(wrapper.find('.dataloadvisualizer-root').children()).toHaveLength(
- 0
- )
+ const element = container
+ .getElementsByClassName('dataloadvisualizer-root')
+ .item(0)
+ expect(element?.children.length).toBe(0)
})
})
it('should render DataloadNoValue if dataload.state is not valid', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DataloadConsumptionVisualizer
fluidType={FluidType.ELECTRICITY}
@@ -87,45 +105,33 @@ describe('Dataload consumption visualizer component', () => {
/>
</Provider>
)
- expect(wrapper.find('mock-DataloadNoValue').exists()).toBeTruthy()
+ expect(
+ container.getElementsByTagName('mock-DataloadNoValue').item(0)
+ ).toBeInTheDocument()
})
- it('should render with single fluid', async () => {
- const wrapper = mount(
- <Provider store={store}>
- <DataloadConsumptionVisualizer
- fluidType={FluidType.ELECTRICITY}
- dataload={baseDataLoad}
- compareDataload={baseDataLoad}
- setActive={jest.fn()}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
- })
it('should render correctly multifluid and 3 clickable links', () => {
- const store = createMockEcolyoStore()
- const wrapper = mount(
+ render(
<Provider store={store}>
<BrowserRouter>
<DataloadConsumptionVisualizer
fluidType={FluidType.MULTIFLUID}
- dataload={baseDataLoad}
- compareDataload={baseDataLoad}
+ dataload={baseMultiFluidDataLoad}
+ compareDataload={null}
setActive={jest.fn()}
/>
</BrowserRouter>
</Provider>
)
- expect(wrapper.find('.dataloadvisualizer-euro-link').length).toBe(3)
+ const links = screen.getAllByRole('link')
+ expect(links.length).toBe(3)
})
it('should render with no value to compare available', async () => {
const store = createMockEcolyoStore({
chart: { ...mockChartState, showCompare: true },
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DataloadConsumptionVisualizer
fluidType={FluidType.WATER}
@@ -135,13 +141,16 @@ describe('Dataload consumption visualizer component', () => {
/>
</Provider>
)
- expect(wrapper.find('.dataloadvisualizer-novalue').exists()).toBeTruthy()
+ const element = container
+ .getElementsByClassName('dataloadvisualizer-novalue')
+ .item(0)
+ expect(element).toBeInTheDocument()
})
it('should render with water comparison data', async () => {
const store = createMockEcolyoStore({
chart: { ...mockChartState, showCompare: true },
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DataloadConsumptionVisualizer
fluidType={FluidType.WATER}
@@ -151,10 +160,11 @@ describe('Dataload consumption visualizer component', () => {
/>
</Provider>
)
- expect(wrapper.find('.water-compare').exists()).toBeTruthy()
+ const element = container.getElementsByClassName('water-compare').item(0)
+ expect(element).toBeInTheDocument()
})
it('should render multifluid with no compare and display estimation modal', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DataloadConsumptionVisualizer
fluidType={FluidType.MULTIFLUID}
@@ -164,7 +174,10 @@ describe('Dataload consumption visualizer component', () => {
/>
</Provider>
)
- expect(wrapper.find('mock-EstimatedConsumptionModal').exists()).toBeTruthy()
+ const element = container
+ .getElementsByTagName('mock-EstimatedConsumptionModal')
+ .item(0)
+ expect(element).toBeInTheDocument()
})
it('should render multifluid with no compare and navigate to singleFluid page', async () => {
jest.mock('services/converter.service', () => {
@@ -173,7 +186,7 @@ describe('Dataload consumption visualizer component', () => {
}))
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<BrowserRouter>
<DataloadConsumptionVisualizer
@@ -189,8 +202,8 @@ describe('Dataload consumption visualizer component', () => {
const mockAddEvent = jest.fn()
UsageEventService.addEvent = mockAddEvent
- // Render Navlinks to fluids
- wrapper.find('.dataloadvisualizer-euro-fluid').first().simulate('click')
+ const links = screen.getAllByRole('link')
+ await userEvent.click(links[0])
expect(mockAddEvent).toHaveBeenCalled()
})
})
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx
index 8d9f0618371c50cd34c33e139e928162ce35aa4d..4045300323387423250a533581a554488d9d6b0a 100644
--- a/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx
@@ -1,114 +1,110 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { DataloadState, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
-import { Dataload } from 'models'
import React from 'react'
import { baseDataLoad } from 'tests/__mocks__/chartData.mock'
import DataloadNoValue from './DataloadNoValue'
-const mockSetActive = jest.fn()
-
describe('DataloadNoValue component', () => {
- const mockDataload: Dataload = baseDataLoad
-
it('should render correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<DataloadNoValue
- dataload={mockDataload}
+ dataload={baseDataLoad}
fluidType={FluidType.ELECTRICITY}
- setActive={mockSetActive}
+ setActive={jest.fn()}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
describe('should render correctly no data', () => {
it('case state EMPTY', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.EMPTY }
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.EMPTY }
+ render(
<DataloadNoValue
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
- setActive={mockSetActive}
+ setActive={jest.fn()}
/>
)
- expect(wrapper.find('.dataloadvisualizer-value').text()).toBe(
- 'consumption_visualizer.no_data'
- )
+ expect(
+ screen.getByText('consumption_visualizer.no_data')
+ ).toBeInTheDocument()
})
it('case state HOLE', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.HOLE }
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.HOLE }
+ render(
<DataloadNoValue
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
- setActive={mockSetActive}
+ setActive={jest.fn()}
/>
)
- expect(wrapper.find('.dataloadvisualizer-value').text()).toBe(
- 'consumption_visualizer.no_data'
- )
+ expect(
+ screen.getByText('consumption_visualizer.no_data')
+ ).toBeInTheDocument()
})
it('case state AGGREGATED_EMPTY', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_EMPTY,
}
- const wrapper = mount(
+ render(
<DataloadNoValue
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.MULTIFLUID}
- setActive={mockSetActive}
+ setActive={jest.fn()}
/>
)
- expect(wrapper.find('.dataloadvisualizer-value').text()).toBe(
- 'consumption_visualizer.no_data'
- )
+ expect(
+ screen.getByText('consumption_visualizer.no_data')
+ ).toBeInTheDocument()
})
})
describe('should render correctly missing data', () => {
it('case state MISSING', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.MISSING }
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.MISSING }
+ render(
<DataloadNoValue
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
- setActive={mockSetActive}
+ setActive={jest.fn()}
/>
)
- expect(wrapper.find('.dataloadvisualizer-content').text()).toBe(
- 'consumption_visualizer.missing_data'
- )
+ expect(
+ screen.getByText('consumption_visualizer.missing_data')
+ ).toBeInTheDocument()
})
it('case state AGGREGATED_HOLE_OR_MISSING', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_HOLE_OR_MISSING,
}
- const wrapper = mount(
+ render(
<DataloadNoValue
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.MULTIFLUID}
- setActive={mockSetActive}
+ setActive={jest.fn()}
/>
)
- expect(wrapper.find('.dataloadvisualizer-content').text()).toBe(
- 'consumption_visualizer.missing_data'
- )
+ expect(
+ screen.getByText('consumption_visualizer.missing_data')
+ ).toBeInTheDocument()
})
})
- it('should call setActive when missing message is clicked', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.MISSING }
- const wrapper = mount(
+ it('should call setActive when missing message is clicked', async () => {
+ const mockSetActive = jest.fn()
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.MISSING }
+ render(
<DataloadNoValue
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
setActive={mockSetActive}
/>
)
- wrapper.find('.dataloadvisualizer-content').simulate('click')
+ await userEvent.click(screen.getByRole('button'))
expect(mockSetActive).toHaveBeenCalledWith(true)
})
})
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
index 6133a012ded8eb94843dbea17730bed04adfc79b..3c55e9ed03502b456ecf0c5de3a4923ac3c8cb5d 100644
--- a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import { Button } from '@material-ui/core'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { DataloadState, FluidType } from 'enums'
import { Dataload } from 'models'
@@ -64,12 +64,12 @@ const DataloadNoValue = ({
dataload.state === DataloadState.AGGREGATED_HOLE_OR_MISSING
) {
return (
- <div
+ <Button
onClick={handleToggleKonnectionCard}
- className={classNames('dataloadvisualizer-content text-22-normal')}
+ classes={{ root: 'btnText', label: 'text-22-normal' }}
>
{t('consumption_visualizer.missing_data')}
- </div>
+ </Button>
)
}
diff --git a/src/components/ConsumptionVisualizer/DataloadSection.spec.tsx b/src/components/ConsumptionVisualizer/DataloadSection.spec.tsx
index aef6fc33e7a13cfca6e51e8647c945e6ce906d91..073b60d0c07942d6fa2e98f86d65570998ab02cb 100644
--- a/src/components/ConsumptionVisualizer/DataloadSection.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSection.spec.tsx
@@ -1,7 +1,5 @@
+import { render, screen } from '@testing-library/react'
import { DataloadSectionType, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
-import { Dataload } from 'models'
import React from 'react'
import { baseDataLoad } from 'tests/__mocks__/chartData.mock'
import DataloadSection from './DataloadSection'
@@ -15,35 +13,31 @@ jest.mock(
() => 'mock-dataloadsectiondetail'
)
-const mockToggleEstimationModal = jest.fn()
-
describe('DataloadSection component', () => {
- const mockDataload: Dataload = baseDataLoad
-
it('should render correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<DataloadSection
- dataload={mockDataload}
+ dataload={baseDataLoad}
fluidType={FluidType.ELECTRICITY}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
- toggleEstimationModal={mockToggleEstimationModal}
+ toggleEstimationModal={jest.fn()}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should render no_data when dataload value is -1 and section is left', () => {
- const _mockDatalaod = { ...mockDataload, value: -1 }
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, value: -1 }
+ render(
<DataloadSection
- dataload={_mockDatalaod}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
dataloadSectionType={DataloadSectionType.LEFT}
- toggleEstimationModal={mockToggleEstimationModal}
+ toggleEstimationModal={jest.fn()}
/>
)
- expect(wrapper.find('.dataloadvisualizer-novalue').text()).toBe(
- 'consumption_visualizer.no_data'
- )
+ expect(
+ screen.getByText('consumption_visualizer.no_data')
+ ).toBeInTheDocument()
})
})
diff --git a/src/components/ConsumptionVisualizer/DataloadSection.tsx b/src/components/ConsumptionVisualizer/DataloadSection.tsx
index 19d7739bdac8e14ee7fd4a8dff7a654131a40c13..16d52ce901cad4382a9606699a12cc0853b53ba8 100644
--- a/src/components/ConsumptionVisualizer/DataloadSection.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSection.tsx
@@ -39,25 +39,25 @@ const DataloadSection = ({
)
}
+ const isLeft = dataloadSectionType === DataloadSectionType.LEFT
+ const isRight = dataloadSectionType === DataloadSectionType.RIGHT
+ const noCompare = dataloadSectionType === DataloadSectionType.NO_COMPARE
+ const isMulti = fluidType === FluidType.MULTIFLUID
+ const fluidName = getFluidName(fluidType)
+
return (
<div
className={classNames('dataloadvisualizer-section', {
- ['dataloadvisualizer-section-left']:
- dataloadSectionType === DataloadSectionType.LEFT,
- ['dataloadvisualizer-section-right']:
- dataloadSectionType === DataloadSectionType.RIGHT,
+ 'dataloadvisualizer-section-left': isLeft,
+ 'dataloadvisualizer-section-right': isRight,
})}
>
<div
className={classNames('dataloadvisualizer-value', 'text-36-bold', {
- [`${getFluidName(fluidType)}-compare`]:
- dataloadSectionType === DataloadSectionType.LEFT,
- [`${getFluidName(fluidType)}`]:
- dataloadSectionType === DataloadSectionType.NO_COMPARE ||
- dataloadSectionType === DataloadSectionType.RIGHT,
- ['multifluid-compare-color']:
- dataloadSectionType === DataloadSectionType.RIGHT &&
- fluidType === FluidType.MULTIFLUID,
+ [fluidName]: noCompare || isRight,
+ [`${fluidName}-compare`]: isLeft,
+ 'multifluid-compare-color': isRight && isMulti,
+ alignTop: isMulti,
})}
>
<DataloadSectionValue
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.spec.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.spec.tsx
index 144cbc4d6b1f190b943ee7654f0139a6f7a306aa..3492352f81c088351e053904164c3664b72339f3 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.spec.tsx
@@ -1,54 +1,51 @@
+import { render } from '@testing-library/react'
import { DataloadSectionType, DataloadState, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { Dataload } from 'models'
import React from 'react'
import { baseDataLoad } from 'tests/__mocks__/chartData.mock'
import DataloadSectionDetail from './DataloadSectionDetail'
describe('DataloadSectionDetail component', () => {
- const mockDataload: Dataload = baseDataLoad
-
it('should render correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
- dataload={mockDataload}
+ dataload={baseDataLoad}
fluidType={FluidType.ELECTRICITY}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should not display if multifluid and comparison', () => {
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
- dataload={mockDataload}
+ dataload={baseDataLoad}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should not display value details if multifluid, no valueDetail and comparison', () => {
const mockMultiDataload: Dataload = {
- ...mockDataload,
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_EMPTY,
valueDetail: null,
}
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
dataload={mockMultiDataload}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
describe('should display value details if multifluid and no comparison', () => {
it('case all valid data', () => {
const mockMultiDataload: Dataload = {
- ...mockDataload,
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_VALID,
valueDetail: [
{ value: 1, state: DataloadState.VALID },
@@ -56,18 +53,18 @@ describe('DataloadSectionDetail component', () => {
{ value: 3, state: DataloadState.VALID },
],
}
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
dataload={mockMultiDataload}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('case valid and coming data', () => {
const mockMultiDataload: Dataload = {
- ...mockDataload,
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_WITH_COMING,
valueDetail: [
{ value: 1, state: DataloadState.VALID },
@@ -75,18 +72,18 @@ describe('DataloadSectionDetail component', () => {
{ value: 3, state: DataloadState.VALID },
],
}
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
dataload={mockMultiDataload}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('case valid and missing data', () => {
const mockMultiDataload: Dataload = {
- ...mockDataload,
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING,
valueDetail: [
{ value: 1, state: DataloadState.VALID },
@@ -94,18 +91,18 @@ describe('DataloadSectionDetail component', () => {
{ value: 3, state: DataloadState.VALID },
],
}
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
dataload={mockMultiDataload}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('case valid and hole data', () => {
const mockMultiDataload: Dataload = {
- ...mockDataload,
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING,
valueDetail: [
{ value: 1, state: DataloadState.VALID },
@@ -113,14 +110,14 @@ describe('DataloadSectionDetail component', () => {
{ value: 3, state: DataloadState.VALID },
],
}
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
dataload={mockMultiDataload}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
})
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
index 18a607e312cae5990e94fd6c33cd4d02c31e042a..2075e217f6ef454570f56c894264caa1ae9b4ea8 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
@@ -31,6 +31,9 @@ const DataloadSectionDetail = ({
const { t } = useI18n()
const converterService = new ConverterService()
+ const isMulti = fluidType === FluidType.MULTIFLUID
+ const isCompare = dataloadSectionType === DataloadSectionType.NO_COMPARE
+
const emitNavEvent = useCallback(
async (targetPage: string) => {
await UsageEventService.addEvent(client, {
@@ -41,7 +44,7 @@ const DataloadSectionDetail = ({
[client]
)
- if (fluidType !== FluidType.MULTIFLUID) {
+ if (!isMulti) {
return (
<div
className={classNames('dataloadvisualizer-euro text-16-normal', {
@@ -62,38 +65,33 @@ const DataloadSectionDetail = ({
)
}
- if (
- fluidType === FluidType.MULTIFLUID &&
- dataloadSectionType !== DataloadSectionType.NO_COMPARE
- ) {
+ if (isMulti && !isCompare) {
return <div className="dataloadvisualizer-euro text-16-normal" />
}
- if (
- fluidType === FluidType.MULTIFLUID &&
- dataloadSectionType === DataloadSectionType.NO_COMPARE &&
- dataload.valueDetail
- ) {
+ if (isMulti && isCompare && dataload.valueDetail) {
return (
<div className="dataloadvisualizer-euro text-16-normal">
- {dataload.valueDetail.map((valueDetail, index) => {
+ {dataload.valueDetail.map((value, index) => {
+ const isValid = value.state === DataloadState.VALID
+ const isUpcoming = value.state === DataloadState.UPCOMING
+ const isComing = value.state === DataloadState.COMING
+ const isEmpty = value.state === DataloadState.EMPTY
+ const isHole = value.state === DataloadState.HOLE
+ const isMissing = value.state === DataloadState.MISSING
return (
<NavLink
key={index}
to={`/consumption/${FluidType[index].toLowerCase()}`}
className="dataloadvisualizer-euro-link"
+ onClick={() => emitNavEvent(FluidType[index].toLowerCase())}
>
<div
className={classNames('dataloadvisualizer-euro-fluid', {
- [` ${FluidType[index].toLowerCase()}`]:
- valueDetail.state === DataloadState.VALID ||
- valueDetail.state === DataloadState.UPCOMING ||
- valueDetail.state === DataloadState.COMING ||
- valueDetail.state === DataloadState.EMPTY ||
- valueDetail.state === DataloadState.HOLE,
- [` error`]: valueDetail.state === DataloadState.MISSING,
+ [FluidType[index].toLowerCase()]:
+ isValid || isUpcoming || isComing || isEmpty || isHole,
+ error: isMissing,
})}
- onClick={() => emitNavEvent(FluidType[index].toLowerCase())}
>
<Icon
className="dataloadvisualizer-euro-fluid-icon"
@@ -101,16 +99,12 @@ const DataloadSectionDetail = ({
size={22}
/>
<div>
- {valueDetail.state === DataloadState.VALID &&
- `${formatNumberValues(valueDetail.value)} €`}
- {(valueDetail.state === DataloadState.UPCOMING ||
- valueDetail.state === DataloadState.COMING) &&
+ {isValid && `${formatNumberValues(value.value)} €`}
+ {(isUpcoming || isComing) &&
t('consumption_visualizer.data_to_come')}
- {(valueDetail.state === DataloadState.EMPTY ||
- valueDetail.state === DataloadState.HOLE) &&
+ {(isEmpty || isHole) &&
t('consumption_visualizer.data_empty')}
- {valueDetail.state === DataloadState.MISSING &&
- t('consumption_visualizer.aie')}
+ {isMissing && t('consumption_visualizer.aie')}
</div>
</div>
</NavLink>
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx b/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx
index f29778adad0504ebdeef92f847779da38c684715..4b9d037bbc525929eaa3ba0fa2b1cf77b3d9cdb0 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx
@@ -1,6 +1,6 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { DataloadSectionType, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { Dataload } from 'models'
import React from 'react'
import {
@@ -12,99 +12,83 @@ import DataloadSectionValue from './DataloadSectionValue'
const mockToggleEstimationModal = jest.fn()
describe('DataloadSectionValue component', () => {
- const mockDataload: Dataload = baseDataLoad
- const mockMultiDataload: Dataload = baseMultiFluidDataLoad
it('should render correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionValue
- dataload={mockDataload}
+ dataload={baseDataLoad}
fluidType={FluidType.ELECTRICITY}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
toggleEstimationModal={mockToggleEstimationModal}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- describe('case Singlefluid', () => {
+ describe('case SingleFluid', () => {
it('should render with unit when value < 1000', () => {
- const wrapper = mount(
+ render(
<DataloadSectionValue
- dataload={mockDataload}
+ dataload={baseDataLoad}
fluidType={FluidType.ELECTRICITY}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
toggleEstimationModal={mockToggleEstimationModal}
/>
)
- expect(
- wrapper.find(DataloadSectionValue).first().contains('12,00')
- ).toBeTruthy()
- expect(wrapper.find('.text-18-normal').text()).toBe(
- 'FLUID.ELECTRICITY.UNIT'
- )
+ expect(screen.getByText('12,00')).toBeInTheDocument()
+ expect(screen.getByText('FLUID.ELECTRICITY.UNIT')).toBeInTheDocument()
})
it('should render with mega unit when value >= 1000', () => {
- const _mockDatalaod: Dataload = { ...mockDataload, value: 1000 }
- const wrapper = mount(
+ const mockDataLoad: Dataload = { ...baseDataLoad, value: 1000 }
+ render(
<DataloadSectionValue
- dataload={_mockDatalaod}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
toggleEstimationModal={mockToggleEstimationModal}
/>
)
- expect(
- wrapper.find(DataloadSectionValue).first().contains('1,00')
- ).toBeTruthy()
- expect(wrapper.find('.text-18-normal').text()).toBe(
- 'FLUID.ELECTRICITY.MEGAUNIT'
- )
+ expect(screen.getByText('1,00')).toBeInTheDocument()
+ expect(screen.getByText('FLUID.ELECTRICITY.MEGAUNIT')).toBeInTheDocument()
})
})
describe('case Multifluid', () => {
it('should render correctly when comparison', () => {
- const wrapper = mount(
+ render(
<DataloadSectionValue
- dataload={mockMultiDataload}
+ dataload={baseMultiFluidDataLoad}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
toggleEstimationModal={mockToggleEstimationModal}
/>
)
- expect(
- wrapper.find(DataloadSectionValue).first().contains('12,00')
- ).toBeTruthy()
- expect(wrapper.find('.euroUnit').exists()).toBeTruthy()
+ expect(screen.getByText('12,00')).toBeInTheDocument()
+ expect(screen.getByText('FLUID.MULTIFLUID.UNIT')).toBeInTheDocument()
})
it('should render correctly with a estimated link when no comparison', () => {
- const wrapper = mount(
+ render(
<DataloadSectionValue
- dataload={mockMultiDataload}
+ dataload={baseMultiFluidDataLoad}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
toggleEstimationModal={mockToggleEstimationModal}
/>
)
+ expect(screen.getByText('12,00')).toBeInTheDocument()
expect(
- wrapper.find(DataloadSectionValue).first().contains('12,00')
- ).toBeTruthy()
- expect(wrapper.find('.euroUnit').exists()).toBeTruthy()
- expect(wrapper.find('.estimated').exists()).toBeTruthy()
- expect(wrapper.find('.estimated').text()).toBe(
- 'consumption_visualizer.estimated'
- )
+ screen.getByText('consumption_visualizer.estimated')
+ ).toBeInTheDocument()
})
- it('should call toggleEstimationModal when click on the estimated link', () => {
- const wrapper = mount(
+ it('should call toggleEstimationModal when click on the estimated link', async () => {
+ render(
<DataloadSectionValue
- dataload={mockMultiDataload}
+ dataload={baseMultiFluidDataLoad}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
toggleEstimationModal={mockToggleEstimationModal}
/>
)
- wrapper.find('.estimated').simulate('click')
+ await userEvent.click(screen.getByRole('button'))
expect(mockToggleEstimationModal).toHaveBeenCalled()
})
})
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx b/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
index 649f993e2221af0e9a3aa7b5ae3a9f38e90fbf7a..cfb77c138b854bcbd7d459aea4ffd44d84351c1a 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-ui/core'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { DataloadSectionType, FluidType } from 'enums'
import { Dataload } from 'models'
@@ -23,16 +24,20 @@ const DataloadSectionValue = ({
return (
<>
{formatNumberValues(dataload.value)}
- <span className="text-18-normal euroUnit">
+ <div className="text-18-normal euroUnit">
{t(`FLUID.${FluidType[fluidType]}.UNIT`)}
- </span>
+ </div>
{dataloadSectionType === DataloadSectionType.NO_COMPARE && (
- <span
- className="text-14-normal estimated"
+ <Button
+ classes={{
+ root: 'btnText',
+ label: 'text-14-normal',
+ }}
+ size="small"
onClick={toggleEstimationModal}
>
{t('consumption_visualizer.estimated')}
- </span>
+ </Button>
)}
</>
)
diff --git a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
index b7e0256198e84b91442a3e4a8a8a911d0c760cff..a362aa740509e42e6792918e7353cada49f2e520 100644
--- a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
+++ b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
@@ -1,5 +1,4 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import React from 'react'
import EstimatedConsumptionModal from './EstimatedConsumptionModal'
@@ -12,9 +11,9 @@ jest.mock('services/fluidsPrices.service', () => {
describe('EstimatedConsumptionModal component', () => {
it('should render correctly', async () => {
- const wrapper = mount(
+ const { baseElement } = render(
<EstimatedConsumptionModal open={true} handleCloseClick={jest.fn()} />
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
})
diff --git a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.spec.tsx
index 820c51c87f34f60aae8393d871386b55e919efca..5c2018b0bdf54affb32cc73edda5c72f6954ecb3 100644
--- a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.spec.tsx
+++ b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.spec.tsx
@@ -1,15 +1,13 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { DataloadState, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
-import { Dataload } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import * as storeHooks from 'store/hooks'
import { baseDataLoad } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import InfoDataConsumptionVisualizer from './InfoDataConsumptionVisualizer'
-import NoDataModal from './NoDataModal'
const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')
@@ -17,206 +15,206 @@ describe('InfoDataConsumptionVisualizer component', () => {
const mockLastDataDate = DateTime.fromISO('2020-10-01T00:00:00.000Z', {
zone: 'utc',
})
- const mockDataload: Dataload = baseDataLoad
const store = createMockEcolyoStore()
it('should render correctly when data valid', () => {
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.UPCOMING }
+ const { container } = render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={mockDataload}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
describe('should render correctly consumption_visualizer.last_available_data', () => {
- it('case state MISSING', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.MISSING }
- const wrapper = mount(
+ it('case state MISSING', async () => {
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.MISSING }
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.last_available_data'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.last_available_data')
+ ).toBeInTheDocument()
})
- it('case state UPCOMING', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.UPCOMING }
- const wrapper = mount(
+ it('case state UPCOMING', async () => {
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.UPCOMING }
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.last_available_data'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.last_available_data')
+ ).toBeInTheDocument()
})
- it('case state COMING', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ it('case state COMING', async () => {
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.COMING,
}
- const wrapper = mount(
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.last_available_data'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.last_available_data')
+ ).toBeInTheDocument()
})
- it('case state AGGREGATED_HOLE_OR_MISSING', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ it('case state AGGREGATED_HOLE_OR_MISSING', async () => {
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_HOLE_OR_MISSING,
}
- const wrapper = mount(
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.MULTIFLUID}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.last_valid_data_multi'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.last_valid_data_multi')
+ ).toBeInTheDocument()
})
- it('case state AGGREGATED_WITH_HOLE_OR_MISSING', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ it('case state AGGREGATED_WITH_HOLE_OR_MISSING', async () => {
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING,
}
- const wrapper = mount(
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.MULTIFLUID}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.last_valid_data_multi'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.last_valid_data_multi')
+ ).toBeInTheDocument()
})
- it('case state AGGREGATED_COMING', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ it('case state AGGREGATED_COMING', async () => {
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_COMING,
}
- const wrapper = mount(
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.MULTIFLUID}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.last_valid_data_multi'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.last_valid_data_multi')
+ ).toBeInTheDocument()
})
})
describe('should render correctly with why_no_data', () => {
- it('case state EMPTY', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.EMPTY }
- const wrapper = mount(
+ it('case state EMPTY', async () => {
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.EMPTY }
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.why_no_data'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.why_no_data')
+ ).toBeInTheDocument()
})
- it('case state HOLE', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.HOLE }
- const wrapper = mount(
+ it('case state HOLE', async () => {
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.HOLE }
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.why_no_data'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.why_no_data')
+ ).toBeInTheDocument()
})
- it('case state AGGREGATED_EMPTY', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ it('case state AGGREGATED_EMPTY', async () => {
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_EMPTY,
}
- const wrapper = mount(
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.MULTIFLUID}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.why_no_data'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.why_no_data')
+ ).toBeInTheDocument()
})
})
it('should click on last valid data date and move to it', async () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.EMPTY }
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.EMPTY }
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- wrapper.find('.error-line').simulate('click')
- expect(wrapper.find(NoDataModal).prop('open')).toBeTruthy()
+ await userEvent.click(screen.getByRole('button'))
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
it('should click to display NoDataModal', async () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.EMPTY }
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.EMPTY }
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- wrapper.find('.error-line').simulate('click')
+ await userEvent.click(screen.getByRole('button'))
expect(mockAppDispatch).toHaveBeenCalled()
})
})
diff --git a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
index 27968b8c50078c589e374fe34b5bea7fe07eb02d..f88a939c5fd228261016f74c02f0c3a674a14e70 100644
--- a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-ui/core'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { DataloadState, FluidType } from 'enums'
import { DateTime } from 'luxon'
@@ -23,16 +24,16 @@ const InfoDataConsumptionVisualizer = ({
const { t } = useI18n()
const dispatch = useAppDispatch()
const { currentTimeStep } = useAppSelector(state => state.ecolyo.chart)
- const [openNodataModal, setopenNodataModal] = useState<boolean>(false)
+ const [openNoDataModal, setOpenNoDataModal] = useState<boolean>(false)
const toggleNoDataModal = useCallback(() => {
- setopenNodataModal(prev => !prev)
+ setOpenNoDataModal(prev => !prev)
}, [])
const moveToDate = () => {
if (lastDataDate) {
const dateChartService = new DateChartService()
- const updatedIndex: number = dateChartService.defineDateIndex(
+ const updatedIndex = dateChartService.defineDateIndex(
currentTimeStep,
lastDataDate
)
@@ -54,18 +55,16 @@ const InfoDataConsumptionVisualizer = ({
dataload.state === DataloadState.AGGREGATED_COMING
) {
const lastDate = lastDataDate ? lastDataDate.toFormat("dd'/'MM'/'yy") : '-'
+ const key =
+ fluidType === FluidType.MULTIFLUID
+ ? 'last_valid_data_multi'
+ : 'last_available_data'
return (
- <div onClick={() => moveToDate()} className="error-line">
- <span className="text-16-bold underlined-error">
- {fluidType === FluidType.MULTIFLUID
- ? t('consumption_visualizer.last_valid_data_multi', {
- date: lastDate,
- })
- : t('consumption_visualizer.last_available_data', {
- date: lastDate,
- })}
- </span>
- </div>
+ <Button className="btnText" onClick={moveToDate}>
+ {t(`consumption_visualizer.${key}`, {
+ date: lastDate,
+ })}
+ </Button>
)
}
@@ -76,13 +75,13 @@ const InfoDataConsumptionVisualizer = ({
) {
return (
<>
- <div className="error-line" onClick={toggleNoDataModal}>
+ <Button className="btnText" onClick={toggleNoDataModal}>
<span className="text-16-normal underlined-error">
{t('consumption_visualizer.why_no_data')}
</span>
- </div>
+ </Button>
<NoDataModal
- open={openNodataModal}
+ open={openNoDataModal}
handleCloseClick={toggleNoDataModal}
/>
</>
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
index 3f79b27a926a75fb72caf145534616e1c18385fb..50e7cddf1f334da7c3ff332e1a7e77b328524e80 100644
--- a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
+++ b/src/components/ConsumptionVisualizer/NoDataModal.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 NoDataModal from './NoDataModal'
describe('NoDataModal component', () => {
it('should render correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<NoDataModal open={true} handleCloseClick={jest.fn()} />
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
index b4d99a41bedd42fec249565c4f81d93a3ba58130..d6b5dfbc129dd95076aceeb30e40b708302778d1 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
@@ -1,110 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dataload consumption visualizer component should render with single fluid 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <DataloadConsumptionVisualizer
- compareDataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- setActive={[MockFunction]}
+<div>
+ <div
+ class="dataloadvisualizer-root"
>
<div
- className="dataloadvisualizer-root"
+ class="dataloadvisualizer-content"
>
<div
- className="dataloadvisualizer-content"
+ class="dataloadvisualizer-section"
>
- <DataloadSection
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[Function]}
+ <div
+ class="dataloadvisualizer-value text-36-bold electricity"
>
- <div
- className="dataloadvisualizer-section"
+ 12,00
+ <span
+ class="text-18-normal"
>
- <div
- className="dataloadvisualizer-value text-36-bold electricity"
- >
- <DataloadSectionValue
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[Function]}
- >
- 12,00
- <span
- className="text-18-normal"
- >
- FLUID.ELECTRICITY.UNIT
- </span>
- </DataloadSectionValue>
- </div>
- <DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- >
- <div
- className="dataloadvisualizer-euro text-16-normal electricity"
- >
- 2,09 €
- </div>
- </DataloadSectionDetail>
- </div>
- </DataloadSection>
+ FLUID.ELECTRICITY.UNIT
+ </span>
+ </div>
+ <div
+ class="dataloadvisualizer-euro text-16-normal electricity"
+ >
+ 2,09 €
+ </div>
</div>
- <mock-EstimatedConsumptionModal
- handleCloseClick={[Function]}
- open={false}
- />
</div>
- </DataloadConsumptionVisualizer>
-</Provider>
+ <mock-estimatedconsumptionmodal
+ open="false"
+ />
+ </div>
+</div>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadNoValue.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadNoValue.spec.tsx.snap
index e70438172e75594f67fc1bfd8b2a592df5b78e1f..07fe03fbf1a4708328ccff0e2d3d065b6a325f60 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadNoValue.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadNoValue.spec.tsx.snap
@@ -1,30 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DataloadNoValue component should render correctly 1`] = `
-<DataloadNoValue
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- setActive={[MockFunction]}
->
+<div>
<div
- className="dataloadvisualizer-content text-22-normal"
+ class="dataloadvisualizer-content text-22-normal"
>
<div
- className="dataloadvisualizer-section"
+ class="dataloadvisualizer-section"
>
<div
- className="dataloadvisualizer-value electricity upper to-come"
+ class="dataloadvisualizer-value electricity upper to-come"
>
consumption_visualizer.data_to_come
</div>
</div>
</div>
-</DataloadNoValue>
+</div>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSection.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSection.spec.tsx.snap
index 325b7cc8616a4a6658bc4675860cc86b99c37c9f..46f81e81efde54fe0b8f5950427f45535cc5c8e5 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSection.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSection.spec.tsx.snap
@@ -1,51 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DataloadSection component should render correctly 1`] = `
-<DataloadSection
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[MockFunction]}
->
+<div>
<div
- className="dataloadvisualizer-section"
+ class="dataloadvisualizer-section"
>
<div
- className="dataloadvisualizer-value text-36-bold electricity"
+ class="dataloadvisualizer-value text-36-bold electricity"
>
<mock-dataloadsectionvalue
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[MockFunction]}
+ dataload="[object Object]"
+ dataloadsectiontype="NO_COMPARE"
+ fluidtype="0"
/>
</div>
<mock-dataloadsectiondetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
+ dataload="[object Object]"
+ dataloadsectiontype="NO_COMPARE"
+ fluidtype="0"
/>
</div>
-</DataloadSection>
+</div>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionDetail.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionDetail.spec.tsx.snap
index 8a77ee10d05efd830cedb86e08a933b02803b93d..485dca8a00bef798f0388319bf310f5beb07f114 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionDetail.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionDetail.spec.tsx.snap
@@ -1,188 +1,59 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DataloadSectionDetail component should display value details if multifluid and no comparison case all valid data 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 12,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 1,
- },
- Object {
- "state": "VALID",
- "value": 2,
- },
- Object {
- "state": "VALID",
- "value": 3,
- },
- ],
- }
- }
- dataloadSectionType="RIGHT"
- fluidType={3}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal"
+ class="dataloadvisualizer-euro text-16-normal"
/>
-</DataloadSectionDetail>
+</div>
`;
exports[`DataloadSectionDetail component should display value details if multifluid and no comparison case valid and coming data 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "AGGREGATED_WITH_UPCOMING",
- "value": 12,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 1,
- },
- Object {
- "state": "COMING",
- "value": -1,
- },
- Object {
- "state": "VALID",
- "value": 3,
- },
- ],
- }
- }
- dataloadSectionType="RIGHT"
- fluidType={3}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal"
+ class="dataloadvisualizer-euro text-16-normal"
/>
-</DataloadSectionDetail>
+</div>
`;
exports[`DataloadSectionDetail component should display value details if multifluid and no comparison case valid and hole data 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "AGGREGATED_WITH_HOLE_OR_MISSING",
- "value": 12,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 1,
- },
- Object {
- "state": "HOLE",
- "value": -1,
- },
- Object {
- "state": "VALID",
- "value": 3,
- },
- ],
- }
- }
- dataloadSectionType="RIGHT"
- fluidType={3}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal"
+ class="dataloadvisualizer-euro text-16-normal"
/>
-</DataloadSectionDetail>
+</div>
`;
exports[`DataloadSectionDetail component should display value details if multifluid and no comparison case valid and missing data 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "AGGREGATED_WITH_HOLE_OR_MISSING",
- "value": 12,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 1,
- },
- Object {
- "state": "MISSING",
- "value": -1,
- },
- Object {
- "state": "VALID",
- "value": 3,
- },
- ],
- }
- }
- dataloadSectionType="RIGHT"
- fluidType={3}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal"
+ class="dataloadvisualizer-euro text-16-normal"
/>
-</DataloadSectionDetail>
+</div>
`;
exports[`DataloadSectionDetail component should not display if multifluid and comparison 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="RIGHT"
- fluidType={3}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal"
+ class="dataloadvisualizer-euro text-16-normal"
/>
-</DataloadSectionDetail>
+</div>
`;
exports[`DataloadSectionDetail component should not display value details if multifluid, no valueDetail and comparison 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "AGGREGATED_EMPTY",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="RIGHT"
- fluidType={3}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal"
+ class="dataloadvisualizer-euro text-16-normal"
/>
-</DataloadSectionDetail>
+</div>
`;
exports[`DataloadSectionDetail component should render correctly 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal electricity"
+ class="dataloadvisualizer-euro text-16-normal electricity"
>
2,09 €
</div>
-</DataloadSectionDetail>
+</div>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionValue.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionValue.spec.tsx.snap
index ba54ac2c063fd7a1ee4845f20d13e328aa999872..40c0c232211606a21bc360620ced413ca8db2721 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionValue.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionValue.spec.tsx.snap
@@ -1,24 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DataloadSectionValue component should render correctly 1`] = `
-<DataloadSectionValue
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[MockFunction]}
->
+<div>
12,00
<span
- className="text-18-normal"
+ class="text-18-normal"
>
FLUID.ELECTRICITY.UNIT
</span>
-</DataloadSectionValue>
+</div>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
index c4aa35b596c03103bd7e812d7b7348f7b45778eb..c864e8304fa7049b021cf603cdf0f491e8f1e608 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
@@ -1,891 +1,122 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EstimatedConsumptionModal component should render correctly 1`] = `
-<EstimatedConsumptionModal
- 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"
- >
- consumption_visualizer.modal.window_title
- </div>
- <button
- aria-label="consumption_visualizer.modal.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="estimation-modal"
- >
- <div
- class="text-20-normal modal-title"
- >
- consumption_visualizer.modal.title
- </div>
- <div
- class="text-16-normal"
- >
- consumption_visualizer.modal.part1
- </div>
- <br />
- <div
- class="text-16-normal"
- >
- consumption_visualizer.modal.part2
- </div>
- <ul>
- <li>
- <span
- class="electricity"
- >
- FLUID.ELECTRICITY.LABEL
- </span>
- consumption_visualizer.modal.list1
- </li>
- <li>
- <span
- class="water"
- >
- FLUID.WATER.LABEL
- </span>
- consumption_visualizer.modal.list3
- </li>
- <li>
- <span
- class="gas"
- >
- FLUID.GAS.LABEL
- </span>
- consumption_visualizer.modal.list2
- </li>
- </ul>
- <div
- class="text-16-normal"
- >
- consumption_visualizer.modal.part3
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ consumption_visualizer.modal.window_title
+ </div>
+ <button
+ aria-label="consumption_visualizer.modal.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,
- }
- }
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="estimation-modal"
+ >
+ <div
+ class="text-20-normal modal-title"
+ >
+ consumption_visualizer.modal.title
+ </div>
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.modal.part1
+ </div>
+ <br />
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.modal.part2
+ </div>
+ <ul>
+ <li>
+ <span
+ class="electricity"
>
- <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}
+ FLUID.ELECTRICITY.LABEL
+ </span>
+ consumption_visualizer.modal.list1
+ </li>
+ <li>
+ <span
+ class="water"
>
- <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"
- >
- consumption_visualizer.modal.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption_visualizer.modal.close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="consumption_visualizer.modal.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="consumption_visualizer.modal.close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="consumption_visualizer.modal.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="consumption_visualizer.modal.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="estimation-modal"
- >
- <div
- className="text-20-normal modal-title"
- >
- consumption_visualizer.modal.title
- </div>
- <div
- className="text-16-normal"
- >
- consumption_visualizer.modal.part1
- </div>
- <br />
- <div
- className="text-16-normal"
- >
- consumption_visualizer.modal.part2
- </div>
- <ul>
- <li>
- <span
- className="electricity"
- >
- FLUID.ELECTRICITY.LABEL
- </span>
- consumption_visualizer.modal.list1
- </li>
- <li>
- <span
- className="water"
- >
- FLUID.WATER.LABEL
- </span>
- consumption_visualizer.modal.list3
- </li>
- <li>
- <span
- className="gas"
- >
- FLUID.GAS.LABEL
- </span>
- consumption_visualizer.modal.list2
- </li>
- </ul>
- <div
- className="text-16-normal"
- >
- consumption_visualizer.modal.part3
- </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))>
-</EstimatedConsumptionModal>
+ FLUID.WATER.LABEL
+ </span>
+ consumption_visualizer.modal.list3
+ </li>
+ <li>
+ <span
+ class="gas"
+ >
+ FLUID.GAS.LABEL
+ </span>
+ consumption_visualizer.modal.list2
+ </li>
+ </ul>
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.modal.part3
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/InfoDataConsumptionVisualizer.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/InfoDataConsumptionVisualizer.spec.tsx.snap
index 151a98bdd258e3755248640676bf77b747bab782..41ed4044abb04d88c77a57f53f4c00475bdedc57 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/InfoDataConsumptionVisualizer.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/InfoDataConsumptionVisualizer.spec.tsx.snap
@@ -1,29 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`InfoDataConsumptionVisualizer component should render correctly when data valid 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <InfoDataConsumptionVisualizer
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- lastDataDate={"2020-10-01T00:00:00.000Z"}
- />
-</Provider>
+<div>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnText"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ consumption_visualizer.last_available_data
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
index cb613b5dcfe136b0d2b70f2150d56c42546afc8d..051488da021c91f20999a61614d2b53a0a6e573c 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
@@ -1,1027 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NoDataModal component should render correctly 1`] = `
-<NoDataModal
- handleCloseClick={[MockFunction]}
- open={true}
->
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
- >
- <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}
- >
- <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}
- >
- <ForwardRef(Portal)
- disablePortal={false}
- >
- <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"
- >
- consumption_visualizer.modal.window_title
- </div>
- <button
- aria-label="consumption_visualizer.modal.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="nodata-modal"
- >
- <div
- class="question-mark"
- >
- <svg
- class="styles__icon___23x3R"
- height="36"
- width="36"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </div>
- <div
- class="text-20-normal title"
- >
- consumption_visualizer.why_no_data
- </div>
- <div
- class="text-16-normal"
- >
- consumption_visualizer.dataModal.list_title
- </div>
- <ul>
- <li>
- consumption_visualizer.dataModal.item1
- </li>
- <li>
- consumption_visualizer.dataModal.item2
- </li>
- <li>
- consumption_visualizer.dataModal.item3
- </li>
- <li>
- consumption_visualizer.dataModal.item4
- </li>
- </ul>
- <button
- aria-label="ecogesture_info_modal.button_close"
- class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label"
- >
- ecogesture_info_modal.button_close
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
- >
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
- >
- <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"
- >
- consumption_visualizer.modal.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption_visualizer.modal.close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="consumption_visualizer.modal.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="consumption_visualizer.modal.close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="consumption_visualizer.modal.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="consumption_visualizer.modal.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="nodata-modal"
- >
- <div
- className="question-mark"
- >
- <Icon
- icon="test-file-stub"
- size={36}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <svg
- className="styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </div>
- <div
- className="text-20-normal title"
- >
- consumption_visualizer.why_no_data
- </div>
- <div
- className="text-16-normal"
- >
- consumption_visualizer.dataModal.list_title
- </div>
- <ul>
- <li>
- consumption_visualizer.dataModal.item1
- </li>
- <li>
- consumption_visualizer.dataModal.item2
- </li>
- <li>
- consumption_visualizer.dataModal.item3
- </li>
- <li>
- consumption_visualizer.dataModal.item4
- </li>
- </ul>
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture_info_modal.button_close"
- className="btnPrimary"
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture_info_modal.button_close"
- className="btnPrimary"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture_info_modal.button_close"
- className="MuiButton-root MuiButton-text btnPrimary"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture_info_modal.button_close"
- className="MuiButton-root MuiButton-text btnPrimary"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="ecogesture_info_modal.button_close"
- className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
- 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="MuiButton-label"
- >
- ecogesture_info_modal.button_close
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- 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(Button)>
- </WithStyles(ForwardRef(Button))>
- </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))>
-</NoDataModal>
+<div
+ aria-hidden="true"
+/>
`;
diff --git a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
index d7c31f56252b7913e0ba71ec1514c320bab647d1..a116495e40a7d6b79a81e242827a4193b840e3fb 100644
--- a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
+++ b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
@@ -43,23 +43,11 @@
padding: 0.5rem 0.5rem;
}
.dataloadvisualizer-value {
- flex-direction: row;
- & span {
- align-self: flex-end;
- margin-left: 0.5em;
- }
- .euroUnit {
- margin-left: 0.4em;
- position: relative;
- top: -12px;
- }
- .estimated {
- cursor: pointer;
- font-weight: 500;
- text-decoration: underline;
- margin-left: 0.5rem;
- position: relative;
- top: -12px;
+ display: flex;
+ gap: 0.4rem;
+ align-items: center;
+ &.alignTop {
+ align-items: flex-start;
}
}
.upper {