Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] feat: Overlay2 component #6656

Merged
merged 24 commits into from
Jan 24, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix ColumnHeaderCell table tests
  • Loading branch information
adidahiya committed Jan 22, 2024
commit 330986559f809c270ab7b41c6111df54b4a4c127
1 change: 0 additions & 1 deletion packages/core/test/overlay2/overlay2-test-debugging.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
// Copyright 2024 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "@blueprintjs/colors/lib/scss/colors";
@import "@blueprintjs/core/src/common/variables";

body {
Expand Down
15 changes: 15 additions & 0 deletions packages/table/test/columnHeaderCellTests.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// Copyright 2024 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "@blueprintjs/colors/lib/scss/colors";
@import "@blueprintjs/core/src/common/variables";

body {
min-width: 500px;
min-height: 500px;
}

.#{$ns}-table-container {
// give the table enough space on top to allow a popover to open upwards
margin: 200px 100px;
}
39 changes: 29 additions & 10 deletions packages/table/test/columnHeaderCellTests.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ import * as Classes from "../src/common/classes";
import { ElementHarness, ReactHarness } from "./harness";
import { createTableOfSize } from "./mocks/table";

import "./columnHeaderCellTests.scss";

describe("<ColumnHeaderCell>", () => {
const harness = new ReactHarness();

Expand Down Expand Up @@ -89,19 +91,23 @@ describe("<ColumnHeaderCell>", () => {
expect(text).to.equal("Header of 2");
});

it("renders custom menu items with a menuRenderer callback", () => {
it("renders custom menu items with a menuRenderer callback", done => {
const columnHeaderCellRenderer = (columnIndex: number) => (
<ColumnHeaderCell name={`COL-${columnIndex}`} menuRenderer={renderMenu} />
);
const table = harness.mount(createTableOfSize(3, 2, { columnHeaderCellRenderer }));
expectMenuToOpen(table);

// attempt to click one of the menu items
ElementHarness.document().find('[data-icon="export"]')!.mouse("click");
expect(menuClickSpy.called).to.be.true;
// popovers need a tick to render contents after they open
setTimeout(() => {
// attempt to click one of the menu items
ElementHarness.document().find('[data-icon="export"]')!.mouse("click");
expect(menuClickSpy.called, "expected menu item click handler to be called").to.be.true;
done();
});
});

it("custom menu supports popover props", () => {
it("custom menu supports popover props", done => {
const expectedMenuPopoverProps = {
placement: "top" as const,
popoverClassName: "test-popover-class",
Expand All @@ -115,10 +121,20 @@ describe("<ColumnHeaderCell>", () => {
);
const table = harness.mount(createTableOfSize(3, 2, { columnHeaderCellRenderer }));
expectMenuToOpen(table);
const popover = ElementHarness.document().find(`.${CoreClasses.POPOVER}`);
expect(popover.hasClass(expectedMenuPopoverProps.popoverClassName)).to.be.true;
expect(popover.hasClass(`${CoreClasses.POPOVER_CONTENT_PLACEMENT}-${expectedMenuPopoverProps.placement}`))
.to.be.true;

// popovers need a tick to render contents after they open
setTimeout(() => {
const popover = ElementHarness.document().find(`.${CoreClasses.POPOVER}`);
expect(
popover.hasClass(expectedMenuPopoverProps.popoverClassName),
`expected popover element to have ${expectedMenuPopoverProps.popoverClassName} class`,
).to.be.true;
expect(
popover.hasClass(`${CoreClasses.POPOVER_CONTENT_PLACEMENT}-${expectedMenuPopoverProps.placement}`),
`expected popover element to have '${expectedMenuPopoverProps.placement}' placement classes applied`,
).to.be.true;
done();
});
});

it("renders loading state properly", () => {
Expand Down Expand Up @@ -146,7 +162,10 @@ describe("<ColumnHeaderCell>", () => {
table.find(`.${Classes.TABLE_COLUMN_HEADERS}`)!.mouse("mousemove");
const target = table.find(`.${Classes.TABLE_TH_MENU}.${CoreClasses.POPOVER_TARGET}`)!;
target.mouse("click");
expect(target.hasClass(CoreClasses.POPOVER_OPEN)).to.be.true;
expect(
target.hasClass(CoreClasses.POPOVER_OPEN),
"expected th menu popover target element to have 'popover open' indicator class",
).to.be.true;
}
});

Expand Down
4 changes: 2 additions & 2 deletions packages/table/test/harness.ts
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ export class ReactHarness {

constructor() {
this.container = document.createElement("div");
document.documentElement.appendChild(this.container);
document.body.appendChild(this.container);
}

public mount(component: React.ReactElement<any>) {
Expand All @@ -221,7 +221,7 @@ export class ReactHarness {
}

public destroy() {
document.documentElement.removeChild(this.container);
document.body.removeChild(this.container);
// @ts-ignore
delete this.container;
}
Expand Down
60 changes: 30 additions & 30 deletions packages/table/test/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,34 +16,34 @@

import "@blueprintjs/test-commons/bootstrap";

import "./batcherTests.tsx";
import "./cellTests.tsx";
import "./clipboardTests.ts";
import "./columnHeaderCellTests.tsx";
import "./columnTests.tsx";
import "./batcherTests";
import "./cellTests";
import "./clipboardTests";
import "./columnHeaderCellTests";
import "./columnTests";
import "./common/internal";
import "./editableCell2Tests.tsx";
import "./editableCellTests.tsx";
import "./editableNameTests.tsx";
import "./formats/jsonFormatTests.tsx";
import "./formats/truncatedFormatTests.tsx";
import "./gridTests.ts";
import "./guidesTests.tsx";
import "./loadableContentTests.tsx";
import "./loadingOptionsTests.tsx";
import "./locatorTests.tsx";
import "./menusTests.tsx";
import "./quadrants/tableQuadrantStackTests.tsx";
import "./quadrants/tableQuadrantTests.tsx";
import "./rectTests.ts";
import "./regionsTests.ts";
import "./reorderableTests.tsx";
import "./resizableTests.tsx";
import "./rowHeaderCellTests.tsx";
import "./selectableTests.tsx";
import "./selectionTests.tsx";
import "./table2Tests.tsx";
import "./tableBody2Tests.tsx";
import "./tableBodyTests.tsx";
import "./tableTests.tsx";
import "./utilsTests.ts";
import "./editableCell2Tests";
import "./editableCellTests";
import "./editableNameTests";
import "./formats/jsonFormatTests";
import "./formats/truncatedFormatTests";
import "./gridTests";
import "./guidesTests";
import "./loadableContentTests";
import "./loadingOptionsTests";
import "./locatorTests";
import "./menusTests";
import "./quadrants/tableQuadrantStackTests";
import "./quadrants/tableQuadrantTests";
import "./rectTests";
import "./regionsTests";
import "./reorderableTests";
import "./resizableTests";
import "./rowHeaderCellTests";
import "./selectableTests";
import "./selectionTests";
import "./table2Tests";
import "./tableBody2Tests";
import "./tableBodyTests";
import "./tableTests";
import "./utilsTests";