From d825735d767b36a69abc3a0620de2818d46adb0f Mon Sep 17 00:00:00 2001
From: Mumtahin Farabi <mfarabi619@gmail.com>
Date: Mon, 2 Dec 2024 19:06:51 -0500
Subject: [PATCH] test(website-e2e): add playwright lighthouse audit

test(website-e2e): add basic lighthouse audit
---
 apps/website-e2e/playwright.config.ts | 20 +++++----
 apps/website-e2e/src/example.spec.ts  |  8 ----
 apps/website-e2e/src/website.spec.ts  | 60 +++++++++++++++++++++++++++
 3 files changed, 71 insertions(+), 17 deletions(-)
 delete mode 100644 apps/website-e2e/src/example.spec.ts
 create mode 100644 apps/website-e2e/src/website.spec.ts

diff --git a/apps/website-e2e/playwright.config.ts b/apps/website-e2e/playwright.config.ts
index 2bcd640a..fb56377e 100644
--- a/apps/website-e2e/playwright.config.ts
+++ b/apps/website-e2e/playwright.config.ts
@@ -21,6 +21,7 @@ const baseURL = process.env.BASE_URL || 'http://localhost:3000'
  */
 export default defineConfig({
   ...nxE2EPreset(__filename, { testDir: './src' }),
+  fullyParallel: true,
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     baseURL,
@@ -29,26 +30,27 @@ export default defineConfig({
   },
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'pnpm nx dev website --verbose',
+    command: 'pnpm nx start website --verbose',
     url: 'http://localhost:3000',
     reuseExistingServer: !process.env.CI,
     cwd: workspaceRoot,
   },
+  reporter: [['html']],
   projects: [
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
 
     // Uncomment for mobile browsers support
     /* {
diff --git a/apps/website-e2e/src/example.spec.ts b/apps/website-e2e/src/example.spec.ts
deleted file mode 100644
index b4cb6cc3..00000000
--- a/apps/website-e2e/src/example.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { expect, test } from '@playwright/test'
-
-test('has title', async ({ page }) => {
-  await page.goto('/')
-
-  // Expect h1 to contain a substring.
-  expect(await page.locator('h1').textContent()).toContain('Welcome')
-})
diff --git a/apps/website-e2e/src/website.spec.ts b/apps/website-e2e/src/website.spec.ts
new file mode 100644
index 00000000..10bdccc5
--- /dev/null
+++ b/apps/website-e2e/src/website.spec.ts
@@ -0,0 +1,60 @@
+// import type { Browser } from 'playwright'
+// import { chromium, expect, test } from '@playwright/test'
+// import getPort from 'get-port'
+// import { playAudit } from 'playwright-lighthouse'
+
+// const lighthouseTest = test.extend<{ Page }, { port: number, browser: Browser }>({
+//   port: [
+//     async (use) => {
+//       // Assign a unique port for each playwright worker to support parallel tests
+//       const port = await getPort()
+//       await use(port)
+//     },
+//     { scope: 'worker' },
+//   ],
+
+//   browser: [
+//     async ({ port }, use) => {
+//       const browser = await chromium.launch({
+//         args: [`--remote-debugging-port=${port}`],
+//       })
+//       await use(browser)
+//     },
+//     { scope: 'worker' },
+//   ],
+// })
+
+// const thresholdsConfig = {
+//   'performance': 90,
+//   'accessibility': 90,
+//   'best-practices': 90,
+//   'seo': 90,
+//   // 'pwa': 50,
+// }
+
+// TODO: re-activate after website refactor (three.js/spline)
+// lighthouseTest('should pass lighthouse audits', async ({ page, port }) => {
+//   await page.goto('/')
+
+//   await playAudit({
+//     page,
+//     port,
+//     thresholds: thresholdsConfig,
+//     reports: {
+//       formats: {
+//         // json: true, // defaults to false
+//         html: true, // defaults to false
+//         // csv: true, // defaults to false
+//       },
+//       name: `latest-report`, // defaults to `lighthouse-${new Date().getTime()}`
+//       directory: `${process.cwd()}../../../lighthouse-report`, // defaults to `${process.cwd()}/lighthouse`
+//     },
+//   })
+// })
+
+// test('has title', async ({ page }) => {
+//   await page.goto('/')
+
+//   // Expect h1 to contain a substring.
+//   expect(await page.locator('h1').textContent()).toContain('Sponsorship')
+// })