HPCC-33066: Add basic ECL Watch UI tests

.github/workflows/build-test-eclwatch.yml

@@ -25,7 +25,7 @@ jobs:
   build:
     strategy:
       matrix:
-        node: ["20", "18", "16"]
+        node: ["22", "20", "18"]
       fail-fast: false
     name: "Check eclwatch and npm"
     needs: pre_job
@@ -48,6 +48,12 @@ jobs:
       - name: Install Dependencies
         working-directory: ./esp/src
         run: npm ci
+      - name: Lint
+        working-directory: ./esp/src
+        run: npm run lint
+      - name: Install Playwright browsers 
+        working-directory: ./esp/src
+        run: npx playwright install --with-deps
       - name: Build
         working-directory: ./esp/src
         run: npm run build

esp/src/.gitignore

@@ -1,7 +1,11 @@
+blob-report/
 build/
 hpcc-js/
 lib/
 node_modules/
+playwright/.cache/
+playwright-report/
+test-results/
 types/
 .vscode/*
 !.vscode/tasks.json

esp/src/lws.config.js

@@ -1,6 +1,6 @@
 const fs = require("fs");
 
-let ip = "192.168.99.103";
+let ip = "https://play.hpccsystems.com:18010";
 if (fs.existsSync("./lws.target.txt")) {
     ip = fs.readFileSync("./lws.target.txt").toString().replace("\r\n", "\n").split("\n")[0];
 }
@@ -68,5 +68,5 @@ let rewrite = [
 module.exports = {
     port: 8080,
     rewrite: rewrite,
-    stack: ['lws-basic-auth', 'lws-request-monitor', 'lws-log', 'lws-cors', 'lws-json', 'lws-compress', 'lws-rewrite', 'lws-blacklist', 'lws-conditional-get', 'lws-mime', 'lws-range', 'lws-spa', 'lws-static', 'lws-index']
+    stack: ["lws-basic-auth", "lws-request-monitor", "lws-log", "lws-cors", "lws-json", "lws-compress", "lws-rewrite", "lws-blacklist", "lws-conditional-get", "lws-mime", "lws-range", "lws-spa", "lws-static", "lws-index"]
 };

esp/src/package.json

@@ -28,8 +28,11 @@
     "dev-start": "run-p bundle-watch dev-start-ws",
     "dev-start-verbose": "ws --verbose.include request response",
     "rm-hpcc": "rimraf ./node_modules/@hpcc-js",
-    "start": "webpack serve --env development --config webpack.config.js",
-    "test": "run-s lint",
+    "start": "ws",
+    "test": "npx playwright test",
+    "test-ci": "cross-env CI=1 npx playwright test",
+    "test-codegen": "npx playwright codegen",
+    "test-interactive": "npx playwright test --ui",
     "update": "npx npm-check-updates -u -t minor",
     "update-major": "npx npm-check-updates -u"
   },
@@ -83,13 +86,16 @@
     "xstyle": "0.3.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.49.0",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/dojo": "1.9.48",
+    "@types/node": "^22.10.1",
     "@types/react": "17.0.80",
     "@types/react-dom": "17.0.25",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
     "copyfiles": "2.4.1",
+    "cross-env": "^7.0.3",
     "css-loader": "6.10.0",
     "dojo-webpack-plugin": "3.0.6",
     "eslint": "8.57.0",

esp/src/playwright.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const baseURL = process.env.CI ? "https://play.hpccsystems.com:18010" : "http://127.0.0.1:8080";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: "./tests",
+    fullyParallel: true,
+    forbidOnly: !!process.env.CI,
+    retries: process.env.CI ? 2 : 0,
+    workers: process.env.CI ? 4 : undefined,
+    reporter: "html",
+    use: {
+        baseURL,
+        trace: "on-first-retry",
+        ignoreHTTPSErrors: true
+    },
+
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+
+        {
+            name: "firefox",
+            use: { ...devices["Desktop Firefox"] },
+        },
+
+        {
+            name: "webkit",
+            use: { ...devices["Desktop Safari"] },
+        },
+
+    ],
+
+    /* Run your local dev server before starting the tests */
+    webServer: {
+        command: "npm run start",
+        url: baseURL,
+        reuseExistingServer: true,
+        ignoreHTTPSErrors: true,
+    },
+});

