Merge branch 'lint/rtl-unnecessary-act' into 'dev'

lint(tests): remove unnecessary act

See merge request !1281

.eslintrc.js

@@ -87,9 +87,6 @@ module.exports = {
       rules: {
         'jest/no-mocks-import': 0,
 
-        // Act warning -> should be fixed with "@testing-library/dom" v10 -> in another MR
-        'testing-library/no-unnecessary-act': 0,
-
         // For testing View components which renders other components -> implementation tests ?
         'testing-library/no-container': 0,
 

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

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -83,9 +83,7 @@ describe('ActionBegin component', () => {
       </Provider>
     )
     await waitFor(() => null, { container })
-    await act(async () => {
-      await userEvent.click(screen.getByText('action.apply'))
-    })
+    await userEvent.click(screen.getByText('action.apply'))
     expect(await screen.findByRole('dialog')).toBeInTheDocument()
   })
 })

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

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -43,9 +43,7 @@ describe('ActionCard component', () => {
       </Provider>
     )
     await waitFor(() => null, { container })
-    await act(async () => {
-      await userEvent.click(await screen.findByRole('button'))
-    })
+    await userEvent.click(await screen.findByRole('button'))
     expect(await screen.findByRole('dialog')).toBeInTheDocument()
   })
 })

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

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -74,11 +74,7 @@ describe('ActionChoose component', () => {
       </Provider>
     )
     await waitFor(() => null, { container })
-
-    await act(async () => {
-      await userEvent.click(await screen.findByText('action.other'))
-    })
-
+    await userEvent.click(await screen.findByText('action.other'))
     const list = container.getElementsByTagName('mock-ActionList')[0]
     expect(list).toBeInTheDocument()
   })

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

-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -35,9 +35,7 @@ describe('ActionDone component', () => {
         <ActionDone currentChallenge={userChallengeData[1]} />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(screen.getByText('action.ok'))
-    })
+    await userEvent.click(screen.getByText('action.ok'))
     expect(updateChallengeSpy).toHaveBeenCalledTimes(1)
   })
 })

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

-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -49,9 +49,7 @@ describe('ActionModal component', () => {
         />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(screen.getByText('action_modal.accept'))
-    })
+    await userEvent.click(screen.getByText('action_modal.accept'))
     expect(updateChallengeSpy).toHaveBeenCalledTimes(1)
   })
 })

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

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { UserActionState } from 'enums'
 import { DateTime } from 'luxon'
@@ -44,9 +44,7 @@ describe('ActionOnGoing component', () => {
         <ActionOnGoing userAction={userAction1} />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(screen.getByText('action.details'))
-    })
+    await userEvent.click(screen.getByText('action.details'))
     expect(screen.getByRole('dialog')).toBeTruthy()
   })
 })

src/components/Analysis/Comparison/Comparison.spec.tsx

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { FluidType } from 'enums'
 import { PerformanceIndicator } from 'models'
@@ -89,15 +89,11 @@ describe('Comparison component', () => {
       name: `analysis.compare.month_tab`,
     })
 
-    await act(async () => {
-      await userEvent.click(yearlyButton)
-      expect(mockDispatch).toHaveBeenCalledWith(setPeriod('year'))
-    })
+    await userEvent.click(yearlyButton)
+    expect(mockDispatch).toHaveBeenCalledWith(setPeriod('year'))
 
