Tests via @playwright/experimental-ct-test

Signed-off-by: Andrew Stein <[email protected]>

Author: texodus

.prettierrc.json

@@ -1,6 +1,5 @@
 {
     "tabWidth": 4,
-    "experimentalTernaries": true,
     "overrides": [
         {
             "files": ["*.html"],

package.json

@@ -48,7 +48,8 @@
         "@finos/perspective-viewer-openlayers": "workspace:^",
         "@finos/perspective-workspace": "workspace:^",
         "@fontsource/roboto-mono": "4.5.10",
-        "@playwright/test": "^1.49.1",
+        "@playwright/test": "^1.52.0",
+        "@playwright/experimental-ct-react": "1.52.0",
         "@types/ws": "^8.18.1",
         "@zip.js/zip.js": "^2.7.54",
         "auto-changelog": "^2.5.0",

packages/perspective-react/package.json

@@ -18,12 +18,11 @@
         "clean": "rimraf dist"
     },
     "peerDependencies": {
-        "@types/react": "^18.0.0",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
+        "@types/react": "^18",
+        "react": "^18",
+        "react-dom": "^18"
     },
     "devDependencies": {
-        "@finos/perspective-esbuild-plugin": "workspace:^",
         "zx": "^8.3.0"
     }
 }

packages/perspective-react/src/index.tsx

@@ -21,11 +21,10 @@ function usePspListener<A>(
 ) {
     React.useEffect(() => {
         if (f) {
-            const controller = new AbortController();
-            const opts = { signal: controller.signal };
+            const ctx = new AbortController();
             const callback = (e: Event) => f((e as CustomEvent).detail);
-            viewer?.addEventListener(name, callback, opts);
-            return () => controller.abort();
+            viewer?.addEventListener(name, callback, { signal: ctx.signal });
+            return () => ctx.abort();
         }
     }, [viewer, f]);
 }

packages/perspective-react/test/index.tsx

@@ -10,69 +10,93 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import * as React from "react";
-import { createRoot } from "react-dom/client";
-
-import * as psp from "@finos/perspective-react";
-import {
-    PerspectiveProvider,
-    PerspectiveViewer,
-} from "@finos/perspective-react";
-import perspective, { Table } from "@finos/perspective";
+import perspective from "@finos/perspective";
 import perspective_viewer from "@finos/perspective-viewer";
-
-// Import perspective viewer plugins to register them on the web component.
 import "@finos/perspective-viewer-datagrid";
 import "@finos/perspective-viewer-d3fc";
 
-// Refer to bootstrapping link above
-import SERVER_WASM from "@finos/perspective/dist/wasm/perspective-server.wasm";
-import CLIENT_WASM from "@finos/perspective-viewer/dist/wasm/perspective-viewer.wasm";
+// @ts-ignore
+import SERVER_WASM from "@finos/perspective/dist/wasm/perspective-server.wasm?url";
+
+// @ts-ignore
+import CLIENT_WASM from "@finos/perspective-viewer/dist/wasm/perspective-viewer.wasm?url";
 
 await Promise.all([
     perspective.init_server(fetch(SERVER_WASM)),
     perspective_viewer.init_client(fetch(CLIENT_WASM)),
 ]);
 
-// Now WASM has booted and we can construct a web worker to host our tables.
-const worker = await perspective.worker();
+import type * as psp from "@finos/perspective";
+import type * as pspViewer from "@finos/perspective-viewer";
 
-const Root: React.FC = () => {
-    return (
-        <PerspectiveProvider>
-            <App />
-        </PerspectiveProvider>
-    );
+// @ts-ignore
+import SUPERSTORE_ARROW from "superstore-arrow/superstore.lz4.arrow?url";
+
+const WORKER = await perspective.worker();
+
+async function createNewSuperstoreTable(): Promise<psp.Table> {
+    const req = fetch(SUPERSTORE_ARROW);
+    const resp = await req;
+    const buffer = await resp.arrayBuffer();
+    return await WORKER.table(buffer);
+}
+
+const CONFIG: pspViewer.ViewerConfigUpdate = {
+    group_by: ["State"],
 };
 
-const App: React.FC = () => {
-    const actions = psp.useActions();
-    const [selectedTable, setSelectedTable] =
-        React.useState<string>("my_table");
-    // DON'T MOVE THIS WITHOUT UPDATING {docs/md/how_to/javascript/react.md}
-    // This is just for testing and shouldn't be visible in our docs.
+import * as React from "react";
+import { PerspectiveViewer } from "@finos/perspective-react";
 
-    React.useEffect(() => {
-        (window as any).__PSP_REACT_TEST_HARNESS__ = {
-            worker,
-            actions,
-            setSelectedTable,
-        };
-    }, []);
+import "@finos/perspective-viewer/dist/css/themes.css";
+import "./index.css";
+
+interface ToolbarState {
+    mounted: boolean;
+    table?: Promise<psp.Table>;
+    config: pspViewer.ViewerConfigUpdate;
+}
 
-    // DON'T MOVE THIS WITHOUT UPDATING {docs/md/how_to/javascript/react.md}
+export const App: React.FC = () => {
+    const [state, setState] = React.useState<ToolbarState>(() => ({
+        mounted: true,
+        table: createNewSuperstoreTable(),
+        config: { ...CONFIG },
+    }));
 
     React.useEffect(() => {
-        actions.addTable({
-            table: "my_table",
-            promise: worker.table({ x: [1, 2, 3] }),
-        });
         return () => {
-            actions.removeTable({ table: "my_table" });
+            state.table?.then((table) => table?.delete({ lazy: true }));
         };
     }, []);
 
-    return <PerspectiveViewer selectedTable={selectedTable} />;
-};
+    const onConfigUpdate = (config: pspViewer.ViewerConfigUpdate) => {
+        console.log("Config Update Event", config);
+        setState({ ...state, config });
+    };
+
+    const onClick = (detail: pspViewer.PerspectiveClickEventDetail) => {
+        console.log("Click Event,", detail);
+    };
 
-createRoot(document.getElementById("root")!).render(<Root />);
+    const onSelect = (detail: pspViewer.PerspectiveSelectEventDetail) => {
+        console.log("Select Event", detail);
+    };
+
+    return (
+        <div className="container">
+            {state.mounted && (
+                <>
+                    <PerspectiveViewer table={state.table} />
+                    <PerspectiveViewer
+                        table={state.table}
+                        config={state.config}
+                        onClick={onClick}
+                        onSelect={onSelect}
+                        onConfigUpdate={onConfigUpdate}
+                    />
+                </>
+            )}
+        </div>
+    );
+};