#1404 renable playwright VR tests

.github/actions/setup-vuu-ui/action.yml

@@ -2,18 +2,20 @@ name: Setup Vuu UI
 description: "Installs NodeJS and project dependencies"
 
 runs:
-  using: 'composite'
+  using: "composite"
   steps:
+    - name: Checkout
+      uses: actions/checkout@v4
     - name: Install NodeJS
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: "18"
+        node-version: 18
     - name: Cache dependencies
-      uses: actions/cache@v2
+      uses: actions/cache@v4
       with:
         path: ~/.npm
         key: npm-${{ hashFiles('package-lock.json') }}
         restore-keys: npm-
     - name: Install dependencies
       shell: bash
-      run: cd ./vuu-ui && npm install
+      run: cd ./vuu-ui && npm ci

.github/workflows/test-ui.yml

@@ -7,9 +7,7 @@ jobs:
   lint-and-typecheck:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Install Node & dependencies
+      - name: Setup
         uses: ./.github/actions/setup-vuu-ui
       - run: cd ./vuu-ui && npm run build:worker
       - run: cd ./vuu-ui && npm run lint
@@ -18,41 +16,29 @@ jobs:
   vitest:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Install Node & dependencies
+      - name: Setup
         uses: ./.github/actions/setup-vuu-ui
       - run: cd ./vuu-ui && npm run test:vite
 
-  # playwright:
-  #   timeout-minutes: 10
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - name: Checkout
-  #       uses: actions/checkout@v3
-  #     - name: Install Node & dependencies
-  #       uses: ./.github/actions/setup-vuu-ui
-  #     - name: Install Playwright Chromium Browser
-  #       run: cd ./vuu-ui && npx playwright install --with-deps chromium
-  #     - name: Build Showcase
-  #       run: cd ./vuu-ui && npm run showcase:build
-  #     - name: Run tests
-  #       run: |
-  #         cd ./vuu-ui &&
-  #         npm run test:playwright
-  #     - uses: actions/upload-artifact@v4
-  #       if: ${{ !cancelled() }}
-  #       with:
-  #         name: playwright-report
-  #         path: ./vuu-ui/playwright/reports/
-  #         retention-days: 10
+  playwright:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+      - name: Setup
+        uses: ./.github/actions/setup-vuu-ui
+      - name: Build Showcase
+        run: cd ./vuu-ui && npm run showcase:build
+      - name: Launch Showcase
+        run: cd ./vuu-ui && npm run showcase:preview&
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: cd ./vuu-ui && npm run test:playwright
 
   cypress-component:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Install Node & dependencies
+      - name: Setup
         uses: ./.github/actions/setup-vuu-ui
       - name: Build Worker
         run: cd ./vuu-ui && npm run build:worker
@@ -75,9 +61,7 @@ jobs:
   vuu-app-build:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Install Node & dependencies
+      - name: Setup
         uses: ./.github/actions/setup-vuu-ui
       - name: Build Vuu Libraries
         run: cd ./vuu-ui && npm run build

vuu-ui/package.json

@@ -41,6 +41,7 @@
     "showcase:build": "npm run build:worker && cd showcase && node scripts/build.mjs",
     "test:cypress": "npm run build:worker && cypress run --component --browser chrome --headless",
     "test:cypress:local": "cypress open --component --browser chrome",
+    "test:playwright": "cd playwright && playwright test",
     "test:vite": "npm run build:worker && vitest run",
     "bump": "node ./scripts/version.mjs",
     "pub": "node ./scripts/publish.mjs",

vuu-ui/packages/vuu-theme/css/components/button.css

@@ -6,26 +6,6 @@
   .saltButton {
     gap: var(--salt-spacing-200);
     white-space: nowrap;
-
-    .vuuIcon {
-      --vuu-icon-color: var(--vuuButtonIcon-color, var(--button-text-color));
-    }
-  }
-
-  .saltButton:active:not(:disabled) {
-    --vuu-icon-color: var(--button-text-color-active);
-  }
-
-  .saltButton:hover:not(.saltButton-disabled, .saltButton-active, :active) {
-    --vuu-icon-color: var(--button-text-color-hover);
-  }
-
-  .saltButton-active {
-    --vuu-icon-color: var(--button-text-color-active);
-  }
-
-  .saltButton-disabled {
-    --vuu-icon-color: var(--button-text-color-disabled);
   }
 
   .saltButton-primary {

vuu-ui/packages/vuu-ui-controls/src/icon-button/Icon.css

@@ -1,3 +1,14 @@
 .vuuIcon {
-    --vuu-icon-left: 0;
-}
+  --vuu-icon-left: 0;
+}
+
+.saltButton .vuuIcon {
+  --vuu-icon-color: var(--button-text-color);
+}
+.saltButton-active .vuuIcon {
+  --vuu-icon-color: var(--button-text-color-active);
+}
+
+.saltButton-disabled {
+  --vuu-icon-color: var(--button-text-color-disabled);
+}

vuu-ui/playwright/tests/button.test.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("test", async ({ page }) => {
-  const themes: string[] = ["salt", "vuu"];
+  const themes: string[] = ["salt-theme", "vuu-theme"];
   const themeModes: string[] = ["light", "dark"];
   const densities: string[] = ["high", "medium", "low", "touch"];
 

vuu-ui/showcase/src/themes/salt-theme.ts

@@ -12,3 +12,5 @@ import "@fontsource/open-sans/700.css";
 import "@fontsource/open-sans/700-italic.css";
 import "@fontsource/open-sans/800.css";
 import "@fontsource/open-sans/800-italic.css";
+
+import "@finos/vuu-icons/index.css";

vuu-ui/tools/vuu-showcase/src/themes/salt-theme.ts

@@ -12,3 +12,5 @@ import "@fontsource/open-sans/700.css";
 import "@fontsource/open-sans/700-italic.css";
 import "@fontsource/open-sans/800.css";
 import "@fontsource/open-sans/800-italic.css";
+
+import "@finos/vuu-icons/index.css";