88 test navbar (#245)

* test(frontend): 🧪 Write test for navbar

Check if all elements are visible in navbar and clickable. Co-authored-by: Jakob <jakob.gregusson@gmail.com>

* fix(frontend): 🐛 Fix selectors so playwright clicks the correct buttons

* fix(frontend): 🐛 fix cicd localhost error

* fix(frontend): 🐛 fix prettier

* fix(frontend): 🐛 try using cloudflare to run ci cd for playwright tests

* test(frontend): ✅ Add webserver for playwright

* test(frontend): ✅ Run tests on the server and fix tests to current product

* fix(ci/cd): 🐛 Update version for ci/cd for playwright

* fix(frontend): 🐛 Remove running tests from build

* test(frontend): ✅ Add config for mobile tests

* test(frontend): 🧪 Write test for navbar that checks if the buttons exist and check if they are clickable and navigates to different pages on mobile

* refactor(frontend): ♻️ Run prettier

* test(frontend): ✅ Fix navbarclicktest by clicking the logo first

---------

Co-authored-by: Lucas Tran <lucastran1107@gmail.com>
Co-authored-by: Jakob Grøtan Gregusson <jakobgg@stud.ntnu.no>
Co-authored-by: Lucas Tran <lucastra@stud.ntnu.no>

.github/workflows/node.js.yml

@@ -5,88 +5,87 @@
 name: Node.js CI
 
 on:
-    push:
-        branches: ["main"]
-    pull_request:
-        branches: ["main"]
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
 
 defaults:
-    run:
-        working-directory: ./frontend
+  run:
+    working-directory: ./frontend
 
 jobs:
-    build:
-        runs-on: ubuntu-latest
+  build:
+    runs-on: ubuntu-latest
 
-        strategy:
-            matrix:
-                node-version: [18.x, 20.x]
-                # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
-        steps:
-            - uses: actions/checkout@v3
-            - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v3
-              with:
-                  node-version: ${{ matrix.node-version }}
-                  cache: "npm"
-            - run: npm ci # Clean install packages
-            - run: npm run build # Build the frontend
-            - run: npm test --if-present # Run tests
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm ci # Clean install packages
+      - run: npm run build # Build the frontend
 
-    lint:
-        runs-on: ubuntu-latest
+  lint:
+    runs-on: ubuntu-latest
 
-        strategy:
-            matrix:
-                node-version: [20.x]
-                # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    strategy:
+      matrix:
+        node-version: [20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
-        steps:
-            - uses: actions/checkout@v3
-            - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v3
-              with:
-                  node-version: ${{ matrix.node-version }}
-                  cache: "npm"
-            - run: npm ci # Clean install packages
-            - run: npm run lint # Run linter
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm ci # Clean install packages
+      - run: npm run lint # Run linter
 
-    prettier:
-        runs-on: ubuntu-latest
+  prettier:
+    runs-on: ubuntu-latest
 
-        strategy:
-            matrix:
-                node-version: [20.x]
-                # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    strategy:
+      matrix:
+        node-version: [20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
-        steps:
-            - uses: actions/checkout@v3
-            - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v3
-              with:
-                  node-version: ${{ matrix.node-version }}
-                  cache: "npm"
-            - run: npm ci # Clean install packages
-            - run: npx prettier . --check # Run prettier
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm ci # Clean install packages
+      - run: npx prettier . --check # Run prettier
 
-    test:
-        timeout-minutes: 60
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
-              with:
-                  node-version: 18
-            - name: Install dependencies
-              run: npm ci
-            - name: Install Playwright Browsers
-              run: npx playwright install --with-deps
-            - name: Run Playwright tests
-              run: npx playwright test
-            - uses: actions/upload-artifact@v3
-              if: always()
-              with:
-                  name: playwright-report
-                  path: playwright-report/
-                  retention-days: 30
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

frontend/package.json

@@ -10,7 +10,10 @@
         "prettierWrite": "npx prettier . --write",
         "prettierCheck": "npx prettier . --check",
         "compileTypes": "graphql-codegen",
-        "watchTypes": " graphql-codegen -w"
+        "watchTypes": " graphql-codegen -w",
+        "test": "npx playwright test",
+        "testui": "npx playwright test --ui",
+        "codegen": "npx playwright codegen"
     },
     "dependencies": {
         "@apollo/client": "^3.9.0-alpha.5",

frontend/playwright.config.ts

@@ -9,6 +9,8 @@ import { defineConfig, devices } from "@playwright/test";
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
+const baseURL = `http://web.hypso.ies.ntnu.no:3000/`;
+
 export default defineConfig({
     testDir: "./tests",
     /* Run tests in files in parallel */
@@ -24,19 +26,14 @@ export default defineConfig({
     /* 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: 'http://127.0.0.1:3000',
+        baseURL,
 
         /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
         trace: "on-first-retry",
     },
 
     /* Configure projects for major browsers */
     projects: [
-        {
-            name: "chromium",
-            use: { ...devices["Desktop Chrome"] },
-        },
-
         {
             name: "firefox",
             use: { ...devices["Desktop Firefox"] },
@@ -62,16 +59,9 @@ export default defineConfig({
         //   name: 'Microsoft Edge',
         //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
         // },
-        // {
-        //   name: 'Google Chrome',
-        //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-        // },
+        {
+            name: "Google Chrome",
+            use: { ...devices["Desktop Chrome"], channel: "chrome" },
+        },
     ],
-
-    /* Run your local dev server before starting the tests */
-    // webServer: {
-    //   command: 'npm run start',
-    //   url: 'http://127.0.0.1:3000',
-    //   reuseExistingServer: !process.env.CI,
-    // },
 });