Add e2e checks github actions workflow with prettier

.github/workflows/e2e-checks.yml

@@ -0,0 +1,40 @@
+name: E2E Code Quality Checks
+run-name: E2E Code Quality Checks
+
+on:
+  pull_request:
+    branches: [ main ]
+    paths:
+      - 'e2e/**'
+  push:
+    branches: [ main ]
+    paths:
+      - 'e2e/**'
+
+jobs:
+  quality:
+    name: E2E Code Quality
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Cache Node.js dependencies
+        id: cache-node
+        uses: actions/cache@v4
+        with:
+          path: e2e/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
+
+      - name: Install dependencies
+        if: steps.cache-node.outputs.cache-hit != 'true'
+        run: make e2e-install-ci
+
+      - name: Check formatting
+        run: make e2e-format-check-native

Makefile

@@ -31,6 +31,11 @@ __check_defined = \
 	e2e-clean \
 	e2e-clean-image \
 	e2e-clean-report \
+	e2e-format \
+	e2e-format-check \
+	e2e-format-check-native \
+	e2e-format-native \
+	e2e-install-ci-native \
 	e2e-merge-reports \
 	e2e-setup-ci \
 	e2e-setup-native \
@@ -95,6 +100,21 @@ e2e-clean-report: ## Remove the local e2e report folders and content
 	rm -rf ./e2e/blob-report
 	rm -rf ./e2e/test-results
 
+e2e-format: e2e-build ## Format code with autofix inside Docker
+	docker run --rm -v e2e:/e2e $(E2E_IMAGE_NAME) npm run e2e-format
+
+e2e-format-check: ## Format check without autofix inside Docker
+	docker run --rm -v $(PWD)/e2e:/e2e $(E2E_NODE_IMAGE) sh -c "cd /e2e && npm run e2e-format:check"
+
+e2e-format-check-native: ## Format check without autofix natively
+	cd e2e && npm run e2e-format:check
+
+e2e-format-native: ## Format code with autofix natively
+	cd e2e && npm run e2e-format
+
+e2e-install-ci: ## CI install dependencies
+	cd e2e && npm ci
+
 e2e-merge-reports: ## Merge E2E blob reports from multiple shards into an HTML report
 	cd e2e && npm run e2e-merge-reports
 
@@ -119,10 +139,10 @@ e2e-test: e2e-build
 		-e CURRENT_SHARD=$(CURRENT_SHARD) \
 		-e TOTAL_SHARDS=$(TOTAL_SHARDS) \
 		-e CI=$(CI) \
-		-v $(PWD)/e2e/playwright-report:/e2e/playwright-report \
-		-v $(PWD)/e2e/blob-report:/e2e/blob-report \
+		-v e2e/playwright-report:/e2e/playwright-report \
+		-v e2e/blob-report:/e2e/blob-report \
 		$(E2E_IMAGE_NAME) \
-		$(E2E_ARGS)
+		npm run e2e-test -- $(E2E_ARGS)
 	@echo "Run 'make e2e-show-report' to view the test report"
 
 e2e-test-native: ## Run end-to-end tests natively

e2e/.gitignore

@@ -4,3 +4,4 @@ node_modules/
 /blob-report/
 /playwright/.cache/
 *.png*
+.prettier-cache

e2e/.prettierignore

@@ -0,0 +1 @@
+*-lock.json

e2e/.prettierrc

@@ -0,0 +1,25 @@
+{
+  "overrides": [
+    {
+      "files": [
+        "*.js",
+        "*.jsx",
+        "*.ts",
+        "*.tsx",
+        "*.json",
+        "*.md",
+        "*.mdx",
+        "*.scss",
+        "*.yaml",
+        "*.yml"
+      ],
+      "options": {
+        "semi": true,
+        "singleQuote": true,
+        "tabWidth": 2,
+        "trailingComma": "es5",
+        "printWidth": 100
+      }
+    }
+  ]
+}

e2e/Dockerfile

@@ -17,7 +17,4 @@ RUN npm run e2e-setup
 # Copy entire e2e folder over
 COPY e2e /e2e
 
-ENTRYPOINT ["npm", "run", "e2e-test", "--"]
-
-# Optional additional args
-CMD [""]
+CMD ["npm", "run", "e2e-test"]

e2e/package.json

