Skip to content

Commit 03ce0fa

Browse files
iobuhoviobuhov
committed
test: fix unit tests
1 parent 21376eb commit 03ce0fa

File tree

5 files changed

+176
-46
lines changed

5 files changed

+176
-46
lines changed

‎packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import { GalleryTopBar } from "./GalleryTopBar";
1313
import { ListBox } from "./ListBox";
1414
import { ListItem } from "./ListItem";
1515

16-
import { LoadMore, LoadMoreButton as LoadMorePreview } from "src/components/LoadMore";
1716
import { PaginationEnum, ShowPagingButtonsEnum } from "typings/GalleryProps";
17+
import { LoadMore, LoadMoreButton as LoadMorePreview } from "../components/LoadMore";
1818
import { ItemEventsController } from "../typings/ItemEventsController";
1919

2020
export interface GalleryProps<T extends ObjectItem> {

‎packages/pluggableWidgets/gallery-web/src/components/LoadMore.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import cn from "classnames";
22
import { observer } from "mobx-react-lite";
33
import { createElement } from "react";
4-
import { useGalleryRootScope } from "src/helpers/root-context";
4+
import { useGalleryRootScope } from "../helpers/root-context";
55

66
export function LoadMoreButton(props: JSX.IntrinsicElements["button"]): React.ReactNode {
77
return (

‎packages/pluggableWidgets/gallery-web/src/components/__tests__/Gallery.spec.tsx

Lines changed: 55 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { render, waitFor } from "@testing-library/react";
44
import { ObjectItem } from "mendix";
55
import { createElement } from "react";
66
import { ItemHelperBuilder } from "../../utils/builders/ItemHelperBuilder";
7-
import { mockItemHelperWithAction, mockProps, setup } from "../../utils/test-utils";
7+
import { mockItemHelperWithAction, mockProps, setup, withGalleryContext } from "../../utils/test-utils";
88
import { Gallery } from "../Gallery";
99

1010
describe("Gallery", () => {
@@ -13,14 +13,14 @@ describe("Gallery", () => {
1313
});
1414
describe("DOM Structure", () => {
1515
it("renders correctly", () => {
16-
const { asFragment } = render(<Gallery {...mockProps()} />);
16+
const { asFragment } = render(withGalleryContext(<Gallery {...mockProps()} />));
1717

1818
expect(asFragment()).toMatchSnapshot();
1919
});
2020

2121
it("renders correctly with onclick event", () => {
2222
const { asFragment } = render(
23-
<Gallery {...mockProps()} itemHelper={mockItemHelperWithAction(jest.fn())} />
23+
withGalleryContext(<Gallery {...mockProps()} itemHelper={mockItemHelperWithAction(jest.fn())} />)
2424
);
2525

2626
expect(asFragment()).toMatchSnapshot();
@@ -31,7 +31,7 @@ describe("Gallery", () => {
3131
it("runs action on item click", async () => {
3232
const execute = jest.fn();
3333
const props = mockProps({ onClick: listAction(mock => ({ ...mock(), execute })) });
34-
const { user, getAllByRole } = setup(<Gallery {...props} />);
34+
const { user, getAllByRole } = setup(withGalleryContext(<Gallery {...props} />));
3535
const [item] = getAllByRole("listitem");
3636

3737
await user.click(item);
@@ -41,7 +41,7 @@ describe("Gallery", () => {
4141
it("runs action on Enter|Space press when item is in focus", async () => {
4242
const execute = jest.fn();
4343
const props = mockProps({ onClick: listAction(mock => ({ ...mock(), execute })) });
44-
const { user, getAllByRole } = setup(<Gallery {...props} header={<span />} />);
44+
const { user, getAllByRole } = setup(withGalleryContext(<Gallery {...props} header={<span />} />));
4545
const [item] = getAllByRole("listitem");
4646

4747
await user.tab();
@@ -55,37 +55,39 @@ describe("Gallery", () => {
5555

5656
describe("with different configurations per platform", () => {
5757
it("contains correct classes for desktop", () => {
58-
const { getByRole } = render(<Gallery {...mockProps()} desktopItems={12} />);
58+
const { getByRole } = render(withGalleryContext(<Gallery {...mockProps()} desktopItems={12} />));
5959
const list = getByRole("list");
6060
expect(list).toHaveClass("widget-gallery-lg-12");
6161
});
6262

6363
it("contains correct classes for tablet", () => {
64-
const { getByRole } = render(<Gallery {...mockProps()} tabletItems={6} />);
64+
const { getByRole } = render(withGalleryContext(<Gallery {...mockProps()} tabletItems={6} />));
6565
const list = getByRole("list");
6666
expect(list).toHaveClass("widget-gallery-md-6");
6767
});
6868

6969
it("contains correct classes for phone", () => {
70-
const { getByRole } = render(<Gallery {...mockProps()} phoneItems={3} />);
70+
const { getByRole } = render(withGalleryContext(<Gallery {...mockProps()} phoneItems={3} />));
7171
const list = getByRole("list");
7272
expect(list).toHaveClass("widget-gallery-sm-3");
7373
});
7474
});
7575

7676
describe("with custom classes", () => {
7777
it("contains correct classes in the wrapper", () => {
78-
const { container } = render(<Gallery {...mockProps()} className="custom-class" />);
78+
const { container } = render(withGalleryContext(<Gallery {...mockProps()} className="custom-class" />));
7979

8080
expect(container.querySelector(".custom-class")).toBeVisible();
8181
});
8282

8383
it("contains correct classes in the items", () => {
8484
const { getAllByRole } = render(
85-
<Gallery
86-
{...mockProps()}
87-
itemHelper={ItemHelperBuilder.sample(b => b.withItemClass(listExp(() => "custom-class")))}
88-
/>
85+
withGalleryContext(
86+
<Gallery
87+
{...mockProps()}
88+
itemHelper={ItemHelperBuilder.sample(b => b.withItemClass(listExp(() => "custom-class")))}
89+
/>
90+
)
8991
);
9092
const [item] = getAllByRole("listitem");
9193

@@ -96,7 +98,9 @@ describe("Gallery", () => {
9698
describe("with pagination", () => {
9799
it("renders correctly", () => {
98100
const { asFragment } = render(
99-
<Gallery {...mockProps()} paging paginationPosition="top" numberOfItems={20} hasMoreItems />
101+
withGalleryContext(
102+
<Gallery {...mockProps()} paging paginationPosition="top" numberOfItems={20} hasMoreItems />
103+
)
100104
);
101105

102106
expect(asFragment()).toMatchSnapshot();
@@ -105,14 +109,16 @@ describe("Gallery", () => {
105109
it("triggers correct events on click next button", async () => {
106110
const setPage = jest.fn();
107111
const { user, getByLabelText } = setup(
108-
<Gallery
109-
{...mockProps()}
110-
paging
111-
paginationPosition="top"
112-
numberOfItems={20}
113-
hasMoreItems
114-
setPage={setPage}
115-
/>
112+
withGalleryContext(
113+
<Gallery
114+
{...mockProps()}
115+
paging
116+
paginationPosition="top"
117+
numberOfItems={20}
118+
hasMoreItems
119+
setPage={setPage}
120+
/>
121+
)
116122
);
117123

118124
const next = getByLabelText("Go to next page");
@@ -124,11 +130,13 @@ describe("Gallery", () => {
124130
describe("with empty option", () => {
125131
it("renders correctly", () => {
126132
const { asFragment } = render(
127-
<Gallery
128-
{...mockProps()}
129-
items={[]}
130-
emptyPlaceholderRenderer={renderWrapper => renderWrapper(<span>No items found</span>)}
131-
/>
133+
withGalleryContext(
134+
<Gallery
135+
{...mockProps()}
136+
items={[]}
137+
emptyPlaceholderRenderer={renderWrapper => renderWrapper(<span>No items found</span>)}
138+
/>
139+
)
132140
);
133141

134142
expect(asFragment()).toMatchSnapshot();
@@ -138,28 +146,32 @@ describe("Gallery", () => {
138146
describe("with accessibility properties", () => {
139147
it("renders correctly without items", () => {
140148
const { asFragment } = render(
141-
<Gallery
142-
{...mockProps()}
143-
items={[]}
144-
headerTitle="filter title"
145-
emptyMessageTitle="empty message"
146-
emptyPlaceholderRenderer={renderWrapper => renderWrapper(<span>No items found</span>)}
147-
/>
149+
withGalleryContext(
150+
<Gallery
151+
{...mockProps()}
152+
items={[]}
153+
headerTitle="filter title"
154+
emptyMessageTitle="empty message"
155+
emptyPlaceholderRenderer={renderWrapper => renderWrapper(<span>No items found</span>)}
156+
/>
157+
)
148158
);
149159

150160
expect(asFragment()).toMatchSnapshot();
151161
});
152162

153163
it("renders correctly with items", () => {
154164
const { asFragment } = render(
155-
<Gallery
156-
{...mockProps()}
157-
items={[{ id: "1" } as ObjectItem, { id: "2" } as ObjectItem, { id: "3" } as ObjectItem]}
158-
ariaLabelItem={(item: ObjectItem) => `title for '${item.id}'`}
159-
headerTitle="filter title"
160-
emptyMessageTitle="empty message"
161-
emptyPlaceholderRenderer={renderWrapper => renderWrapper(<span>No items found</span>)}
162-
/>
165+
withGalleryContext(
166+
<Gallery
167+
{...mockProps()}
168+
items={[{ id: "1" } as ObjectItem, { id: "2" } as ObjectItem, { id: "3" } as ObjectItem]}
169+
ariaLabelItem={(item: ObjectItem) => `title for '${item.id}'`}
170+
headerTitle="filter title"
171+
emptyMessageTitle="empty message"
172+
emptyPlaceholderRenderer={renderWrapper => renderWrapper(<span>No items found</span>)}
173+
/>
174+
)
163175
);
164176

165177
expect(asFragment()).toMatchSnapshot();
@@ -169,7 +181,7 @@ describe("Gallery", () => {
169181
describe("without filters", () => {
170182
it("renders structure without header container", () => {
171183
const props = { ...mockProps(), showHeader: false, header: undefined };
172-
const { asFragment } = render(<Gallery {...props} />);
184+
const { asFragment } = render(withGalleryContext(<Gallery {...props} />));
173185

174186
expect(asFragment()).toMatchSnapshot();
175187
});

‎packages/pluggableWidgets/gallery-web/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ exports[`Gallery DOM Structure renders correctly 1`] = `
66
class="widget-gallery my-gallery"
77
data-focusindex="0"
88
>
9+
<div
10+
class="widget-gallery-top-bar"
11+
/>
912
<section
1013
aria-label="Mock props header aria label"
1114
class="widget-gallery-header widget-gallery-filter"
@@ -46,6 +49,13 @@ exports[`Gallery DOM Structure renders correctly 1`] = `
4649
</div>
4750
</div>
4851
</div>
52+
<div
53+
class="widget-gallery-footer"
54+
>
55+
<div
56+
class="widget-gallery-load-more"
57+
/>
58+
</div>
4959
</div>
5060
</DocumentFragment>
5161
`;
@@ -56,6 +66,9 @@ exports[`Gallery DOM Structure renders correctly with onclick event 1`] = `
5666
class="widget-gallery my-gallery"
5767
data-focusindex="0"
5868
>
69+
<div
70+
class="widget-gallery-top-bar"
71+
/>
5972
<section
6073
aria-label="Mock props header aria label"
6174
class="widget-gallery-header widget-gallery-filter"
@@ -111,6 +124,13 @@ exports[`Gallery DOM Structure renders correctly with onclick event 1`] = `
111124
</div>
112125
</div>
113126
</div>
127+
<div
128+
class="widget-gallery-footer"
129+
>
130+
<div
131+
class="widget-gallery-load-more"
132+
/>
133+
</div>
114134
</div>
115135
</DocumentFragment>
116136
`;
@@ -121,6 +141,9 @@ exports[`Gallery with accessibility properties renders correctly with items 1`]
121141
class="widget-gallery my-gallery"
122142
data-focusindex="0"
123143
>
144+
<div
145+
class="widget-gallery-top-bar"
146+
/>
124147
<section
125148
aria-label="filter title"
126149
class="widget-gallery-header widget-gallery-filter"
@@ -164,6 +187,13 @@ exports[`Gallery with accessibility properties renders correctly with items 1`]
164187
</div>
165188
</div>
166189
</div>
190+
<div
191+
class="widget-gallery-footer"
192+
>
193+
<div
194+
class="widget-gallery-load-more"
195+
/>
196+
</div>
167197
</div>
168198
</DocumentFragment>
169199
`;
@@ -174,6 +204,9 @@ exports[`Gallery with accessibility properties renders correctly without items 1
174204
class="widget-gallery my-gallery"
175205
data-focusindex="0"
176206
>
207+
<div
208+
class="widget-gallery-top-bar"
209+
/>
177210
<section
178211
aria-label="filter title"
179212
class="widget-gallery-header widget-gallery-filter"
@@ -195,6 +228,13 @@ exports[`Gallery with accessibility properties renders correctly without items 1
195228
</span>
196229
</div>
197230
</section>
231+
<div
232+
class="widget-gallery-footer"
233+
>
234+
<div
235+
class="widget-gallery-load-more"
236+
/>
237+
</div>
198238
</div>
199239
</DocumentFragment>
200240
`;
@@ -205,6 +245,9 @@ exports[`Gallery with empty option renders correctly 1`] = `
205245
class="widget-gallery my-gallery"
206246
data-focusindex="0"
207247
>
248+
<div
249+
class="widget-gallery-top-bar"
250+
/>
208251
<section
209252
aria-label="Mock props header aria label"
210253
class="widget-gallery-header widget-gallery-filter"
@@ -225,6 +268,13 @@ exports[`Gallery with empty option renders correctly 1`] = `
225268
</span>
226269
</div>
227270
</section>
271+
<div
272+
class="widget-gallery-footer"
273+
>
274+
<div
275+
class="widget-gallery-load-more"
276+
/>
277+
</div>
228278
</div>
229279
</DocumentFragment>
230280
`;
@@ -397,6 +447,13 @@ exports[`Gallery with pagination renders correctly 1`] = `
397447
</div>
398448
</div>
399449
</div>
450+
<div
451+
class="widget-gallery-footer"
452+
>
453+
<div
454+
class="widget-gallery-load-more"
455+
/>
456+
</div>
400457
</div>
401458
</DocumentFragment>
402459
`;
@@ -407,6 +464,9 @@ exports[`Gallery without filters renders structure without header container 1`]
407464
class="widget-gallery my-gallery"
408465
data-focusindex="0"
409466
>
467+
<div
468+
class="widget-gallery-top-bar"
469+
/>
410470
<div
411471
class="widget-gallery-content infinite-loading"
412472
>
@@ -441,6 +501,13 @@ exports[`Gallery without filters renders structure without header container 1`]
441501
</div>
442502
</div>
443503
</div>
504+
<div
505+
class="widget-gallery-footer"
506+
>
507+
<div
508+
class="widget-gallery-load-more"
509+
/>
510+
</div>
444511
</div>
445512
</DocumentFragment>
446513
`;

0 commit comments

Comments
 (0)