diff --git a/src/components/ConsumptionVisualizer/DataloadComparisonLeft.spec.tsx b/src/components/ConsumptionVisualizer/DataloadComparisonLeft.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f8823fc779403c72bcfce5b07504cfc1bbbb38c9
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/DataloadComparisonLeft.spec.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+
+import configureStore from 'redux-mock-store'
+import { mockInitialEcolyoState } from '../../../tests/__mocks__/store'
+import { FluidType } from 'enum/fluid.enum'
+
+import { baseDataLoad } from '../../../tests/__mocks__/datachartData.mock'
+import DataloadComparisonLeft from './DataloadComparisonLeft'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+const mockStore = configureStore([])
+describe('DataloadComparisonLeft component', () => {
+  it('should render correctly', () => {
+    const store = mockStore({
+      ecolyo: mockInitialEcolyoState,
+    })
+    const wrapper = mount(
+      <Provider store={store}>
+        <DataloadComparisonLeft
+          compareDataload={baseDataLoad}
+          fluidType={FluidType.ELECTRICITY}
+        />
+      </Provider>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+  it('should render empty comparison', () => {
+    const store = mockStore({
+      ecolyo: mockInitialEcolyoState,
+    })
+    const updatedDataload = { ...baseDataLoad, value: -1 }
+    const wrapper = mount(
+      <Provider store={store}>
+        <DataloadComparisonLeft
+          compareDataload={updatedDataload}
+          fluidType={FluidType.ELECTRICITY}
+        />
+      </Provider>
+    )
+    expect(wrapper.find('.dataloadvisualizer-novalue')).toBeTruthy()
+  })
+})
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2308bffe504a55feae512065fe9f2e53f58383ad
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx
@@ -0,0 +1,105 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import * as reactRedux from 'react-redux'
+import configureStore from 'redux-mock-store'
+import { mockInitialEcolyoState } from '../../../tests/__mocks__/store'
+import { FluidType } from 'enum/fluid.enum'
+import DataloadNoValue from './DataloadNoValue'
+import {
+  baseDataLoad,
+  graphData,
+} from '../../../tests/__mocks__/datachartData.mock'
+import { DateTime } from 'luxon'
+import { Datachart } from 'models'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+const mockStore = configureStore([])
+describe('DataloadNoValue component', () => {
+  it('should render correctly', () => {
+    const store = mockStore({
+      ecolyo: mockInitialEcolyoState,
+    })
+    const mockSetActive = jest.fn()
+    const wrapper = mount(
+      <Provider store={store}>
+        <DataloadNoValue
+          dataload={baseDataLoad}
+          fluidType={FluidType.ELECTRICITY}
+          lastDataDate={null}
+          setActive={mockSetActive}
+        />
+      </Provider>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+  it('should render with missing data state and click on the error button', () => {
+    const store = mockStore({
+      ecolyo: mockInitialEcolyoState,
+    })
+    const mockSetActive = jest.fn()
+    const wrapper = mount(
+      <Provider store={store}>
+        <DataloadNoValue
+          dataload={baseDataLoad}
+          fluidType={FluidType.ELECTRICITY}
+          lastDataDate={null}
+          setActive={mockSetActive}
+        />
+      </Provider>
+    )
+    expect(wrapper.find('.error').simulate('click'))
+  })
+
+  it('should render with data-to-come state', () => {
+    const store = mockStore({
+      ecolyo: mockInitialEcolyoState,
+    })
+    const updatedDataLoad = { ...baseDataLoad, date: DateTime.local() }
+    const mockSetActive = jest.fn()
+    const wrapper = mount(
+      <Provider store={store}>
+        <DataloadNoValue
+          dataload={updatedDataLoad}
+          fluidType={FluidType.ELECTRICITY}
+          lastDataDate={null}
+          setActive={mockSetActive}
+        />
+      </Provider>
+    )
+    expect(wrapper.find('.to-come')).toBeTruthy()
+  })
+  it('should render with data-hole state', () => {
+    const store = mockStore({
+      ecolyo: mockInitialEcolyoState,
+    })
+    const mockSetActive = jest.fn()
+    const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
+    const updatedData: Datachart = { ...graphData }
+    //Data hole insertion
+    updatedData.actualData[0].value = -1
+    updatedData.actualData[1].value = 90
+
+    mockUseSelector.mockReturnValue({ currentDatachart: graphData })
+    const wrapper = mount(
+      <Provider store={store}>
+        <DataloadNoValue
+          dataload={baseDataLoad}
+          fluidType={FluidType.ELECTRICITY}
+          lastDataDate={null}
+          setActive={mockSetActive}
+        />
+      </Provider>
+    )
+    expect(wrapper.find('.no-data-text').simulate('click'))
+  })
+})
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
index e637396bb614207424b5c978bacb9112862940b0..8aabb345f8e04c30c3ee3fa8eb462b16d1ac94c1 100644
--- a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
@@ -60,13 +60,13 @@ const DataloadNoValue: React.FC<DataloadNoValueProps> = ({
 
   const getDataState = useCallback(() => {
     if (fluidType !== FluidType.MULTIFLUID) {
-      const delay = fluidConfig[fluidType].dataDelayOffset + 1
+      //J+3 for elec and J+5 for the other ==> dataDelayPffset + 3
+      const delay = fluidConfig[fluidType].dataDelayOffset + 3
       const today = DateTime.local().setZone('utc', {
         keepLocalTime: true,
       })
       const offsetDate = today.minus({ days: delay })
       if (dataload && offsetDate < dataload.date) {
-        //  && dataload.date > today
         return NoDataState.DATA_TO_COME
       } else if (dataload && dataload.date < offsetDate) {
         let isDataHole = false
@@ -83,7 +83,7 @@ const DataloadNoValue: React.FC<DataloadNoValueProps> = ({
         }
       }
     }
-    return 'multi'
+    return null
   }, [currentDatachart, dataload, fluidConfig, fluidType])
 
   return (
@@ -94,7 +94,7 @@ const DataloadNoValue: React.FC<DataloadNoValueProps> = ({
             <div
               className={`dataloadvisualizer-value ${FluidType[
                 fluidType
-              ].toLowerCase()} upper`}
+              ].toLowerCase()} upper to-come`}
             >
               {t('consumption_visualizer.data_to_come')}
             </div>
diff --git a/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2f56ebdb10d2eaf4308a240f3baa12bd840f57c6
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.spec.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import * as reactRedux from 'react-redux'
+
+import configureStore from 'redux-mock-store'
+import { mockInitialEcolyoState } from '../../../tests/__mocks__/store'
+import ErrorDataConsumptionVisualizer from './ErrorDataConsumptionVisualizer'
+import { FluidType } from 'enum/fluid.enum'
+import { FluidStatus } from 'models'
+import { fluidStatusData } from '../../../tests/__mocks__/fluidStatusData.mock'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+const mockStore = configureStore([])
+describe('ErrorDataConsumptionVisualizer component', () => {
+  it('should render correctly', () => {
+    const store = mockStore({
+      ecolyo: mockInitialEcolyoState,
+    })
+    const wrapper = mount(
+      <Provider store={store}>
+        <ErrorDataConsumptionVisualizer fluidType={FluidType.ELECTRICITY} />
+      </Provider>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+  it('should click and move to lastDataDate', async () => {
+    const store = mockStore({
+      ecolyo: mockInitialEcolyoState,
+    })
+    const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch')
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <ErrorDataConsumptionVisualizer fluidType={FluidType.MULTIFLUID} />
+      </Provider>
+    )
+    wrapper.find('.error-line').simulate('click')
+    expect(mockUseDispatch).toHaveBeenCalled()
+  })
+  it('should render with Electricity and no LastDataDate', async () => {
+    const store = mockStore({
+      ecolyo: mockInitialEcolyoState,
+    })
+    const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch')
+    const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
+    const updatedFluidStatus: FluidStatus[] = { ...fluidStatusData }
+    updatedFluidStatus[0].lastDataDate = null
+    mockUseSelector.mockReturnValueOnce({
+      fluidStatus: updatedFluidStatus,
+      fluidTypes: [FluidType.ELECTRICITY],
+    })
+    const wrapper = mount(
+      <Provider store={store}>
+        <ErrorDataConsumptionVisualizer fluidType={FluidType.ELECTRICITY} />
+      </Provider>
+    )
+    wrapper.find('.error-line').simulate('click')
+    expect(mockUseDispatch).toHaveBeenCalled()
+    expect(wrapper.find('.underlined-error').text()).toBe(
+      'consumption_visualizer.last_valid_data : -'
+    )
+  })
+})
diff --git a/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b299ed7ac8c16f6e5166ea0356b2a95cac759350
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.spec.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import * as reactRedux from 'react-redux'
+
+import configureStore from 'redux-mock-store'
+import { mockInitialEcolyoState } from '../../../tests/__mocks__/store'
+import LastDataConsumptionVisualizer from './LastDataConsumptionVisualizer'
+import { DateTime } from 'luxon'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+const mockStore = configureStore([])
+describe('LastDataConsumptionVisualizer component', () => {
+  it('should render correctly', () => {
+    const store = mockStore({
+      ecolyo: mockInitialEcolyoState,
+    })
+    const wrapper = mount(
+      <Provider store={store}>
+        <LastDataConsumptionVisualizer lastDataDate={null} />
+      </Provider>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+  it('should click and move to last data date', () => {
+    const store = mockStore({
+      ecolyo: mockInitialEcolyoState,
+    })
+    const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch')
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <LastDataConsumptionVisualizer lastDataDate={DateTime.local()} />
+      </Provider>
+    )
+    wrapper.find('.lastdatavisualizer-button').simulate('click')
+    expect(mockUseDispatch).toHaveBeenCalled()
+  })
+  it('should render empty last data date', () => {
+    const store = mockStore({
+      ecolyo: mockInitialEcolyoState,
+    })
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <LastDataConsumptionVisualizer lastDataDate={null} />
+      </Provider>
+    )
+    wrapper.find('.lastdatavisualizer-button').simulate('click')
+
+    expect(wrapper.find('.lastdatavisualizer-button').text()).toBe(
+      'consumption_visualizer.last_valid_data : -'
+    )
+  })
+})
diff --git a/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
index 6b68593caf94c39154c88a1f34960ee82728234b..d395f63d9f2a7ab02554509372614336dead7c7e 100644
--- a/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
@@ -35,7 +35,6 @@ const LastDataConsumptionVisualizer: React.FC<LastDataConsumptionVisualizerProps
   return (
     <div>
       <button className="lastdatavisualizer-button" onClick={moveToDate}>
-        {/*TODO handleMutli*/}
         {`${t('consumption_visualizer.last_valid_data')} : ${
           lastDataDate ? lastDataDate.toFormat("dd'/'MM'/'yy") : '-'
         }`}
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d233665e12ecacb0436078ecd81839f41acd4d83
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+
+import configureStore from 'redux-mock-store'
+import { mockInitialEcolyoState } from '../../../tests/__mocks__/store'
+import NoDataModal from './NoDataModal'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+const mockStore = configureStore([])
+const mockHandleClose = jest.fn()
+describe('NoDataModal component', () => {
+  it('should render correctly', () => {
+    const store = mockStore({
+      ecolyo: mockInitialEcolyoState,
+    })
+    const wrapper = mount(
+      <Provider store={store}>
+        <NoDataModal open={true} handleCloseClick={mockHandleClose} />
+      </Provider>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+})
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadComparisonLeft.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadComparisonLeft.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..9f5722378e8098a9a2321df5c7889b97c9915583
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadComparisonLeft.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataloadComparisonLeft component should render correctly 1`] = `ReactWrapper {}`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadNoValue.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadNoValue.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..372c0275b86ca025a7d34130d5e958f91305de12
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadNoValue.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataloadNoValue component should render correctly 1`] = `ReactWrapper {}`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/ErrorDataConsumptionVisualizer.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/ErrorDataConsumptionVisualizer.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..a95a17a508f07a2b3deb2ec4954baee60bae12e4
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/__snapshots__/ErrorDataConsumptionVisualizer.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ErrorDataConsumptionVisualizer component should render correctly 1`] = `ReactWrapper {}`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/LastDataConsumptionVisualizer.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/LastDataConsumptionVisualizer.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..c10fc2c6145b8fb653eec9d764fc072a23347229
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/__snapshots__/LastDataConsumptionVisualizer.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LastDataConsumptionVisualizer component should render correctly 1`] = `ReactWrapper {}`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..f7551fdfb8bdd9385a89819055da7cad08d48173
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NoDataModal component should render correctly 1`] = `ReactWrapper {}`;
diff --git a/src/components/Home/__snapshots__/OldFluidDataModal.spec.tsx.snap b/src/components/Home/__snapshots__/OldFluidDataModal.spec.tsx.snap
deleted file mode 100644
index cbba9bf741f3b90fe4194e94c22097a2987003ae..0000000000000000000000000000000000000000
--- a/src/components/Home/__snapshots__/OldFluidDataModal.spec.tsx.snap
+++ /dev/null
@@ -1,81 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`OldFluidDataModal component should be rendered correctly 1`] = `
-<WithStyles(ForwardRef(Dialog))
-  aria-labelledby="accessibility-title"
-  classes={
-    Object {
-      "paper": "modal-paper",
-      "root": "modal-root",
-    }
-  }
-  onClose={[MockFunction]}
-  open={true}
->
-  <div
-    id="accessibility-title"
-  >
-    old_fluid_data_modal.accessibility.window_title
-  </div>
-  <div
-    className="od-content"
-  >
-    <div
-      className="od-warning"
-    >
-      <Icon
-        icon="test-file-stub"
-        size={40}
-        spin={false}
-      />
-      <p
-        className="text-20-bold"
-      >
-        old_fluid_data_modal.errorTxt
-      </p>
-    </div>
-    <p
-      className="od-main text-16-bold"
-    >
-       
-      old_fluid_data_modal.oldData
-    </p>
-    <div
-      className="providerProblem"
-    >
-      <p
-        className="text-16-normal"
-      >
-        old_fluid_data_modal.problem
-      </p>
-      <ul
-        className="od-konnectorsList"
-      >
-        <li>
-          FLUID.ELECTRICITY.provider old_fluid_data_modal.problem_electricity
-        </li>
-        <li>
-          FLUID.GAS.provider old_fluid_data_modal.problem_gas
-        </li>
-      </ul>
-      <p
-        className="text-16-normal"
-      >
-        old_fluid_data_modal.contact
-      </p>
-      <WithStyles(ForwardRef(Button))
-        aria-label="old_fluid_data_modal.accessibility.button_ok"
-        classes={
-          Object {
-            "label": "text-16-bold",
-            "root": "btn-highlight",
-          }
-        }
-        onClick={[MockFunction]}
-      >
-        old_fluid_data_modal.ok
-      </WithStyles(ForwardRef(Button))>
-    </div>
-  </div>
-</WithStyles(ForwardRef(Dialog))>
-`;