Skip to content

Commit 11eef55

Browse files
iobuhoviobuhov
committed
refactor: rewrite header tests
1 parent 55cb868 commit 11eef55

File tree

4 files changed

+185
-227
lines changed

4 files changed

+185
-227
lines changed

‎packages/pluggableWidgets/datagrid-web/src/components/Header.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,12 @@ export interface HeaderProps {
2929
}
3030

3131
export function Header(props: HeaderProps): ReactElement {
32-
const { columnsFilterable, id: gridId } = useDatagridConfig();
32+
const { columnsFilterable, id: gridId, columnsDraggable, columnsResizable, columnsSortable } = useDatagridConfig();
3333
const columnsStore = useColumnsStore();
3434
const column = useColumn();
35-
const { canDrag, canSort } = column;
35+
const canDrag = columnsDraggable && column.canDrag;
36+
const canSort = columnsSortable && column.canSort;
37+
const canResize = columnsResizable && column.canResize;
3638

3739
const draggableProps = useDraggable(
3840
canDrag,
@@ -86,7 +88,7 @@ export function Header(props: HeaderProps): ReactElement {
8688
</div>
8789
)}
8890
</div>
89-
{column.canResize ? props.resizer : null}
91+
{canResize ? props.resizer : null}
9092
</div>
9193
);
9294
}

‎packages/pluggableWidgets/datagrid-web/src/components/__tests__/Header.spec.tsx‎

Lines changed: 125 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,176 @@
1+
import { dynamic } from "@mendix/widget-plugin-test-utils";
12
import "@testing-library/jest-dom";
23
import { render } from "@testing-library/react";
34
import userEvent from "@testing-library/user-event";
4-
import { createElement } from "react";
5-
import { ColumnId, GridColumn } from "../../typings/GridColumn";
5+
import { ContainerProvider } from "brandi-react";
6+
import { createDatagridContainer } from "../../model/containers/createDatagridContainer";
7+
import { CORE_TOKENS } from "../../model/tokens";
8+
import { column, mockContainerProps } from "../../utils/test-utils";
9+
import { ColumnProvider } from "../ColumnProvider";
610
import { ColumnResizer } from "../ColumnResizer";
711
import { Header, HeaderProps } from "../Header";
812

