chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,200 @@
|
||||
// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
||||
// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
|
||||
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
|
||||
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
|
||||
// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
|
||||
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
|
||||
// ┃ 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 "@perspective-dev/test";
|
||||
import { compareContentsToSnapshot } from "@perspective-dev/test";
|
||||
import { PageView } from "@perspective-dev/test";
|
||||
import {
|
||||
ACTIVE_DRAG,
|
||||
getSettingsPanelContents,
|
||||
INACTIVE_DRAG,
|
||||
shadowDragCancel,
|
||||
} from "./dragdrop_test_utils";
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(
|
||||
"/rust/perspective-viewer/test/html/column-settings-enabled.html",
|
||||
);
|
||||
await page.evaluate(async () => {
|
||||
while (!(window as any)["__TEST_PERSPECTIVE_READY__"]) {
|
||||
await new Promise((x) => setTimeout(x, 10));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Drag and Drop", () => {
|
||||
// Cancel — drag starts but no drop occurs.
|
||||
// These verify the panel returns to its original state with no side-effects.
|
||||
test.describe("cancel", () => {
|
||||
test("drag inactive column and cancel (dragend with no drop)", async ({
|
||||
page,
|
||||
}) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
await shadowDragCancel(
|
||||
page,
|
||||
view.container.locator(INACTIVE_DRAG).first(),
|
||||
);
|
||||
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("drag active column and cancel (dragend with no drop)", async ({
|
||||
page,
|
||||
}) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit"],
|
||||
});
|
||||
|
||||
await shadowDragCancel(
|
||||
page,
|
||||
view.container.locator(ACTIVE_DRAG).first(),
|
||||
);
|
||||
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual(["Sales", "Profit"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("drag inactive column over wrong target (status bar) then cancel", async ({
|
||||
page,
|
||||
}) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
|
||||
// Hover over the status bar which is not a valid drop target.
|
||||
await shadowDragCancel(
|
||||
page,
|
||||
view.container.locator(INACTIVE_DRAG).first(),
|
||||
view.container.locator("#status_bar"),
|
||||
);
|
||||
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("drag inactive column over Group By then cancel before drop", async ({
|
||||
page,
|
||||
}) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
await shadowDragCancel(
|
||||
page,
|
||||
view.container.locator(INACTIVE_DRAG).first(),
|
||||
view.container.locator("#group_by"),
|
||||
);
|
||||
|
||||
const config = await view.save();
|
||||
expect(config.group_by).toEqual([]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("drag inactive column over Split By then cancel before drop", async ({
|
||||
page,
|
||||
}) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
await shadowDragCancel(
|
||||
page,
|
||||
view.container.locator(INACTIVE_DRAG).first(),
|
||||
view.container.locator("#split_by"),
|
||||
);
|
||||
const config = await view.save();
|
||||
expect(config.split_by).toEqual([]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("drag inactive column over Sort then cancel before drop", async ({
|
||||
page,
|
||||
}) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
await shadowDragCancel(
|
||||
page,
|
||||
view.container.locator(INACTIVE_DRAG).first(),
|
||||
view.container.locator("#sort"),
|
||||
);
|
||||
const config = await view.save();
|
||||
expect(config.sort).toEqual([]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("drag inactive column over Filter then cancel before drop", async ({
|
||||
page,
|
||||
}) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
await shadowDragCancel(
|
||||
page,
|
||||
view.container.locator(INACTIVE_DRAG).first(),
|
||||
view.container.locator("#filter"),
|
||||
);
|
||||
const config = await view.save();
|
||||
expect(config.filter).toEqual([]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("drag inactive column outside component (simulate drop outside browser)", async ({
|
||||
page,
|
||||
}) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
|
||||
// Start a drag then immediately cancel — no hover over any target.
|
||||
await shadowDragCancel(
|
||||
page,
|
||||
view.container.locator(INACTIVE_DRAG).first(),
|
||||
);
|
||||
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("drag active column outside component (simulate drop outside browser)", async ({
|
||||
page,
|
||||
}) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit"],
|
||||
});
|
||||
|
||||
await shadowDragCancel(
|
||||
page,
|
||||
view.container.locator(ACTIVE_DRAG).first(),
|
||||
);
|
||||
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual(["Sales", "Profit"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -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 { Locator, Page } from "@playwright/test";
|
||||
|
||||
/** The draggable handle of the first visible inactive column. */
|
||||
export const INACTIVE_DRAG =
|
||||
"#sub-columns .column-selector-column:not(.column-selector-column-hidden) .column-selector-draggable";
|
||||
|
||||
/** The draggable handle of the first active column. */
|
||||
export const ACTIVE_DRAG =
|
||||
"#active-columns .column-selector-column .column-selector-draggable";
|
||||
|
||||
/** Returns the `#settings_panel` innerHTML from the viewer's shadow root. */
|
||||
export async function getSettingsPanelContents(page: Page) {
|
||||
return page.evaluate(() => {
|
||||
const viewer = document.querySelector("perspective-viewer")!;
|
||||
return viewer.shadowRoot!.querySelector("#settings_panel")!.innerHTML;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initiates a real browser drag from `src` to `tgt` using mouse events, without
|
||||
* completing the drop. The drag is left in-flight so the caller can snapshot the
|
||||
* intermediate dragover UI state.
|
||||
*/
|
||||
export async function shadowDragOver(page: Page, src: Locator, tgt: Locator) {
|
||||
const srcBox = (await src.boundingBox())!;
|
||||
const tgtBox = (await tgt.boundingBox())!;
|
||||
const srcX = srcBox.x + srcBox.width / 2;
|
||||
const srcY = srcBox.y + srcBox.height / 2;
|
||||
const tgtX = tgtBox.x + tgtBox.width / 2;
|
||||
const tgtY = tgtBox.y + tgtBox.height / 2;
|
||||
|
||||
await page.mouse.move(srcX, srcY);
|
||||
await page.mouse.down();
|
||||
|
||||
// Small initial move to trigger the browser's drag-start threshold.
|
||||
await page.mouse.move(srcX + 5, srcY, { steps: 2 });
|
||||
|
||||
// Move to the target center, generating dragenter + dragover events.
|
||||
await page.mouse.move(tgtX, tgtY, { steps: 10 });
|
||||
|
||||
// Allow Yew to process events and re-render.
|
||||
await page.waitForTimeout(100);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initiates a real browser drag from `src`, optionally hovers over
|
||||
* `wrongTgt`, then presses Escape to cancel — firing `dragend` without a
|
||||
* `drop`.
|
||||
*/
|
||||
export async function shadowDragCancel(
|
||||
page: Page,
|
||||
src: Locator,
|
||||
wrongTgt: Locator | null = null,
|
||||
) {
|
||||
const srcBox = (await src.boundingBox())!;
|
||||
const srcX = srcBox.x + srcBox.width / 2;
|
||||
const srcY = srcBox.y + srcBox.height / 2;
|
||||
|
||||
await page.evaluate(() => {
|
||||
window["dragend_resolvers"] = Promise.withResolvers();
|
||||
document.body.addEventListener("dragend", () => {
|
||||
window["dragend_resolvers"].resolve();
|
||||
});
|
||||
});
|
||||
|
||||
await page.mouse.move(srcX, srcY);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(srcX + 5, srcY, { steps: 2 });
|
||||
|
||||
if (wrongTgt) {
|
||||
const wrongBox = (await wrongTgt.boundingBox())!;
|
||||
await page.mouse.move(
|
||||
wrongBox.x + wrongBox.width / 2,
|
||||
wrongBox.y + wrongBox.height / 2,
|
||||
{ steps: 10 },
|
||||
);
|
||||
}
|
||||
|
||||
// Drag is a cruel mistress.
|
||||
await page.waitForTimeout(100);
|
||||
|
||||
// Cancel the drag (fires dragend with no preceding drop).
|
||||
await page.keyboard.press("Escape");
|
||||
await page.evaluate(async () => {
|
||||
await window["dragend_resolvers"].promise;
|
||||
});
|
||||
}
|
||||
|
||||
export async function localDrag(page: any, source: any, target: any) {
|
||||
await source.dragTo(target, { steps: 100 });
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
||||
// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
|
||||
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
|
||||
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
|
||||
// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
|
||||
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
|
||||
// ┃ 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 "@perspective-dev/test";
|
||||
import { compareContentsToSnapshot } from "../helpers.ts";
|
||||
import { PageView } from "@perspective-dev/test";
|
||||
import {
|
||||
ACTIVE_DRAG,
|
||||
getSettingsPanelContents,
|
||||
INACTIVE_DRAG,
|
||||
localDrag,
|
||||
shadowDragOver,
|
||||
} from "./dragdrop_test_utils";
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(
|
||||
"/rust/perspective-viewer/test/html/column-settings-enabled.html",
|
||||
);
|
||||
await page.evaluate(async () => {
|
||||
while (!(window as any)["__TEST_PERSPECTIVE_READY__"]) {
|
||||
await new Promise((x) => setTimeout(x, 10));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Drag and Drop", () => {
|
||||
// Drag over a target without releasing (no drop)
|
||||
// Tests the intermediate UI state — dragover highlights, etc.
|
||||
test.describe("dragover (without drop)", () => {
|
||||
test("inactive column dragged over Active Columns", async ({
|
||||
page,
|
||||
}) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
await shadowDragOver(
|
||||
page,
|
||||
view.container.locator(INACTIVE_DRAG).first(),
|
||||
view.container
|
||||
.locator("#active-columns .column-selector-column")
|
||||
.nth(0),
|
||||
);
|
||||
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await page.pause();
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive column dragged over Group By", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
await shadowDragOver(
|
||||
page,
|
||||
view.container.locator(INACTIVE_DRAG).first(),
|
||||
view.container.locator("#group_by"),
|
||||
);
|
||||
const config = await view.save();
|
||||
expect(config.group_by).toEqual([]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive column dragged over Split By", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
await shadowDragOver(
|
||||
page,
|
||||
view.container.locator(INACTIVE_DRAG).first(),
|
||||
view.container.locator("#split_by"),
|
||||
);
|
||||
const config = await view.save();
|
||||
expect(config.split_by).toEqual([]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive column dragged over Sort", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
await shadowDragOver(
|
||||
page,
|
||||
view.container.locator(INACTIVE_DRAG).first(),
|
||||
view.container.locator("#sort"),
|
||||
);
|
||||
const config = await view.save();
|
||||
expect(config.sort).toEqual([]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive column dragged over Filter", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
await shadowDragOver(
|
||||
page,
|
||||
view.container.locator(INACTIVE_DRAG).first(),
|
||||
view.container.locator("#filter"),
|
||||
);
|
||||
const config = await view.save();
|
||||
expect(config.filter).toEqual([]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("active column dragged over Group By", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit"],
|
||||
});
|
||||
|
||||
await shadowDragOver(
|
||||
page,
|
||||
view.container.locator(ACTIVE_DRAG).first(),
|
||||
view.container.locator("#group_by"),
|
||||
);
|
||||
const config = await view.save();
|
||||
expect(config.group_by).toEqual([]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("active column dragged over Split By", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit"],
|
||||
});
|
||||
|
||||
await shadowDragOver(
|
||||
page,
|
||||
view.container.locator(ACTIVE_DRAG).first(),
|
||||
view.container.locator("#split_by"),
|
||||
);
|
||||
const config = await view.save();
|
||||
expect(config.split_by).toEqual([]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("active column dragged over Sort", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit"],
|
||||
});
|
||||
|
||||
await shadowDragOver(
|
||||
page,
|
||||
view.container.locator(ACTIVE_DRAG).first(),
|
||||
view.container.locator("#sort"),
|
||||
);
|
||||
const config = await view.save();
|
||||
expect(config.sort).toEqual([]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("active column dragged over Filter", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit"],
|
||||
});
|
||||
|
||||
await shadowDragOver(
|
||||
page,
|
||||
view.container.locator(ACTIVE_DRAG).first(),
|
||||
view.container.locator("#filter"),
|
||||
);
|
||||
|
||||
const config = await view.save();
|
||||
expect(config.filter).toEqual([]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,182 @@
|
||||
// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
||||
// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
|
||||
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
|
||||
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
|
||||
// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
|
||||
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
|
||||
// ┃ 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 "@perspective-dev/test";
|
||||
import { compareContentsToSnapshot } from "../helpers.ts";
|
||||
import { PageView } from "@perspective-dev/test";
|
||||
import {
|
||||
ACTIVE_DRAG,
|
||||
getSettingsPanelContents,
|
||||
INACTIVE_DRAG,
|
||||
localDrag,
|
||||
} from "./dragdrop_test_utils";
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(
|
||||
"/rust/perspective-viewer/test/html/column-settings-enabled.html",
|
||||
);
|
||||
await page.evaluate(async () => {
|
||||
while (!(window as any)["__TEST_PERSPECTIVE_READY__"]) {
|
||||
await new Promise((x) => setTimeout(x, 10));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Drag and Drop", () => {
|
||||
test.describe("drop", () => {
|
||||
test("inactive to first active columns", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit"],
|
||||
});
|
||||
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container
|
||||
.locator("#active-columns .column-selector-column")
|
||||
.nth(0);
|
||||
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual(["Category", "Sales", "Profit"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to second active columns", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit"],
|
||||
});
|
||||
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container
|
||||
.locator("#active-columns .column-selector-column")
|
||||
.nth(1);
|
||||
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual(["Sales", "Category", "Profit"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("active to active (reorder)", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit", "Quantity"],
|
||||
});
|
||||
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(ACTIVE_DRAG).first();
|
||||
|
||||
// Drop the first active column onto the third position.
|
||||
const target = view.container
|
||||
.locator("#active-columns .column-selector-column")
|
||||
.nth(2);
|
||||
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual(["Profit", "Quantity", "Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to Group By", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container.locator("#group_by");
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.group_by).toEqual(["Category"]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to Split By", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container.locator("#split_by");
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.split_by).toEqual(["Category"]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to Sort", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container.locator("#sort");
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
expect(config.sort).toEqual([["Category", "asc"]]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to Filter", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container.locator("#filter");
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.filter).toEqual([["Category", "==", null]]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,209 @@
|
||||
// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
||||
// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
|
||||
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
|
||||
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
|
||||
// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
|
||||
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
|
||||
// ┃ 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 "@perspective-dev/test";
|
||||
import { compareContentsToSnapshot } from "@perspective-dev/test";
|
||||
import { PageView } from "@perspective-dev/test";
|
||||
import {
|
||||
ACTIVE_DRAG,
|
||||
getSettingsPanelContents,
|
||||
INACTIVE_DRAG,
|
||||
localDrag,
|
||||
} from "./dragdrop_test_utils";
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(
|
||||
"/rust/perspective-viewer/test/html/column-settings-enabled.html",
|
||||
);
|
||||
await page.evaluate(async () => {
|
||||
while (!(window as any)["__TEST_PERSPECTIVE_READY__"]) {
|
||||
await new Promise((x) => setTimeout(x, 10));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Drag and Drop", () => {
|
||||
test.describe("drop with Column Settings Sidebar open", () => {
|
||||
test("inactive to active while sidebar is open on the active column", async ({
|
||||
page,
|
||||
}) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
|
||||
// Open the sidebar on the current active column.
|
||||
const activeCol =
|
||||
view.settingsPanel.activeColumns.getFirstVisibleColumn();
|
||||
|
||||
await activeCol.editBtn.click();
|
||||
await view.columnSettingsSidebar.container.waitFor({
|
||||
state: "visible",
|
||||
});
|
||||
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = activeCol.container;
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual(["Category", "Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("active to Group By while sidebar is open on the dragged column", async ({
|
||||
page,
|
||||
}) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Category", "Profit"],
|
||||
});
|
||||
|
||||
// Open the sidebar on the first active column (Sales).
|
||||
const activeCol =
|
||||
view.settingsPanel.activeColumns.getFirstVisibleColumn();
|
||||
await activeCol.editBtn.click();
|
||||
await view.columnSettingsSidebar.container.waitFor({
|
||||
state: "visible",
|
||||
});
|
||||
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(ACTIVE_DRAG).first();
|
||||
const target = view.container.locator("#group_by");
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.group_by).toEqual(["Category"]);
|
||||
expect(config.columns).toEqual(["Profit"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
// TODO
|
||||
|
||||
test("inactive to Group By while sidebar is open on a different column", async ({
|
||||
page,
|
||||
}) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit"],
|
||||
});
|
||||
|
||||
// Open sidebar on first active column.
|
||||
const activeCol =
|
||||
view.settingsPanel.activeColumns.getFirstVisibleColumn();
|
||||
await activeCol.editBtn.click();
|
||||
await view.columnSettingsSidebar.container.waitFor({
|
||||
state: "visible",
|
||||
});
|
||||
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container.locator("#group_by");
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.group_by).toEqual(["Category"]);
|
||||
expect(config.columns).toEqual(["Sales", "Profit"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to Split By while sidebar is open", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
|
||||
const activeCol =
|
||||
view.settingsPanel.activeColumns.getFirstVisibleColumn();
|
||||
await activeCol.editBtn.click();
|
||||
await view.columnSettingsSidebar.container.waitFor({
|
||||
state: "visible",
|
||||
});
|
||||
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container.locator("#split_by");
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.split_by).toEqual(["Category"]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to Filter while sidebar is open", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
|
||||
const activeCol =
|
||||
view.settingsPanel.activeColumns.getFirstVisibleColumn();
|
||||
await activeCol.editBtn.click();
|
||||
await view.columnSettingsSidebar.container.waitFor({
|
||||
state: "visible",
|
||||
});
|
||||
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container.locator("#filter");
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.filter).toEqual([["Category", "==", null]]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to Sort while sidebar is open", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
|
||||
const activeCol =
|
||||
view.settingsPanel.activeColumns.getFirstVisibleColumn();
|
||||
await activeCol.editBtn.click();
|
||||
await view.columnSettingsSidebar.container.waitFor({
|
||||
state: "visible",
|
||||
});
|
||||
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container.locator("#sort");
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.sort).toEqual([["Category", "asc"]]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,229 @@
|
||||
// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
||||
// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
|
||||
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
|
||||
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
|
||||
// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
|
||||
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
|
||||
// ┃ 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 "@perspective-dev/test";
|
||||
import { compareContentsToSnapshot } from "../helpers.ts";
|
||||
import { PageView } from "@perspective-dev/test";
|
||||
import {
|
||||
ACTIVE_DRAG,
|
||||
getSettingsPanelContents,
|
||||
INACTIVE_DRAG,
|
||||
localDrag,
|
||||
} from "./dragdrop_test_utils";
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(
|
||||
"/rust/perspective-viewer/test/html/column-selector-modes.html",
|
||||
);
|
||||
await page.evaluate(async () => {
|
||||
while (!(window as any)["__TEST_PERSPECTIVE_READY__"]) {
|
||||
await new Promise((x) => setTimeout(x, 10));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Drag and Drop", () => {
|
||||
test.describe("drop", () => {
|
||||
test("inactive to first active columns", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit"],
|
||||
});
|
||||
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container
|
||||
.locator("#active-columns .column-selector-column")
|
||||
.nth(0);
|
||||
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual([
|
||||
"Category",
|
||||
"Profit",
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to second active columns", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit"],
|
||||
});
|
||||
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container
|
||||
.locator("#active-columns .column-selector-column")
|
||||
.nth(1);
|
||||
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual([
|
||||
"Sales",
|
||||
"Category",
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to third active columns", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit"],
|
||||
});
|
||||
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container
|
||||
.locator("#active-columns .column-selector-column")
|
||||
.nth(2);
|
||||
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual([
|
||||
"Sales",
|
||||
"Profit",
|
||||
"Category",
|
||||
null,
|
||||
null,
|
||||
]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("active to active (reorder)", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({
|
||||
settings: true,
|
||||
columns: ["Sales", "Profit", "Quantity"],
|
||||
});
|
||||
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(ACTIVE_DRAG).first();
|
||||
const target = view.container
|
||||
.locator("#active-columns .column-selector-column")
|
||||
.nth(2);
|
||||
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual([
|
||||
"Quantity",
|
||||
"Profit",
|
||||
"Sales",
|
||||
null,
|
||||
null,
|
||||
]);
|
||||
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to Group By", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container.locator("#group_by");
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.group_by).toEqual(["Category"]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to Split By", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container.locator("#split_by");
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.split_by).toEqual(["Category"]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to Sort", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container.locator("#sort");
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
expect(config.sort).toEqual([["Category", "asc"]]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
|
||||
test("inactive to Filter", async ({ page }) => {
|
||||
const view = new PageView(page);
|
||||
await view.restore({ settings: true, columns: ["Sales"] });
|
||||
const configUpdated = await view.getEventListener(
|
||||
"perspective-config-update",
|
||||
);
|
||||
|
||||
const source = view.container.locator(INACTIVE_DRAG).first();
|
||||
const target = view.container.locator("#filter");
|
||||
await localDrag(page, source, target);
|
||||
await configUpdated();
|
||||
const config = await view.save();
|
||||
expect(config.filter).toEqual([["Category", "==", null]]);
|
||||
expect(config.columns).toEqual(["Sales"]);
|
||||
const contents = await getSettingsPanelContents(page);
|
||||
await compareContentsToSnapshot(contents);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user