app.config.react.js

@@ -42,11 +42,7 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        loaders: [
-          require.resolve('style-loader'),
-          require.resolve('css-loader'),
-          require.resolve('sass-loader'),
-        ],
+        use: ['style-loader', 'css-loader', 'sass-loader'],
       },
     ],
   },

jest.config.js

-module.exports = {
+/** @type {import('jest').Config} */
+const config = {
   testURL: 'http://localhost/',
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'styl'],
   setupFiles: ['<rootDir>/tests/jestLib/setup.js'],
-  moduleDirectories: ['src', 'node_modules'],
+  moduleDirectories: ['<rootDir>', 'node_modules'],
+  modulePaths: ['<rootDir>/src'],
   moduleNameMapper: {
     '\\.(png|gif|jpe?g|svg|hbs)$': '<rootDir>/tests/__mocks__/fileMock.js',
     // identity-obj-proxy module is installed by cozy-scripts
@@ -26,3 +28,5 @@ module.exports = {
     cozy: {},
   },
 }
+
+module.exports = config

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

@@ -6,17 +6,17 @@ import { Provider } from 'react-redux'
 import {
   AllEcogestureData,
   defaultEcogestureData,
-} from '../../../tests/__mocks__/actionData.mock'
-import { mockedEcogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
+} from 'tests/__mocks__/actionData.mock'
+import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock'
 import {
   createMockEcolyoStore,
   mockGlobalState,
   mockProfileState,
-} from '../../../tests/__mocks__/store'
-import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
-import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
+} from 'tests/__mocks__/store'
+import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
+import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
+import ActionModal from '../ActionModal/ActionModal'
 import ActionBegin from './ActionBegin'
-import ActionModal from './ActionModal'
 
 jest.mock('cozy-ui/transpiled/react/I18n', () => ({
   useI18n: jest.fn(() => ({

src/components/Action/ActionBegin.tsx → src/components/Action/ActionBegin/ActionBegin.tsx

 import { Button } from '@material-ui/core'
 import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
-import ActionModal from 'components/Action/ActionModal'
-import StarsContainer from 'components/Challenge/StarsContainer'
+import ActionModal from 'components/Action/ActionModal/ActionModal'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StarsContainer from 'components/CommonKit/StarsContainer/StarsContainer'
 import { Client, useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { Ecogesture, UserChallenge } from 'models'
@@ -92,8 +92,7 @@ const ActionBegin = ({
             </div>
             <div className="action-duration text-18">
               {t('action.duration', {
-                // eslint-disable-next-line camelcase
-                smart_count: currentAction.actionDuration,
+                smartCount: currentAction.actionDuration,
               })}
             </div>
             <div className="action-text text-18-bold">

src/components/Action/actionBegin.scss → src/components/Action/ActionBegin/actionBegin.scss

-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .action-begin {
   margin: auto;

src/components/Action/ActionCard.spec.tsx → 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'
+import EcogestureModal from 'components/Ecogesture/EcogestureModal/EcogestureModal'
 import { mount } from 'enzyme'
 import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
-import { defaultEcogestureData } from '../../../tests/__mocks__/actionData.mock'
-import { createMockEcolyoStore } from '../../../tests/__mocks__/store'
-import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
-import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
+import { defaultEcogestureData } from 'tests/__mocks__/actionData.mock'
+import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
+import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 import ActionCard from './ActionCard'
 
 jest.mock('cozy-ui/transpiled/react/I18n', () => ({

src/components/Action/ActionCard.tsx → src/components/Action/ActionCard/ActionCard.tsx

 import { Button } from '@material-ui/core'
 import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import EcogestureModal from 'components/Ecogesture/EcogestureModal'
+import EcogestureModal from 'components/Ecogesture/EcogestureModal/EcogestureModal'
 import { useClient } from 'cozy-client'
 import { UsageEventType } from 'enums'
 import { Ecogesture } from 'models'
@@ -9,7 +9,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import UsageEventService from 'services/usageEvent.service'
 import { useAppSelector } from 'store/hooks'
 import { importIconById } from 'utils/utils'
-import './actionList.scss'
+import './actionCard.scss'
 
 interface ActionCardProps {
   action: Ecogesture

src/components/Action/actionList.scss → src/components/Action/ActionCard/actionCard.scss

-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
-.action-list-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  max-width: 600px;
-  margin: auto;
-  gap: 1rem;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-}
 button.action-card {
   width: 100%;
   box-sizing: border-box;

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

@@ -6,10 +6,10 @@ import {
   createMockEcolyoStore,
   mockGlobalState,
   mockProfileState,
-} from '../../../tests/__mocks__/store'
-import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
-import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
-import ActionBegin from './ActionBegin'
+} from 'tests/__mocks__/store'
+import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
+import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
+import ActionBegin from '../ActionBegin/ActionBegin'
 import ActionChoose from './ActionChoose'
 
 jest.mock('cozy-ui/transpiled/react/I18n', () => ({

src/components/Action/ActionChoose.tsx → src/components/Action/ActionChoose/ActionChoose.tsx

-import ActionBegin from 'components/Action/ActionBegin'
-import ActionList from 'components/Action/ActionList'
 import { Ecogesture, UserChallenge } from 'models'
 import React, { useState } from 'react'
+import ActionBegin from '../ActionBegin/ActionBegin'
+import ActionList from '../ActionList/ActionList'
 
 const ActionChoose = ({ userChallenge }: { userChallenge: UserChallenge }) => {
   const [selectedAction, setSelectedAction] = useState<Ecogesture | null>(null)

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

@@ -5,9 +5,9 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import UsageEventService from 'services/usageEvent.service'
 import * as challengeActions from 'store/challenge/challenge.slice'
-import { createMockEcolyoStore } from '../../../tests/__mocks__/store'
-import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
-import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
+import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
+import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 import ActionDone from './ActionDone'
 
 jest.mock('cozy-ui/transpiled/react/I18n', () => ({

src/components/Action/actionDone.scss → src/components/Action/ActionDone/actionDone.scss

-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .action-done-container {
   max-width: 600px;

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

 import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
-import { defaultEcogestureData } from '../../../tests/__mocks__/actionData.mock'
+import { defaultEcogestureData } from 'tests/__mocks__/actionData.mock'
 import {
   createMockEcolyoStore,
   mockChallengeState,
   mockProfileState,
-} from '../../../tests/__mocks__/store'
-import ActionCard from './ActionCard'
+} from 'tests/__mocks__/store'
+import ActionCard from '../ActionCard/ActionCard'
 import ActionList from './ActionList'
 
 const mockgetCustomActions = jest.fn()

src/components/Action/ActionList.tsx → src/components/Action/ActionList/ActionList.tsx

-import ActionCard from 'components/Action/ActionCard'
+import ActionCard from 'components/Action/ActionCard/ActionCard'
 import { Client, useClient } from 'cozy-client'
 import { Ecogesture } from 'models'
 import React, { useEffect, useState } from 'react'
 import ActionService from 'services/action.service'
 import { useAppSelector } from 'store/hooks'
-import './actionBegin.scss'
+import './actionList.scss'
 
 interface ActionListProps {
   setSelectedAction: React.Dispatch<React.SetStateAction<Ecogesture | null>>

src/components/Action/ActionList/actionList.scss

+@import 'src/styles/base/color';
+
+.action-list-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 600px;
+  margin: auto;
+  gap: 1rem;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+}