Setup Cypress UI testing (#234)

Signed-off-by: Griffin-Sullivan <[email protected]>

.github/workflows/ui-frontend-build.yml

@@ -23,6 +23,10 @@ jobs:
         working-directory: clients/ui/frontend
         run: npm install
 
+      - name: Run tests
+        working-directory: clients/ui/frontend
+        run: npm run test:cypress-ci
+
       - name: Clean
         working-directory: clients/ui/frontend
         run: npm run build:clean

clients/ui/frontend/.env.cypress.mock

@@ -0,0 +1,2 @@
+# Test against prod build hosted by lightweight http server
+BASE_URL=http://localhost:9001

clients/ui/frontend/CONTRIBUTING.md

@@ -30,7 +30,7 @@ Once you have both services ready, you can open the dashboard locally at: `http:
 
 ## Debugging and Testing
 
-[TBD]
+See [frontend testing guidelines](docs/testing.md) for more information.
 
 ## Environment variables
 

clients/ui/frontend/docs/dev-setup.md

@@ -44,10 +44,10 @@ For in-depth local run guidance review the [contribution guidelines](../CONTRIBU
 
 ### Testing
 
-Run the tests.
+Run the mock tests.
 
   ```bash
-  npm run test
+  npm run test:cypress-ci
   ```
 
 For in-depth testing guidance review the [testing guidelines](./testing.md)

clients/ui/frontend/docs/testing.md

@@ -1,3 +1,36 @@
 # Model Registry UI Testing
 
-[TBD]
+## Cypress Tests
+
+Cypress is used to run tests against the frontend while mocking all network requests.
+
+Single command to run all Cypress tests or a specific test (build frontend, start HTTP server, run Cypress):
+
+```bash
+npm run test:cypress-ci
+
+npm run test:cypress-ci -- --spec "**/testfile.cy.ts"
+```
+
+Cypress tests require a frontend server to be running.
+
+To best match production, build the frontend and use a lightweight HTTP server to host the files. This method will require manual rebuilds when changes are made to the dashboard frontend code.
+
+```bash
+npm run cypress:server:build
+npm run cypress:server
+```
+
+To run all Cypress tests or a specific test headless
+
+```bash
+npm run cypress:run:mock
+
+npm run cypress:run:mock -- --spec "**/testfile.cy.ts"
+```
+
+To open the Cypress GUI run
+
+```bash
+npm run cypress:open:mock
+```