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.

Sign up for GitHub

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

Update many table tests to use RTL #7149

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

Update many table tests to use RTL #7149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6c22209
Update table tests to use RTL
ggdouglas Jan 10, 2025
8830714
Completely remove RreactHarnesss from table tests
ggdouglas Jan 10, 2025
2b7daab
Fix resizable table tests with fireEvent
ggdouglas Jan 9, 2025
22d2764
Update versions of @testling-library packages
ggdouglas Jan 27, 2025
34dafce
Use async around failing table tests waiting for menu to open
ggdouglas Jan 27, 2025
0b36779
Replace instance method tests for resizeRowsByApproximateHeight
ggdouglas Jan 27, 2025
15f20fa
Replace harness mouse simulation with RTL fireEvent in failing tests
ggdouglas Jan 27, 2025
548130f
Update core RTL packages to match newest versions
ggdouglas Jan 27, 2025
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
4 changes: 2 additions & 2 deletions packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@
"@blueprintjs/node-build-scripts": "workspace:^",
"@blueprintjs/test-commons": "workspace:^",
"@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.1.0",
"@testing-library/user-event": "^13.5.0",
"@testing-library/react": "^16.2.0",
"@testing-library/user-event": "^14.6.1",
"@types/use-sync-external-store": "0.0.6",
"enzyme": "^3.11.0",
"karma": "^6.4.2",
Expand Down
3 changes: 3 additions & 0 deletions packages/table/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,9 @@
"@blueprintjs/colors": "workspace:^",
"@blueprintjs/node-build-scripts": "workspace:^",
"@blueprintjs/test-commons": "workspace:^",
"@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.2.0",
"@testing-library/user-event": "^14.6.1",
"enzyme": "^3.11.0",
"karma": "^6.4.2",
"mocha": "^10.2.0",
Expand Down
49 changes: 27 additions & 22 deletions packages/table/test/cellTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
* limitations under the License.
*/

import { render } from "@testing-library/react";
import { expect } from "chai";
import * as React from "react";

Expand All @@ -23,44 +24,48 @@ import { Cell } from "../src/cell/cell";
import * as Classes from "../src/common/classes";

import { CellType, expectCellLoading } from "./cellTestUtils";
import { ReactHarness } from "./harness";
import { ElementHarness } from "./harness";

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

afterEach(() => {
harness.unmount();
});

after(() => {
harness.destroy();
});

