VUU-52: Add E2E tests to CI

.github/workflows/test-ui.yml

@@ -23,6 +23,42 @@ jobs:
         run: cd ./vuu-ui && npm install
       - run: cd ./vuu-ui && npm run test:vite
 
+  cypress-e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: npm-
+      - name: Install dependencies
+        run: cd ./vuu-ui && npm install
+      - name: Run end-to-end tests in Chrome
+        uses: cypress-io/github-action@v3
+        with:
+          install: false
+          working-directory: ./vuu-ui
+          browser: chrome
+          build: npm run build
+          start: npm run showcase
+          wait-on: "http://localhost:5173"
+      - name: Run end-to-end tests in Edge
+        uses: cypress-io/github-action@v3
+        with:
+          install: false
+          working-directory: ./vuu-ui
+          browser: edge
+          build: npm run build
+          start: npm run showcase
+          wait-on: "http://localhost:5173"
+
   # ensure the vuu example and showcase still build
   vuu-and-showcase-build:
     runs-on: ubuntu-latest

vuu-ui/cypress.config.ts

@@ -69,6 +69,7 @@ export default defineConfig({
       viteConfig,
     },
     specPattern: "packages/**/src/**/*.cy.{js,ts,jsx,tsx}",
+    indexHtmlFile: "cypress/support/component/component-index.html",
   },
 
   e2e: {

vuu-ui/cypress/e2e/layout-management/screenshot.cy.js

@@ -17,7 +17,7 @@ context("Screenshot", () => {
     cy.findByRole("menuitem", { name: "Save Layout" }).click();
 
     // TODO (#VUU24): Don't find by classname, use an accessible selector
-    cy.get(".vuuSaveLayoutPanel").then((dialog) => {
+    cy.get(".saveLayoutPanel-panelContainer").then((dialog) => {
       cy.wrap(dialog)
         .find("img")
         .should("be.visible")

vuu-ui/cypress/support/e2e/constants.ts

@@ -1,2 +1,2 @@
 export const SHELL_WITH_NEW_THEME_URL =
-  "/Apps/ShellWithNewTheme?standalone&theme=vuu";
+  "/Apps/ShellWithNewThemeAndLayoutManagement?standalone&theme=vuu";