ci(tests): Setup e2e browserstack testing CI (#359)

* ci(tests): Add e2e browserstack testing CI

* fix

* debug

* only run for testnet and staging

* turn on all the tests

* merge jobs

* add checks

* add readme, exclude unit tests

* pnpm-lock

.eslintrc.json

@@ -25,7 +25,7 @@
     "import/no-extraneous-dependencies": [
       "error",
       {
-        "devDependencies": ["./scripts/*.js"]
+        "devDependencies": ["./scripts/*.js", "./__tests__/**/*.ts"]
       }
     ],
     "import/no-named-as-default": "off",

.github/workflows/run-e2e.yml

@@ -0,0 +1,51 @@
+name: E2E Tests
+
+on:
+  deployment_status:
+jobs:
+  run-e2es:
+    runs-on: ubuntu-latest
+    if: >
+      github.event_name == 'deployment_status' &&
+      github.event.deployment_status.state == 'success'
+    steps:
+      - name: Check environment URL
+        id: check_env
+        run: |
+          if [[ "${{ github.event.deployment_status.environment_url }}" == *"v4-testnet"* || "${{ github.event.deployment_status.environment_url }}" == *"v4-staging"* ]]; then
+            echo "::set-output name=should_run_tests::true"
+          else
+            echo "::set-output name=should_run_tests::false"
+            echo "This deployment does not require E2E tests. Exiting..."
+          fi
+
+      - name: Checkout
+        if: steps.check_env.outputs.should_run_tests == 'true'
+        uses: actions/checkout@v3
+
+      - name: Set up pnpm
+        if: steps.check_env.outputs.should_run_tests == 'true'
+        uses: dydxprotocol/setup-pnpm@v1
+
+      - name: Set up Node
+        if: steps.check_env.outputs.should_run_tests == 'true'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: pnpm
+
+      - name: Install dependencies
+        if: steps.check_env.outputs.should_run_tests == 'true'
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          pnpm install --loglevel warn
+
+      - name: Run e2e tests
+        if: steps.check_env.outputs.should_run_tests == 'true'
+        env:
+          BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
+          BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+          E2E_ENVIRONMENT_PASSWORD: ${{ secrets.E2E_ENVIRONMENT_PASSWORD }}
+          E2E_ENVIRONMENT_URL: ${{ github.event.deployment_status.environment_url }}
+        run: pnpm run wdio

README.md

@@ -87,6 +87,22 @@ Set environment variables via `.env`.
 - `STATUS_PAGE_SCRIPT_URI` (optional): Used for enabling the status page; used with `pnpm run build:inject-statuspage`.
 - `SMARTBANNER_APP_NAME`, `SMARTBANNER_ORG_NAME`, `SMARTBANNER_ICON_URL`, `SMARTBANNER_APPSTORE_URL` (optional): Used for enabling the smart app banner; used with `pnpm run build:inject-smartbanner`.
 
+# Testing
+
+## Unit testing
+
+Run unit tests with the following command: `pnpm run test`
+
+## Functional Testing
+
+Functional testing is supported via Browserstack. To run the tests you need to set the following environment variables:
+
+- `BROWSERSTACK_USERNAME`: username of your browserstack account
+- `BROWSERSTACK_ACCESS_KEY`: access key of your browserstack account
+- `E2E_ENVIRONMENT_URL`: the URL you want to run the functional tests against
+
+To run the tests run: `pnpm run wdio`
+
 # Deployments
 
 ## Deploying with Vercel

__tests__/e2e/test.e2e.ts

@@ -0,0 +1,15 @@
+import { expect, browser, $ } from '@wdio/globals';
+
+describe('Smoke test', () => {
+  it('should authenticate with vercel and load website', async () => {
+    await browser.url(process.env.E2E_ENVIRONMENT_URL || '');
+    browser.setWindowSize(1920, 1080);
+
+    await $('input[type=password]').setValue(process.env.E2E_ENVIRONMENT_PASSWORD || '');
+    await $('button.submit').click();
+
+    await expect($('main')).toBeExisting();
+    await expect($('header')).toBeExisting();
+    await expect($('footer')).toBeExisting();
+  });
+});

__tests__/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.json"
+}

package.json

@@ -31,7 +31,8 @@
     "tsc": "tsc",
     "postinstall": "tar -xzC public -f tradingview/tradingview.tgz",
     "prepare": "husky",
-    "commitlint": "commitlint --edit"
+    "commitlint": "commitlint --edit",
+    "wdio": "wdio run ./wdio.conf.ts"
   },
   "packageManager": "[email protected]",
   "dependencies": {
@@ -125,16 +126,26 @@
     "@commitlint/config-conventional": "^19.0.3",
     "@dydxprotocol/v4-proto": "^3.0.0",
     "@ladle/react": "^4.0.2",
+    "@testing-library/webdriverio": "^3.2.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/color": "^3.0.3",
     "@types/crypto-js": "^4.1.1",
     "@types/luxon": "^3.3.0",
+    "@types/mocha": "^10.0.6",
     "@types/node": "^20.3.1",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
     "@vitejs/plugin-react": "^4.0.1",
+    "@wdio/browserstack-service": "^8.32.4",
+    "@wdio/cli": "^8.32.4",
+    "@wdio/globals": "^8.32.4",
+    "@wdio/local-runner": "^8.32.4",
+    "@wdio/mocha-framework": "^8.32.4",
+    "@wdio/spec-reporter": "^8.32.4",
+    "@wdio/sync": "^7.27.0",
+    "@wdio/types": "^8.32.4",
     "ajv": "^8.12.0",
     "assert": "^2.0.0",
     "axios": "^1.6.7",
@@ -159,6 +170,7 @@
     "node-fetch": "^3.3.1",
     "pnpm": "^8.6.6",
     "prettier": "^2.8.8",
+    "ts-node": "^10.9.2",
     "tsx": "^4.7.1",
     "typescript": "^5.1.3",
     "url-polyfill": "^1.1.12",
@@ -167,6 +179,7 @@
     "vite-plugin-svgr": "^3.2.0",
     "vitest": "^0.32.2",
     "w3name": "^1.0.8",
+    "wdio-wait-for": "^3.0.11",
     "web3.storage": "^4.5.4"
   },
   "pnpm": {