-    await act(async () => {
-      await userEvent.click(monthlyButton)
-      expect(mockDispatch).toHaveBeenCalledWith(setPeriod('month'))
-    })
+    await userEvent.click(monthlyButton)
+    expect(mockDispatch).toHaveBeenCalledWith(setPeriod('month'))
   })
 
   it('renders performance indicators', async () => {

src/components/Analysis/Comparison/FluidPerformanceIndicator.spec.tsx

 import { AnyAction } from '@reduxjs/toolkit'
-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { FluidType } from 'enums'
 import { DateTime } from 'luxon'
@@ -64,9 +64,7 @@ describe('FluidPerformanceIndicator component', () => {
       screen.getByTestId('fluid-comparison-ELECTRICITY')
     ).toHaveTextContent('+10,00 % / avril 2024')
 
-    await act(async () => {
-      await userEvent.click(screen.getByRole('listitem'))
-    })
+    await userEvent.click(screen.getByRole('listitem'))
 
     expect(mockedNavigate).toHaveBeenCalledWith('/consumption/electricity')
     expect(dispatchSpy).toHaveBeenCalledWith({
@@ -103,9 +101,7 @@ describe('FluidPerformanceIndicator component', () => {
       '-10,00 % / avril 2024'
     )
 
-    await act(async () => {
-      await userEvent.click(screen.getByRole('listitem'))
-    })
+    await userEvent.click(screen.getByRole('listitem'))
 
     expect(mockedNavigate).toHaveBeenCalledWith('/consumption/water')
     expect(dispatchSpy).toHaveBeenCalledWith({

src/components/Analysis/Comparison/TemperatureComparison.spec.tsx

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { DateTime } from 'luxon'
 import React from 'react'
@@ -80,11 +80,9 @@ describe('TemperatureComparison component', () => {
       </Provider>
     )
     await waitFor(() => container)
-    await act(async () => {
-      await userEvent.click(
-        screen.getByLabelText('analysis.temperature_comparison.info_button')
-      )
-    })
+    await userEvent.click(
+      screen.getByLabelText('analysis.temperature_comparison.info_button')
+    )
     expect(screen.getByRole('dialog')).toBeInTheDocument()
   })
 })

src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.spec.tsx

-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -26,9 +26,7 @@ describe('TemperatureComparisonModal component', () => {
         />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(screen.getAllByRole('button')[0])
-    })
+    await userEvent.click(screen.getAllByRole('button')[0])
     expect(mockHandleClose).toHaveBeenCalledTimes(1)
   })
 })

src/components/Analysis/Comparison/__snapshots__/FluidPerformanceIndicator.spec.tsx.snap

@@ -106,7 +106,16 @@ exports[`FluidPerformanceIndicator component should render elec indicators corre
     />
     <span
       class="MuiTouchRipple-root"
-    />
+    >
+      <span
+        class="MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
+        style="width: 2.8284271247461903px; height: 2.8284271247461903px; top: -1.4142135623730951px; left: -1.4142135623730951px;"
+      >
+        <span
+          class="MuiTouchRipple-child MuiTouchRipple-childLeaving"
+        />
+      </span>
+    </span>
   </button>
 </div>
 `;

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

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { PerformanceIndicator } from 'models'
 import React from 'react'
@@ -103,11 +103,9 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
     await screen.findByLabelText(
       'consumption.accessibility.button_previous_value'
     )
-    await act(async () => {
-      await userEvent.click(
-        screen.getByLabelText('consumption.accessibility.button_previous_value')
-      )
-    })
+    await userEvent.click(
+      screen.getByLabelText('consumption.accessibility.button_previous_value')
+    )
     expect(screen.getByText('special_elec.week')).toBeInTheDocument()
   })
 

src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { FluidType } from 'enums'
 import React from 'react'
@@ -59,25 +59,17 @@ describe('MaxConsumptionCard component', () => {
     )
 
     // navigate next
-    await act(async () => {
-      await userEvent.click(nextButton)
-    })
+    await userEvent.click(nextButton)
     expect(screen.getByText('FLUID.GAS.LABEL')).toBeInTheDocument()
 
-    await act(async () => {
-      await userEvent.click(nextButton)
-    })
+    await userEvent.click(nextButton)
     expect(screen.getByText('FLUID.ELECTRICITY.LABEL')).toBeInTheDocument()
 
     // navigate prev
-    await act(async () => {
-      await userEvent.click(prevButton)
-    })
+    await userEvent.click(prevButton)
     expect(screen.getByText('FLUID.GAS.LABEL')).toBeInTheDocument()
 
-    await act(async () => {
-      await userEvent.click(prevButton)
-    })
+    await userEvent.click(prevButton)
     expect(screen.getByText('FLUID.ELECTRICITY.LABEL')).toBeInTheDocument()
   })
 })

