feat: bump Vitest dependency (#152)

* feat: bump Vitest dependency

* fix: remove --coverage

* feat: update ESLint and Prettier configuration. And enabled them on the CI

* fix: init playwright

* feat: exclude playwright from vitest

* feat: add HTTPS for playwright

* fix: change configuration for playwright

* fix: add security disable for playwright

* fix: change https port

* fix: change https port

* fix: increate UDP size

* fix: try sudo

* fix: remove caddy

* fix: use NPX for playwright

* feat: clone queen

* feat: try to clone two repositories

* fix: github action

* fix: change https port

* fix: remove .pem file

* fix: solve eslint issues

* fix: revert fix

* fix: remove unused parameter

* fix: review playwright configuration

.github/workflows/build.yml

@@ -17,7 +17,8 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
       - run: yarn
-      - run: yarn test
+      - run: yarn lint
+      - run: yarn test --coverage
       - run: yarn build
       - name: Upload build
         uses: actions/upload-artifact@v3

.github/workflows/playwright.yml

@@ -0,0 +1,39 @@
+name: Playwright Tests
+on:
+  pull_request:
+    branches: [main, master]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Pearl
+        uses: actions/checkout@v4
+        with:
+          path: Pearl-Jam
+      - name: Checkout Queen
+        uses: actions/checkout@v4
+        with:
+          repository: inseefr/drama-queen
+          path: Drama-Queen
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: |
+          npm install -g yarn
+          yarn --cwd Pearl-Jam
+          yarn --cwd Drama-Queen
+      - name: Install Playwright Browsers
+        working-directory: ./Pearl-Jam
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        working-directory: ./Pearl-Jam
+        run: |
+          npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: Pearl-Jam/playwright-report/
+          retention-days: 30

.gitignore

@@ -23,3 +23,8 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+coverage
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -3,3 +3,26 @@
 # Pearl Jam
 
 Case management web application for Computer-Assisted Personal Interviewing (CAPI)
+
+## Running Unit Tests
+
+Unit Tests use the **Vitest** framework. You can run these tests with the following command:
+
+```shell
+yarn test
+yarn test --coverage
+```
+
+## Running Playwright Tests
+
+We can also run end-to-end test thank to **Playwright**.
+
+```
+npx playwright test
+npx playwright test --ui
+```
+
+Before executing the test, we will :
+
+- build the project (in order to be sure that the test are running on the production-ready application)
+- launch a static server (thanks to **npx serve**)

eslint.config.mjs

@@ -0,0 +1,36 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat['jsx-runtime'],
+  eslintPluginPrettierRecommended,
+  {
+    settings: { react: { version: '18.3' } },
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      'no-undef': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      'no-fallthrough': 'off',
+    },
+    languageOptions: {
+      globals: {
+        it: 'readonly',
+        describe: 'readonly',
+        expect: 'readonly',
+        vi: 'readonly',
+        beforeEach: 'readonly',
+        global: 'readonly',
+        beforeAll: 'readonly',
+        afterAll: 'readonly',
+        test: 'readonly',
+      },
+    },
+  },
+];

index.html

@@ -3,10 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="/static/images/logo-insee-header.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pearl",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.1",
@@ -29,44 +29,9 @@
     "build": "vite build && copy-and-watch configuration/configuration.json build",
     "preview": "vite preview",
     "format": "prettier --write .",
-    "test": "vitest"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest",
-      "prettier",
-      "plugin:react-hooks/recommended",
-      "plugin:jsx-a11y/recommended",
-      "plugin:import/warnings"
-    ],
-    "plugins": [
-      "prettier",
-      "jsx-a11y"
-    ],
-    "rules": {
-      "prettier/prettier": [
-        1,
-        {
-          "arrowParens": "avoid"
-        }
-      ]
-    },
-    "globals": {
-      "fetch": true,
-      "window": true,
-      "document": true,
-      "navigator": true
-    },
-    "settings": {
-      "import/resolver": {
-        "node": {
-          "paths": [
-            "src"
-          ]
-        }
-      }
-    }
+    "test": "vitest",
+    "lint:fix": "prettier --write  \"**/*.{js,jsx,ts,tsx,css,scss,html,json}\" && eslint --fix \"src/**/*.{js,ts,jsx,tsx}\"",
+    "lint": "prettier -l  \"**/*.{js,jsx,ts,tsx,css,scss,html,json}\" && eslint \"src/**/*.{js,ts,jsx,tsx}\""
   },
   "prettier": {
     "printWidth": 100,
@@ -88,24 +53,27 @@
     ]
   },
   "devDependencies": {
+    "@eslint/js": "^9.12.0",
     "@originjs/vite-plugin-federation": "^1.2.1",
+    "@playwright/test": "^1.47.2",
+    "@types/node": "^22.7.5",
     "@types/react": "^18.2.46",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "2.1.2",
     "copy-and-watch": "^0.1.4",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "jest-sonar-reporter": "^2.0.0",
+    "eslint": "^9.12.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.1",
+    "globals": "^15.10.0",
     "jsdom": "^23.0.1",
-    "prettier": "^3.1.1",
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.8.1",
     "vite": "^4.2.1",
     "vite-plugin-pwa": "^0.19.2",
     "vite-tsconfig-paths": "^3.6.0",
-    "vitest": "^0.29.7"
+    "vitest": "^2.1.2"
   },
   "volta": {
     "node": "20.10.0"

playwright.config.ts

@@ -0,0 +1,87 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    ignoreHTTPSErrors: true,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    /*{
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        launchOptions: {
+          args: ['--disable-web-security'],
+        },
+      },
+    },*/
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    /*{
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },*/
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    ignoreHTTPSErrors: true,
+    url: 'http://localhost:3000',
+    command:
+      '(yarn --cwd ../Drama-Queen build && yarn build) && (npx kill-port 3001 && npx kill-port 3000) && ((npx serve -C -p 3001 ../Drama-Queen/drama-queen/dist/) & (npx serve -C -p 3000 build/))',
+    reuseExistingServer: false,
+  },
+});

public/manifest.json

@@ -16,7 +16,7 @@
       "src": "static/images/logo-insee-header.png",
       "sizes": "270x274",
       "type": "image/png"
-    } 
+    }
   ],
   "start_url": ".",
   "display": "standalone",

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { lazy, Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';
 import { loadConfiguration, useConfiguration } from './utils/hooks/useConfiguration';
 import { PearlTheme } from './ui/PearlTheme';

src/SwipeableTabs.jsx

@@ -6,7 +6,7 @@ import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
 
 export function SwipeableTab(props) {
-  const { children, value, index, ...other } = props;
+  const { children, index, ...other } = props;
 
   return (
     <div

src/app.css

@@ -1,5 +1,5 @@
 body {
-  background-color: #F5F7FA!important;
+  background-color: #f5f7fa !important;
 }
 
 ::-webkit-scrollbar {
@@ -8,11 +8,11 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background: #FFF;
+  background: #fff;
   padding: 1px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #E6EAF0;
+  background: #e6eaf0;
   border-radius: 4px;
 }

src/i18n/waitingMessage.js

@@ -11,4 +11,4 @@ const waitingMessage = {
   },
 };
 
-export default waitingMessage;
+export default waitingMessage;

src/pages/Home.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { SidebarLayout } from '../ui/SidebarLayout';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';

src/pages/QueenPage.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { mount } from 'dramaQueen/DramaIndex';
 import { useQueenListener } from '../utils/hooks/useQueenListener';