Commit c4cfcf56 authored by Guilhem CARRON's avatar Guilhem CARRON
Browse files
parents 38bdd0f9 94d7986b
This diff is collapsed.
......@@ -3,7 +3,7 @@
"slug": "ecolyo",
"icon": "icon.svg",
"categories": ["energy"],
"version": "1.6.0",
"version": "1.6.4",
"licence": "AGPL-3.0",
"editor": "Métropole de Lyon",
"default_locale": "fr",
......
{
"name": "ecolyo",
"version": "1.6.0",
"version": "1.6.4",
"scripts": {
"tx": "tx pull --all || true",
"lint": "yarn lint:js && yarn lint:styles",
......
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)
})
})
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>
)
}
......
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()
})
})
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
......@@ -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;
......
@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;
}
}
......@@ -86,7 +86,7 @@ const ConnectionOAuth: React.FC<ConnectionOAuthProps> = ({
)
const togglePartnerConnectionModal = useCallback(() => {
setOpenPartenerConnectionModal(prev => !prev)
setOpenPartenerConnectionModal((prev: boolean) => !prev)
}, [])
const handleEndSteps = useCallback(() => {
......
......@@ -2,7 +2,7 @@ import React from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import './connectionOAuth.scss'
import { Konnector } from 'models'
import OAuthForm from 'components/Connection/FormOAuth'
import FormOAuth from 'components/Connection/FormOAuth'
import Button from '@material-ui/core/Button'
interface ConnectionOAuthNoPartnerAccountProps {
......@@ -49,7 +49,7 @@ const ConnectionOAuthNoPartnerAccount = ({
{t('auth.' + `${konnectorSlug}` + '.no_account.subtitle2_info')}
</div>
<div className="koauthform-connect-button">
<OAuthForm
<FormOAuth
konnector={konnector}
onSuccess={handleSuccess}
highlightedStyle={false}
......
......@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import './connectionOAuth.scss'
import { Konnector } from 'models'
import OAuthForm from 'components/Connection/FormOAuth'
import FormOAuth from 'components/Connection/FormOAuth'
import Button from '@material-ui/core/Button'
interface ConnectionOAuthWithPartnerAccountProps {
......@@ -37,7 +37,7 @@ const ConnectionOAuthWithPartnerAccount = ({
{t('auth.' + konnectorSlug + '.with_account.subtitle1')}
</div>
<div className="koauthform-connect-button">
<OAuthForm
<FormOAuth
konnector={konnector}
onSuccess={handleSuccess}
highlightedStyle={true}
......
......@@ -27,25 +27,25 @@ const FormOAuth: React.FC<FormOAuthProps> = ({
const client = useClient()
const [status, setStatus] = useState<string>(IDLE)
const endOAuth = () => {
const endOAuth = useCallback(() => {
setStatus(IDLE)
}
const startOAuth = () => {
}, [])
const startOAuth = useCallback(() => {
setStatus(WAITING)
}
}, [])
const handleAccountId = useCallback(
(accountId: string) => {
endOAuth()
onSuccess(accountId)
},
[onSuccess]
[endOAuth, onSuccess]
)
const handleSubmit = () => {
startOAuth()
}
const handleOAuthCancel = useCallback(() => {
endOAuth()
}, [])
}, [endOAuth])
const icon = getPartnerPicto(
konnector ? konnector.slug : '',
......@@ -60,7 +60,7 @@ const FormOAuth: React.FC<FormOAuthProps> = ({
<>
<Button
aria-label={t('auth.accessibility.button_connect')}
onClick={handleSubmit}
onClick={startOAuth}
disabled={isWaiting}
classes={{
root: `${
......
......@@ -3,10 +3,11 @@
.content-view {
position: relative;
height: 100%;
height: inherit;
margin-top: 116px;
background-color: $default-background;
@media #{$large-phone} {
margin-top: 0;
height: 100%;
}
}
......@@ -218,7 +218,7 @@ const FaqData = async (client: Client): Promise<FAQSection[]> => {
pour un consommateur soutirant moins de 6 MWh par an)
</p>
<p>
- pour l'eau, 1 litre d’eau =
- pour l'eau, 1 litre d’eau ={' '}
{fluidPrices[FluidType.WATER].price}€ TTC (prix constaté au{' '}
{DateTime.fromISO(fluidPrices[FluidType.WATER].startDate)
.setZone('utc', {
......
......@@ -11,6 +11,7 @@ import {
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
import { act } from 'react-dom/test-utils'
import { BrowserRouter } from 'react-router-dom'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
......@@ -55,10 +56,12 @@ describe('FeedbackModal component', () => {
mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing)
const component = mount(
<Provider store={store}>
<FeedbackModal
open={true}
handleCloseClick={handleFeedbackModalClose}
/>
<BrowserRouter>
<FeedbackModal
open={true}
handleCloseClick={handleFeedbackModalClose}
/>
</BrowserRouter>
</Provider>
).getElement()
expect(component).toMatchSnapshot()
......@@ -76,10 +79,12 @@ describe('FeedbackModal functionnalities', () => {
const wrapper = mount(
<Provider store={store}>
<FeedbackModal
open={true}
handleCloseClick={handleFeedbackModalClose}
/>
<BrowserRouter>
<FeedbackModal
open={true}
handleCloseClick={handleFeedbackModalClose}
/>
</BrowserRouter>
</Provider>
)
......@@ -147,10 +152,12 @@ describe('FeedbackModal functionnalities', () => {
mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing)
const wrapper = mount(
<Provider store={store}>
<FeedbackModal
open={true}
handleCloseClick={handleFeedbackModalClose}
/>
<BrowserRouter>
<FeedbackModal
open={true}
handleCloseClick={handleFeedbackModalClose}
/>
</BrowserRouter>
</Provider>
)
await act(async () => {
......@@ -174,10 +181,12 @@ describe('FeedbackModal functionnalities', () => {
it('should upload the image', async () => {
const wrapper = mount(
<Provider store={store}>
<FeedbackModal
open={true}
handleCloseClick={handleFeedbackModalClose}
/>
<BrowserRouter>
<FeedbackModal
open={true}
handleCloseClick={handleFeedbackModalClose}
/>
</BrowserRouter>
</Provider>
)
await act(async () => {
......
......@@ -23,6 +23,8 @@ import './feedbackModal.scss'
import useExploration from 'components/Hooks/useExploration'
import { UserExplorationID } from 'enum/userExploration.enum'