wdio-ag-grid 2.0.0

package/tests/ag-grid-animation-wait.v35.spec.js

@@ -0,0 +1,65 @@
+import { after } from "node:test";
+
+import { createTestApi } from "./shared/compat.js";
+import { createAgGrid } from "../src/index.js";
+import { createWdioTestContext } from "./shared/runtime.js";
+
+const context = await createWdioTestContext();
+
+after(async () => {
+  await context.close();
+});
+
+const { expect, test } = createTestApi({
+  getBaseUrl: () => context.baseUrl,
+  getBrowser: () => context.browser,
+});
+
+test.describe("agGridWaitForAnimation", () => {
+  test("waits for AG Grid-owned animations to finish", async ({ page }) => {
+    await page.goto("/animation-wait/ag-owned.html");
+    await page.locator(".ag-cell").first().waitFor({ state: "visible" });
+
+    await page.evaluate(() => {
+      window.startAnimationWaitScenario();
+      window.__animationProbe.waitStartedAt = Date.now();
+    });
+
+    const grid = createAgGrid(await context.browser.$("#myGrid"));
+    await grid.waitForAnimation();
+
+    const probe = await page.evaluate(() => ({
+      ...window.__animationProbe,
+      elapsedMs: Date.now() - window.__animationProbe.waitStartedAt,
+    }));
+
+    await expect(probe.agStarted).toBe(true);
+    await expect(probe.agFinished).toBe(true);
+    await expect(probe.elapsedMs).toBeGreaterThan(200);
+    await expect(probe.elapsedMs).toBeLessThan(2000);
+  });
+
+  test("ignores third-party subtree animations whose finished promise never resolves", async ({ page }) => {
+    await page.goto("/animation-wait/third-party-subtree.html");
+    await page.locator(".ag-cell").first().waitFor({ state: "visible" });
+
+    await page.evaluate(() => {
+      window.startAnimationWaitScenario();
+      window.__animationProbe.waitStartedAt = Date.now();
+    });
+
+    await expect(await page.locator("#myGrid .os-scrollbar-handle").count()).toBeGreaterThan(0);
+
+    const grid = createAgGrid(await context.browser.$("#myGrid"));
+    await grid.waitForAnimation();
+
+    const probe = await page.evaluate(() => ({
+      ...window.__animationProbe,
+      elapsedMs: Date.now() - window.__animationProbe.waitStartedAt,
+    }));
+
+    await expect(probe.agFinished).toBe(true);
+    await expect(probe.thirdPartyInstalled).toBe(true);
+    await expect(probe.elapsedMs).toBeLessThan(2000);
+  });
+});

package/tests/ag-grid-data.v33.spec.js

@@ -0,0 +1,17 @@
+import { after } from "node:test";
+
+import { createWdioTestContext } from "./shared/runtime.js";
+import { runAgGridDataSuite } from "./shared/run-ag-grid-data-suite.js";
+
+const context = await createWdioTestContext();
+
+after(async () => {
+  await context.close();
+});
+
+runAgGridDataSuite({
+  getBaseUrl: () => context.baseUrl,
+  getBrowser: () => context.browser,
+  pagePath: "/v33/index.html",
+  versionLabel: "v33",
+});

package/tests/ag-grid-data.v34.spec.js

@@ -0,0 +1,17 @@
+import { after } from "node:test";
+
+import { createWdioTestContext } from "./shared/runtime.js";
+import { runAgGridDataSuite } from "./shared/run-ag-grid-data-suite.js";
+
+const context = await createWdioTestContext();
+
+after(async () => {
+  await context.close();
+});
+
+runAgGridDataSuite({
+  getBaseUrl: () => context.baseUrl,
+  getBrowser: () => context.browser,
+  pagePath: "/v34/index.html",
+  versionLabel: "v34",
+});

package/tests/ag-grid-data.v35.spec.js

@@ -0,0 +1,17 @@
+import { after } from "node:test";
+
+import { createWdioTestContext } from "./shared/runtime.js";
+import { runAgGridDataSuite } from "./shared/run-ag-grid-data-suite.js";
+
+const context = await createWdioTestContext();
+
+after(async () => {
+  await context.close();
+});
+
+runAgGridDataSuite({
+  getBaseUrl: () => context.baseUrl,
+  getBrowser: () => context.browser,
+  pagePath: "/index.html",
+  versionLabel: "v35",
+});

