Skip to content

Commit db3f697

Browse files
Light2DarkLight2Dark
committed
fix tests
1 parent ef76589 commit db3f697

File tree

2 files changed

+44
-212
lines changed

2 files changed

+44
-212
lines changed

‎frontend/src/components/data-table/selection-panel/__tests__/data-selection.test.tsx

Lines changed: 29 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/* Copyright 2024 Marimo. All rights reserved. */
22

33
import { describe, expect, it, vi } from "vitest";
4-
import { render, screen, fireEvent, within } from "@testing-library/react";
4+
import { render, screen } from "@testing-library/react";
55
import { DataSelectionPanel } from "../data-selection";
6-
import type { Row } from "@tanstack/react-table";
76
import { Provider } from "jotai";
87
import { TooltipProvider } from "@/components/ui/tooltip";
9-
import { PanelGroup } from "react-resizable-panels";
8+
import type { GetRowResult } from "@/plugins/impl/DataTablePlugin";
9+
import type { FieldTypesWithExternalType } from "../../types";
1010

1111
const renderWithProviders = (component: React.ReactNode) => {
1212
return render(
@@ -17,178 +17,37 @@ const renderWithProviders = (component: React.ReactNode) => {
1717
};
1818

1919
describe("DataSelectionPanel", () => {
20-
const mockRows = [
21-
{
22-
getAllCells: () => [
23-
{
24-
column: { id: "name", columnDef: { meta: { dataType: "string" } } },
25-
getValue: () => "John",
26-
renderValue: () => "John",
27-
},
28-
{
29-
column: { id: "age", columnDef: { meta: { dataType: "number" } } },
30-
getValue: () => 30,
31-
renderValue: () => "30",
32-
},
33-
],
34-
},
35-
] as Array<Row<unknown>>;
36-
37-
const mockClosePanel = vi.fn();
38-
39-
it("renders data in selection panel", () => {
40-
renderWithProviders(
41-
<DataSelectionPanel rows={mockRows} closePanel={mockClosePanel} />,
42-
);
43-
44-
expect(screen.getByText("John")).toBeInTheDocument();
45-
expect(screen.getByText("30")).toBeInTheDocument();
46-
});
47-
48-
it("renders in overlay mode when isOverlay is true", () => {
49-
renderWithProviders(
50-
<PanelGroup direction="horizontal">
51-
<DataSelectionPanel rows={mockRows} closePanel={mockClosePanel} />
52-
</PanelGroup>,
53-
);
54-
55-
const overlayButton = screen.getByRole("button", {
56-
name: /exit overlay mode/i,
20+
const mockFieldTypes: FieldTypesWithExternalType = [
21+
["name", ["string", "string"]],
22+
["age", ["number", "number"]],
23+
];
24+
25+
const mockGetRow = vi
26+
.fn()
27+
.mockImplementation((rowIdx: number): Promise<GetRowResult> => {
28+
const mockData = [
29+
{ name: "John", age: 30 },
30+
{ name: "Jane", age: 25 },
31+
{ name: "Alice", age: 35 },
32+
];
33+
return Promise.resolve({ rows: [mockData[rowIdx]] });
5734
});
58-
fireEvent.click(overlayButton);
59-
60-
// Check if the panel is rendered with overlay styles
61-
expect(
62-
screen.getByRole("button", { name: /overlay mode/i }),
63-
).toBeInTheDocument();
64-
});
65-
66-
it("calls closePanel when close button is clicked", () => {
67-
renderWithProviders(
68-
<DataSelectionPanel rows={mockRows} closePanel={mockClosePanel} />,
69-
);
70-
71-
const closeButton = screen.getByRole("button", {
72-
name: /close selection panel/i,
73-
});
74-
fireEvent.click(closeButton);
75-
76-
expect(mockClosePanel).toHaveBeenCalled();
77-
});
78-
});
7935

80-
describe("DataSelection", () => {
81-
const JOHNS_AGE = 30;
82-
const mockRows = [
83-
{
84-
getAllCells: () => [
85-
{
86-
column: { id: "name", columnDef: { meta: { dataType: "string" } } },
87-
getValue: () => "John",
88-
renderValue: () => "John",
89-
},
90-
{
91-
column: { id: "age", columnDef: { meta: { dataType: "number" } } },
92-
getValue: () => JOHNS_AGE,
93-
renderValue: () => JOHNS_AGE.toString(),
94-
},
95-
],
96-
},
97-
{
98-
getAllCells: () => [
99-
{
100-
column: { id: "name", columnDef: { meta: { dataType: "string" } } },
101-
getValue: () => "Jane",
102-
renderValue: () => "Jane",
103-
},
104-
{
105-
column: { id: "age", columnDef: { meta: { dataType: "number" } } },
106-
getValue: () => 25,
107-
renderValue: () => "25",
108-
},
109-
],
110-
},
111-
{
112-
getAllCells: () => [
113-
{
114-
column: { id: "name", columnDef: { meta: { dataType: "string" } } },
115-
getValue: () => "Alice",
116-
renderValue: () => "Alice",
117-
},
118-
{
119-
column: { id: "age", columnDef: { meta: { dataType: "number" } } },
120-
getValue: () => 35,
121-
renderValue: () => "35",
122-
},
123-
],
124-
},
125-
] as Array<Row<unknown>>;
126-
127-
const mockClosePanel = vi.fn();
128-
129-
it("navigates between rows using navigation buttons", () => {
130-
renderWithProviders(
131-
<DataSelectionPanel rows={mockRows} closePanel={mockClosePanel} />,
132-
);
133-
134-
// Check initial state
135-
expect(screen.getByText("Row 1 of 3")).toBeInTheDocument();
136-
expect(screen.getByText("John")).toBeInTheDocument();
137-
138-
// Navigate to next row
139-
const nextButton = screen.getByRole("button", { name: "Next row" });
140-
fireEvent.click(nextButton);
141-
142-
expect(screen.getByText("Row 2 of 3")).toBeInTheDocument();
143-
expect(screen.getByText("Jane")).toBeInTheDocument();
144-
145-
// Navigate to previous row
146-
const prevButton = screen.getByRole("button", { name: "Previous row" });
147-
fireEvent.click(prevButton);
148-
149-
expect(screen.getByText("Row 1 of 3")).toBeInTheDocument();
150-
expect(screen.getByText("John")).toBeInTheDocument();
151-
152-
// Navigate to last row
153-
const lastButton = screen.getByRole("button", { name: "Go to last row" });
154-
fireEvent.click(lastButton);
155-
156-
expect(screen.getByText("Row 3 of 3")).toBeInTheDocument();
157-
expect(screen.getByText("Alice")).toBeInTheDocument();
158-
159-
// Navigate to first row
160-
const firstButton = screen.getByRole("button", { name: "Go to first row" });
161-
fireEvent.click(firstButton);
162-
163-
expect(screen.getByText("Row 1 of 3")).toBeInTheDocument();
164-
expect(screen.getByText("John")).toBeInTheDocument();
165-
});
166-
167-
it("filters rows based on search input", () => {
168-
renderWithProviders(
169-
<DataSelectionPanel rows={mockRows} closePanel={mockClosePanel} />,
170-
);
171-
172-
// Search for John
173-
const searchInput = screen.getByTestId("selection-panel-search-input");
174-
fireEvent.change(searchInput, { target: { value: "John" } });
175-
176-
expect(screen.getByText("John")).toBeInTheDocument();
177-
// Check that the other column is not in the document
178-
expect(screen.queryByText(JOHNS_AGE.toString())).not.toBeInTheDocument();
179-
});
36+
const mockSetRowIdx = vi.fn();
18037

181-
it("renders copy button on hover", () => {
38+
it("renders data in selection panel", async () => {
18239
renderWithProviders(
183-
<DataSelectionPanel rows={mockRows} closePanel={mockClosePanel} />,
40+
<DataSelectionPanel
41+
rowIdx={0}
42+
setRowIdx={mockSetRowIdx}
43+
totalRows={3}
44+
fieldTypes={mockFieldTypes}
45+
getRow={mockGetRow}
46+
/>,
18447
);
18548

186-
const row = screen.getByText("John").closest("tr");
187-
if (row) {
188-
fireEvent.mouseEnter(row);
189-
expect(
190-
within(row).getByRole("button", { name: /copy to clipboard/i }),
191-
).toBeInTheDocument();
192-
}
49+
// Wait for the data to load
50+
expect(await screen.findByText("John")).toBeInTheDocument();
51+
expect(await screen.findByText("30")).toBeInTheDocument();
19352
});
19453
});

‎frontend/src/components/data-table/selection-panel/__tests__/filter-rows.test.ts

Lines changed: 15 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,28 @@
22

33
import { describe, expect, it } from "vitest";
44
import { filterRows } from "../data-selection";
5-
import type { Cell } from "@tanstack/react-table";
65

76
describe("filterRows", () => {
8-
const createMockCell = (value: unknown): Cell<unknown, unknown> =>
9-
({
10-
getValue: () => value,
11-
column: {
12-
id: "test",
13-
columnDef: {
14-
meta: {},
15-
},
16-
},
17-
}) as Cell<unknown, unknown>;
7+
const defaultRowValues = {
8+
name: "John",
9+
age: 30,
10+
};
1811

1912
it("should filter rows based on column name", () => {
20-
const rowValues = {
21-
name: createMockCell("John"),
22-
age: createMockCell(30),
23-
};
24-
25-
const result = filterRows(rowValues, "name");
13+
const result = filterRows(defaultRowValues, "name");
2614
expect(result).toHaveLength(1);
2715
expect(result[0][0]).toBe("name");
2816
});
2917

3018
it("should filter rows based on cell value", () => {
31-
const rowValues = {
32-
name: createMockCell("John"),
33-
age: createMockCell(30),
34-
};
35-
36-
const result = filterRows(rowValues, "john");
19+
const result = filterRows(defaultRowValues, "john");
3720
expect(result).toHaveLength(1);
3821
expect(result[0][0]).toBe("name");
3922
});
4023

4124
it("should handle object values by converting them to strings", () => {
4225
const rowValues = {
43-
data: createMockCell({ key: "value" }),
26+
data: { key: "value" },
4427
};
4528

4629
const result = filterRows(rowValues, "value");
@@ -50,8 +33,8 @@ describe("filterRows", () => {
5033

5134
it("should be case insensitive", () => {
5235
const rowValues = {
53-
Name: createMockCell("John"),
54-
AGE: createMockCell(30),
36+
Name: "John",
37+
AGE: 30,
5538
};
5639

5740
const result = filterRows(rowValues, "name");
@@ -61,8 +44,8 @@ describe("filterRows", () => {
6144

6245
it("should handle partial matches", () => {
6346
const rowValues = {
64-
firstName: createMockCell("John"),
65-
lastName: createMockCell("Doe"),
47+
firstName: "John",
48+
lastName: "Doe",
6649
};
6750

6851
const result = filterRows(rowValues, "name");
@@ -71,29 +54,19 @@ describe("filterRows", () => {
7154
});
7255

7356
it("should return empty array when no matches found", () => {
74-
const rowValues = {
75-
name: createMockCell("John"),
76-
age: createMockCell(30),
77-
};
78-
79-
const result = filterRows(rowValues, "xyz");
57+
const result = filterRows(defaultRowValues, "xyz");
8058
expect(result).toHaveLength(0);
8159
});
8260

8361
it("should handle empty search query", () => {
84-
const rowValues = {
85-
name: createMockCell("John"),
86-
age: createMockCell(30),
87-
};
88-
89-
const result = filterRows(rowValues, "");
62+
const result = filterRows(defaultRowValues, "");
9063
expect(result).toHaveLength(2);
9164
});
9265

9366
it("should handle null values", () => {
9467
const rowValues = {
95-
name: createMockCell(null),
96-
age: createMockCell(30),
68+
name: null,
69+
age: 30,
9770
};
9871

9972
const result = filterRows(rowValues, "null");

0 commit comments

Comments
 (0)