test: ✅ add landing snapshot (#7)

* test: ✅ add landing snapshot

* test: ✅ update snapshots

---------

Co-authored-by: Marmicode Bot <[email protected]>

Author: yjaaidi

.github/workflows/test.yml

@@ -27,16 +27,18 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 21
+          node-version: 22
       - uses: oven-sh/setup-bun@v1
         with:
           bun-version: latest
+      - name: Install Playwright Browsers
+        run: bunx playwright install chromium --with-deps
       - run: bun install --frozen-lockfile --ignore-scripts
       - uses: nrwl/nx-set-shas@v4
 
       - run: bunx nx-cloud start-ci-run --distribute-on="3 linux-large-js-bun"
       - run: bunx nx-cloud record -- nx format:check
-      - run: bunx nx affected -t build lint test
+      - run: bunx nx affected -t build lint test e2e
       - name: 🔐 Set up service account
         if: github.ref == 'refs/heads/main'
         env:
@@ -47,3 +49,10 @@ jobs:
       - name: 🚀 Deploy
         if: github.ref == 'refs/heads/main'
         run: bunx nx affected -t deploy --no-agents
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: dist/.playwright/apps/cookbook/playwright-report/
+          retention-days: 30

.github/workflows/update-snapshots.yml

@@ -21,15 +21,16 @@ jobs:
         with:
           bun-version: latest
       - name: Install Playwright Browsers
-        run: bunx playwright install chrome --with-deps
+        run: bunx playwright install chromium --with-deps
       - run: bun install --frozen-lockfile --ignore-scripts
       - uses: nrwl/nx-set-shas@v4
 
-      - run: bunx nx affected e2e -u
+      - run: bunx nx affected --target e2e --update-snapshots
 
       - run: |
           git config --global user.email "[email protected]"
           git config --global user.name "Marmicode Bot"
+          git add apps/*/e2e/**/*.png
           git diff --cached --quiet || git commit -a -m "test: ✅ update snapshots"
           git push
 

.nx/workflows/bun.yaml

@@ -1,20 +1,20 @@
 launch-templates:
   linux-large-js-bun:
     resource-class: 'docker_linux_amd64/large'
-    image: 'ubuntu22.04-node20.11-v7'
+    image: 'ubuntu22.04-node20.11-v10'
     init-steps:
       - name: Add bun bin to PATH
         script: echo "PATH=$HOME/.bun/bin:$PATH" >> $NX_CLOUD_ENV
       - name: Checkout
-        uses: 'nrwl/nx-cloud-workflows/v3.6/workflow-steps/checkout/main.yaml'
+        uses: 'nrwl/nx-cloud-workflows/v4/workflow-steps/checkout/main.yaml'
       - name: Restore Node Modules Cache
-        uses: 'nrwl/nx-cloud-workflows/v3.6/workflow-steps/cache/main.yaml'
+        uses: 'nrwl/nx-cloud-workflows/v4/workflow-steps/cache/main.yaml'
         env:
           KEY: 'bun.lockb'
           PATHS: 'node_modules'
           BASE_BRANCH: 'main'
       - name: Restore Browser Binary Cache
-        uses: 'nrwl/nx-cloud-workflows/v3.6/workflow-steps/cache/main.yaml'
+        uses: 'nrwl/nx-cloud-workflows/v4/workflow-steps/cache/main.yaml'
         env:
           KEY: 'bun.lockb|"browsers"'
           PATHS: |
@@ -28,4 +28,4 @@ launch-templates:
       - name: Install Node Modules (with Bun)
         script: bun install --frozen-lockfile --ignore-scripts
       - name: Install Browsers (if needed)
-        uses: 'nrwl/nx-cloud-workflows/v3.6/workflow-steps/install-browsers/main.yaml'
+        uses: 'nrwl/nx-cloud-workflows/v4/workflow-steps/install-browsers/main.yaml'

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["ms-playwright.playwright"]
+}

apps/cookbook/e2e/landing.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('landing layout', async ({ page }) => {
+  await page.goto('/');
+
+  await expect(page).toHaveScreenshot({
+    fullPage: true,
+  });
+});

apps/cookbook/e2e/landing.spec.ts-snapshots/landing-layout-1-chromium-darwin.png

@@ -1,12 +1,22 @@
-const nx = require('@nx/eslint-plugin');
 const baseConfig = require('../../eslint.config.js');
+const nx = require('@nx/eslint-plugin');
+const playwright = require('eslint-plugin-playwright');
+
+console.log();
 
 module.exports = [
   ...baseConfig,
   ...nx.configs['flat/react'],
+  {
+    ignores: ['.docusaurus'],
+  },
   {
     files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
     // Override or add rules here
     rules: {},
   },
+  {
+    ...playwright.configs['flat/recommended'],
+    files: ['e2e/**/*.ts'],
+  },
 ];

apps/cookbook/e2e/landing.spec.ts-snapshots/landing-layout-1-chromium-linux.png

@@ -0,0 +1,31 @@
+import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+import { workspaceRoot } from '@nx/devkit';
+
+const baseURL = process.env['BASE_URL'] || 'http://localhost:3000';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './e2e' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'nx start cookbook',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

apps/cookbook/eslint.config.js

@@ -25,9 +25,4 @@ module.exports = [
       ],
     },
   },
-  {
-    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
-    // Override or add rules here
-    rules: {},
-  },
 ];

apps/cookbook/playwright.config.ts

@@ -36,6 +36,12 @@
       "options": {
         "targetName": "lint"
       }
+    },
+    {
+      "plugin": "@nx/playwright/plugin",
+      "options": {
+        "targetName": "e2e"
+      }
     }
   ]
 }

bun.lockb

@@ -20,12 +20,15 @@
     "@docusaurus/types": "3.6.3",
     "@eslint/eslintrc": "3.2.0",
     "@eslint/js": "9.16.0",
+    "@nx/devkit": "19.8.9",
     "@nx/eslint": "19.8.9",
     "@nx/eslint-plugin": "19.8.9",
+    "@nx/playwright": "19.8.9",
     "@nx/react": "19.8.9",
     "@nx/vite": "19.8.9",
     "@nx/web": "19.8.9",
     "@nx/workspace": "19.8.9",
+    "@playwright/test": "^1.36.0",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "15.0.6",
     "@typescript-eslint/eslint-plugin": "8.17.0",
@@ -35,6 +38,7 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-playwright": "2.1.0",
     "eslint-plugin-react": "7.37.2",
     "eslint-plugin-react-hooks": "5.1.0",
     "firebase-tools": "13.10.2",