package/tests/ag-grid-elements.v33.spec.js

@@ -0,0 +1,17 @@
+import { after } from "node:test";
+
+import { createWdioTestContext } from "./shared/runtime.js";
+import { runAgGridElementsSuite } from "./shared/run-ag-grid-elements-suite.js";
+
+const context = await createWdioTestContext();
+
+after(async () => {
+  await context.close();
+});
+
+runAgGridElementsSuite({
+  getBaseUrl: () => context.baseUrl,
+  getBrowser: () => context.browser,
+  pagePath: "/v33/index.html",
+  versionLabel: "v33",
+});

package/tests/ag-grid-elements.v34.spec.js

@@ -0,0 +1,17 @@
+import { after } from "node:test";
+
+import { createWdioTestContext } from "./shared/runtime.js";
+import { runAgGridElementsSuite } from "./shared/run-ag-grid-elements-suite.js";
+
+const context = await createWdioTestContext();
+
+after(async () => {
+  await context.close();
+});
+
+runAgGridElementsSuite({
+  getBaseUrl: () => context.baseUrl,
+  getBrowser: () => context.browser,
+  pagePath: "/v34/index.html",
+  versionLabel: "v34",
+});

package/tests/ag-grid-elements.v35.spec.js

@@ -0,0 +1,17 @@
+import { after } from "node:test";
+
+import { createWdioTestContext } from "./shared/runtime.js";
+import { runAgGridElementsSuite } from "./shared/run-ag-grid-elements-suite.js";
+
+const context = await createWdioTestContext();
+
+after(async () => {
+  await context.close();
+});
+
+runAgGridElementsSuite({
+  getBaseUrl: () => context.baseUrl,
+  getBrowser: () => context.browser,
+  pagePath: "/index.html",
+  versionLabel: "v35",
+});

package/tests/server.mjs

@@ -0,0 +1,48 @@
+import http from "node:http";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const appRoot = path.resolve(__dirname, "../../cypress-ag-grid/app");
+const portArg = process.argv.find((value) => value.startsWith("--port="));
+const port = portArg ? Number(portArg.split("=")[1]) : 4174;
+
+const contentTypes = {
+  ".css": "text/css; charset=utf-8",
+  ".html": "text/html; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".png": "image/png",
+};
+
+http
+  .createServer((req, res) => {
+    const requestPath = req.url === "/" ? "/index.html" : req.url;
+    const safePath = path.normalize(decodeURIComponent(requestPath)).replace(/^(\.\.[/\\])+/, "");
+    const filePath = path.join(appRoot, safePath);
+
+    if (!filePath.startsWith(appRoot)) {
+      res.writeHead(403);
+      res.end("Forbidden");
+      return;
+    }
+
+    fs.readFile(filePath, (error, data) => {
+      if (error) {
+        res.writeHead(error.code === "ENOENT" ? 404 : 500);
+        res.end(error.code === "ENOENT" ? "Not found" : "Server error");
+        return;
+      }
+
+      res.writeHead(200, {
+        "Content-Type":
+          contentTypes[path.extname(filePath)] || "application/octet-stream",
+      });
+      res.end(data);
+    });
+  })
+  .listen(port, "127.0.0.1", () => {
+    console.log(`WDIO AG Grid test server listening on ${port}`);
+  });

package/tests/shared/compat.js