it("displays regular content", () => {
const cell = harness.mount(
const { container } = render(
<Cell>
<div className="inner">Purple</div>
</Cell>,
);
const cell = new ElementHarness(container);
expect(cell.find(".inner")!.text()).to.equal("Purple");
});

it("renders loading state", () => {
const cellHarness = harness.mount(<Cell loading={true} />);
const { container } = render(<Cell loading={true} />);
const cellHarness = new ElementHarness(container);
expectCellLoading(cellHarness.element!.children[0], CellType.BODY_CELL);
});

it("uses intents for styling", () => {
const cell0 = harness.mount(<Cell intent={Intent.PRIMARY}>Dangerous</Cell>);
expect(cell0.find(`.${Classes.TABLE_CELL}.${CoreClasses.INTENT_PRIMARY}`)!.element).to.exist;
describe("uses intents for styling", () => {
it("primary", () => {
const { container } = render(<Cell intent={Intent.PRIMARY}>Primary</Cell>);
const cell = new ElementHarness(container);
expect(cell.find(`.${Classes.TABLE_CELL}.${CoreClasses.INTENT_PRIMARY}`)!.element).to.exist;
});

const cell1 = harness.mount(<Cell intent={Intent.SUCCESS}>Dangerous</Cell>);
expect(cell1.find(`.${Classes.TABLE_CELL}.${CoreClasses.INTENT_SUCCESS}`)!.element).to.exist;
it("success", () => {
const { container } = render(<Cell intent={Intent.SUCCESS}>Success</Cell>);
const cell = new ElementHarness(container);
expect(cell.find(`.${Classes.TABLE_CELL}.${CoreClasses.INTENT_SUCCESS}`)!.element).to.exist;
});

const cell2 = harness.mount(<Cell intent={Intent.WARNING}>Dangerous</Cell>);
expect(cell2.find(`.${Classes.TABLE_CELL}.${CoreClasses.INTENT_WARNING}`)!.element).to.exist;
it("warning", () => {
const { container } = render(<Cell intent={Intent.WARNING}>Warning</Cell>);
const cell = new ElementHarness(container);
expect(cell.find(`.${Classes.TABLE_CELL}.${CoreClasses.INTENT_WARNING}`)!.element).to.exist;
});

const cell3 = harness.mount(<Cell intent={Intent.DANGER}>Dangerous</Cell>);
expect(cell3.find(`.${Classes.TABLE_CELL}.${CoreClasses.INTENT_DANGER}`)!.element).to.exist;
it("danger", () => {
const { container } = render(<Cell intent={Intent.DANGER}>Dangerous</Cell>);
const cell = new ElementHarness(container);
expect(cell.find(`.${Classes.TABLE_CELL}.${CoreClasses.INTENT_DANGER}`)!.element).to.exist;
});
});
});
87 changes: 40 additions & 47 deletions packages/table/test/columnHeaderCellTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
* limitations under the License.
*/

import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { expect } from "chai";
import { mount } from "enzyme";
import * as React from "react";
Expand All @@ -24,29 +26,21 @@ import { Classes as CoreClasses, H4, Menu, MenuItem } from "@blueprintjs/core";
import { ColumnHeaderCell, type ColumnHeaderCellProps } from "../src";
import * as Classes from "../src/common/classes";

import { ElementHarness, ReactHarness } from "./harness";
import { ElementHarness } from "./harness";
import { createTableOfSize } from "./mocks/table";

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

afterEach(() => {
harness.unmount();
});

after(() => {
harness.destroy();
});

it("Default renderer", () => {
const table = harness.mount(createTableOfSize(3, 2));
const { container } = render(createTableOfSize(3, 2));
const table = new ElementHarness(container);
const text = table.find(`.${Classes.TABLE_COLUMN_NAME_TEXT}`, 1)!.text();
expect(text).to.equal("B");
});

it("renders with custom className if provided", () => {
const CLASS_NAME = "my-custom-class-name";
const table = harness.mount(<ColumnHeaderCell className={CLASS_NAME} />);
const { container } = render(<ColumnHeaderCell className={CLASS_NAME} />);
const table = new ElementHarness(container);
const hasCustomClass = table.find(`.${Classes.TABLE_HEADER}`, 0)!.hasClass(CLASS_NAME);
expect(hasCustomClass).to.be.true;
});
Expand All @@ -71,7 +65,8 @@ describe("<ColumnHeaderCell>", () => {
const columnHeaderCellRenderer = (columnIndex: number) => {
return <ColumnHeaderCell name={`COLUMN-${columnIndex}`} />;
};
const table = harness.mount(createTableOfSize(3, 2, { columnHeaderCellRenderer }));
const { container } = render(createTableOfSize(3, 2, { columnHeaderCellRenderer }));
const table = new ElementHarness(container);
const text = table.find(`.${Classes.TABLE_COLUMN_NAME_TEXT}`, 1)!.text();
expect(text).to.equal("COLUMN-1");
});
Expand All @@ -84,28 +79,28 @@ describe("<ColumnHeaderCell>", () => {
</ColumnHeaderCell>
);
};
const table = harness.mount(createTableOfSize(3, 2, { columnHeaderCellRenderer }));
const { container } = render(createTableOfSize(3, 2, { columnHeaderCellRenderer }));
const table = new ElementHarness(container);
const text = table.find(`.${Classes.TABLE_HEADER_CONTENT} h4`, 2)!.text();
expect(text).to.equal("Header of 2");
});

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

// 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();
});
const { container } = render(createTableOfSize(3, 2, { columnHeaderCellRenderer }));
const table = new ElementHarness(container);

await expectMenuToOpen(table);

// 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;
});

