Skip to content

Commit

Permalink
add docs test + fix typo
Browse files Browse the repository at this point in the history
  • Loading branch information
ada-x64 committed Jan 30, 2024
1 parent ac63ec2 commit fb317d0
Show file tree
Hide file tree
Showing 8 changed files with 196 additions and 165 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -702,7 +702,7 @@ jobs:
# Fancy HTML reports #
######################
- uses: actions/upload-artifact@v3
if: always()
if: failure()
with:
name: playwright-report
path: tools/perspective-test/playwright-report/
Expand Down
62 changes: 11 additions & 51 deletions docs/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,12 @@ async function run_with_theme(page, is_dark = false) {
await page.goto("http://localhost:8080/");
await page.setContent(template(is_dark));
await page.setViewport(DEFAULT_VIEWPORT);
await page.evaluate(async () => {
while (!window.__TEST_PERSPECTIVE_READY__) {
await new Promise(resolve => setTimeout(resolve, 10))
}
})
console.log("TEST READY");
await page.evaluate(async function () {
const viewer = document.querySelector("perspective-viewer");
await viewer.flush();
Expand All @@ -73,13 +79,13 @@ async function run_with_theme(page, is_dark = false) {
)
);
console.log(JSON.stringify(new_config));

await page.evaluate(async (config) => {
const viewer = document.querySelector("perspective-viewer");
await viewer.reset();
await viewer.restore(config);
}, new_config);

await page.waitForSelector("perspective-viewer:not([updating])");
const screenshot = await page.screenshot({
captureBeyondViewport: false,
fullPage: true,
Expand All @@ -104,10 +110,11 @@ async function run_with_theme(page, is_dark = false) {
}

async function run() {
if (!fs.existsSync("static/features")) {
if (!fs.existsSync("static/features") || fs.readdirSync("static/features").length === 0) {
console.log("Generating feature screenshots!")
mkdirp(path.join(__dirname, "static/features"));
const server = new WebSocketServer({
assets: [path.join(__dirname, "..")],
assets: [path.join(__dirname, ".."), path.join(__dirname, "../node_modules")],
});

const browser = await puppeteer.launch({ headless: true });
Expand All @@ -129,54 +136,7 @@ async function run() {
}

function template(is_dark) {
return `
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
<script type="module" src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
<script type="module" src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
<link rel='stylesheet' href="/node_modules/@finos/perspective-viewer/dist/css/pro${
is_dark ? "-dark" : ""
}.css">
<style>
perspective-viewer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
perspective-viewer[theme="Pro Light"] {
--plugin--background:#f2f4f6
}
</style>
</head>
<body>
<perspective-viewer editable>
</perspective-viewer>
<script type="module">
import perspective from "/node_modules/@finos/perspective/dist/cdn/perspective.js";
const WORKER = perspective.worker();
async function on_load() {
var el = document.getElementsByTagName('perspective-viewer')[0];
const plugin = await el.getPlugin("Heatmap");
plugin.render_warning = false;
const table = WORKER.table(this.response);
el.load(table);
el.toggleConfig();
}
window.addEventListener('DOMContentLoaded', function () {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/node_modules/superstore-arrow/superstore.lz4.arrow', true);
xhr.responseType = "arraybuffer"
xhr.onload = on_load.bind(xhr);
xhr.send(null);
});
</script>
</body>
</html>`.trim();
return fs.readFileSync(path.join(__dirname, "template.html")).toString().replace("/css/pro.css", is_dark ? "/css/pro-dark.css" : "/css/pro.css").trim();
}

run();
4 changes: 2 additions & 2 deletions docs/src/components/HomepageFeatures/python.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ Production, or as an embedded JupyterLab Widget for Research.

For Application Developers, virtualized `<perspective-viewer>` will only
consume the data necessary to render the current screen, enabling _ludicrous size_
datasets with nearly instant load. Or - stream the entire dataset to the
WebAssembly runtime via efficiently via Apache Arrow, and give your server a
datasets with nearly instant load. Or - efficiently stream the entire dataset to the
WebAssembly runtime via Apache Arrow, and give your server a
break!

For Researchers and Data Scientists, `PerspectiveWidget` is available as a
Expand Down
56 changes: 56 additions & 0 deletions docs/template.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>

<head>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
<script type="module"
src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
<script type="module"
src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
<link rel='stylesheet' href="/node_modules/@finos/perspective-viewer/dist/css/pro.css">
<style>
perspective-viewer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

perspective-viewer[theme="Pro Light"] {
--plugin--background: #f2f4f6
}
</style>
</head>

<body>
<perspective-viewer editable>
</perspective-viewer>
<script type="module">
import perspective from "/node_modules/@finos/perspective/dist/cdn/perspective.js";
const WORKER = perspective.worker();
async function on_load() {
console.log("ON LOAD");
var el = document.getElementsByTagName('perspective-viewer')[0];
console.log("VIEWR ELEMENT:", el);
const plugin = await el.getPlugin("Heatmap");
plugin.render_warning = false;
const table = WORKER.table(this.response);
await el.load(table);
await el.toggleConfig();
window.__TEST_PERSPECTIVE_READY__ = true;
}
window.addEventListener('DOMContentLoaded', function () {
console.log("DOM CONTENT LOADED");
var xhr = new XMLHttpRequest();
xhr.open('GET', '/node_modules/superstore-arrow/superstore.lz4.arrow', true);
xhr.responseType = "arraybuffer"
xhr.onload = on_load.bind(xhr);
xhr.send(null);
});
</script>
</body>

</html>
79 changes: 79 additions & 0 deletions docs/test/js/examples.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
// ┃ 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,
compareContentsToSnapshot,
getSvgContentString,
compareSVGContentsToSnapshot,
} from "@finos/perspective-test";
import EXAMPLES from "../../src/components/ExampleGallery/features";
const { convert } = require("@finos/perspective-viewer/dist/cjs/migrate.js");

test.describe.configure({ mode: "parallel" });

test.describe("Examples", () => {
test.beforeEach(async ({ page }) => {
await page.goto("docs/template.html");
await page.evaluate(async () => {
while (!window["__TEST_PERSPECTIVE_READY__"]) {
await new Promise((x) => setTimeout(x, 10));
}
});
});

for (const idx in EXAMPLES.default) {
const example = EXAMPLES.default[idx];
test(`${idx} - ${example.name}`, async ({ page }) => {
const { config } = example;
const new_config = await convert(
Object.assign(
{
plugin: "Datagrid",
group_by: [],
expressions: {},
split_by: [],
sort: [],
aggregates: {},
},
config
)
);
await page.evaluate(async (config) => {
const viewer = document.querySelector("perspective-viewer");
viewer?.addEventListener("perspective-config-update", (e) => {
window.__CONFIG_UPDATED__ = true;
console.log(e);
});
await viewer.reset();
await viewer.restore(config);
}, new_config);

page.evaluate((config) => {
console.log(config);
}, config);
if (Object.keys(config).length !== 0) {
await page.evaluate(async () => {
while (!window["__CONFIG_UPDATED__"]) {
await new Promise((x) => setTimeout(x, 10));
}
});
}

await expect(page).toHaveScreenshot(
`${idx} - ${example.name}.png`,
{ maxDiffPixelRatio: 0.1 }
);
});
}
});
Loading

0 comments on commit fb317d0

Please sign in to comment.