@pplancq/react-template 2.4.5 → 2.5.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## @pplancq/react-template [2.5.0](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@2.4.5...@pplancq/react-template@2.5.0) (2025-06-09)
+
+### Features
+
+* **react-template:** add Playwright support in ESLint configuration and update linting scripts ([c8b11ce](https://github.com/pplancq/dev-tools/commit/c8b11cef09478edd6a2fad02fc14e2828b3239b7))
+* **react-template:** add Playwright testing setup and configuration ([f4f7089](https://github.com/pplancq/dev-tools/commit/f4f7089540e743fa8e4b7c03e3f534758c61b159))
+* **react-template:** add watch mode for Playwright tests using nodemon ([ecb400a](https://github.com/pplancq/dev-tools/commit/ecb400a52a076aa58c6f9065441c049c9d3c44b4))
+* **react-template:** enhance Playwright testing setup with coverage reporting ([d7b1422](https://github.com/pplancq/dev-tools/commit/d7b14229773bc5b4b1e1defa83a258f214a21d21))
+* **react-template:** update test scripts and add concurrent execution for unit and e2e tests ([05f0205](https://github.com/pplancq/dev-tools/commit/05f0205e81c17e8c9b5cb6a90358d3de3f954a9e))
+
+### Bug Fixes
+
+* **deps:** update dependency react-hook-form to ^7.57.0 ([502badf](https://github.com/pplancq/dev-tools/commit/502badf5767175f9944bec67e673d54ec4fb837e))
+* **deps:** update dependency react-router to ^7.6.2 ([f0da2c0](https://github.com/pplancq/dev-tools/commit/f0da2c08810dd3396fd79174f1f9289e26784521))
+* **deps:** update react-query mono repo to ^5.80.6 ([fbdbdc2](https://github.com/pplancq/dev-tools/commit/fbdbdc2255cb6619ee1d9aca6e749627267ec93a))
+
+
+### Dependencies
+
+* **@pplancq/eslint-config:** upgraded to 4.1.0
+* **@pplancq/postcss-config:** upgraded to 2.1.12
+* **@pplancq/webpack-config:** upgraded to 1.9.17
+
 ## @pplancq/react-template [2.4.5](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@2.4.4...@pplancq/react-template@2.4.5) (2025-06-02)
 
 ### Bug Fixes

package/_README.md

@@ -19,10 +19,9 @@ cd mon-projet
 2. Install dependencies.
 
 ```bash
-npm install 
+npm install
 ```
 
-
 In the project directory, you can run the following commands:
 
 ### `npm start`
@@ -36,11 +35,22 @@ You will also see lint errors in the console.
 
 ### `npm test`
 
-Launches the test runner.
+Runs all tests (unit and e2e).
+
+> You can add the `--coverage` flag to generate a coverage report for both unit and e2e tests.  
+> Example: `npm run test -- --coverage`
+
+### `npm run test:unit`
+
+Runs unit tests using Vitest.
+
+### `npm run test:unit:watch`
 
-### `npm run test:watch`
+Runs unit tests in watch mode using Vitest.
 
-Launches the test runner in interactive mode.
+### `npm run test:e2e`
+
+Runs end-to-end tests using Playwright.
 
 ### `npm run build`
 
@@ -115,20 +125,20 @@ To migrate from webpack to vite.
 
 Here is the project folder structure, with a brief description of each folder:
 
-| Folder | Description|
-| -------- | -------- |
-| **📁 src**  | ***The root directory of the application source code.***
-| [**📁 ui**](./src/ui/README.md) | Contains reusable components designed to be used across projects. Components can be basic (Atoms), more complex (Molecules), higher-level components (Organisms), or page templates (Templates).    |
-| [**📁 components**](./src/components/README.md)     | Contains project-specific reusable components, for example, form components using React Hook Form.   |
-| [**📁 providers**](./src/providers/README.md)   | This folder contains context providers or custom hooks that provide data to the entire application.   |
-| [**📁 pages**](./src/pages/README.md)    | Contains the pages of the application. Each subfolder represents a distinct page or view of the application.    |
-| [**📁 forms**](./src/forms/README.md)   | Contains the forms of the application, grouping hooks related to forms.    |
-| [**📁 hooks**](./src/hooks/README.md)    | Includes custom hooks for various application features, such as API calls with React Query.    |
-| [**📁 utils**](./src/utils/README.md)    | Contains utilities and services such as test files, utility functions, etc.    |
-| [**📁 routing**](./src/routing/README.md)    | This folder is intended for native API calls using the `fetch`. function. These calls are essential for fetching real-time data from external sources, such as remote servers or web services.    |
-| [**📁 types**](./src/types/README.md)     | Provides TypeScript type definitions to enhance the robustness of your code.   |
-| [**📁 assets**](./src/assets/README.md)    | Contains static files such as images, fonts, etc., used in the application.    |
-| [**📁 config**](./src/config/README.md)   | Contains all the important configurations and utilities needed for our project.    |
+| Folder                                               | Description                                                                                                                                                                                      |
+| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **📁 src**                                           | **_The root directory of the application source code._**                                                                                                                                         |
+| [**📁 ui**](./src/ui/README.md)                      | Contains reusable components designed to be used across projects. Components can be basic (Atoms), more complex (Molecules), higher-level components (Organisms), or page templates (Templates). |
+| [**📁 components**](./src/components/README.md) | Contains project-specific reusable components, for example, form components using React Hook Form.                                                                                               |
+| [**📁 providers**](./src/providers/README.md)        | This folder contains context providers or custom hooks that provide data to the entire application.                                                                                              |
+| [**📁 pages**](./src/pages/README.md)                | Contains the pages of the application. Each subfolder represents a distinct page or view of the application.                                                                                     |
+| [**📁 forms**](./src/forms/README.md)                | Contains the forms of the application, grouping hooks related to forms.                                                                                                                          |
+| [**📁 hooks**](./src/hooks/README.md)                | Includes custom hooks for various application features, such as API calls with React Query.                                                                                                      |
+| [**📁 utils**](./src/utils/README.md)                | Contains utilities and services such as test files, utility functions, etc.                                                                                                                      |
+| [**📁 routing**](./src/routing/README.md)            | This folder is intended for native API calls using the `fetch`. function. These calls are essential for fetching real-time data from external sources, such as remote servers or web services.   |
+| [**📁 types**](./src/types/README.md)                | Provides TypeScript type definitions to enhance the robustness of your code.                                                                                                                     |
+| [**📁 assets**](./src/assets/README.md)              | Contains static files such as images, fonts, etc., used in the application.                                                                                                                      |
+| [**📁 config**](./src/config/README.md)              | Contains all the important configurations and utilities needed for our project.                                                                                                                  |
 
 ## 🏗 <span id="component-structure">React Component Structure</span>
 
@@ -198,7 +208,6 @@ export const useComponentName = ({ foo }: UseComponentNameProps): UseComponentNa
     bar: foo,
   };
 };
-
 ```
 
 #### 📄 ComponentName.module.scss
@@ -209,7 +218,6 @@ The style specific to the component will be written in module form. This allows
 .root {
   background-color: red;
 }
-
 ```
 
 ```typescript
@@ -221,6 +229,7 @@ export const ComponentName = () => {
  );
 };
 ```
+
 ### ❗ Naming Conventions
 
 ==> Component names, file names, and folder names should follow the **PascalCase** convention.
@@ -233,7 +242,7 @@ It is recommended to only include non-sensitive environment variables in the app
 
 Ensure you understand the security implications before including environment variables in your bundle.
 
-Please note that the web configuration pre-filters environment variables via the default prefix ‘FRONT_’. This means that only environment variables starting with ‘FRONT_’ will be included in the bundle. This is an additional layer of security to prevent the accidental exposure of sensitive environment variables.
+Please note that the web configuration pre-filters environment variables via the default prefix ‘FRONT*’. This means that only environment variables starting with ‘FRONT*’ will be included in the bundle. This is an additional layer of security to prevent the accidental exposure of sensitive environment variables.
 
 ## 🙇 <span id="learnmore">Learn More</span>
 

package/_gitignore

@@ -25,5 +25,9 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+#playwright
+playwright-report/
+test-results/
+
 /.idea
 /public/mockServiceWorker.js

package/eslint.config.mjs

@@ -4,6 +4,9 @@ export default defineConfig({
   enableReact: true,
   enablePrettier: 'on',
   enableVitest: true,
+  unitTestFiles: ['src/**/*.{test,spec,steps}.{js,jsx,ts,tsx}'],
+  enablePlaywright: true,
+  unitE2eFiles: ['tests/**/*.{test,spec}.{js,jsx,ts,tsx}'],
   extendConfig: [
     {
       files: ['mocks/**/*'],

package/mrc.playwright.config.ts

@@ -0,0 +1,29 @@
+import { CoverageReportOptions } from 'monocart-coverage-reports';
+
+export const coverageOptions: CoverageReportOptions = {
+  enabled: process.env.CI ?? process.env.ENABLED_COVERAGE,
+  name: 'Playwright Coverage Report',
+  outputDir: './playwright-report/coverage',
+  baseDir: './src/',
+  reports: [
+    'text',
+    'text-summary',
+    ['html', { subdir: 'html-coverage' }],
+    ['lcovonly', { file: 'lcov-coverage.info' }],
+    ['cobertura', { file: 'cobertura-coverage.xml' }],
+  ],
+  sourceFilter: {
+    '**/node_modules/**': false,
+    '**/mocks/**': false,
+    '**/*.{test,spec,steps}.{js,jsx,ts,tsx}': false,
+    'vitest.setup.ts': false,
+    '**/*.{js,jsx,ts,tsx}': true,
+  },
+  watermarks: {
+    statements: [80, 90],
+    branches: [70, 80],
+    functions: [80, 90],
+    lines: [80, 90],
+    bytes: [80, 90],
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pplancq/react-template",
-  "version": "2.4.5",
+  "version": "2.5.0",
   "license": "MIT",
   "description": "react template",
   "author": "pplancq <paul.plancq@outlook.fr>",
@@ -14,16 +14,23 @@
     "start": "webpack serve",
     "start:mock": "webpack serve --env FRONT_MOCK_ENABLE=true",
     "build": "webpack --mode production",
-    "test": "vitest run",
-    "test:watch": "vitest",
+    "test": "node scripts/test.js",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "test:e2e": "node scripts/playwright.js test",
+    "test:e2e:watch": "node scripts/playwright.js test --watch",
+    "test:e2e:ui": "node scripts/playwright.js test --ui",
     "lint": "node scripts/lint.js",
-    "lint:eslint": "eslint \"{mocks,public,src}/**/*.{js,jsx,mjs,ts,tsx}\"",
-    "lint:eslint:fix": "eslint \"{mocks,public,src}/**/*.{js,jsx,mjs,ts,tsx}\" --fix",
+    "lint:eslint": "eslint \"{mocks,public,src,tests}/**/*.{js,jsx,mjs,ts,tsx}\"",
+    "lint:eslint:fix": "eslint \"{mocks,public,src,tests}/**/*.{js,jsx,mjs,ts,tsx}\" --fix",
     "lint:stylelint": "stylelint \"src/**/*.{scss,css}\"",
     "lint:stylelint:fix": "stylelint \"src/**/*.{scss,css}\" --fix",
     "lint:prettier": "prettier \"{mocks,public,src}/**/*.!(js|jsx|mjs|ts|tsx|scss|css)\" --check --ignore-unknown",
     "lint:prettier:fix": "prettier \"{mocks,public,src}/**/*.!(js|jsx|mjs|ts|tsx|scss|css)\" --write --ignore-unknown",
     "lint:tsc": "tsc --noEmit",
+    "playwright:install": "playwright install",
+    "playwright:show-report": "playwright show-report",
+    "playwright:codegen": "playwright codegen",
     "package:check": "npm exec --yes package-lock-utd@1.1.3",
     "remove:demo": "node ./scripts/removeDemo.cjs",
     "migrate:vite": "node ./scripts/migrateToVite.cjs",
@@ -39,16 +46,18 @@
   ],
   "dependencies": {
     "@hookform/resolvers": "^5.0.1",
-    "@tanstack/react-query": "^5.79.0",
-    "@tanstack/react-query-devtools": "^5.79.0",
+    "@tanstack/react-query": "^5.80.6",
+    "@tanstack/react-query-devtools": "^5.80.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-hook-form": "^7.56.4",
-    "react-router": "^7.6.1",
+    "react-hook-form": "^7.57.0",
+    "react-router": "^7.6.2",
     "yup": "^1.6.1"
   },
   "devDependencies": {
+    "@bdellegrazie/playwright-sonar-reporter": "^0.4.0",
     "@commitlint/cli": "^19.8.1",
+    "@playwright/test": "^1.52.0",
     "@pplancq/commitlint-config": "*",
     "@pplancq/eslint-config": "*",
     "@pplancq/postcss-config": "*",
@@ -59,16 +68,18 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.1.5",
-    "@vitejs/plugin-react-swc": "^3.10.0",
-    "@vitest/coverage-v8": "^3.1.4",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react-swc": "^3.10.1",
+    "@vitest/coverage-v8": "^3.2.2",
     "concurrently": "^9.1.2",
-    "eslint": "^9.27.0",
+    "eslint": "^9.28.0",
     "eslint-plugin-prettier": "^5.4.1",
     "husky": "^9.1.7",
     "jsdom": "^26.1.0",
     "lint-staged": "^16.1.0",
-    "msw": "^2.8.6",
+    "monocart-coverage-reports": "^2.12.6",
+    "msw": "^2.9.0",
+    "nodemon": "^3.1.10",
     "prettier": "^3.5.3",
     "stylelint": "^16.20.0",
     "stylelint-prettier": "^5.0.3",
@@ -76,12 +87,12 @@
     "typescript": "^5.8.3",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.1.4",
+    "vitest": "^3.2.2",
     "vitest-axe": "^1.0.0-pre.5",
     "vitest-sonar-reporter": "^2.0.1",
     "webpack": "^5.99.9",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.1"
+    "webpack-dev-server": "^5.2.2"
   },
   "engines": {
     "node": ">=20.12.2"

package/playwright.config.ts

@@ -0,0 +1,48 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const appUrl = 'http://localhost:3000';
+
+export default defineConfig({
+  testDir: 'tests',
+  outputDir: 'test-results',
+  fullyParallel: true,
+  forbidOnly: Boolean(process.env.CI),
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [
+    ['list'],
+    ['html', { open: 'never', outputFolder: 'playwright-report/html' }],
+    ['junit', { outputFile: 'playwright-report/junit-report.xml' }],
+    [
+      '@bdellegrazie/playwright-sonar-reporter',
+      { outputFile: 'playwright-report/sonar-results.xml', sonarcloud: true },
+    ],
+  ],
+  globalSetup: 'tests/utils/playwright.globalSetup.ts',
+  globalTeardown: 'tests/utils/playwright.globalTeardown.ts',
+  use: {
+    baseURL: appUrl,
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Firefox Desktop'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+  webServer: {
+    command: 'npm run start:mock',
+    url: appUrl,
+    stdout: 'pipe',
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/scripts/playwright.js

@@ -0,0 +1,38 @@
+import { spawnSync } from 'child_process';
+
+const runCommand = (cmd, args = []) => {
+  console.info(`> ${cmd} ${args.join(' ')}`);
+  const result = spawnSync(cmd, args, { cwd: process.cwd(), stdio: 'inherit' });
+  if (result.status !== 0) {
+    throw result;
+  }
+};
+
+const main = async () => {
+  const args = process.argv.slice(2);
+
+  let playwrightArgs = [...args];
+
+  if (args.indexOf('--watch') !== -1) {
+    const filteredArgs = args.filter(a => a !== '--watch');
+    runCommand('npx', [
+      'nodemon',
+      '--watch',
+      './tests/',
+      '--ext',
+      'js,jx,ts,tsx',
+      '--exec',
+      ['node', 'scripts/playwright.js', ...filteredArgs].join(' '),
+    ]);
+    return;
+  }
+
+  if (playwrightArgs.indexOf('--coverage') !== -1) {
+    process.env.ENABLED_COVERAGE = 'true';
+    playwrightArgs = playwrightArgs.filter(p => p !== '--coverage');
+  }
+
+  runCommand('npx', ['playwright', ...playwrightArgs]);
+};
+
+main().catch(e => process.exit(e.status));

package/scripts/test.js

@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import concurrently from 'concurrently';
+
+const args = process.argv.slice(2);
+
+let commands = ['npm:test:unit', 'npm:test:e2e'];
+
+if (args.includes('--coverage')) {
+  commands = commands.map(command => `${command} -- --coverage`);
+}
+
+const { result } = concurrently(commands, {
+  prefixColors: 'auto',
+  maxProcesses: 1,
+});
+
+result.then(
+  () => process.exit(0),
+  () => process.exit(1),
+);

package/tests/demo.test.ts

@@ -0,0 +1,10 @@
+import { expect } from '@playwright/test';
+import { describe, it } from './utils/playwright.testWithCoverage';
+
+describe('Demo Test', () => {
+  it('should have a title', async ({ page }) => {
+    await page.goto('/');
+    const title = page.getByText('WELCOME TO YOUR REACT STARTER KIT');
+    await expect(title).toBeVisible();
+  });
+});

package/tests/utils/playwright.globalSetup.ts

@@ -0,0 +1,12 @@
+import type { FullConfig } from '@playwright/test';
+import { CoverageReport } from 'monocart-coverage-reports';
+import { coverageOptions } from '../../mrc.playwright.config';
+
+// eslint-disable-next-line import/no-default-export
+export default (config: FullConfig) => {
+  if (config.webServer && coverageOptions.enabled) {
+    console.info('[playwright]  Coverage enabled with monocart');
+    const mcr = new CoverageReport(coverageOptions);
+    mcr.cleanCache();
+  }
+};

package/tests/utils/playwright.globalTeardown.ts

@@ -0,0 +1,11 @@
+import type { FullConfig } from '@playwright/test';
+import { CoverageReport } from 'monocart-coverage-reports';
+import { coverageOptions } from '../../mrc.playwright.config';
+
+// eslint-disable-next-line import/no-default-export
+export default async (config: FullConfig) => {
+  if (config.webServer && coverageOptions.enabled) {
+    const mcr = new CoverageReport(coverageOptions);
+    await mcr.generate();
+  }
+};

package/tests/utils/playwright.testWithCoverage.ts

@@ -0,0 +1,34 @@
+import { test as base } from '@playwright/test';
+import { CoverageReport } from 'monocart-coverage-reports';
+import { coverageOptions } from '../../mrc.playwright.config';
+
+export const test = base.extend<{
+  testWithCoverage: string;
+}>({
+  testWithCoverage: [
+    async ({ page }, use) => {
+      const isChromium = test.info().project.name === 'chromium';
+
+      if (isChromium && coverageOptions.enabled) {
+        await page.coverage.startJSCoverage({
+          resetOnNavigation: false,
+        });
+      }
+
+      await use('testWithCoverage');
+
+      if (isChromium && coverageOptions.enabled) {
+        const coverageList = await page.coverage.stopJSCoverage();
+        const mcr = new CoverageReport(coverageOptions);
+        await mcr.add(coverageList);
+      }
+    },
+    {
+      scope: 'test',
+      auto: true,
+    },
+  ],
+});
+
+export const it = test;
+export const { describe } = test;