@@ -0,0 +1,209 @@
+import assert from "node:assert/strict";
+import { beforeEach, describe, test as nodeTest } from "node:test";
+
+class WdioLocator {
+  constructor(browser, resolver) {
+    this.browser = browser;
+    this.resolver = resolver;
+  }
+
+  async _elements() {
+    return this.resolver();
+  }
+
+  locator(selector) {
+    return new WdioLocator(this.browser, async () => {
+      const elements = await this._elements();
+      const nested = [];
+
+      for (const element of elements) {
+        nested.push(...(await element.$$(selector)));
+      }
+
+      return nested;
+    });
+  }
+
+  filter({ hasText }) {
+    return new WdioLocator(this.browser, async () => {
+      const elements = await this._elements();
+      const filtered = [];
+
+      for (const element of elements) {
+        const text = (await element.getText()).trim();
+        const matches =
+          hasText instanceof RegExp ? hasText.test(text) : text.includes(hasText);
+
+        if (matches) {
+          filtered.push(element);
+        }
+      }
+
+      return filtered;
+    });
+  }
+
+  first() {
+    return this.nth(0);
+  }
+
+  nth(index) {
+    return new WdioLocator(this.browser, async () => {
+      const elements = await this._elements();
+      return elements[index] ? [elements[index]] : [];
+    });
+  }
+
+  async count() {
+    return (await this._elements()).length;
+  }
+
+  async waitFor({ state } = {}) {
+    const elements = await this._elements();
+    const element = elements[0];
+
+    if (!element) {
+      throw new Error("Unable to find locator element.");
+    }
+
+    if (state === "visible") {
+      await element.waitForDisplayed();
+      return;
+    }
+
+    await element.waitForExist();
+  }
+
+  async click() {
+    const elements = await this._elements();
+    await elements[0].click();
+  }
+
+  async dblclick() {
+    const elements = await this._elements();
+    await elements[0].doubleClick();
+  }
+
+  async fill(value) {
+    const elements = await this._elements();
+    await elements[0].setValue(value);
+  }
+
+  async type(value) {
+    const elements = await this._elements();
+    await elements[0].addValue(value);
+  }
+
+  async press(key) {
+    await this.browser.keys(key);
+  }
+
+  async textContent() {
+    const elements = await this._elements();
+    const texts = [];
+
+    for (const element of elements) {
+      texts.push((await element.getText()).trim());
+    }
+
+    return texts.join(" ");
+  }
+}
+
+export function createPage(browser, baseUrl) {
+  return {
+    async goto(path) {
+      const url = path.startsWith("http") ? path : `${baseUrl}${path}`;
+      await browser.url(url);
+    },
+    locator(selector) {
+      return new WdioLocator(browser, async () => browser.$$(selector));
+    },
+    async evaluate(fn, arg) {
+      return browser.execute(fn, arg);
+    },
+  };
+}
+
+export function createTestApi({ getBrowser, getBaseUrl }) {
+  const state = {
+    page: null,
+  };
+
+  const test = (name, fn) =>
+    nodeTest(name, async () => {
+      if (!state.page) {
+        state.page = createPage(getBrowser(), getBaseUrl());
+      }
+
+      await fn({ page: state.page });
+    });
+
+  test.describe = describe;
+  test.beforeEach = (fn) =>
+    beforeEach(async () => {
+      state.page = createPage(getBrowser(), getBaseUrl());
+      await fn({ page: state.page });
+    });
+
+  const expect = (actual) => {
+    const isLocator = actual instanceof WdioLocator;
+
+    const api = {
+      toEqual(expected) {
+        assert.deepStrictEqual(actual, expected);
+      },
+      toBe(expected) {
+        assert.strictEqual(actual, expected);
+      },
+      toContain(expected) {
+        if (typeof actual === "string") {
+          assert.ok(actual.includes(expected));
+          return;
+        }
+
+        assert.ok(actual.includes(expected));
+      },
+      toContainEqual(expected) {
+        assert.ok(
+          actual.some((item) => JSON.stringify(item) === JSON.stringify(expected)),
+          `Expected ${JSON.stringify(expected)} to be present.`
+        );
+      },
+      toBeGreaterThan(expected) {
+        assert.ok(actual > expected);
+      },
+      toBeLessThan(expected) {
+        assert.ok(actual < expected);
+      },
+      toContainText(expected) {
+        if (isLocator) {
+          return actual.textContent().then((text) => {
+            assert.ok(text.includes(expected), `Expected "${text}" to include "${expected}"`);
+          });
+        }
+
+        const text = String(actual);
+        assert.ok(text.includes(expected), `Expected "${text}" to include "${expected}"`);
+      },
+    };
+
+    api.not = {
+      toContain(expected) {
+        if (typeof actual === "string") {
+          assert.ok(!actual.includes(expected));
+          return;
+        }
+
+        assert.ok(!actual.includes(expected));
+      },
+      toBe(expected) {
+        assert.notStrictEqual(actual, expected);
+      },
+    };
+
+    return api;
+  };
+
+  return { expect, test };
+}

