From 840f95a47369b5e65151a05b2f0531e61dc1f6aa Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Tue, 14 Nov 2023 15:50:44 +0000
Subject: [PATCH] test(rtl): total consumption

---
 .../TotalConsumption.spec.tsx                 | 44 +++++++------------
 .../TotalConsumption.spec.tsx.snap            | 31 ++++++++++++-
 2 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/components/TotalConsumption/TotalConsumption.spec.tsx b/src/components/TotalConsumption/TotalConsumption.spec.tsx
index a427bd1ca..de4e50f33 100644
--- a/src/components/TotalConsumption/TotalConsumption.spec.tsx
+++ b/src/components/TotalConsumption/TotalConsumption.spec.tsx
@@ -1,10 +1,9 @@
+import { render, screen, waitFor } from '@testing-library/react'
 import { FluidType, TimeStep } from 'enums'
-import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { graphData } from 'tests/__mocks__/chartData.mock'
 import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import TotalConsumption from './TotalConsumption'
 
 const mockChartStore = createMockEcolyoStore({
@@ -15,34 +14,25 @@ const mockChartStore = createMockEcolyoStore({
 })
 
 describe('TotalConsumption component', () => {
-  it('should be rendered correctly', async () => {
-    const component = mount(
+  it('should be rendered correctly and render euro value', async () => {
+    const { container } = render(
       <Provider store={mockChartStore}>
         <TotalConsumption fluidType={FluidType.ELECTRICITY} />
       </Provider>
     )
-    await waitForComponentToPaint(component)
-    expect(component).toMatchSnapshot()
+    await waitFor(() => null, { container })
+    expect(container).toMatchSnapshot()
+    expect(screen.getByText('22,77')).toBeInTheDocument()
   })
-  it('should render euro value', async () => {
-    const component = mount(
-      <Provider store={mockChartStore}>
-        <TotalConsumption fluidType={FluidType.ELECTRICITY} />
-      </Provider>
-    )
-    await waitForComponentToPaint(component)
 
-    expect(component.find('.euro-value').first().text()).toEqual('22,77')
-  })
   it('should format multifluid value', async () => {
-    const component = mount(
+    const { container } = render(
       <Provider store={mockChartStore}>
         <TotalConsumption fluidType={FluidType.MULTIFLUID} />
       </Provider>
     )
-    await waitForComponentToPaint(component)
-
-    expect(component.find('.euro-value').first().text()).toEqual('130,84')
+    await waitFor(() => null, { container })
+    expect(screen.getByText('130,84')).toBeInTheDocument()
   })
   it('should format multifluid value AND compared value', async () => {
     const store = createMockEcolyoStore({
@@ -53,25 +43,23 @@ describe('TotalConsumption component', () => {
         currentTimeStep: TimeStep.DAY,
       },
     })
-    const component = mount(
+    const { container } = render(
       <Provider store={store}>
         <TotalConsumption fluidType={FluidType.MULTIFLUID} />
       </Provider>
     )
-    await waitForComponentToPaint(component)
-
-    expect(component.find('.euro-value').first().text()).toEqual('130,84')
-    expect(component.find('.euro-value').at(1).text()).toEqual('110,66')
+    await waitFor(() => null, { container })
+    expect(screen.getByText('130,84')).toBeInTheDocument()
+    expect(screen.getByText('110,66')).toBeInTheDocument()
   })
   it('should display ----- when half an hour electricity data is not activated', async () => {
     const store = createMockEcolyoStore()
-    const component = mount(
+    const { container } = render(
       <Provider store={store}>
         <TotalConsumption fluidType={FluidType.ELECTRICITY} />
       </Provider>
     )
-    await waitForComponentToPaint(component)
-
-    expect(component.find('.euro-value').first().text()).toEqual('-----')
+    await waitFor(() => null, { container })
+    expect(screen.getByText('-----')).toBeInTheDocument()
   })
 })
diff --git a/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap b/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap
index 3a565c665..307e79239 100644
--- a/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap
+++ b/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap
@@ -1,3 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TotalConsumption component should be rendered correctly 1`] = `ReactWrapper {}`;
+exports[`TotalConsumption component should be rendered correctly and render euro value 1`] = `
+<div>
+  <div
+    class="icon-line "
+  >
+    <svg
+      aria-hidden="true"
+      class="pile-icon styles__icon___23x3R"
+      height="36"
+      width="36"
+    >
+      <use
+        xlink:href="#test-file-stub"
+      />
+    </svg>
+    <div>
+      <span
+        class="euro-value"
+      >
+        22,77
+      </span>
+      <span
+        class="euro-symbol"
+      >
+         €
+      </span>
+    </div>
+  </div>
+</div>
+`;
-- 
GitLab