diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx
index ebff1dd6d6698306c1a0b582e328a71c76e00809..ef633974e471f917d59c3c818d6e5e833928ed00 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx
@@ -1,12 +1,14 @@
import React from 'react'
import { mount } from 'enzyme'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
-import { Provider } from 'react-redux'
-import configureStore from 'redux-mock-store'
-import * as reactRedux from 'react-redux'
+import toJson from 'enzyme-to-json'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { DateTime } from 'luxon'
import ElecHalfHourMonthlyAnalysis from './ElecHalfHourMonthlyAnalysis'
import { IconButton } from '@material-ui/core'
+import {
+ mockDataLoadEnedisAnalysis,
+ mockEnedisMonthlyAnalysisArray,
+} from '../../../tests/__mocks__/enedisMonthlyAnalysisData.mock'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -17,64 +19,124 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockcompareStepDate = jest.fn()
-jest.mock('services/dateChart.service', () => {
+jest.mock('components/Hooks/useExploration', () => {
+ return () => ['', jest.fn()]
+})
+
+jest.mock(
+ 'components/Analysis/ElecHalfHourChart',
+ () => 'mock-elechalfhourchart'
+)
+jest.mock('components/Analysis/ElecInfoModal', () => 'mock-elecinfomodal')
+
+const mockCheckDoctypeEntries = jest.fn()
+jest.mock('services/consumption.service', () => {
+ return jest.fn(() => {
+ return {
+ checkDoctypeEntries: mockCheckDoctypeEntries,
+ }
+ })
+})
+const mockGetEnedisMonthlyAnalysisByDate = jest.fn()
+const mockAggregateValuesToDataLoad = jest.fn()
+jest.mock('services/enedisMonthlyAnalysisData.service', () => {
return jest.fn(() => {
return {
- compareStepDate: mockcompareStepDate,
+ getEnedisMonthlyAnalysisByDate: mockGetEnedisMonthlyAnalysisByDate,
+ aggregateValuesToDataLoad: mockAggregateValuesToDataLoad,
}
})
})
-const mockStore = configureStore([])
-const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
describe('ElecHalfHourMonthlyAnalysis component', () => {
- it('should be rendered correctly', () => {
- const store = mockStore({
- ecolyo: {
- global: globalStateData,
- },
- })
- mockUseSelector.mockReturnValue(
- DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })
+ beforeEach(() => {
+ mockCheckDoctypeEntries.mockClear()
+ mockGetEnedisMonthlyAnalysisByDate.mockClear()
+ mockAggregateValuesToDataLoad.mockClear()
+ })
+
+ it('should be rendered correctly when isHalfHourActivated is false', async () => {
+ mockCheckDoctypeEntries.mockResolvedValueOnce(false)
+ const wrapper = mount(
+ <ElecHalfHourMonthlyAnalysis
+ analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+ zone: 'utc',
+ })}
+ />
+ )
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
+ })
+
+ it('should be rendered correctly when isHalfHourActivated is true', async () => {
+ mockCheckDoctypeEntries.mockResolvedValue(true)
+ mockGetEnedisMonthlyAnalysisByDate.mockResolvedValueOnce(
+ mockEnedisMonthlyAnalysisArray
+ )
+ mockAggregateValuesToDataLoad.mockResolvedValueOnce(
+ mockDataLoadEnedisAnalysis
)
const wrapper = mount(
- <Provider store={store}>
- <ElecHalfHourMonthlyAnalysis
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ <ElecHalfHourMonthlyAnalysis
+ analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+ zone: 'utc',
+ })}
+ />
+ )
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
+
it('should change from weekend to week', async () => {
- const store = mockStore({
- ecolyo: {
- global: globalStateData,
- },
- })
- mockUseSelector.mockReturnValue(
- DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })
+ mockCheckDoctypeEntries.mockResolvedValue(true)
+ mockGetEnedisMonthlyAnalysisByDate.mockResolvedValueOnce(
+ mockEnedisMonthlyAnalysisArray
+ )
+ mockAggregateValuesToDataLoad.mockResolvedValueOnce(
+ mockDataLoadEnedisAnalysis
)
const wrapper = mount(
- <Provider store={store}>
- <ElecHalfHourMonthlyAnalysis
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
+ <ElecHalfHourMonthlyAnalysis
+ analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+ zone: 'utc',
+ })}
+ />
)
+ await waitForComponentToPaint(wrapper)
wrapper
.find(IconButton)
.first()
.simulate('click')
- expect(wrapper.find('.weekend')).toBeTruthy()
+ await waitForComponentToPaint(wrapper)
+ expect(wrapper.find('.week').exists()).toBeTruthy()
+ })
+
+ it('should call the ElecInfoModal with open = true when click on the button', async () => {
+ mockCheckDoctypeEntries.mockResolvedValue(true)
+ mockGetEnedisMonthlyAnalysisByDate.mockResolvedValueOnce(
+ mockEnedisMonthlyAnalysisArray
+ )
+ mockAggregateValuesToDataLoad.mockResolvedValueOnce(
+ mockDataLoadEnedisAnalysis
+ )
+ const wrapper = mount(
+ <ElecHalfHourMonthlyAnalysis
+ analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+ zone: 'utc',
+ })}
+ />
+ )
+ await waitForComponentToPaint(wrapper)
+ wrapper
+ .find('.showmodal')
+ .first()
+ .simulate('click')
+ await waitForComponentToPaint(wrapper)
+ expect(
+ wrapper
+ .find('mock-elecinfomodal')
+ .prop('open')
+ ?.valueOf()
+ ).toBe(true)
})
})
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
index a1492a166c92227d9028a1bf23ae6deab1a080d8..68cf39659a63832172bbdf017190bc30ecbb1db2 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import RigthArrowIcon from 'assets/icons/ico/right-arrow.svg'
@@ -18,7 +18,7 @@ import {
AggregatedEnedisMonthlyDataloads,
EnedisMonthlyAnalysisData,
} from 'models/enedisMonthlyAnalysis'
-import ElecHalfHourChart from './ElecHalfHourChart'
+import ElecHalfHourChart from 'components/Analysis/ElecHalfHourChart'
import './elecHalfHourMonthlyAnalysis.scss'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import { TimeStep } from 'enum/timeStep.enum'
@@ -27,6 +27,7 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useExploration from 'components/Hooks/useExploration'
import { FluidConfig } from 'models'
import ConfigService from 'services/fluidConfig.service'
+import ElecInfoModal from './ElecInfoModal'
interface ElecHalfHourMonthlyAnalysisProps {
analysisDate: DateTime
@@ -39,18 +40,24 @@ const ElecHalfHourMonthlyAnalysis: React.FC<ElecHalfHourMonthlyAnalysisProps> =
const client = useClient()
const fluidConfig: Array<FluidConfig> = new ConfigService().getFluidConfig()
const [, setValidExploration] = useExploration()
- const [isWeekend, setisWeekend] = useState(true)
- const [isHalfHourActivated, setisHalfHourActivated] = useState(true)
- const [isLoading, setisLoading] = useState(true)
+ const [isWeekend, setisWeekend] = useState<boolean>(true)
+ const [isHalfHourActivated, setisHalfHourActivated] = useState<boolean>(true)
+ const [isLoading, setisLoading] = useState<boolean>(true)
const [monthDataloads, setMonthDataloads] = useState<
AggregatedEnedisMonthlyDataloads
>()
const [enedisAnalysisValues, setenedisAnalysisValues] = useState<
EnedisMonthlyAnalysisData
>()
- const handleChangeWeek = () => {
+ const [openInfoModal, setOpenInfoModal] = useState<boolean>(false)
+
+ const handleChangeWeek = useCallback(() => {
setisWeekend(prev => !prev)
- }
+ }, [])
+
+ const toggleOpenModal = useCallback(() => {
+ setOpenInfoModal(prev => !prev)
+ }, [])
useEffect(() => {
let subscribed = true
@@ -64,7 +71,7 @@ const ElecHalfHourMonthlyAnalysis: React.FC<ElecHalfHourMonthlyAnalysisProps> =
if (activateHalfHourLoad) {
const emas = new EnedisMonthlyAnalysisDataService(client)
const aggegatedDate = analysisDate.minus({ month: 1 })
- const data = await emas.getEnedisMonthlyAnalysisByDate(
+ const data: EnedisMonthlyAnalysisData[] = await emas.getEnedisMonthlyAnalysisByDate(
aggegatedDate.year,
aggegatedDate.month
)
@@ -177,6 +184,9 @@ const ElecHalfHourMonthlyAnalysis: React.FC<ElecHalfHourMonthlyAnalysisProps> =
</div>
</div>
</div>
+ <div onClick={toggleOpenModal} className="showmodal">
+ {t('special_elec.showModal')}
+ </div>
</div>
)}
</>
@@ -219,6 +229,7 @@ const ElecHalfHourMonthlyAnalysis: React.FC<ElecHalfHourMonthlyAnalysisProps> =
</Button>
</>
)}
+ <ElecInfoModal open={openInfoModal} handleCloseClick={toggleOpenModal} />
</div>
)
}
diff --git a/src/components/Analysis/ElecInfoModal.spec.tsx b/src/components/Analysis/ElecInfoModal.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cbd20d0dcb97f58925e18cc1a4e35c7ca092ee9d
--- /dev/null
+++ b/src/components/Analysis/ElecInfoModal.spec.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import ElecInfoModal from './ElecInfoModal'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+describe('ElecInfoModal component', () => {
+ it('should be rendered correctly', () => {
+ const component = mount(
+ <ElecInfoModal open={true} handleCloseClick={jest.fn()} />
+ )
+ expect(toJson(component)).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Analysis/ElecInfoModal.tsx b/src/components/Analysis/ElecInfoModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1b2b0ba284ca5327dba7a542c1b9f12073215f67
--- /dev/null
+++ b/src/components/Analysis/ElecInfoModal.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Dialog from '@material-ui/core/Dialog'
+import { IconButton } from '@material-ui/core'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import './elecInfoModal.scss'
+
+interface ElecInfoModalProps {
+ open: boolean
+ handleCloseClick: () => void
+}
+
+const ElecInfoModal: React.FC<ElecInfoModalProps> = ({
+ open,
+ handleCloseClick,
+}: ElecInfoModalProps) => {
+ const { t } = useI18n()
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('elec_info_modal.accessibility.window_title')}
+ </div>
+ <IconButton
+ aria-label={t('elec_info_modal.accessibility.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={16} />
+ </IconButton>
+ <div className="elecInfoModal">
+ <div className="title text-18-bold">{t('elec_info_modal.title1')}</div>
+ <div className="text">
+ {t('elec_info_modal.text1')}
+ <br />
+ {t('elec_info_modal.text2')}
+ </div>
+ <div className="title text-18-bold">{t('elec_info_modal.title2')}</div>
+ <div className="text">
+ {t('elec_info_modal.text3')}
+ <br />
+ {t('elec_info_modal.text4')}
+ <br />
+ {t('elec_info_modal.text5')}
+ </div>
+ </div>
+ </Dialog>
+ )
+}
+
+export default ElecInfoModal
diff --git a/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index c0386f0588d4bbef2abd8fa46b36c34b73601700..5300385498177f89b076b8797d9403dd944fde18 100644
--- a/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -1,20 +1,654 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
+exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when isHalfHourActivated is false 1`] = `
+<ElecHalfHourMonthlyAnalysis
+ analysisDate={"2021-07-01T00:00:00.000Z"}
>
- <ElecHalfHourMonthlyAnalysis
- analysisDate={"2021-07-01T00:00:00.000Z"}
- />
-</Provider>
+ <div
+ className="special-elec-container"
+ >
+ <Icon
+ className="elec-icon"
+ icon="test-file-stub"
+ size={42}
+ spin={false}
+ >
+ <Component
+ className="elec-icon styles__icon___23x3R"
+ height={42}
+ style={Object {}}
+ width={42}
+ >
+ <svg
+ className="elec-icon styles__icon___23x3R"
+ height={42}
+ style={Object {}}
+ width={42}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="text-18-normal title"
+ >
+ special_elec.title
+ </div>
+ <div
+ className="activation-text text-18-normal"
+ >
+ timestep.activate.enedis.no_consent_active.text_analysis
+ </div>
+ <WithStyles(ForwardRef(Button))
+ aria-label="timestep.activate.enedis.no_consent_active.accessibility.button_activate"
+ classes={
+ Object {
+ "label": "text-16-bold",
+ "root": "btn-highlight",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ aria-label="timestep.activate.enedis.no_consent_active.accessibility.button_activate"
+ 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 text-16-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-highlight",
+ "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={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="timestep.activate.enedis.no_consent_active.accessibility.button_activate"
+ className="MuiButton-root btn-highlight MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="timestep.activate.enedis.no_consent_active.accessibility.button_activate"
+ className="MuiButton-root btn-highlight MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <button
+ aria-label="timestep.activate.enedis.no_consent_active.accessibility.button_activate"
+ className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiButton-label text-16-bold"
+ >
+ <div
+ className="oauthform-button-content"
+ >
+ <div
+ className="oauthform-button-content-icon"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ size={48}
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={48}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={48}
+ style={Object {}}
+ width={48}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={48}
+ style={Object {}}
+ width={48}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </div>
+ <div
+ className="oauthform-button-text text-18-bold"
+ >
+ <div>
+ timestep.activate.enedis.no_consent_active.accessibility.button_activate
+ </div>
+ </div>
+ </div>
+ </span>
+ <NoSsr>
+ <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)>
+ </NoSsr>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ <mock-elecinfomodal
+ handleCloseClick={[Function]}
+ open={false}
+ />
+ </div>
+</ElecHalfHourMonthlyAnalysis>
+`;
+
+exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when isHalfHourActivated is true 1`] = `
+<ElecHalfHourMonthlyAnalysis
+ analysisDate={"2021-07-01T00:00:00.000Z"}
+>
+ <div
+ className="special-elec-container"
+ >
+ <Icon
+ className="elec-icon"
+ icon="test-file-stub"
+ size={42}
+ spin={false}
+ >
+ <Component
+ className="elec-icon styles__icon___23x3R"
+ height={42}
+ style={Object {}}
+ width={42}
+ >
+ <svg
+ className="elec-icon styles__icon___23x3R"
+ height={42}
+ style={Object {}}
+ width={42}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="text-18-normal title"
+ >
+ special_elec.title
+ </div>
+ <div
+ className="navigator"
+ >
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption.accessibility.button_previous_value"
+ className="arrow-prev"
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption.accessibility.button_previous_value"
+ className="arrow-prev"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption.accessibility.button_previous_value"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-prev"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption.accessibility.button_previous_value"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-prev"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ className="MuiButtonBase-root MuiIconButton-root arrow-prev"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiIconButton-label"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={24}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <NoSsr>
+ <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)>
+ </NoSsr>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ <div
+ className="average text-18-normal"
+ >
+ <div
+ className="text-1"
+ >
+ special_elec.average
+ </div>
+ <div
+ className="text-2 text-18-bold"
+ >
+ special_elec.weektype
+
+ <span
+ className="weekend"
+ >
+ special_elec.weekend
+ </span>
+ </div>
+ </div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption.accessibility.button_previous_value"
+ className="arrow-next"
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption.accessibility.button_previous_value"
+ className="arrow-next"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption.accessibility.button_previous_value"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-next"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption.accessibility.button_previous_value"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-next"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ className="MuiButtonBase-root MuiIconButton-root arrow-next"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiIconButton-label"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={24}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <NoSsr>
+ <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)>
+ </NoSsr>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </div>
+ <mock-elechalfhourchart
+ isWeekend={true}
+ />
+ <div
+ className="min-max"
+ >
+ <div
+ className="container"
+ >
+ <Icon
+ className="minIcon"
+ icon="test-file-stub"
+ size={40}
+ spin={false}
+ >
+ <Component
+ className="minIcon styles__icon___23x3R"
+ height={40}
+ style={Object {}}
+ width={40}
+ >
+ <svg
+ className="minIcon styles__icon___23x3R"
+ height={40}
+ style={Object {}}
+ width={40}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="text"
+ >
+ <div
+ className="min text-18-normal"
+ >
+ special_elec.min
+ </div>
+ <div
+ className="value text-18-bold"
+ >
+ 3
+
+ <span>
+ kWh
+ </span>
+ </div>
+ </div>
+ </div>
+ <div
+ className="container"
+ >
+ <Icon
+ className="minIcon"
+ icon="test-file-stub"
+ size={40}
+ spin={false}
+ >
+ <Component
+ className="minIcon styles__icon___23x3R"
+ height={40}
+ style={Object {}}
+ width={40}
+ >
+ <svg
+ className="minIcon styles__icon___23x3R"
+ height={40}
+ style={Object {}}
+ width={40}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="text"
+ >
+ <div
+ className="min text-18-normal"
+ >
+ special_elec.maxPower
+ </div>
+ <div
+ className="value text-18-bold"
+ >
+ 2.00
+ <span>
+ kVA
+ </span>
+ </div>
+ </div>
+ </div>
+ <div
+ className="showmodal"
+ onClick={[Function]}
+ >
+ special_elec.showModal
+ </div>
+ </div>
+ <mock-elecinfomodal
+ handleCloseClick={[Function]}
+ open={false}
+ />
+ </div>
+</ElecHalfHourMonthlyAnalysis>
`;
diff --git a/src/components/Analysis/__snapshots__/ElecInfoModal.spec.tsx.snap b/src/components/Analysis/__snapshots__/ElecInfoModal.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..de76327d5dce258bb938a4feb475ed28aae917d7
--- /dev/null
+++ b/src/components/Analysis/__snapshots__/ElecInfoModal.spec.tsx.snap
@@ -0,0 +1,847 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ElecInfoModal component should be rendered correctly 1`] = `
+<ElecInfoModal
+ 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 {
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "hover": "rgba(0, 0, 0, 0.08)",
+ "hoverOpacity": 0.08,
+ "selected": "rgba(0, 0, 0, 0.14)",
+ },
+ "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}
+ disableBackdropClick={false}
+ 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"
+ >
+ elec_info_modal.accessibility.window_title
+ </div>
+ <button
+ aria-label="elec_info_modal.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="elecInfoModal"
+ >
+ <div
+ class="title text-18-bold"
+ >
+ elec_info_modal.title1
+ </div>
+ <div
+ class="text"
+ >
+ elec_info_modal.text1
+ <br />
+ elec_info_modal.text2
+ </div>
+ <div
+ class="title text-18-bold"
+ >
+ elec_info_modal.title2
+ </div>
+ <div
+ class="text"
+ >
+ elec_info_modal.text3
+ <br />
+ elec_info_modal.text4
+ <br />
+ elec_info_modal.text5
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+ </body>
+ }
+ >
+ <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))>
+ <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"
+ onClick={[Function]}
+ onMouseDown={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
+ >
+ <WithStyles(ForwardRef(Paper))
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ elevation={24}
+ role="dialog"
+ >
+ <ForwardRef(Paper)
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={24}
+ role="dialog"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ elec_info_modal.accessibility.window_title
+ </div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="elec_info_modal.accessibility.button_close"
+ className="modal-paper-close-button"
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="elec_info_modal.accessibility.button_close"
+ className="modal-paper-close-button"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="elec_info_modal.accessibility.button_close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="elec_info_modal.accessibility.button_close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <button
+ aria-label="elec_info_modal.accessibility.button_close"
+ className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiIconButton-label"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <NoSsr>
+ <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)>
+ </NoSsr>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ <div
+ className="elecInfoModal"
+ >
+ <div
+ className="title text-18-bold"
+ >
+ elec_info_modal.title1
+ </div>
+ <div
+ className="text"
+ >
+ elec_info_modal.text1
+ <br />
+ elec_info_modal.text2
+ </div>
+ <div
+ className="title text-18-bold"
+ >
+ elec_info_modal.title2
+ </div>
+ <div
+ className="text"
+ >
+ elec_info_modal.text3
+ <br />
+ elec_info_modal.text4
+ <br />
+ elec_info_modal.text5
+ </div>
+ </div>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+</ElecInfoModal>
+`;
diff --git a/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss b/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss
index ec2f6105757bb921a4e1dfb19cd65642bc61be5b..4f79df64482152cad1eafab89160fe74e4cd6908 100644
--- a/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss
+++ b/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss
@@ -52,6 +52,13 @@
text-align: center;
color: white;
}
+ .showmodal {
+ cursor: pointer;
+ margin: 1.5rem 0 1rem 0;
+ text-align: center;
+ color: $grey-bright;
+ text-decoration: underline;
+ }
}
.graph-elec-half-hour {
height: 13rem;
diff --git a/src/components/Analysis/elecInfoModal.scss b/src/components/Analysis/elecInfoModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c8589b2fe63c817d78f18aee5ffa502e1d4a83ae
--- /dev/null
+++ b/src/components/Analysis/elecInfoModal.scss
@@ -0,0 +1,12 @@
+@import 'src/styles/base/color';
+
+.elecInfoModal {
+ padding: 0.5rem;
+ color: $grey-bright;
+ .title {
+ margin: 1.5rem 0;
+ color: $gold-shadow;
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+ }
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index de44887c7e18891afc2d9c6d1330b72b881b10b3..b7e5e60b0a9eca0c0c6ddddfc59e1e61bfb92610 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -113,7 +113,21 @@
"week": "semaine",
"weekend": "week-end",
"min": "Consommation minimum",
- "maxPower": "Puissance maximum atteinte"
+ "maxPower": "Puissance maximum atteinte",
+ "showModal": "Plus d'infos"
+ },
+ "elec_info_modal": {
+ "accessibility": {
+ "window_title": "electricity-info-modal",
+ "button_close": "close-modal"
+ },
+ "title1": "Qu’est-ce que la consommation minimum ?",
+ "title2": "Qu’est-ce que la puissance maximum ?",
+ "text1": "La consommation minimum correspond à votre plus petite consommation du mois, sur un créneau d'une demi-heure.",
+ "text2": "Elle peut comprendre la consommation de vos appareils électriques en veille (box, télé, ...) ou encore celle de vos frigo et congélateur.",
+ "text3": "C’est la puissance maximum délivrée par tous les appareils fonctionnant au même moment dans votre logement.",
+ "text4": "Vous avez choisi une puissance maximum dans votre offre d’éléctricité (3, 6 ou 9 kVA...) que vous ne devez pas dépasser pour ne pas faire sauter votre compteur. ",
+ "text5": "Cette puissance varie d'un mois à l'autre, regardez cette valeur sur l'ensemble de l'année pour vérifier si votre puissance souscrite correspond bien à votre usage."
},
"auth": {
"enedisgrandlyon": {
diff --git a/tests/__mocks__/testUtils.ts b/tests/__mocks__/testUtils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2fe27298a9e9e930caf3ac30bf4e2f52489aaaa7
--- /dev/null
+++ b/tests/__mocks__/testUtils.ts
@@ -0,0 +1,12 @@
+import { ReactWrapper } from 'enzyme'
+import { act } from 'react-dom/test-utils'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const waitForComponentToPaint = async <TP extends any = {}>(
+ wrapper: ReactWrapper<TP>
+): Promise<void> => {
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve, 0))
+ wrapper.update()
+ })
+}