fix ci

Author: lekoala

demo/index.html

@@ -193,7 +193,7 @@ <h1>Data Grid</h1>
     <section class="demo-grid">
       <p class="demo-kicker">Reference scene</p>
       <h2>Basic</h2>
-      <p class="demo-lead">A clean five-column grid for the default visual contract: flat headers, integrated filters, quiet pagination.</p>
+      <p class="demo-lead">A clean multi-column grid for the default visual contract: flat headers, integrated filters, quiet pagination.</p>
       <div class="demo-frame" id="basic-demo"></div>
     </section>
 

src/data-grid.js

@@ -5,13 +5,18 @@
 
 import BaseElement from "./core/base-element.js";
 import { ArrayDataSource, FetchDataSource } from "./data-source.js";
+import {
+    formatDateFilterQuery,
+    formatTextFilterQuery,
+    parseDateFilterQuery,
+    parseTextFilterQuery,
+} from "./filter-query.js";
 import addSelectOption from "./utils/addSelectOption.js";
 import applyContent from "./utils/applyContent.js";
 import { parseBooleanAttribute, parseEnumAttribute, parseIntegerListAttribute } from "./utils/attributes.js";
 import { MIN_COLUMN_WIDTH } from "./utils/columnWidth.js";
 import debounce from "./utils/debounce.js";
 import { dispatch } from "./utils/dispatch.js";
-import { formatDateFilterQuery, formatTextFilterQuery, parseDateFilterQuery, parseTextFilterQuery } from "./filter-query.js";
 import formatValue, { getFormatDefaults } from "./utils/formatValue.js";
 import getTextWidth from "./utils/getTextWidth.js";
 import {
@@ -3584,9 +3589,10 @@ class DataGrid extends BaseElement {
                     /** @type {HTMLInputElement} */ (filter).value = formatTextFilterQuery(filterState);
                 } else if (filter.dataset.filterMode === "number") {
                     const numericValue = Number(filterState.value);
-                    const value = filter.dataset.percent === "true" && Number.isFinite(numericValue)
-                        ? numericValue * 100
-                        : filterState.value;
+                    const value =
+                        filter.dataset.percent === "true" && Number.isFinite(numericValue)
+                            ? numericValue * 100
+                            : filterState.value;
                     /** @type {HTMLInputElement} */ (filter).value = formatTextFilterQuery({
                         operator: filterState.operator,
                         value,

test/browser/helpers.js

@@ -1,6 +1,7 @@
 import { start } from "../../demo/server.js";
 
 export const IS_WINDOWS = process.platform === "win32";
+export const IS_CHROME_BACKEND = process.platform === "linux";
 
 let server;
 let base;
@@ -36,7 +37,7 @@ export function stopServer() {
  * @returns {Bun.WebView}
  */
 export function view() {
-    if (process.platform === "linux") {
+    if (IS_CHROME_BACKEND) {
         return new Bun.WebView({
             width: 1280,
             height: 3000,

test/browser/ui.test.js

@@ -1,5 +1,5 @@
 import { afterAll, beforeAll, expect, test } from "bun:test";
-import { ensureServer, IS_WINDOWS, read, stopServer, view, waitFor } from "./helpers.js";
+import { ensureServer, IS_CHROME_BACKEND, IS_WINDOWS, read, stopServer, view, waitFor } from "./helpers.js";
 
 const FIXTURE = "test/browser/fixtures/grid.html";
 const TIMEOUT = 15000;
@@ -43,6 +43,7 @@ test.skipIf(IS_WINDOWS)(
         await using v = view();
         await v.navigate(`${ensureServer()}/demo/declarative.html`);
         await waitFor(v, "document.querySelector('#declarative-actions-grid tbody [data-action=delete]')");
+        await v.evaluate("new Promise((resolve) => requestAnimationFrame(() => resolve()))");
 
         const geometry = JSON.parse(
             await read(
@@ -350,7 +351,7 @@ test.skipIf(IS_WINDOWS)(
     TIMEOUT,
 );
 
-test.skipIf(IS_WINDOWS)(
+test.skipIf(IS_WINDOWS || !IS_CHROME_BACKEND)(
     "context menu is a native popover positioned at the pointer",
     async () => {
         await using v = view();

test/data-source.test.js

@@ -75,9 +75,7 @@ test("applyFilters text operators are case- and accent-insensitive", () => {
     expect(applyFilters(rows, { name: { operator: "startsWith", value: "elodie" } })).toEqual([
         { name: "Élodie Martin" },
     ]);
-    expect(applyFilters(rows, { name: { operator: "endsWith", value: "strom" } })).toEqual([
-        { name: "Ångström" },
-    ]);
+    expect(applyFilters(rows, { name: { operator: "endsWith", value: "strom" } })).toEqual([{ name: "Ångström" }]);
     expect(
         applyFilters(rows, { name: { operator: "in", value: ["cafe central", "elodie martin"] } }).map((r) => r.name),
     ).toEqual(["Café Central", "Élodie Martin"]);

test/filter.test.js

@@ -1,7 +1,12 @@
 import { expect, test } from "bun:test";
 import DataGrid from "../data-grid.js";
-import { formatDateFilterQuery, formatTextFilterQuery, parseDateFilterQuery, parseTextFilterQuery } from "../src/filter-query.js";
 import { ArrayDataSource, applyFilters, encodeSearchParams } from "../src/data-source.js";
+import {
+    formatDateFilterQuery,
+    formatTextFilterQuery,
+    parseDateFilterQuery,
+    parseTextFilterQuery,
+} from "../src/filter-query.js";
 import { change, input } from "./helpers.js";
 
 async function makeReadyGrid(opts = {}, data = null) {
@@ -339,11 +344,14 @@ test("typing several characters triggers a single debounced filter", async () =>
 
 test("text filter expressions flow end to end through the grid", async () => {
     const data = [{ age: 18 }, { age: 30 }, { age: 31 }, { age: 45 }];
-    const inst = await makeReadyGrid({
-        columns: [{ field: "age", filterType: "text" }],
-        filterable: true,
-        filterDelay: 20,
-    }, data);
+    const inst = await makeReadyGrid(
+        {
+            columns: [{ field: "age", filterType: "text" }],
+            filterable: true,
+            filterDelay: 20,
+        },
+        data,
+    );
 
     typeFilter(inst, "age", ">30");
     await sleep(80);
@@ -958,12 +966,7 @@ test("date filters treat partial dates as exact periods", async () => {
             filterable: true,
             filterDelay: 20,
         },
-        [
-            { created: "2024-12-31" },
-            { created: "2025-01-01" },
-            { created: "2025-08-26" },
-            { created: "2026-08-27" },
-        ],
+        [{ created: "2024-12-31" }, { created: "2025-01-01" }, { created: "2025-08-26" }, { created: "2026-08-27" }],
     );
     const el = inst.querySelector('.dg-head-filters input[data-name="created"]');
     // The placeholder communicates the canonical date contract