feat: playwright

.github/workflows/playwright.yml

@@ -0,0 +1,32 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+jobs:
+  test:
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm install -g yarn && yarn
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Build app
+        run: yarn build
+        env:
+          NEXT_PUBLIC_BASE_PATH: ""
+          NODE_ENV: production
+      - name: Run Playwright tests
+        run: yarn playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -56,4 +56,8 @@ robots.txt
 !.yarn/versions
 
 # storybook
-/.out
+/.out
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.node-version

@@ -1 +1 @@
-20
+18

.talismanrc

@@ -20,7 +20,7 @@ fileignoreconfig:
 - filename: .yarn/**
   checksum: any
 - filename: Dockerfile
-  checksum: 9605a14ae835a4263de3badf041bfbde2823f2d9f2342e09c369ec9c7ae8615f
+  checksum: 31aa8689fb079f89949f8c4e5a917b040176f8a5b8492ba0a5252ad5e1bba049
 - filename: README.md
   checksum: 7c55475ff28dbfa46c9c5715918add6a0202eafddca3cf9d35ebcdd443d76ffd
 - filename: pages/mui.tsx

Dockerfile

@@ -1,8 +1,8 @@
-ARG NODE_VERSION=20-alpine3.18@sha256:5ff63217ec2757b29a4414e0f787bfc13c1f9cb6f053e46ff05c1a51bbd2e8e6
+ARG NODE_VERSION=20-alpine3.19@sha256:ef3f47741e161900ddd07addcaca7e76534a9205e4cd73b2ed091ba339004a75
 
 # Install dependencies only when needed
 FROM node:$NODE_VERSION AS builder
-RUN apk add --no-cache libc6-compat=1.2.4-r2
+RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
 COPY yarn.lock package.json ./

README.md

@@ -20,6 +20,21 @@ yarn # to install dependencies
 yarn dev # to run in dev mode
 ```
 
+Point your browser to [http://127.0.0.1:3000/template](http://127.0.0.1:3000/template) and start playing.
+
+### Tests
+
+```
+# run JEST unit tests
+yarn test
+
+# build, serve and launch playwright interactive end-to-end tests
+yarn e2e --ui
+
+# run storybook
+yarn storybook
+```
+
 ### Gestion des environnements
 
 Les variables issues des docker build-args, sont à utiliser dans `next.config.js`, pour les autres, il faut les définir dans les différents [`.env.*`](https://nextjs.org/docs/basic-features/environment-variables#environment-variable-load-order).
@@ -41,3 +56,7 @@ Le fichier `.env.development` est utilisé pour l'environnement de développemen
 | [codegouvfr/docsify-dsfr-template](https://github.com/codegouvfr/docsify-dsfr-template) | Template DSFR pour [docsify](https://docsify.js.org/#/)     |
 | [sneko/dsfr-connect](https://github.com/sneko/dsfr-connect)                             | Themes DSFR pour bootstrap, vuetify, mui, infima, emails... |
 | [socialgouv/template](https://github.com/socialgouv/template)                           | Version initiale de ce template                             |
+
+```
+
+```

package.json

@@ -18,13 +18,9 @@
     "lint-staged": "lint-staged",
     "export": "next export",
     "build:export": "npm run build && npm run export",
-    "e2e": "cypress open",
-    "e2e:headless": "cypress run",
+    "e2e": "NEXT_PUBLIC_BASE_PATH='' NODE_ENV=production yarn build && yarn playwright test",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:e2e": "start-server-and-test dev http://localhost:3000 e2e",
-    "test:e2e:headless": "start-server-and-test dev http://localhost:3000 e2e:headless",
-    "storybook:start": "storybook dev --docs -p 6006",
     "storybook:build": "yarn build-storybook -c .storybook -o .out",
     "type-check": "tsc --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
@@ -36,7 +32,7 @@
     "@codegouvfr/react-dsfr": "^1.9.5",
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/styled": "^11.11.5",
     "@gouvfr/dsfr-chart": "^1.0.0",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
@@ -47,6 +43,7 @@
     "@next/mdx": "^14.1.4",
     "@sentry/nextjs": "^7.109.0",
     "@socialgouv/matomo-next": "^1.8.1",
+    "dayjs": "^1.11.10",
     "is-ci": "^3.0.1",
     "next": "14.1.4",
     "react": "18.2.0",
@@ -56,6 +53,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.3",
+    "@playwright/test": "^1.42.1",
     "@storybook/addon-actions": "^7.6.17",
     "@storybook/addon-docs": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
@@ -71,10 +69,9 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^12.1.2",
     "@types/mdx": "^2.0.12",
-    "@types/node": "20.11.30",
+    "@types/node": "^18",
     "@types/react": "18.2.73",
     "@types/react-dom": "18.2.23",
-    "cypress": "^9.4.1",
     "eslint": "8.57.0",
     "eslint-config-next": "14.1.4",
     "eslint-plugin-jsx-a11y": "^6.8.0",
@@ -87,7 +84,6 @@
     "start-server-and-test": "^2.0.3",
     "storybook": "^7.6.17",
     "storybook-dark-mode": "^3.0.3",
-    "typescript": "4.9.5"
-  },
-  "packageManager": "[email protected]"
+    "typescript": "5.4.3"
+  }
 }