test: cleanup e2e tests and add a github action

HangarMC · Feb 17, 2024 · 6a44643 · 6a44643
1 parent baddb0f
commit 6a44643
Show file tree

Hide file tree

Showing 13 changed files with 146 additions and 97 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -0,0 +1,59 @@
+name: e2e
+
+on:
+  # allow manual dispatch
+  workflow_dispatch:
+  # run on pushes to staging
+  push:
+    branches:
+      - staging
+      - autoimport
+
+jobs:
+  e2e:
+    name: 'Hangar E2E Tests'
+    runs-on: ubuntu-latest
+    steps:
+      - name: BrowserStack Env Setup
+        uses: browserstack/github-actions/setup-env@master
+        with:
+          username:  ${{ secrets.BROWSERSTACK_USERNAME }}
+          access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Cache Pnpm
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install e2e deps
+        env:
+          CI: true
+        run: (cd e2e && pnpm install --frozen-lockfile)
+
+      - name: Run e2e tests
+        env:
+          BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
+          BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+        run: (cd e2e && pnpm run browserstack-multiple)
diff --git a/e2e/codecept.conf.ts b/e2e/codecept.conf.ts
@@ -10,9 +10,26 @@ const DEV = process.env.BROWSERSTACK_DEV === "true";
 const LOCAL = process.env.BROWSERSTACK_LOCAL === "true";
 const BUILD_NAME = process.env.BROWSERSTACK_BUILD_NAME || "browserstack-build-1" + (LOCAL ? "-local" : "");
 
+console.table({
+    DEBUG,
+    DEV,
+    LOCAL,
+    BUILD_NAME,
+});
+
+const defaultCapabilities = {
+    browserVersion: "latest",
+    projectName: "Hangar E2E",
+    buildName: BUILD_NAME,
+    "browserstack.debug": DEBUG ? "true" : undefined,
+    "browserstack.networkLogs": DEBUG ? "true" : undefined,
+    "browserstack.consoleLogs": DEBUG ? "info" : undefined,
+    "browserstack.local": LOCAL ? "true" : "false",
+};
+
 exports.config = {
     name: "Hangar E2E",
-    tests: "./tests/*_test.ts",
+    tests: "./tests/*.ts",
     output: "./output",
     timeout: 120,
 
@@ -23,13 +40,9 @@ exports.config = {
             key: DEV ? undefined : BROWSERSTACK_ACCESS_KEY,
             browser: "Edge",
             capabilities: {
+                ...defaultCapabilities,
                 os: "Windows",
                 osVersion: "11",
-                browserVersion: "latest",
-                projectName: "Hangar E2E",
-                buildName: BUILD_NAME,
-                "browserstack.debug": DEBUG ? "true" : undefined,
-                "browserstack.networkLogs": DEBUG ? "true" : undefined,
             },
         },
     },
@@ -40,25 +53,17 @@ exports.config = {
                 {
                     browser: "Safari",
                     capabilities: {
+                        ...defaultCapabilities,
                         os: "OS X",
                         osVersion: "Sonoma",
-                        browserVersion: "latest",
-                        projectName: "Hangar E2E",
-                        buildName: BUILD_NAME,
-                        "browserstack.debug": DEBUG ? "true" : undefined,
-                        "browserstack.networkLogs": DEBUG ? "true" : undefined,
                     },
                 },
                 {
                     browser: "Edge",
                     capabilities: {
+                        ...defaultCapabilities,
                         os: "Windows",
                         osVersion: "11",
-                        browserVersion: "latest",
-                        projectName: "Hangar E2E",
-                        buildName: BUILD_NAME,
-                        "browserstack.debug": DEBUG ? "true" : undefined,
-                        "browserstack.networkLogs": DEBUG ? "true" : undefined,
                     },
                 },
             ],