esp/src/tests/eclwatch-v5.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("ECLWatch V5", () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto("/esp/files/index.html");
+        await page.evaluate(() => {
+            sessionStorage.setItem("ECLWatch:ModernMode-9.0", "false");
+        });
+    });
+
+    test("Basic Frame", async ({ page }) => {
+        await page.goto("/esp/files/stub.htm");
+        await expect(page.locator("#stubStackController_stub_Main span").first()).toBeVisible();
+        await expect(page.getByLabel("Advanced")).toBeVisible();
+    });
+
+    test("Activities", async ({ page }) => {
+        await page.goto("/esp/files/stub.htm");
+        await expect(page.locator("#stub_Main-DLStackController_stub_Main-DL_Activity_label")).toBeVisible();
+        await expect(page.getByLabel("Auto Refresh")).toBeVisible();
+        await expect(page.getByLabel("Maximize/Restore")).toBeVisible();
+        await expect(page.locator("i")).toBeVisible();
+        await expect(page.locator("svg").filter({ hasText: "%hthor" })).toBeVisible();
+        await expect(page.getByRole("img", { name: "Priority" })).toBeVisible();
+        await expect(page.getByText("Target/Wuid")).toBeVisible();
+        await expect(page.getByText("Graph")).toBeVisible();
+        await expect(page.getByText("State")).toBeVisible();
+        await expect(page.getByText("Owner")).toBeVisible();
+        await expect(page.getByText("Job Name")).toBeVisible();
+    });
+});

esp/src/tests/eclwatch-v9.spec.ts

@@ -0,0 +1,42 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("ECLWatch V9", () => {
+
+    test("Basic Frame", async ({ page }) => {
+        await page.goto("/esp/files/index.html#/activities");
+        await expect(page.getByRole("link", { name: "ECL Watch" })).toBeVisible();
+        await expect(page.locator("button").filter({ hasText: "" })).toBeVisible();
+        await expect(page.getByRole("button", { name: "Advanced" })).toBeVisible();
+        await expect(page.getByTitle("Activities")).toBeVisible();
+        await expect(page.getByRole("link", { name: "ECL", exact: true })).toBeVisible();
+        await expect(page.getByRole("link", { name: "Files" })).toBeVisible();
+        await expect(page.getByRole("link", { name: "Published Queries" })).toBeVisible();
+        await expect(page.getByRole("button", { name: "History" })).toBeVisible();
+        await expect(page.getByRole("button", { name: "Add to favorites" })).toBeVisible();
+        await expect(page.locator("a").filter({ hasText: /^Activities$/ })).toBeVisible();
+        await expect(page.getByRole("link", { name: "Event Scheduler" })).toBeVisible();
+    });
+
+    test("Activities", async ({ page }) => {
+        await page.goto("/esp/files/index.html#/activities");
+        await page.getByTitle("Disk Usage").locator("i").click();
+        await expect(page.locator("svg").filter({ hasText: "%hthor" })).toBeVisible();
+        await expect(page.locator(".reflex-splitter")).toBeVisible();
+        await expect(page.getByRole("menubar")).toBeVisible();
+        await expect(page.getByRole("menuitem", { name: "Refresh" })).toBeVisible();
+        await expect(page.locator("button").filter({ hasText: "" })).toBeVisible();
+        await expect(page.locator("button").filter({ hasText: "" })).toBeVisible();
+        await expect(page.getByRole("columnheader", { name: "Priority" }).locator("div").first()).toBeVisible();
+        await expect(page.getByText("Target/Wuid")).toBeVisible();
+        await expect(page.getByText("Graph")).toBeVisible();
+        await expect(page.getByText("State")).toBeVisible();
+        await expect(page.getByText("Owner")).toBeVisible();
+        await expect(page.getByText("Job Name")).toBeVisible();
+        await expect(page.getByRole("gridcell", { name: "HThorServer - hthor" })).toBeVisible();
+        await expect(page.getByRole("gridcell", { name: "ThorMaster - thor", exact: true })).toBeVisible();
+        await expect(page.getByRole("gridcell", { name: "ThorMaster - thor_roxie" })).toBeVisible();
+        await expect(page.getByRole("gridcell", { name: "RoxieServer - roxie" })).toBeVisible();
+        await expect(page.getByRole("gridcell", { name: "myeclccserver - hthor." })).toBeVisible();
+        await expect(page.getByRole("gridcell", { name: "mydfuserver - dfuserver_queue" })).toBeVisible();
+    });
+});