Skip to content

Commit

Permalink
Merge pull request #2502 from ada-x64/chores/docs-tests
Browse files Browse the repository at this point in the history
Add Docs Tests
  • Loading branch information
texodus authored Feb 24, 2024
2 parents ea2b6a3 + 9cd4eec commit 8e4c9a1
Show file tree
Hide file tree
Showing 12 changed files with 283 additions and 203 deletions.
10 changes: 10 additions & 0 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -702,6 +702,16 @@ jobs:
- name: WebAssembly Test
run: yarn test_js --ci

######################
# Fancy HTML reports #
######################
- uses: actions/upload-artifact@v3
if: failure()
with:
name: playwright-report
path: tools/perspective-test/playwright-report/
retention-days: 30

############################# ##############################
#~~~~~~~~~~~~~~~~~~~~~~~~~~~# #~~~~~~~~~~~~~~~~~~~~~~~~~~~~#
#~~~~~~~~~~/########\~~~~~~~# #~~~~~~~~~|##########|~~~~~~~#
Expand Down
71 changes: 20 additions & 51 deletions docs/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,11 @@ 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));
}
});
await page.evaluate(async function () {
const viewer = document.querySelector("perspective-viewer");
await viewer.flush();
Expand All @@ -73,13 +78,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 +109,17 @@ 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 +141,11 @@ 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>
103 changes: 103 additions & 0 deletions docs/test/js/examples.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
// ┃ 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,
getSvgContentString,
compareSVGContentsToSnapshot,
PageView,
} 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);

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

let selector = "";
if (new_config.plugin === "Datagrid") {
selector = "perspective-viewer-datagrid";
} else if (new_config.plugin === "Map Scatter") {
selector = "perspective-viewer-openlayers-scatter";
} else {
const plugin = new_config.plugin
.replace(/[-\/\s]/gi, "")
.toLowerCase();
selector = `perspective-viewer-d3fc-${plugin}`;
}

await compareSVGContentsToSnapshot(page, selector, [
`${idx}-${example.name}.txt`,
]);
});
}
});

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));
}
});
});
test("test svgs", async ({ page }) => {
const viewer = new PageView(page);
await viewer.restore({ plugin: "X/Y Scatter" });
const contents = await getSvgContentString(
"perspective-viewer-d3fc-xyscatter"
)(page);
console.log(contents);
});
2 changes: 1 addition & 1 deletion packages/perspective-viewer-d3fc/test/js/area.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,6 @@ test.describe("Area Tests", () => {

run_standard_tests(
"area",
getSvgContentString("perspective-viewer perspective-viewer-d3fc-xyline")
getSvgContentString("perspective-viewer perspective-viewer-d3fc-yarea")
);
});
2 changes: 1 addition & 1 deletion packages/perspective-viewer-d3fc/test/js/line.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,6 @@ test.describe("Line Tests", () => {

run_standard_tests(
"yline",
getSvgContentString("perspective-viewer perspective-viewer-d3fc-xyline")
getSvgContentString("perspective-viewer perspective-viewer-d3fc-yline")
);
});
Loading

0 comments on commit 8e4c9a1

Please sign in to comment.