ci: run contract tests through separate cypress command and add into CI

.github/workflows/test-api-contract.yaml

@@ -15,6 +15,9 @@ jobs:
       - uses: actions/setup-python@v4
         with:
           python-version: "3.10"
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
 
       - run: cd oasst-shared && pip install -e .
 
@@ -22,9 +25,14 @@ jobs:
 
       - run: cd backend && pip install -r requirements.txt
 
+      - run: cd frontend && npm install
+
       - run: ./scripts/backend-development/start-mock-server.sh
 
-      - name: Run contract tests
+      - name: Run Python OasstApiClient contract tests
         run: ./scripts/oasst-shared-development/test.sh
 
+      - name: Run JavaScript OasstApiClient contract tests
+        run: ./scripts/frontend-development/run-contract-test.sh
+
       - run: ./scripts/backend-development/stop-mock-server.sh

scripts/frontend-development/run-contract-test.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+parent_path=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+
+# switch to website directory
+pushd "$parent_path/../../website"
+
+set -xe
+
+npm run cypress:run:contract
+
+popd

website/cypress.config.contract.js

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    // No baseUrl here, because we don't need it for contract testing
+    baseUrl: null,
+    specPattern: "cypress/contract/*.cy.{ts,js}",
+  },
+});

website/cypress/contract/oasst_api_contract_tests.cy.ts

@@ -1,6 +1,7 @@
 import OasstApiClient from "src/lib/oasst_api_client";
 
 describe("Contract test for Oasst API", function () {
+  // Assumes this is running the mock server.
   const oasstApiClient = new OasstApiClient("http://localhost:8080", "test");
 
   it("can fetch a task", async () => {

website/package.json

@@ -12,6 +12,7 @@
     "build-storybook": "build-storybook",
     "cypress": "cypress open",
     "cypress:run": "cypress run",
+    "cypress:run:contract": "cypress run --config-file ./cypress.config.contract.js",
     "cypress:image-baseline": "cypress-image-diff -u",
     "fix:lint": "eslint --fix src/ --ext .js,.jsx,.ts,.tsx",
     "fix:format": "prettier --write ./src",