Refactoring ClusterOI, writing tests, bugfixes

.github/workflows/nodejs.yml

@@ -20,7 +20,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: yarn install --frozen-lockfile

.github/workflows/playwright.yml

@@ -0,0 +1,38 @@
+name: Playwright Tests
+on:
+  push:
+    branches:
+      - main
+      - master
+      - refactor
+  pull_request:
+    branches:
+      - main
+      - master
+      - refactor
+  workflow_dispatch:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x, 19.x]
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: Install dependencies
+      run: npm install -g yarn && yarn
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -1,4 +1,7 @@
 node_modules
 dist/
-data/
 tags
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -35,6 +35,8 @@
     "@fortawesome/free-brands-svg-icons": "^6.2.1",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@playwright/test": "^1.43.0",
+    "@types/node": "^20.12.5",
     "@zainulbr/i18n-webpack-plugin": "^2.0.3",
     "babel-loader": "^9.1.0",
     "babel-preset-react-hmre": "^1.1.1",

playwright.config.js

@@ -0,0 +1,79 @@
+// @ts-check
+const { defineConfig, devices } = require('@playwright/test');
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  testDir: './ui-tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run develop',
+    url: 'http://127.0.0.1:8080',
+    reuseExistingServer: !process.env.CI,
+  },
+});
+

src/clustersOfInterest.js

@@ -136,6 +136,7 @@ function open_priority_set_editor(
       var submit_button = form
         .append("button")
         .classed("btn btn-primary btn-sm", true)
+        .attr("id", "priority-panel-add-node")
         .attr("disabled", "disabled")
         .on("click", function (e) {
           panel_object.append_node();
@@ -506,12 +507,12 @@ function open_priority_set_editor(
               const pattern = new RegExp(escapeRegExp(query), "i");
               for (
                 var i = 0;
-                hits.length < 10 && i < json["Nodes"].length;
+                hits.length < 10 && i < self.json["Nodes"].length;
                 i++
               ) {
-                if (pattern.test(json["Nodes"][i].id)) {
-                  if (panel_object.can_add(json["Nodes"][i].id)) {
-                    hits.push(json["Nodes"][i].id);
+                if (pattern.test(self.json["Nodes"][i].id)) {
+                  if (panel_object.can_add(self.json["Nodes"][i].id)) {
+                    hits.push(self.json["Nodes"][i].id);
                   }
                 }
               }
@@ -528,7 +529,7 @@ function open_priority_set_editor(
 
       panel_object.validate_input = function (expression, skip_ui) {
         expression = expression || auto_object.autocomplete.getVal();
-        const validator = _.filter(json["Nodes"], (n) => n.id == expression);
+        const validator = _.filter(self.json["Nodes"], (n) => n.id == expression);
         if (validator.length == 1 && panel_object.can_add(validator[0].id)) {
           if (!skip_ui) {
             submit_button.attr("disabled", null);
@@ -591,7 +592,7 @@ function open_priority_set_editor(
 
         let need_update = false;
         let valid_ids = {};
-        _.each(json["Nodes"], (n) => {
+        _.each(self.json["Nodes"], (n) => {
           if (!existing_ids[n.id]) {
             if (existing_attributes) {
               valid_ids[n.id] = _.extend(n, existing_attributes[n.id]);
@@ -667,10 +668,13 @@ function open_priority_set_editor(
           .selectAll("table")
           .data(["panel"]);
         table_container.enter().append("table");
-        table_container.classed(
-          "table table-striped table-condensed table-hover table-smaller",
-          true
-        );
+        table_container
+          .classed(
+            "table table-striped table-condensed table-hover table-smaller",
+            true
+          )
+          .attr("id", "priority-panel-node-table");
+
 
         panel.setHeaderTitle(
           "clusterOI editor (" +

ui-tests/clusterOI.spec.js

@@ -0,0 +1,44 @@
+const { test, expect } = require('@playwright/test');
+
+let errors = [];
+
+test.beforeEach(async ({ page }) => {
+  errors = [];
+  page.on('console', msg => {
+    if (msg.type() === 'error') {
+      console.log(msg.text());
+      errors.push(msg.text());
+    }
+  })
+});
+
+test.afterEach(async ({ page }) => {
+	expect(errors).toEqual([]);
+});
+
+test('clusterOI editor opens, can add nodes', async ({ page }) => {
+  await page.goto('http://localhost:8080/priority-sets-args.html?network=ui-tests/data/network.json');
+
+  await expect(page.locator("#priority-set-tab")).toBeVisible();
+  await page.locator("#priority-set-tab").click();
+
+  // jspanel should not be visible
+  let jsPanels = await page.locator(".jsPanel").all();
+  await expect(jsPanels).toHaveLength(0);
+
+  await expect(page.locator("#trace-priority-sets")).toBeVisible();
+  await expect(page.getByText("Create A Cluster of Interest", { exact: true })).toBeVisible();
+  await page.getByText("Create A Cluster of Interest", { exact: true }).click();
+
+  jsPanels = await page.locator(".jsPanel").all();
+  await expect(jsPanels).toHaveLength(1);
+
+  await page.locator('[data-hivtrace-ui-role="priority-panel-nodeids"]').fill("BMK384750US2015");
+  await page.locator("#priority-panel-add-node").click();
+  await page.locator('[data-hivtrace-ui-role="priority-panel-nodeids"]').fill("BMK385560US2007");
+  await page.locator("#priority-panel-add-node").click();
+  await expect(page.locator("#priority-panel-node-table")
+    .filter({ has: page.getByText("BMK384750US2015") })
+    .filter({ has: page.getByText("BMK385560US2007") }))
+    .toBeVisible();
+});