@@ -83,16 +88,16 @@ exports.config = {
 
     teardown:
         LOCAL && !DEV
-            ? function () {
+            ? async function () {
                   exports.bs_local.stop(() => {
                       console.log("Disconnected Local");
                   });
               }
             : undefined,
 
     include: {
-        I: "./utils/steps.ts",
-        IndexPage: "./pages/IndexPage.ts",
+        util: "./utils/util.ts",
+        IndexPage: "./utils/IndexPage.ts",
     },
 
     plugins: {
@@ -107,4 +112,4 @@ exports.config = {
             enabled: true,
         },
     },
-};
+} as CodeceptJS.MainConfig;
diff --git a/e2e/package.json b/e2e/package.json
@@ -1,20 +1,17 @@
 {
   "name": "hangar-e2e",
   "version": "1.0.0",
-  "description": "",
   "scripts": {
     "staging": "BROWSERSTACK_DEV=true npx codeceptjs run -c codecept.conf.ts --steps -p pauseOnFail",
     "local": "BROWSERSTACK_DEV=true BROWSERSTACK_LOCAL=true npx codeceptjs run -c codecept.conf.ts --steps -p pauseOnFail",
     "browserstack-single": "npx codeceptjs run -c codecept.conf.ts --steps",
     "browserstack-multiple": "npx codeceptjs run-multiple bstack -c codecept.conf.ts --steps",
     "browserstack-local": "BROWSERSTACK_LOCAL=true npx codeceptjs run -c codecept.conf.ts --steps"
   },
-  "author": "",
-  "license": "ISC",
   "dependencies": {
     "@types/chai": "4.3.11",
     "browserstack-local": "^1.5.2",
-    "chai": "5.1.0",
+    "chai": "4.4.1",
     "codeceptjs": "^3.2.3",
     "dotenv": "^16.0.0",
     "ts-node": "10.9.2",

diff --git a/e2e/pnpm-lock.yaml b/e2e/pnpm-lock.yaml
diff --git a/e2e/steps.d.ts b/e2e/steps.d.ts
@@ -1,11 +1,11 @@
 /// <reference types='codeceptjs' />
-type steps_file = typeof import('./utils/steps');
-type IndexPage = typeof import('./pages/IndexPage');
+type util = typeof import('./utils/util');
+type IndexPage = typeof import('./utils/IndexPage');
 
 declare namespace CodeceptJS {
-  interface SupportObject { I: I, current: any, IndexPage: IndexPage }
+  interface SupportObject { I: I, current: any, util: util, IndexPage: IndexPage }
   interface Methods extends WebDriver {}
-  interface I extends ReturnType<steps_file> {}
+  interface I extends WithTranslation<Methods> {}
   namespace Translation {
     interface Actions {}
   }

diff --git a/e2e/tests/IndexPage.ts b/e2e/tests/IndexPage.ts
@@ -0,0 +1,17 @@
+import { expect } from "chai";
+
+Feature("Index Page");
+
+Scenario("Test Project List", async ({ I, util, IndexPage }) => {
+    util.openHangarPage("/");
+
+    let placeholder = await I.grabAttributeFrom(IndexPage.searchField, "placeholder");
+    expect(placeholder).to.not.contain("0");
+
+    I.fillField(IndexPage.searchField, "Some Value That doesnt Exist");
+    I.waitInUrl("query");
+    placeholder = await I.grabAttributeFrom(IndexPage.searchField, "placeholder");
+    expect(placeholder).to.contain("0");
+
+    await util.browserStackStatus(true, "Test passed");
+});
diff --git a/e2e/tests/mainpage_test.ts b/e2e/tests/mainpage_test.ts
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
@@ -13,6 +13,7 @@
         "strictNullChecks": false,
         "types": [
             "codeceptjs",
+            "chai",
             "node"
         ],
         "declaration": true,

diff --git a/e2e/utils/IndexPage.ts b/e2e/utils/IndexPage.ts
@@ -1,12 +1,3 @@
-const { I } = inject();
-
-class IndexPage {
-    constructor() {
-        //insert your locators
-        // this.button = '#button'
-    }
-    // insert your methods here
-}
-
-module.exports = new IndexPage();
-export = IndexPage;
+module.exports = new (class {
+    searchField = "input[name='query']";
+})();
diff --git a/e2e/utils/steps.ts b/e2e/utils/steps.ts
diff --git a/e2e/utils/util.ts b/e2e/utils/util.ts
@@ -0,0 +1,17 @@
+const { I } = inject();
+
+module.exports = new (class {
+    url = process.env.BROWSERSTACK_LOCAL === "true" ? "http://localhost:3333" : "https://hangar.papermc.dev";
+
+    public openHangarPage(path: string) {
+        I.amOnPage(this.url + path);
+        I.waitForFunction(() => window["hangarLoaded"], 10);
+    }
+
+    public async browserStackStatus(passed: boolean, reason: string) {
+        if (process.env.BROWSERSTACK_DEV === "true") return;
+        await I.executeScript(
+            `browserstack_executor: {"action": "setSessionStatus", "arguments": {"status":"${passed ? "passed" : "failed"}","reason": "${reason}"}}`,
+        );
+    }
+})();
diff --git a/frontend/src/app.vue b/frontend/src/app.vue
@@ -17,6 +17,8 @@ settingsLog("render for user", authStore.user?.name, "with darkmode", settingsSt
 if (process.client) {
   document.documentElement.classList.remove("light", "dark");
   document.documentElement.classList.add(settingsStore.darkMode ? "dark" : "light");
+
+  window.hangarLoaded = true;
 }
 
 useHead({

diff --git a/frontend/src/types/globals.d.ts b/frontend/src/types/globals.d.ts
@@ -0,0 +1,5 @@
+declare global {
+  interface Window {
+    hangarLoaded?: boolean;
+  }
+}