Experimental component tests for playwright

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

Author: texodus

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/test/js/basic.story.tsx

@@ -0,0 +1,102 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import perspective from "@finos/perspective";
+import perspective_viewer from "@finos/perspective-viewer";
+import "@finos/perspective-viewer-datagrid";
+import "@finos/perspective-viewer-d3fc";
+
+// @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)),
+]);
+
+import type * as psp from "@finos/perspective";
+import type * as pspViewer from "@finos/perspective-viewer";
+
+// @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"],
+};
+
+import * as React from "react";
+import { PerspectiveViewer } from "@finos/perspective-react";
+
+import "@finos/perspective-viewer/dist/css/themes.css";
+import "./index.css";
+
+interface ToolbarState {
+    mounted: boolean;
+    table?: Promise<psp.Table>;
+    config: pspViewer.ViewerConfigUpdate;
+}
+
+export const App: React.FC = () => {
+    const [state, setState] = React.useState<ToolbarState>(() => ({
+        mounted: true,
+        table: createNewSuperstoreTable(),
+        config: { ...CONFIG },
+    }));
+
+    React.useEffect(() => {
+        return () => {
+            state.table?.then((table) => table?.delete({ lazy: true }));
+        };
+    }, []);
+
+    const onConfigUpdate = (config: pspViewer.ViewerConfigUpdate) => {
+        console.log("Config Update Event", config);
+        setState({ ...state, config });
+    };
+
+    const onClick = (detail: pspViewer.PerspectiveClickEventDetail) => {
+        console.log("Click Event,", detail);
+    };
+
+    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>
+    );
+};

packages/perspective-react/test/js/index.css

@@ -0,0 +1,54 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+body {
+    margin: 0;
+    background-color: #f0f0f0;
+    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
+        "Consolas", "Liberation Mono", monospace;
+}
+
+.container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    display: grid;
+    gap: 8px;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 45px 1fr;
+}
+
+perspective-viewer {
+    grid-row: 2;
+}
+
+.toolbar {
+    grid-row: 1;
+    grid-column-start: 1;
+    grid-column-end: 3;
+
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    padding: 10px;
+    justify-content: stretch;
+    border-bottom: 1px solid #666;
+}
+
+button {
+    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
+        "Consolas", "Liberation Mono", monospace;
+}

packages/perspective-react/test/js/react.spec.tsx

@@ -0,0 +1,29 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { test, expect } from "@playwright/experimental-ct-react";
+import { PerspectiveViewer } from "@finos/perspective-react";
+import React from "react";
+
+import { App } from "./basic.story";
+
+test.describe("Perspective React", () => {
+    test("The viewer loads with data in it", async ({ page, mount }) => {
+        const comp = await mount(<App></App>);
+        const count = await page.evaluate(async () => {
+            await new Promise((x) => setTimeout(x, 1000));
+            return document.querySelectorAll("perspective-viewer").length;
+        });
+
+        expect(count).toBe(2);
+    });
+});