@@ -1,20 +1,23 @@
 {
-    "name": "e2e",
-    "version": "1.0.0",
-    "scripts": {
-      "e2e-merge-reports": "npx playwright merge-reports --reporter html blob-report",
-      "e2e-setup": "npx playwright install --with-deps",
-      "e2e-show-report": "npx playwright show-report",
-      "e2e-test": "./run-e2e-test",
-      "e2e-test:ui": "./run-e2e-test --ui"
-    },
-    "devDependencies": {
-      "@playwright/test": "^1.49.0",
-      "@types/node": "^22.10.1"
-    },
-    "dependencies": {
-      "@axe-core/playwright": "^4.10.1",
-      "dotenv": "^16.4.7",
-      "playwright": "^1.49.0"
-    }
+  "name": "e2e",
+  "version": "1.0.0",
+  "scripts": {
+    "e2e-format": "prettier --cache --cache-location='./.prettier-cache' --write .",
+    "e2e-format:check": "prettier --cache --cache-location='./.prettier-cache' --check .",
+    "e2e-merge-reports": "npx playwright merge-reports --reporter html blob-report",
+    "e2e-setup": "npx playwright install --with-deps",
+    "e2e-show-report": "npx playwright show-report",
+    "e2e-test": "./run-e2e-test",
+    "e2e-test:ui": "./run-e2e-test --ui"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.0",
+    "@types/node": "^22.10.1",
+    "prettier": "^3.5.1"
+  },
+  "dependencies": {
+    "@axe-core/playwright": "^4.10.1",
+    "dotenv": "^16.4.7",
+    "playwright": "^1.49.0"
   }
+}

e2e/playwright.config.js

@@ -1,7 +1,7 @@
 // Load environment variables from .env file if it exists
 import * as dotenv from 'dotenv';
 
-import { defineConfig, devices } from "@playwright/test";
+import { defineConfig, devices } from '@playwright/test';
 
 dotenv.config();
 
@@ -11,7 +11,7 @@ dotenv.config();
 export default defineConfig({
   // Timeout for each test in milliseconds
   timeout: 20000,
-  testDir: "./tests", // Ensure this points to the correct test directory
+  testDir: './tests', // Ensure this points to the correct test directory
   // Run tests in files in parallel
   fullyParallel: true,
   // Fail the build on CI if you accidentally left test.only in the source code.
@@ -22,19 +22,19 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   // Use 'blob' for CI to allow merging of reports. See https://playwright.dev/docs/test-reporters
   reporter: process.env.CI
-  ? [['blob']]  :
-    // Don't open the HTML report since it hangs when running inside a container.
-    // Use make e2e-show-report for opening the HTML report
-    [['html', { open: 'never' }]],
+    ? [['blob']]
+    : // Don't open the HTML report since it hangs when running inside a container.
+      // Use make e2e-show-report for opening the HTML report
+      [['html', { open: 'never' }]],
   // 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: process.env.BASE_URL,
 
     // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
-    trace: "on-first-retry",
-    screenshot: "on",
-    video: "on-first-retry",
+    trace: 'on-first-retry',
+    screenshot: 'on',
+    video: 'on-first-retry',
   },
   // Splits tests into chunks for distributed parallel execution
   shard: {
@@ -48,15 +48,14 @@ export default defineConfig({
   // Supported browsers: https://playwright.dev/docs/browsers#:~:text=Configure%20Browsers%E2%80%8B,Google%20Chrome%20and%20Microsoft%20Edge.
   projects: [
     {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
     },
 
     // Test against mobile viewports.
     {
-      name: "Mobile Chrome",
-      use: { ...devices["Pixel 7"] },
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 7'] },
     },
   ],
-
 });

e2e/util.js

@@ -1,16 +1,16 @@
 // Merge a base and derived config
 export function deepMerge(obj1, obj2) {
-    const result = { ...obj1 };
+  const result = { ...obj1 };
 
-    for (let key in obj2) {
-      if (obj2.hasOwnProperty(key)) {
-        if (obj2[key] instanceof Object && obj1[key] instanceof Object) {
-          result[key] = deepMerge(obj1[key], obj2[key]);
-        } else {
-          result[key] = obj2[key];
-        }
+  for (let key in obj2) {
+    if (obj2.hasOwnProperty(key)) {
+      if (obj2[key] instanceof Object && obj1[key] instanceof Object) {
+        result[key] = deepMerge(obj1[key], obj2[key]);
+      } else {
+        result[key] = obj2[key];
       }
     }
-
-    return result;
   }
+
+  return result;
+}

e2e/{{app_name}}/tests/index.spec.js

@@ -27,5 +27,4 @@ test.describe('Generic Webpage Tests', () => {
   //   const element = page.locator('h1');
   //   await expect(element).toBeVisible();
   // });
-
 });