913
describe("Header", () => {
1014
it("renders the structure correctly", () => {
11-
const component = render(<Header {...mockHeaderProps()} />);
15+
const props = mockContainerProps({
16+
columns: [column("Column 1")]
17+
});
18+
const [container] = createDatagridContainer(props);
19+
const columns = container.get(CORE_TOKENS.columnsStore);
20+
const col = columns.visibleColumns[0];
21+
22+
const component = render(
23+
<ContainerProvider container={container}>
24+
<ColumnProvider column={col}>
25+
<Header {...mockHeaderProps()} />
26+
</ColumnProvider>
27+
</ContainerProvider>
28+
);
1229

1330
expect(component.asFragment()).toMatchSnapshot();
1431
});
1532

1633
it("renders the structure correctly when sortable", () => {
17-
const props = mockHeaderProps();
18-
props.column.canSort = true;
19-
props.sortable = true;
20-
const component = render(<Header {...props} />);
34+
const columnsType = column("Column 1", col => {
35+
col.sortable = true;
36+
});
37+
const props = mockContainerProps({
38+
columns: [columnsType]
39+
});
40+
const [container] = createDatagridContainer(props);
41+
const columns = container.get(CORE_TOKENS.columnsStore);
42+
const col = columns.visibleColumns[0];
43+
44+
const component = render(
45+
<ContainerProvider container={container}>
46+
<ColumnProvider column={col}>
47+
<Header {...mockHeaderProps()} />
48+
</ColumnProvider>
49+
</ContainerProvider>
50+
);
2151

2252
expect(component.asFragment()).toMatchSnapshot();
2353
});
2454

2555
it("renders the structure correctly when resizable", () => {
26-
const props = mockHeaderProps();
27-
props.column.canResize = true;
28-
props.resizable = true;
29-
const component = render(<Header {...props} />);
56+
const columnsType = column("Column 1", col => {
57+
col.resizable = true;
58+
});
59+
const props = mockContainerProps({
60+
columns: [columnsType]
61+
});
62+
const [container] = createDatagridContainer(props);
63+
const columns = container.get(CORE_TOKENS.columnsStore);
64+
const col = columns.visibleColumns[0];
65+
66+
const component = render(
67+
<ContainerProvider container={container}>
68+
<ColumnProvider column={col}>
69+
<Header {...mockHeaderProps()} resizer={<div>resizer</div>} />
70+
</ColumnProvider>
71+
</ContainerProvider>
72+
);
3073

3174
expect(component.asFragment()).toMatchSnapshot();
3275
});
3376

3477
it("renders the structure correctly when draggable", () => {
35-
const props = mockHeaderProps();
36-
props.column.canDrag = true;
37-
props.draggable = true;
38-
const component = render(<Header {...props} />);
39-
40-
expect(component.asFragment()).toMatchSnapshot();
41-
});
42-
43-
it("renders the structure correctly when filterable with no custom filter", () => {
44-
const props = mockHeaderProps();
45-
props.filterable = true;
46-
const component = render(<Header {...props} />);
78+
const columnsType = column("Column 1", col => {
79+
col.draggable = true;
80+
});
81+
const props = mockContainerProps({
82+
columns: [columnsType]
83+
});
84+
const [container] = createDatagridContainer(props);
85+
const columns = container.get(CORE_TOKENS.columnsStore);
86+
const col = columns.visibleColumns[0];
87+
88+
const component = render(
89+
<ContainerProvider container={container}>
90+
<ColumnProvider column={col}>
91+
<Header {...mockHeaderProps()} />
92+
</ColumnProvider>
93+
</ContainerProvider>
94+
);
4795

4896
expect(component.asFragment()).toMatchSnapshot();
4997
});
5098

5199
it("renders the structure correctly when filterable with custom filter", () => {
52-
const props = mockHeaderProps();
53-
props.filterable = true;
54-
props.filterWidget = (
55-
<div>
56-
<label>Date picker filter</label>
57-
<input type="date" />
58-
</div>
100+
const columnsType = column("Column 1", col => {
101+
col.filter = <div>Custom filter</div>;
102+
});
103+
const props = mockContainerProps({
104+
columns: [columnsType]
105+
});
106+
const [container] = createDatagridContainer(props);
107+
const columns = container.get(CORE_TOKENS.columnsStore);
108+
const col = columns.visibleColumns[0];
109+
110+
const component = render(
111+
<ContainerProvider container={container}>
112+
<ColumnProvider column={col}>
113+
<Header {...mockHeaderProps()} />
114+
</ColumnProvider>
115+
</ContainerProvider>
59116
);
60-
const component = render(<Header {...props} />);
61117

62118
expect(component.asFragment()).toMatchSnapshot();
63119
});
64120

65-
it("calls setSortBy store function with correct parameters when sortable", async () => {
121+
it("calls sort function when sortable", async () => {
66122
const user = userEvent.setup();
67-
const mockedFunction = jest.fn();
68-
const props = mockHeaderProps();
69-
props.sortable = true;
70-
props.column = {
71-
...props.column,
72-
columnId: "0" as ColumnId,
73-
columnNumber: 0,
74-
header: "My sortable column",
75-
canSort: true,
76-
sortDir: undefined,
77-
toggleSort: mockedFunction
78-
} as any;
79-
const component = render(<Header {...props} />);
80-
const button = component.getByRole("button");
123+
const columnsType = column("Column 1", col => {
124+
col.sortable = true;
125+
});
126+
const props = mockContainerProps({
127+
columns: [columnsType]
128+
});
129+
const [container] = createDatagridContainer(props);
130+
const columns = container.get(CORE_TOKENS.columnsStore);
131+
const col = columns.visibleColumns[0];
132+
const spy = jest.spyOn(col, "toggleSort");
133+
134+
const component = render(
135+
<ContainerProvider container={container}>
136+
<ColumnProvider column={col}>
137+
<Header {...mockHeaderProps()} />
138+
</ColumnProvider>
139+
</ContainerProvider>
140+
);
141+
const button = component.getByLabelText("sort Column 1");
81142

82143
expect(button).toBeInTheDocument();
83144
await user.click(button);
84-
expect(mockedFunction).toHaveBeenCalled();
85-
});
86-
87-
it("renders the structure correctly when filterable with custom classes", () => {
88-
const props = mockHeaderProps();
89-
props.filterable = true;
90-
91-
const component = render(<Header {...props} className="my-custom-class" />);
92-
93-
expect(component.asFragment()).toMatchSnapshot();
94-
});
95-
96-
it("renders the structure correctly when is hidden and preview", () => {
97-
const props = mockHeaderProps();
98-
props.column.initiallyHidden = true;
99-
props.hidable = true;
100-
props.preview = true;
101-
102-
const component = render(<Header {...props} />);
103-
104-
expect(component.asFragment()).toMatchSnapshot();
145+
expect(spy).toHaveBeenCalled();
105146
});
106147

107148
it("renders the structure correctly when value is empty", () => {
108-
const props = mockHeaderProps();
109-
props.column.header = " ";
110-
111-
const component = render(<Header {...props} />);
112-
149+
const columnsType = column("Column 1", col => {
150+
col.header = dynamic(" ");
151+
});
152+
const props = mockContainerProps({
153+
columns: [columnsType]
154+
});
155+
const [container] = createDatagridContainer(props);
156+
const columns = container.get(CORE_TOKENS.columnsStore);
157+
const col = columns.visibleColumns[0];
158+
159+
const component = render(
160+
<ContainerProvider container={container}>
161+
<ColumnProvider column={col}>
162+
<Header {...mockHeaderProps()} />
163+
</ColumnProvider>
164+
</ContainerProvider>
165+
);
113166
expect(component.asFragment()).toMatchSnapshot();
114167
});
115168
});
116169

117170
function mockHeaderProps(): HeaderProps {
118171
return {
119-
gridId: "dg1",
120-
column: {
121-
columnId: "dg1-column0" as ColumnId,
122-
columnIndex: 0,
123-
header: "Test",
124-
sortDir: undefined,
125-
toggleSort: () => undefined,
126-
setHeaderElementRef: jest.fn(),
127-
alignment: "left",
128-
canDrag: false,
129-
columnClass: () => undefined,
130-
initiallyHidden: false,
131-
renderCellContent: () => createElement("div"),
132-
isAvailable: true,
133-
wrapText: false,
134-
canHide: false,
135-
isHidden: false,
136-
toggleHidden: () => undefined,
137-
canSort: false,
138-
canResize: false,
139-
size: undefined,
140-
setSize: () => undefined,
141-
getCssWidth: () => "100px"
142-
} as GridColumn,
143-
draggable: false,
144172
dropTarget: undefined,
145-
filterable: false,
146-
filterWidget: undefined,
147-
hidable: false,
148-
resizable: false,
149173
resizer: <ColumnResizer setColumnWidth={jest.fn()} />,
150-
sortable: false,
151-
swapColumns: jest.fn(),
152174
setDropTarget: jest.fn(),
153175
setIsDragging: jest.fn()
154176
};

0 commit comments

Comments
 (0)