it("custom menu supports popover props", done => {
it("custom menu supports popover props", async () => {
const expectedMenuPopoverProps = {
placement: "right-start" as const,
popoverClassName: "test-popover-class",
Expand All @@ -117,29 +112,28 @@ describe("<ColumnHeaderCell>", () => {
menuPopoverProps={expectedMenuPopoverProps}
/>
);
const table = harness.mount(createTableOfSize(3, 2, { columnHeaderCellRenderer }));
expectMenuToOpen(table);

// 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}-right`),
`expected popover element to have '${expectedMenuPopoverProps.placement}' placement classes applied`,
).to.be.true;
done();
});
const { container } = render(createTableOfSize(3, 2, { columnHeaderCellRenderer }));
const table = new ElementHarness(container);

await expectMenuToOpen(table);

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}-right`),
`expected popover element to have '${expectedMenuPopoverProps.placement}' placement classes applied`,
).to.be.true;
});

it("renders loading state properly", () => {
const columnHeaderCellRenderer = (columnIndex: number) => {
return <ColumnHeaderCell loading={columnIndex === 0} name="Column Header" />;
};
const table = harness.mount(createTableOfSize(2, 1, { columnHeaderCellRenderer }));
const { container } = render(createTableOfSize(2, 1, { columnHeaderCellRenderer }));
const table = new ElementHarness(container);
expect(table.find(`.${Classes.TABLE_COLUMN_HEADERS} .${Classes.TABLE_HEADER}`, 0)!.text()).to.equal("");
expect(table.find(`.${Classes.TABLE_COLUMN_HEADERS} .${Classes.TABLE_HEADER}`, 1)!.text()).to.equal(
"Column Header",
Expand All @@ -156,10 +150,9 @@ describe("<ColumnHeaderCell>", () => {
);
}

function expectMenuToOpen(table: ElementHarness) {
table.find(`.${Classes.TABLE_COLUMN_HEADERS}`)!.mouse("mousemove");
async function expectMenuToOpen(table: ElementHarness) {
const target = table.find(`.${Classes.TABLE_TH_MENU}.${CoreClasses.POPOVER_TARGET}`)!;
target.mouse("click");
await userEvent.click(target.element!);
expect(
target.hasClass(CoreClasses.POPOVER_OPEN),
"expected th menu popover target element to have 'popover open' indicator class",
Expand Down
25 changes: 10 additions & 15 deletions packages/table/test/columnTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,26 @@
* limitations under the License.
*/

import { render } from "@testing-library/react";
import { expect } from "chai";
import * as React from "react";

import { Cell, Column, ColumnLoadingOption, Table2 } from "../src";
import * as Classes from "../src/common/classes";

import { CellType, expectCellLoading } from "./cellTestUtils";
import { type ElementHarness, ReactHarness } from "./harness";
import { ElementHarness } from "./harness";

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

afterEach(() => {
harness.unmount();
});

after(() => {
harness.destroy();
});

it("displays a table with columns", () => {
const table = harness.mount(
const { container } = render(
<Table2 numRows={5}>
<Column />
<Column />
<Column />
</Table2>,
);
const table = new ElementHarness(container);
const selector = `.${Classes.TABLE_QUADRANT_MAIN} .${Classes.TABLE_COLUMN_NAME_TEXT}`;
expect(table.find(selector, 0)?.element).to.exist;
expect(table.find(selector, 1)?.element).to.exist;
Expand All @@ -50,13 +42,14 @@ describe("Column", () => {
});

it("passes column name to renderer or defaults if none specified", () => {
const table = harness.mount(
const { container } = render(
<Table2 numRows={5}>
<Column name="Zero" />
<Column name="One" />
<Column />
</Table2>,
);
const table = new ElementHarness(container);

const selector = `.${Classes.TABLE_QUADRANT_MAIN} .${Classes.TABLE_COLUMN_NAME_TEXT}`;

Expand All @@ -69,7 +62,7 @@ describe("Column", () => {
const NUM_ROWS = 5;
const cellValue = "my cell value";
const cellRenderer = () => <Cell>{cellValue}</Cell>;
const table = harness.mount(
const { container } = render(
<Table2 numRows={NUM_ROWS}>
<Column name="Zero" loadingOptions={[ColumnLoadingOption.CELLS]} cellRenderer={cellRenderer} />
<Column
Expand All @@ -80,6 +73,7 @@ describe("Column", () => {
<Column name="Two" cellRenderer={cellRenderer} />
</Table2>,
);
const table = new ElementHarness(container);

const columnHeaders = table.element!.querySelectorAll(
`.${Classes.TABLE_QUADRANT_TOP} .${Classes.TABLE_COLUMN_HEADERS} .${Classes.TABLE_HEADER}`,
Expand All @@ -96,11 +90,12 @@ describe("Column", () => {

it("passes custom class name to renderer", () => {
const CLASS_NAME = "my-custom-class-name";
const table = harness.mount(
const { container } = render(
<Table2 numRows={5}>
<Column className={CLASS_NAME} />
</Table2>,
);
const table = new ElementHarness(container);
const hasCustomClass = table.find(`.${Classes.TABLE_HEADER}`, 0)?.hasClass(CLASS_NAME);
expect(hasCustomClass).to.be.true;
});
Expand Down
Loading