.vscode/settings.json

@@ -52,6 +52,7 @@
     "camelcase",
     "cicid",
     "CONSO",
+    "cozybar",
     "cozycloud",
     "d’éco",
     "dacc",

jest.config.js

@@ -2,7 +2,7 @@
 const config = {
   testURL: 'http://localhost/',
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'styl'],
-  setupFiles: ['<rootDir>/tests/jestLib/setup.js'],
+  setupFiles: ['<rootDir>/tests/jestLib/setupTests.ts'],
   moduleDirectories: ['<rootDir>', 'node_modules'],
   modulePaths: ['<rootDir>/src'],
   moduleNameMapper: {

package.json

@@ -53,6 +53,7 @@
     "@sentry/react": "^7.21.1",
     "@sentry/tracing": "^7.21.1",
     "@simbathesailor/use-what-changed": "^2.0.0",
+    "classnames": "^2.3.2",
     "cozy-bar": "8.15.0",
     "cozy-client": "35.6.0",
     "cozy-device-helper": ">=2.1.0",
@@ -82,14 +83,15 @@
     "react-swipeable-views": "0.14.0",
     "redux-devtools-extension": "^2.13.8",
     "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.4.2",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.7.4",
     "@testing-library/react-hooks": "^8.0.0",
-    "@types/classnames": "^2.2.10",
     "@types/d3": "^6.0.0",
     "@types/enzyme": "^3.10.8",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/file-saver": "^2.0.5",
     "@types/history": "^5.0.0",
     "@types/jest": "^29.4.0",

src/assets/icons/ico/warning-dark.svg

+<svg width="30" height="27" viewBox="0 0 30 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5142 0.874208C15.8412 -0.2914 14.1588 -0.291404 13.4858 0.874204L0.236852 23.8221C-0.436112 24.9877 0.405088 26.4447 1.75102 26.4447H28.249C29.5949 26.4447 30.4361 24.9877 29.7632 23.8221L16.5142 0.874208ZM13.8973 15.3611V9.61627H16.058V15.3611C16.058 15.834 16.0307 16.3043 15.976 16.772C15.9214 17.2346 15.8494 17.7075 15.76 18.1906H14.1953C14.1059 17.7075 14.0339 17.2346 13.9793 16.772C13.9246 16.3043 13.8973 15.834 13.8973 15.3611ZM16.2145 20.4573C16.279 20.6166 16.3113 20.7888 16.3113 20.9739C16.3113 21.1589 16.279 21.3337 16.2145 21.4981C16.1449 21.6575 16.053 21.7962 15.9388 21.9145C15.8196 22.0327 15.6805 22.1252 15.5215 22.192C15.3626 22.2588 15.1888 22.2922 15 22.2922C14.8162 22.2922 14.6449 22.2588 14.4859 22.192C14.327 22.1252 14.1879 22.0327 14.0687 21.9145C13.9495 21.7962 13.8576 21.6575 13.793 21.4981C13.7235 21.3337 13.6887 21.1589 13.6887 20.9739C13.6887 20.7888 13.7235 20.6166 13.793 20.4573C13.8576 20.298 13.9495 20.1592 14.0687 20.041C14.1879 19.9228 14.327 19.8302 14.4859 19.7634C14.6449 19.6915 14.8162 19.6555 15 19.6555C15.1888 19.6555 15.3626 19.6915 15.5215 19.7634C15.6805 19.8302 15.8196 19.9228 15.9388 20.041C16.053 20.1592 16.1449 20.298 16.2145 20.4573Z" fill="#1B1C22"/>
+</svg>

src/components/Action/ActionBegin/ActionBegin.spec.tsx

@@ -18,29 +18,14 @@ import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 import ActionModal from '../ActionModal/ActionModal'
 import ActionBegin from './ActionBegin'
 
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
-  useI18n: jest.fn(() => ({
-    t: (str: string) => str,
-  })),
-}))
 const mockgetCustomActions = jest.fn()
 const mockgetDefaultActions = jest.fn()
 
 jest.mock('services/action.service', () => {
-  return jest.fn(() => {
-    return {
-      getCustomActions: mockgetCustomActions,
-      getDefaultActions: mockgetDefaultActions,
-    }
-  })
-})
-const mockImportIconById = jest.fn()
-jest.mock('utils/utils', () => {
-  return {
-    importIconById: jest.fn(() => {
-      return mockImportIconById
-    }),
-  }
+  return jest.fn(() => ({
+    getCustomActions: mockgetCustomActions,
+    getDefaultActions: mockgetDefaultActions,
+  }))
 })
 
 describe('ActionBegin component', () => {
@@ -49,7 +34,6 @@ describe('ActionBegin component', () => {
       global: { ...mockGlobalState, fluidTypes: [0, 1, 2] },
       profile: mockProfileState,
     })
-    mockImportIconById.mockReturnValue('')
 
     const wrapper = mount(
       <Provider store={store}>
@@ -69,7 +53,6 @@ describe('ActionBegin component', () => {
       AllEcogestureData[5],
       AllEcogestureData[2],
     ])
-    mockImportIconById.mockReturnValue('')
     const store = createMockEcolyoStore({
       global: { ...mockGlobalState, fluidTypes: [0, 1, 2] },
       profile: { ...mockProfileState, isProfileTypeCompleted: true },
@@ -91,7 +74,6 @@ describe('ActionBegin component', () => {
       global: { ...mockGlobalState, fluidTypes: [0, 1, 2] },
       profile: mockProfileState,
     })
-    mockImportIconById.mockReturnValue('')
 
     const wrapper = mount(
       <Provider store={store}>
@@ -110,7 +92,6 @@ describe('ActionBegin component', () => {
       global: { ...mockGlobalState, fluidTypes: [0, 1, 2] },
       profile: mockProfileState,
     })
-    mockImportIconById.mockReturnValue('')
 
     const wrapper = mount(
       <Provider store={store}>
@@ -131,7 +112,6 @@ describe('ActionBegin component', () => {
       global: { ...mockGlobalState, fluidTypes: [0, 1, 2] },
       profile: mockProfileState,
     })
-    mockImportIconById.mockReturnValue('')
 
     const wrapper = mount(
       <Provider store={store}>

src/components/Action/ActionBegin/__snapshots__/ActionBegin.spec.tsx.snap

@@ -203,13 +203,13 @@ exports[`ActionBegin component should render correctly 1`] = `
           >
             <StyledIcon
               className="action-icon"
-              icon=""
+              icon="test-file-stub"
               size={100}
             >
               <Icon
                 aria-hidden={true}
                 className="action-icon"
-                icon=""
+                icon="test-file-stub"
                 size={100}
                 spin={false}
               >
@@ -228,7 +228,7 @@ exports[`ActionBegin component should render correctly 1`] = `
                     width={100}
                   >
                     <use
-                      xlinkHref="#"
+                      xlinkHref="#test-file-stub"
                     />
                   </svg>
                 </Component>

src/components/Action/ActionCard/ActionCard.spec.tsx

 import { Button } from '@material-ui/core'
-import defaultIcon from 'assets/icons/visu/duel/default.svg'
 import EcogestureModal from 'components/Ecogesture/EcogestureModal/EcogestureModal'
 import { mount } from 'enzyme'
 import toJson from 'enzyme-to-json'
@@ -11,20 +10,6 @@ import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 import ActionCard from './ActionCard'
 
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
-  useI18n: jest.fn(() => ({
-    t: (str: string) => str,
-  })),
-}))
-
-const mockImportIconById = jest.fn(() => defaultIcon)
-jest.mock('utils/utils', () => {
-  return {
-    importIconById: jest.fn(() => {
-      return mockImportIconById
-    }),
-  }
-})
 describe('ActionCard component', () => {
   const store = createMockEcolyoStore({
     challenge: {
@@ -44,7 +29,7 @@ describe('ActionCard component', () => {
     await waitForComponentToPaint(wrapper)
     expect(toJson(wrapper)).toMatchSnapshot()
   })
-  it('should open modal', () => {
+  it('should open modal', async () => {
     const wrapper = mount(
       <Provider store={store}>
         <ActionCard
@@ -54,6 +39,7 @@ describe('ActionCard component', () => {
         />
       </Provider>
     )
+    await waitForComponentToPaint(wrapper)
     wrapper.find(Button).first().simulate('click')
     expect(wrapper.find(EcogestureModal).exists()).toBeTruthy()
   })

src/components/Action/ActionChoose/ActionChoose.spec.tsx

@@ -12,19 +12,11 @@ import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 import ActionBegin from '../ActionBegin/ActionBegin'
 import ActionChoose from './ActionChoose'
 
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
-  useI18n: jest.fn(() => ({
-    t: (str: string) => str,
-  })),
-}))
-
 const mockGetEcogesturesByIds = jest.fn(() => [])
 jest.mock('services/ecogesture.service', () => {
-  return jest.fn(() => {
-    return {
-      getEcogesturesByIds: mockGetEcogesturesByIds,
-    }
-  })
+  return jest.fn(() => ({
+    getEcogesturesByIds: mockGetEcogesturesByIds,
+  }))
 })
 
 describe('ActionChoose component', () => {

src/components/Action/ActionDone/ActionDone.spec.tsx

@@ -10,27 +10,15 @@ import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 import ActionDone from './ActionDone'
 
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
-  useI18n: jest.fn(() => ({
-    t: (str: string) => str,
-  })),
-}))
 jest.mock('services/usageEvent.service')
 const mockAddEvent = jest.fn()
 UsageEventService.addEvent = mockAddEvent
 
-const mockedNavigate = jest.fn()
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useNavigate: () => mockedNavigate,
-}))
-const mockupdateUserChallenge = jest.fn()
+const mockUpdateUserChallenge = jest.fn()
 jest.mock('services/challenge.service', () => {
-  return jest.fn(() => {
-    return {
-      updateUserChallenge: mockupdateUserChallenge,
-    }
-  })
+  return jest.fn(() => ({
+    updateUserChallenge: mockUpdateUserChallenge,
+  }))
 })
 
 describe('ActionDone component', () => {
@@ -49,7 +37,7 @@ describe('ActionDone component', () => {
       challengeActions,
       'updateUserChallengeList'
     )
-    mockupdateUserChallenge.mockResolvedValueOnce(userChallengeData[1])
+    mockUpdateUserChallenge.mockResolvedValueOnce(userChallengeData[1])
     const wrapper = mount(
       <Provider store={store}>
         <ActionDone currentChallenge={userChallengeData[1]} />

src/components/Action/ActionList/ActionList.spec.tsx

@@ -10,27 +10,19 @@ import {
 import ActionCard from '../ActionCard/ActionCard'
 import ActionList from './ActionList'
 
-const mockgetCustomActions = jest.fn()
-const mockgetDefaultActions = jest.fn()
+const mockGetCustomActions = jest.fn()
+const mockGetDefaultActions = jest.fn()
 
 jest.mock('services/action.service', () => {
-  return jest.fn(() => {
-    return {
-      getCustomActions: mockgetCustomActions,
-      getDefaultActions: mockgetDefaultActions,
-    }
-  })
+  return jest.fn(() => ({
+    getCustomActions: mockGetCustomActions,
+    getDefaultActions: mockGetDefaultActions,
+  }))
 })
 
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
-  useI18n: jest.fn(() => ({
-    t: (str: string) => str,
-  })),
-}))
-
 describe('ActionList component', () => {
   it('should be rendered correctly', () => {
-    mockgetDefaultActions.mockResolvedValueOnce(defaultEcogestureData)
+    mockGetDefaultActions.mockResolvedValueOnce(defaultEcogestureData)
     const store = createMockEcolyoStore({
       challenge: { ...mockChallengeState },
       global: { fluidTypes: [0, 1, 2] },

src/components/Action/ActionModal/ActionModal.spec.tsx

@@ -11,18 +11,11 @@ import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 import ActionModal from './ActionModal'
 
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
-  useI18n: jest.fn(() => ({
-    t: (str: string) => str,
-  })),
-}))
-const mockupdateUserChallenge = jest.fn()
+const mockUpdateUserChallenge = jest.fn()
 jest.mock('services/challenge.service', () => {
-  return jest.fn(() => {
-    return {
-      updateUserChallenge: mockupdateUserChallenge,
-    }
-  })
+  return jest.fn(() => ({
+    updateUserChallenge: mockUpdateUserChallenge,
+  }))
 })
 jest.mock('services/usageEvent.service')
 const mockAddEvent = jest.fn()
@@ -49,7 +42,7 @@ describe('ActionModal component', () => {
       challengeActions,
       'updateUserChallengeList'
     )
-    mockupdateUserChallenge.mockResolvedValueOnce(userChallengeData[1])
+    mockUpdateUserChallenge.mockResolvedValueOnce(userChallengeData[1])
 
     const wrapper = mount(
       <Provider store={store}>

src/components/Action/ActionOnGoing/ActionOnGoing.spec.tsx

@@ -12,20 +12,6 @@ import { createMockEcolyoStore } from 'tests/__mocks__/store'
 import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import ActionOnGoing from './ActionOnGoing'
 
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
-  useI18n: jest.fn(() => ({
-    t: (str: string) => str,
-  })),
-}))
-const mockImportIconById = jest.fn()
-jest.mock('utils/utils', () => {
-  return {
-    importIconById: jest.fn(() => {
-      return mockImportIconById
-    }),
-  }
-})
-
 describe('ActionOnGoing component', () => {
   const store = createMockEcolyoStore()
   const userAction: UserAction = {

src/components/Action/ActionView.spec.tsx

@@ -11,16 +11,6 @@ import ActionChoose from './ActionChoose/ActionChoose'
 import ActionDone from './ActionDone/ActionDone'
 import ActionOnGoing from './ActionOnGoing/ActionOnGoing'
 
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
-  useI18n: jest.fn(() => ({
-    t: (str: string) => str,
-  })),
-}))
-const mockedNavigate = jest.fn()
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useNavigate: () => mockedNavigate,
-}))
 jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
 jest.mock('components/Header/Header', () => 'mock-header')
 jest.mock('components/Content/Content', () => 'mock-content')

src/components/Analysis/AnalysisView.spec.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import * as globalActions from 'store/global/global.slice'
 import * as storeHooks from 'store/hooks'
-import * as profileActions from 'store/profile/profile.actions'
+import * as profileActions from 'store/profile/profile.slice'
 import {
   createMockEcolyoStore,
   mockAnalysisState,
@@ -12,11 +12,6 @@ import {
   mockProfileState,
 } from 'tests/__mocks__/store'
 
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
-  useI18n: jest.fn(() => ({
-    t: (str: string) => str,
-  })),
-}))
 jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
 jest.mock('components/Header/Header', () => 'mock-header')
 jest.mock('components/Content/Content', () => 'mock-content')
@@ -40,10 +35,7 @@ const updateProfileSpy = jest.spyOn(profileActions, 'updateProfile')
 describe('AnalysisView component', () => {
   const store = createMockEcolyoStore()
   beforeEach(() => {
-    store.clearActions()
-    mockAppDispatch.mockClear()
-    toggleAnalysisNotificationSpy.mockClear()
-    updateProfileSpy.mockClear()
+    jest.clearAllMocks()
   })
 
   it('should be rendered correctly', () => {

src/components/Analysis/AnalysisView.tsx

@@ -13,7 +13,7 @@ import UsageEventService from 'services/usageEvent.service'
 import { setAnalysisMonth } from 'store/analysis/analysis.slice'
 import { toggleAnalysisNotification } from 'store/global/global.slice'
 import { useAppDispatch, useAppSelector } from 'store/hooks'
-import { updateProfile } from 'store/profile/profile.actions'
+import { updateProfile } from 'store/profile/profile.slice'
 import { isLastDateReached } from 'utils/date'
 import './analysisView.scss'
 
@@ -49,11 +49,7 @@ const AnalysisView = () => {
   useEffect(() => {
     const updateAnalysisNotification = () => {
       if (analysisNotification) {
-        dispatch(
-          updateProfile({
-            haveSeenLastAnalysis: true,
-          })
-        )
+        dispatch(updateProfile({ haveSeenLastAnalysis: true }))
         dispatch(toggleAnalysisNotification(false))
       }
 

src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx

@@ -7,17 +7,10 @@ import { dataLoadArray } from 'tests/__mocks__/chartData.mock'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
 import ElecHalfHourChart from './ElecHalfHourChart'
 
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
-  useI18n: jest.fn(() => ({
-    t: (str: string) => str,
-  })),
-}))
 jest.mock('services/dateChart.service', () => {
-  return jest.fn(() => {
-    return {
-      compareStepDate: jest.fn(),
-    }
-  })
+  return jest.fn(() => ({
+    compareStepDate: jest.fn(),
+  }))
 })
 
 describe('ElecHalfHourChart component', () => {

src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx

@@ -13,11 +13,6 @@ import { createMockEcolyoStore } from 'tests/__mocks__/store'
 import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import ElecHalfHourMonthlyAnalysis from './ElecHalfHourMonthlyAnalysis'
 
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
-  useI18n: jest.fn(() => ({
-    t: (str: string) => str,
-  })),
-}))
 jest.mock('components/Hooks/useExploration', () => {
   return () => ['', jest.fn()]
 })
@@ -33,21 +28,17 @@ jest.mock(
 
 const mockCheckDoctypeEntries = jest.fn()
 jest.mock('services/consumption.service', () => {
-  return jest.fn(() => {
-    return {
-      checkDoctypeEntries: mockCheckDoctypeEntries,
-    }
-  })
+  return jest.fn(() => ({
+    checkDoctypeEntries: mockCheckDoctypeEntries,
+  }))
 })
 const mockGetEnedisMonthlyAnalysisByDate = jest.fn()
 const mockAggregateValuesToDataLoad = jest.fn()
 jest.mock('services/enedisMonthlyAnalysisData.service', () => {
-  return jest.fn(() => {
-    return {
-      getEnedisMonthlyAnalysisByDate: mockGetEnedisMonthlyAnalysisByDate,
-      aggregateValuesToDataLoad: mockAggregateValuesToDataLoad,
-    }
-  })
+  return jest.fn(() => ({
+    getEnedisMonthlyAnalysisByDate: mockGetEnedisMonthlyAnalysisByDate,
+    aggregateValuesToDataLoad: mockAggregateValuesToDataLoad,
+  }))
 })
 const mockPerfIndicator: PerformanceIndicator = {
   value: 10,
@@ -57,20 +48,16 @@ const mockPerfIndicator: PerformanceIndicator = {
 }
 const mockGetPrices = jest.fn()
 jest.mock('services/fluidsPrices.service', () => {
-  return jest.fn(() => {
-    return {
-      getPrices: mockGetPrices,
-    }
-  })
+  return jest.fn(() => ({
+    getPrices: mockGetPrices,
+  }))
 })
 
 describe('ElecHalfHourMonthlyAnalysis component', () => {
+  const store = createMockEcolyoStore()
   beforeEach(() => {
-    mockCheckDoctypeEntries.mockClear()
-    mockGetEnedisMonthlyAnalysisByDate.mockClear()
-    mockAggregateValuesToDataLoad.mockClear()
+    jest.clearAllMocks()
   })
-  const store = createMockEcolyoStore()
 
   it('should be rendered correctly when isHalfHourActivated is false', async () => {
     mockCheckDoctypeEntries.mockResolvedValueOnce(false)

src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.spec.tsx

@@ -3,12 +3,6 @@ import toJson from 'enzyme-to-json'
 import React from 'react'
 import ElecInfoModal from './ElecInfoModal'
 
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
-  useI18n: jest.fn(() => ({
-    t: (str: string) => str,
-  })),
-}))
-
 describe('ElecInfoModal component', () => {
   it('should be rendered correctly', () => {
     const component = mount(

src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.spec.tsx

+import { FluidType } from 'enums'
+import { mount } from 'enzyme'
+import React from 'react'
+import IncompleteDataWarning from './IncompleteDataWarning'
+
+describe('IncompleteDataWarning', () => {
+  it('renders component correctly', () => {
+    const incompleteFluidTypes = [FluidType.ELECTRICITY, FluidType.GAS]
+    const wrapper = mount(
+      <IncompleteDataWarning incompleteDataFluids={incompleteFluidTypes} />
+    )
+    expect(wrapper.find('h1').text()).toBe('analysis.warning_title')
+    expect(wrapper.find('p').text()).toBe('analysis.warning_text')
+  })
+})

src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.tsx

+import warningDark from 'assets/icons/ico/warning-dark.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { FluidType } from 'enums'
+import React from 'react'
+import { formatListWithAnd } from 'utils/utils'
+import './incompleteDataWarning.scss'
+
+const IncompleteDataWarning = ({
+  incompleteDataFluids,
+}: {
+  incompleteDataFluids: FluidType[]
+}) => {
+  const { t } = useI18n()
+
+  const formattedFluidList = formatListWithAnd(
+    incompleteDataFluids.map(fluidType =>
+      t(`FLUID.${FluidType[fluidType]}.LABEL_PREPOSITION`)
+    )
+  )
+  return (
+    <div className="analysis-warning">
+      <div className="warning-header">
+        <StyledIcon icon={warningDark} size={30} />
+        <h1>{t('analysis.warning_title')}</h1>
+      </div>
+      <div className="warning-content">
+        <p>
+          {t('analysis.warning_text', {
+            fluidList: formattedFluidList,
+          })}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default IncompleteDataWarning