From ca9a55fa9af9f1ba400d99fad6aa7e88c642c761 Mon Sep 17 00:00:00 2001
From: Guilhem CARRON <gcarron@grandlyon.com>
Date: Mon, 11 Oct 2021 13:07:24 +0000
Subject: [PATCH] feat(conso): Display missing data text if not data and
redirects to konnector update on click
---
.../icons/{visu => ico}/notif_error.svg | 0
.../ConsumptionVisualizer.tsx | 3 +
.../DataloadConsumptionVisualizer.spec.tsx | 6 +
.../DataloadConsumptionVisualizer.tsx | 28 ++++-
.../dataloadConsumptionVisualizer.scss | 7 ++
src/components/FluidChart/FluidChart.tsx | 3 +
src/components/Home/ConsumptionView.tsx | 7 +-
src/components/Home/FluidButton.spec.tsx | 26 ++++-
src/components/Home/FluidButton.tsx | 17 ++-
src/components/Home/consumptionView.scss | 2 +-
src/components/Home/fluidButtons.scss | 6 +
.../Konnector/KonnectorModal.spec.tsx | 106 ++++++++++++++++++
src/components/Konnector/KonnectorModal.tsx | 5 +-
.../Konnector/KonnectorViewerCard.tsx | 23 ++--
.../Konnector/KonnectorViewerList.spec.tsx | 61 ++++++++++
.../Konnector/KonnectorViewerList.tsx | 2 +-
.../KonnectorModal.spec.tsx.snap | 25 +++++
.../KonnectorViewerList.spec.tsx.snap | 18 +++
src/locales/fr.json | 2 +-
19 files changed, 321 insertions(+), 26 deletions(-)
rename src/assets/icons/{visu => ico}/notif_error.svg (100%)
create mode 100644 src/components/Konnector/KonnectorModal.spec.tsx
create mode 100644 src/components/Konnector/KonnectorViewerList.spec.tsx
create mode 100644 src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
create mode 100644 src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
diff --git a/src/assets/icons/visu/notif_error.svg b/src/assets/icons/ico/notif_error.svg
similarity index 100%
rename from src/assets/icons/visu/notif_error.svg
rename to src/assets/icons/ico/notif_error.svg
diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
index d597d1173..136ca5787 100644
--- a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
@@ -15,10 +15,12 @@ import ErrorDataConsumptionVisualizer from 'components/ConsumptionVisualizer/Err
interface ConsumptionVisualizerProps {
fluidType: FluidType
showCompare: boolean
+ setActive: React.Dispatch<React.SetStateAction<boolean>>
}
const ConsumptionVisualizer: React.FC<ConsumptionVisualizerProps> = ({
fluidType,
showCompare,
+ setActive,
}: ConsumptionVisualizerProps) => {
const { fluidStatus, fluidTypes } = useSelector(
(state: AppStore) => state.ecolyo.global
@@ -61,6 +63,7 @@ const ConsumptionVisualizer: React.FC<ConsumptionVisualizerProps> = ({
compareDataload={compareDataload}
showCompare={showCompare}
lastDataDate={lastDataDate}
+ setActive={setActive}
/>
<div className="consumptionvisualizer-info">
{dataload &&
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
index 45157fff4..ddb94ea25 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
@@ -52,6 +52,7 @@ describe('Dataload consumption visualizer component', () => {
lastDataDate={DateTime.fromISO('2021-09-23T00:00:00.000Z', {
zone: 'utc',
})}
+ setActive={jest.fn()}
/>
</Provider>
)
@@ -73,6 +74,7 @@ describe('Dataload consumption visualizer component', () => {
lastDataDate={DateTime.fromISO('2021-09-23T00:00:00.000Z', {
zone: 'utc',
})}
+ setActive={jest.fn()}
/>
</Provider>
)
@@ -94,6 +96,7 @@ describe('Dataload consumption visualizer component', () => {
lastDataDate={DateTime.fromISO('2021-09-23T00:00:00.000Z', {
zone: 'utc',
})}
+ setActive={jest.fn()}
/>
</Provider>
)
@@ -115,6 +118,7 @@ describe('Dataload consumption visualizer component', () => {
lastDataDate={DateTime.fromISO('2021-09-23T00:00:00.000Z', {
zone: 'utc',
})}
+ setActive={jest.fn()}
/>
</Provider>
)
@@ -137,6 +141,7 @@ describe('Dataload consumption visualizer component', () => {
lastDataDate={DateTime.fromISO('2021-09-23T00:00:00.000Z', {
zone: 'utc',
})}
+ setActive={jest.fn()}
/>
</Provider>
)
@@ -173,6 +178,7 @@ describe('Dataload consumption visualizer component', () => {
lastDataDate={DateTime.fromISO('2021-09-23T00:00:00.000Z', {
zone: 'utc',
})}
+ setActive={jest.fn()}
/>
</Router>
</Provider>
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 79439d735..0753bc775 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -25,6 +25,7 @@ interface DataloadConsumptionVisualizerProps {
compareDataload: Dataload | null
showCompare: boolean
lastDataDate: DateTime | null
+ setActive: React.Dispatch<React.SetStateAction<boolean>>
}
const DataloadConsumptionVisualizer = ({
fluidType,
@@ -32,6 +33,7 @@ const DataloadConsumptionVisualizer = ({
compareDataload,
showCompare,
lastDataDate,
+ setActive,
}: DataloadConsumptionVisualizerProps) => {
const { t } = useI18n()
const { loading } = useSelector((state: AppStore) => state.ecolyo.chart)
@@ -49,6 +51,27 @@ const DataloadConsumptionVisualizer = ({
},
[client]
)
+ const handleToggleKonnectionCard = useCallback(() => {
+ setActive(true)
+ const app = document.querySelector('.app-content')
+
+ const content = document.querySelector('.content-view')
+ if (content && app) {
+ setTimeout(() => {
+ //Desktop devices
+ app.scrollTo({
+ top: content.scrollHeight + 300,
+ behavior: 'smooth',
+ })
+ //Mobiles devices
+ app.scrollIntoView({
+ behavior: 'smooth',
+ block: 'end',
+ inline: 'end',
+ })
+ }, 300)
+ }
+ }, [setActive])
const toggleEstimationModal = useCallback(() => {
setOpenEstimationModal(prev => !prev)
}, [])
@@ -224,9 +247,8 @@ const DataloadConsumptionVisualizer = ({
</div>
) : (
<div
- className={`dataloadvisualizer-content${FluidType[
- fluidType
- ].toLowerCase()} text-22-normal`}
+ onClick={handleToggleKonnectionCard}
+ className={`dataloadvisualizer-content text-22-normal error`}
>
{`${t('consumption_visualizer.no_data')}`}
</div>
diff --git a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
index 5a902402a..c5659df8e 100644
--- a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
+++ b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
@@ -11,6 +11,13 @@
flex-direction: row;
align-items: center;
color: $grey-bright;
+
+ &.error {
+ cursor: pointer;
+ color: $red-primary;
+ font-weight: bold;
+ text-decoration: underline;
+ }
.dataloadvisualizer-section {
display: flex;
flex-direction: column;
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index d22433afe..e4b913929 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -26,10 +26,12 @@ import UsageEventService from 'services/usageEvent.service'
interface FluidChartProps {
fluidType: FluidType
+ setActive: React.Dispatch<React.SetStateAction<boolean>>
}
const FluidChart: React.FC<FluidChartProps> = ({
fluidType,
+ setActive,
}: FluidChartProps) => {
const { t } = useI18n()
const client = useClient()
@@ -129,6 +131,7 @@ const FluidChart: React.FC<FluidChartProps> = ({
showCompare={
currentTimeStep === TimeStep.YEAR ? false : showCompare
}
+ setActive={setActive}
/>
<FluidChartSwipe
fluidType={fluidType}
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index 16c93051a..c50430cc9 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -35,6 +35,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
const [isMulti] = useState<boolean>(
fluidType === FluidType.MULTIFLUID ? true : false
)
+ const [active, setActive] = useState<boolean>(false)
const defineHeaderHeight = useCallback((height: number) => {
setHeaderHeight(height)
@@ -73,7 +74,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
['--hidden']: loading,
})}
>
- <FluidChart fluidType={fluidType} />
+ <FluidChart fluidType={fluidType} setActive={setActive} />
<ConsumptionDetails fluidType={fluidType} />
</div>
{!isMulti && (
@@ -82,6 +83,8 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
fluidStatus={fluidStatus[fluidType]}
isParam={true}
isDisconnected={false}
+ setActive={setActive}
+ active={active}
/>
</div>
)}
@@ -92,6 +95,8 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
fluidStatus={fluidStatus[fluidType]}
isParam={false}
isDisconnected={true}
+ setActive={setActive}
+ active={active}
/>
</div>
) : (
diff --git a/src/components/Home/FluidButton.spec.tsx b/src/components/Home/FluidButton.spec.tsx
index c29a109e4..d177061f4 100644
--- a/src/components/Home/FluidButton.spec.tsx
+++ b/src/components/Home/FluidButton.spec.tsx
@@ -4,11 +4,14 @@ import { Provider } from 'react-redux'
import {
createMockStore,
mockInitialEcolyoState,
+ mockInitialGlobalState,
} from '../../../tests/__mocks__/store'
-import { FluidType } from 'enum/fluid.enum'
+import { FluidState, FluidType } from 'enum/fluid.enum'
import FluidButton from './FluidButton'
import UsageEventService from 'services/usageEvent.service'
+import configureStore from 'redux-mock-store'
+import { GlobalState } from 'models'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -52,6 +55,7 @@ describe('FluidButton component', () => {
)
expect(wrapper.find('.active')).toBeTruthy()
})
+
it('should trigger nav event', () => {
jest.mock('services/usageEvent.service')
const mockAddEvent = jest.fn()
@@ -64,4 +68,24 @@ describe('FluidButton component', () => {
wrapper.find('.fluid-button').simulate('click')
expect(mockAddEvent).toHaveBeenCalled()
})
+
+ it('should render errored button', () => {
+ const mockStore = configureStore([])
+
+ const updatedInitalState: GlobalState = {
+ ...mockInitialGlobalState,
+ }
+ updatedInitalState.fluidStatus[FluidType.GAS].status = FluidState.ERROR
+ const store2 = mockStore({
+ ecolyo: {
+ global: updatedInitalState,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store2}>
+ <FluidButton fluidType={FluidType.GAS} isActive={false} />
+ </Provider>
+ )
+ expect(wrapper.find('.notif-error')).toBeTruthy()
+ })
})
diff --git a/src/components/Home/FluidButton.tsx b/src/components/Home/FluidButton.tsx
index d8302292d..a3b380e49 100644
--- a/src/components/Home/FluidButton.tsx
+++ b/src/components/Home/FluidButton.tsx
@@ -1,7 +1,7 @@
import React, { useCallback } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { FluidType } from 'enum/fluid.enum'
+import { FluidState, FluidType } from 'enum/fluid.enum'
import { getNavPicto } from 'utils/picto'
import { useHistory } from 'react-router'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
@@ -11,6 +11,7 @@ import { useClient } from 'cozy-client'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
import { isKonnectorActive } from 'utils/utils'
+import ErrorNotif from 'assets/icons/ico/notif_error.svg'
interface FluidButtonProps {
fluidType: FluidType
@@ -32,6 +33,16 @@ const FluidButton: React.FC<FluidButtonProps> = ({
} else return isKonnectorActive(fluidStatus, fluidType)
}, [fluidStatus, fluidType])
+ const isErrored = useCallback(() => {
+ if (
+ fluidType !== FluidType.MULTIFLUID &&
+ fluidStatus[fluidType].status === FluidState.ERROR
+ ) {
+ return true
+ }
+ return false
+ }, [fluidStatus, fluidType])
+
const iconType = getNavPicto(fluidType, isActive, isConnected())
const goToFluid = useCallback(async () => {
@@ -57,7 +68,9 @@ const FluidButton: React.FC<FluidButtonProps> = ({
icon={iconType}
size={fluidType === FluidType.MULTIFLUID ? 36 : 32}
/>
-
+ {isErrored() && (
+ <StyledIcon icon={ErrorNotif} size={22} className="notif-error" />
+ )}
<div
className={`fluid-title ${FluidType[
fluidType
diff --git a/src/components/Home/consumptionView.scss b/src/components/Home/consumptionView.scss
index a00c6ae2a..7264e410d 100644
--- a/src/components/Home/consumptionView.scss
+++ b/src/components/Home/consumptionView.scss
@@ -19,6 +19,6 @@
margin-top: 1rem;
@media #{$large-phone} {
width: 100%;
- padding: 1rem;
+ padding: 1rem 1rem 4rem 1rem;
}
}
diff --git a/src/components/Home/fluidButtons.scss b/src/components/Home/fluidButtons.scss
index 5bc8da7d9..4a6a4581e 100644
--- a/src/components/Home/fluidButtons.scss
+++ b/src/components/Home/fluidButtons.scss
@@ -25,6 +25,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
+ position: relative;
.fluid-title {
text-align: center;
color: $grey-dark;
@@ -34,5 +35,10 @@
color: white;
}
}
+ .notif-error {
+ position: absolute;
+ top: -2px;
+ right: 11px;
+ }
}
}
diff --git a/src/components/Konnector/KonnectorModal.spec.tsx b/src/components/Konnector/KonnectorModal.spec.tsx
new file mode 100644
index 000000000..5f0308da6
--- /dev/null
+++ b/src/components/Konnector/KonnectorModal.spec.tsx
@@ -0,0 +1,106 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+} from '../../../tests/__mocks__/store'
+
+import KonnectorModal from './KonnectorModal'
+import { FluidType } from 'enum/fluid.enum'
+import { Button } from '@material-ui/core'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+describe('KonnectroModal component', () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ let store: any
+ beforeEach(() => {
+ store = createMockStore(mockInitialEcolyoState)
+ })
+ const mockHandleCloseClick = jest.fn()
+ it('should be rendered correctly', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <KonnectorModal
+ open={true}
+ isUpdating={false}
+ state={null}
+ error={null}
+ fluidType={FluidType.ELECTRICITY}
+ handleCloseClick={mockHandleCloseClick}
+ />
+ </Provider>
+ ).getElement()
+ expect(wrapper).toMatchSnapshot()
+ })
+ it('should be with updating text', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <KonnectorModal
+ open={true}
+ isUpdating={true}
+ state={null}
+ error={null}
+ fluidType={FluidType.ELECTRICITY}
+ handleCloseClick={mockHandleCloseClick}
+ />
+ </Provider>
+ )
+ expect(wrapper.find('.kmodal-waiting-text')).toBeTruthy()
+ })
+ it('should be correctly closed', async () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <KonnectorModal
+ open={true}
+ isUpdating={false}
+ state={'errored'}
+ error={null}
+ fluidType={FluidType.ELECTRICITY}
+ handleCloseClick={mockHandleCloseClick}
+ />
+ </Provider>
+ )
+ wrapper.find(Button).simulate('click')
+ expect(mockHandleCloseClick).toHaveBeenCalled()
+ })
+ it('should render login error', async () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <KonnectorModal
+ open={true}
+ isUpdating={false}
+ state={'error'}
+ error={'LOGIN_FAILED'}
+ fluidType={FluidType.ELECTRICITY}
+ handleCloseClick={mockHandleCloseClick}
+ />
+ </Provider>
+ )
+ expect(wrapper.find('.kce-picto-txt')).toBeTruthy()
+ })
+ it('should render unknown error', async () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <KonnectorModal
+ open={true}
+ isUpdating={false}
+ state={'error'}
+ error={''}
+ fluidType={FluidType.ELECTRICITY}
+ handleCloseClick={mockHandleCloseClick}
+ />
+ </Provider>
+ )
+ expect(wrapper.find('.err-data-2')).toBeTruthy()
+ })
+})
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index 95e8f1b9b..8c3294ef3 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -119,7 +119,6 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({
})}
>
<p>{text.first}</p>
- <p>{text.second}</p>
</div>
))}
</div>
@@ -157,7 +156,9 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({
}${fluidName.toLowerCase()}`
)}
</div>
- <div>{t('konnector_modal.error_data_2')}</div>
+ <div className="err-data-2">
+ {t('konnector_modal.error_data_2')}
+ </div>
</div>
)}
</>
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 3d14877b9..04b429bb1 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -46,7 +46,6 @@ import {
SUCCESS_EVENT,
LOGIN_SUCCESS_EVENT,
} from 'cozy-harvest-lib/dist/models/flowEvents'
-import { useParams } from 'react-router-dom'
import { DateTime } from 'luxon'
import { setSelectedDate } from 'store/chart/chart.actions'
@@ -54,27 +53,27 @@ interface KonnectorViewerCardProps {
fluidStatus: FluidStatus
isParam: boolean
isDisconnected: boolean
-}
-interface ConnectParam {
- connectParam: string | undefined
+ active: boolean
+ setActive: React.Dispatch<React.SetStateAction<boolean>>
}
const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
fluidStatus,
isParam,
isDisconnected,
+ active,
+ setActive,
}: KonnectorViewerCardProps) => {
const { t } = useI18n()
const client = useClient()
const dispatch = useDispatch()
- const { connectParam }: ConnectParam = useParams()
+
const fluidSlug = fluidStatus.connection.konnectorConfig.slug
const fluidState = fluidStatus.status
const konnector: Konnector | null = fluidStatus.connection.konnector
const account: Account | null = fluidStatus.connection.account
const trigger: Trigger | null = fluidStatus.connection.trigger
- const [active, setActive] = useState<boolean>(false)
const [openModal, setOpenModal] = useState(false)
const [isUpdating, setIsUpdating] = useState(false)
const [konnectorErrorDescription, setKonnectorErrorDescription] = useState<
@@ -150,7 +149,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
if (updatedFluidStatus.length > 0) {
dispatch(setFluidStatus(updatedFluidStatus))
}
- }, [dispatch, updatedFluidStatus])
+ }, [dispatch, setActive, updatedFluidStatus])
const handleAccountDeletion = useCallback(async () => {
updateProfileHaveSeenOldFluidModal()
@@ -161,9 +160,10 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
}
setActive(false)
}, [
- updateGlobalFluidStatus,
updateProfileHaveSeenOldFluidModal,
refreshChallengeState,
+ updateGlobalFluidStatus,
+ setActive,
dispatch,
])
@@ -232,11 +232,6 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
}
}
getData()
- if (connectParam && connectParam === fluidStatus.fluidType.toString()) {
- setActive(true)
- } else {
- setActive(false)
- }
return () => {
subscribed = false
}
@@ -248,7 +243,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
fluidStatus.connection.isUpdating,
fluidStatus.fluidType,
callbackResponse,
- connectParam,
+ setActive,
])
return (
diff --git a/src/components/Konnector/KonnectorViewerList.spec.tsx b/src/components/Konnector/KonnectorViewerList.spec.tsx
new file mode 100644
index 000000000..c830ad75d
--- /dev/null
+++ b/src/components/Konnector/KonnectorViewerList.spec.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+ mockInitialGlobalState,
+} from '../../../tests/__mocks__/store'
+import * as reactRedux from 'react-redux'
+import KonnectorViewerList from './KonnectorViewerList'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+const mockHistoryPush = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useHistory: () => ({
+ push: mockHistoryPush,
+ }),
+}))
+
+describe('KonnectorViewerList component', () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ let store: any
+ beforeEach(() => {
+ store = createMockStore(mockInitialEcolyoState)
+ })
+
+ it('should be rendered correctly', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <KonnectorViewerList />
+ </Provider>
+ ).getElement()
+ expect(wrapper).toMatchSnapshot()
+ })
+ it('should click on card and nav to fluid', async () => {
+ const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
+
+ mockUseSelector.mockReturnValue({
+ fluidStatus: mockInitialGlobalState.fluidStatus,
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <KonnectorViewerList />
+ </Provider>
+ )
+ wrapper
+ .find('.connection-card')
+ .first()
+ .simulate('click')
+ expect(mockHistoryPush).toHaveBeenCalled()
+ })
+})
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index 9bf09ae83..b8504aa70 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -9,7 +9,7 @@ import { FluidStatus } from 'models'
import StyledCard from 'components/CommonKit/Card/StyledCard'
import { FluidType } from 'enum/fluid.enum'
import { getAddPicto } from 'utils/picto'
-import { useHistory } from 'react-router'
+import { useHistory } from 'react-router-dom'
const KonnectorViewerList: React.FC = () => {
const { t } = useI18n()
diff --git a/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
new file mode 100644
index 000000000..c011bada0
--- /dev/null
+++ b/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KonnectroModal component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <KonnectorModal
+ error={null}
+ fluidType={0}
+ handleCloseClick={[MockFunction]}
+ isUpdating={false}
+ open={true}
+ state={null}
+ />
+</Provider>
+`;
diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
new file mode 100644
index 000000000..e4db320e7
--- /dev/null
+++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KonnectorViewerList component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <KonnectorViewerList />
+</Provider>
+`;
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 3a03c4654..dea81baf7 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -237,7 +237,7 @@
"mini_cards_label": "AUTRES ENERGIES"
},
"consumption_visualizer": {
- "no_data": "Pas de données",
+ "no_data": "Données manquantes",
"last_data": "Dernières données",
"last_valid_data": "Dernières données valides",
"data_to_come": "à venir",
--
GitLab