src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -97,9 +97,7 @@ describe('AnalysisConsumption component', () => {
     expect(rows.length).toBe(4)
     expect(screen.getByTestId('iconGoToProfile')).toBeInTheDocument()
     expect(screen.queryByTestId('goToProfile')).not.toBeInTheDocument()
-    await act(async () => {
-      await userEvent.click(screen.getByTestId('iconGoToProfile'))
-    })
+    await userEvent.click(screen.getByTestId('iconGoToProfile'))
     expect(mockedNavigate).toHaveBeenCalledWith('/profileType')
   })
 })

src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx

-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import ChallengeCardDone from 'components/Challenge/ChallengeCardDone/ChallengeCardDone'
 import React from 'react'
@@ -45,9 +45,7 @@ describe('ChallengeCardDone component', () => {
         </Provider>
       )
       const resetButton = screen.getByText('challenge.card_done.reset_defi')
-      await act(async () => {
-        await userEvent.click(resetButton)
-      })
+      await userEvent.click(resetButton)
       expect(mockDispatch).toHaveBeenCalledWith({
         type: 'challenge/updateUserChallengeList',
       })

src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx

-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import ChallengeCardLast from './ChallengeCardLast'
@@ -16,9 +16,7 @@ describe('ChallengeCardLast component', () => {
     global.open = jest.fn()
 
     render(<ChallengeCardLast />)
-    await act(async () => {
-      await userEvent.click(screen.getByText('challenge.card_last.button'))
-    })
+    await userEvent.click(screen.getByText('challenge.card_last.button'))
     expect(window.open).toHaveBeenCalledTimes(1)
     expect(global.open).toHaveBeenCalledWith(
       `${__SAU_IDEA_DIRECT_LINK__}?version=0.0.0`

src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx

-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { FluidState, FluidType } from 'enums'
 import React from 'react'
@@ -39,11 +39,9 @@ describe('ChallengeCardUnlocked component', () => {
         <ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(
-        screen.getByText('challenge.card_unlocked.button_launch')
-      )
-    })
+    await userEvent.click(
+      screen.getByText('challenge.card_unlocked.button_launch')
+    )
     expect(screen.getByRole('dialog')).toBeInTheDocument()
   })
 
@@ -64,11 +62,9 @@ describe('ChallengeCardUnlocked component', () => {
         <ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(
-        screen.getByText('challenge.card_unlocked.button_launch')
-      )
-    })
+    await userEvent.click(
+      screen.getByText('challenge.card_unlocked.button_launch')
+    )
     expect(screen.queryAllByRole('dialog').length).toBeFalsy()
     expect(mockStartUserChallenge).toHaveBeenCalledWith(userChallengeData[0])
   })

src/components/Charts/Bar.spec.tsx

-import { act, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { scaleLinear } from 'd3'
 import { FluidType, TimeStep } from 'enums'
@@ -127,9 +127,7 @@ describe('Bar component test', () => {
         </svg>
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(container.querySelector('rect') as Element)
-    })
+    await userEvent.click(container.querySelector('rect') as Element)
     expect(setSelectedDateSpy).toHaveBeenCalledTimes(1)
     expect(setSelectedDateSpy).toHaveBeenCalledWith(
       graphData.actualData[0].date

src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx

-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import FormNavigation from './FormNavigation'
@@ -15,15 +15,9 @@ describe('FormNavigation component', () => {
         disablePrevButton={false}
       />
     )
-    await act(async () => {
-      await userEvent.click(
-        screen.getByText('profile_type.form.button_previous')
-      )
-    })
+    await userEvent.click(screen.getByText('profile_type.form.button_previous'))
     expect(mockHandlePrevious).toHaveBeenCalled()
-    await act(async () => {
-      await userEvent.click(screen.getByText('profile_type.form.button_next'))
-    })
+    await userEvent.click(screen.getByText('profile_type.form.button_next'))
     expect(mockHandleNext).toHaveBeenCalled()
   })
 })