package/tests/shared/fixtures.js

@@ -0,0 +1,109 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const cardataPath = path.resolve(
+  __dirname,
+  "../../../cypress-ag-grid/cypress/fixtures/cardata.json"
+);
+
+export const agGridSelector = "#myGrid";
+export const agGridElementsSelector = "#myGrid2";
+
+export const pageSize = 5;
+
+export const cardataFixture = JSON.parse(
+  fs.readFileSync(cardataPath, "utf-8")
+);
+
+export const expectedPaginatedTableData = [
+  [
+    { Year: "2020", Make: "Toyota", Model: "Celica", Condition: "fair", Price: "35000" },
+    { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "excellent", Price: "32000" },
+    { Year: "2020", Make: "Porsche", Model: "Boxter", Condition: "good", Price: "72000" },
+    { Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
+    { Year: "2020", Make: "Mercedes", Model: "GLC300", Condition: "good", Price: "53000" },
+  ],
+  [
+    { Year: "2020", Make: "Honda", Model: "Civic", Condition: "poor", Price: "22000" },
+    { Year: "2020", Make: "Honda", Model: "Accord", Condition: "poor", Price: "32000" },
+    { Year: "2020", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "19000" },
+    { Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "good", Price: "22000" },
+    { Year: "2020", Make: "Toyota", Model: "Celica", Condition: "poor", Price: "5000" },
+  ],
+  [
+    { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "good", Price: "25000" },
+    { Year: "2020", Make: "Porsche", Model: "Boxter", Condition: "good", Price: "99000" },
+    { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
+    { Year: "2020", Make: "Mercedes", Model: "GLC300", Condition: "excellent", Price: "35000" },
+    { Year: "2011", Make: "Honda", Model: "Civic", Condition: "good", Price: "9000" },
+  ],
+  [
+    { Year: "2020", Make: "Honda", Model: "Accord", Condition: "good", Price: "34000" },
+    { Year: "1990", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "900" },
+    { Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "fair", Price: "3000" },
+    { Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
+    { Year: "2023", Make: "Hyundai", Model: "Santa Fe", Condition: "excellent", Price: "" },
+  ],
+];
+
+export const expectedFirstPageTableData = expectedPaginatedTableData[0];
+
+export const expectedPorscheRowsBeforeEditing = [
+  { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "72000" },
+  { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "99000" },
+];
+
+export const expectedPorscheRowsAfterEditing = [
+  { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "66000" },
+  { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "99000" },
+];
+
+export function clone(value) {
+  return structuredClone(value);
+}
+
+export function removePropertyFromCollection(collection, columnsToExclude) {
+  const cloned = clone(collection);
+
+  if (!columnsToExclude) {
+    return cloned;
+  }
+
+  for (const excludedColumn of columnsToExclude) {
+    for (const row of cloned) {
+      delete row[excludedColumn];
+    }
+  }
+
+  return cloned;
+}
+
+export function sortedCollectionByProperty(collection, columnName, sortedBy, pageSizeLimit = pageSize) {
+  const cloned = clone(collection);
+  const direction = sortedBy === "desc" ? -1 : 1;
+
+  return cloned
+    .sort((a, b) => {
+      const valueA = String(a[columnName] ?? "").toUpperCase();
+      const valueB = String(b[columnName] ?? "").toUpperCase();
+      if (valueA < valueB) return -1 * direction;
+      if (valueA > valueB) return 1 * direction;
+      return 0;
+    })
+    .slice(0, pageSizeLimit);
+}
+
+export function getSortedMileage(actualTableData) {
+  return actualTableData
+    .map((row) => row.Mileage)
+    .sort((a, b) => Number(a) - Number(b));
+}
+
+export function expectRowsSubset(expect, actualRows, expectedRows) {
+  for (const expectedRow of expectedRows) {
+    expect(actualRows).toContainEqual(expectedRow);
+  }
+}