Skip to content

Commit 7835cc5

Browse files
Lukas742Lukas742
authored
test(Toolbar): add tests for toolbar and aria-label to ToolbarSeparator (#1254)
1 parent 52b2aba commit 7835cc5

8 files changed

Lines changed: 543 additions & 29 deletions

File tree

‎packages/main/src/components/DynamicPage/__snapshots__/DynamicPage.test.tsx.snap‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ exports[`DynamicPage always show content header 1`] = `
170170
</div>
171171
<div>
172172
<div
173+
aria-label="Separator"
173174
class="ToolbarSeparator-separator"
174175
/>
175176
</div>
@@ -454,6 +455,7 @@ exports[`DynamicPage hider header button 1`] = `
454455
</div>
455456
<div>
456457
<div
458+
aria-label="Separator"
457459
class="ToolbarSeparator-separator"
458460
/>
459461
</div>
@@ -901,6 +903,7 @@ exports[`DynamicPage with content 1`] = `
901903
</div>
902904
<div>
903905
<div
906+
aria-label="Separator"
904907
class="ToolbarSeparator-separator"
905908
/>
906909
</div>
@@ -1873,6 +1876,7 @@ exports[`DynamicPage without content 1`] = `
18731876
</div>
18741877
<div>
18751878
<div
1879+
aria-label="Separator"
18761880
class="ToolbarSeparator-separator"
18771881
/>
18781882
</div>

‎packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
109109
</div>
110110
<div>
111111
<div
112+
aria-label="Separator"
112113
class="ToolbarSeparator-separator"
113114
/>
114115
</div>

‎packages/main/src/components/Toolbar/OverflowPopover.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,19 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
1919
const popoverRef = useRef<Ui5PopoverDomRef>();
2020
const [pressed, setPressed] = useState(false);
2121

22-
const handleToggleButtonClick = useCallback((e) => {
23-
if (popoverRef.current) {
24-
if (!pressed) {
25-
popoverRef.current.openBy(e.target);
26-
setPressed(true);
27-
} else {
28-
popoverRef.current.close();
22+
const handleToggleButtonClick = useCallback(
23+
(e) => {
24+
if (popoverRef.current) {
25+
if (!pressed) {
26+
popoverRef.current.openBy(e.target);
27+
setPressed(true);
28+
} else {
29+
popoverRef.current.close();
30+
}
2931
}
30-
}
31-
}, []);
32+
},
33+
[pressed]
34+
);
3235

3336
useEffect(() => {
3437
return () => {

‎packages/main/src/components/Toolbar/Toolbar.stories.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
2525
...DocsCommonProps
2626
}}
2727
args={{
28-
onToolbarClick: null,
2928
design: ToolbarDesign.Auto,
3029
toolbarStyle: ToolbarStyle.Standard,
3130
active: false,
@@ -107,7 +106,6 @@ If the horizontally available space isn't enough to fit all items in it, an over
107106
design: { table: { disable: true } },
108107
...DocsCommonProps,
109108
active: { table: { disable: true } },
110-
onToolbarClick: { table: { disable: true } },
111109
onClick: { table: { disable: true } }
112110
}}
113111
>

‎packages/main/src/components/Toolbar/Toolbar.test.tsx‎

Lines changed: 178 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { Text } from '@ui5/webcomponents-react/lib/Text';
44
import { Toolbar } from '@ui5/webcomponents-react/lib/Toolbar';
55
import { ToolbarDesign } from '@ui5/webcomponents-react/lib/ToolbarDesign';
66
import { ToolbarStyle } from '@ui5/webcomponents-react/lib/ToolbarStyle';
7+
import { ToolbarSeparator } from '@ui5/webcomponents-react/lib/ToolbarSeparator';
8+
import { ToolbarSpacer } from '@ui5/webcomponents-react/lib/ToolbarSpacer';
79
import React from 'react';
810

911
describe('Toolbar', () => {
@@ -41,23 +43,182 @@ describe('Toolbar', () => {
4143
expect(screen.getByTestId('toolbar')).toHaveClass('Toolbar-active');
4244
});
4345

44-
// test('Renders overflowButton', async () => {
45-
// let utils;
46-
//
47-
// await act(async () => {
48-
// utils = render(
49-
// <Toolbar style={{ width: '50px' }}>
50-
// <Text>Item1</Text>
51-
// <Text>Item2</Text>
52-
// <Text>Item3</Text>
53-
// </Toolbar>
54-
// );
55-
// });
56-
//
57-
// expect(utils.asFragment()).toMatchSnapshot();
58-
//
59-
// await waitFor(() => expect(screen.getByTitle('Show More').className).toMatch(/overflowButtonContainer/));
60-
// });
46+
test('ToolbarSpacer', () => {
47+
const { getByTestId, asFragment } = render(
48+
<Toolbar data-testid="toolbar">
49+
<Text>Item1</Text>
50+
<ToolbarSpacer />
51+
<Text>Item2</Text>
52+
<Text>Item3</Text>
53+
</Toolbar>
54+
);
55+
const toolbarSpacer = getByTestId('toolbar').children[0].children[1];
56+
expect(toolbarSpacer).toHaveClass('spacer');
57+
expect(toolbarSpacer).toHaveStyle('flex-grow: 1');
58+
59+
expect(asFragment()).toMatchSnapshot();
60+
});
61+
62+
test('ToolbarSeparator', () => {
63+
const { getByLabelText, asFragment } = render(
64+
<Toolbar data-testid="toolbar">
65+
<Text>Item1</Text>
66+
<ToolbarSeparator />
67+
<Text>Item2</Text>
68+
<Text>Item3</Text>
69+
</Toolbar>
70+
);
71+
72+
expect(getByLabelText('Separator')).toHaveClass('ToolbarSeparator-separator');
73+
74+
expect(asFragment()).toMatchSnapshot();
75+
});
76+
77+
test('overflow menu', () => {
78+
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb());
79+
80+
HTMLElement.prototype.getBoundingClientRect = jest.fn(function () {
81+
return {
82+
width: parseFloat(getComputedStyle(this).width || 200),
83+
height: 10,
84+
top: 0,
85+
left: 0,
86+
bottom: 0,
87+
right: 0
88+
};
89+
});
90+
91+
const { getByTitle, getAllByTestId, getAllByText, rerender, queryByTitle, getByText, getAllByLabelText } = render(
92+
<Toolbar data-testid="toolbar" style={{ width: '300px' }}>
93+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
94+
Item1
95+
</Text>
96+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
97+
Item2
98+
</Text>
99+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
100+
Item3
101+
</Text>
102+
</Toolbar>
103+
);
104+
expect(getByTitle('Show More')).toBeInTheDocument();
105+
expect(getAllByTestId('toolbar-item')).toHaveLength(5);
106+
107+
const item1 = getAllByText('Item1');
108+
const item2 = getAllByText('Item2');
109+
const item3 = getAllByText('Item3');
110+
expect(item1).toHaveLength(1);
111+
expect(item2).toHaveLength(2);
112+
expect(item3).toHaveLength(2);
113+
expect(item1[0]).not.toHaveStyle(`visibility: hidden`);
114+
expect(item2[0]).toHaveStyle(`visibility: hidden`);
115+
expect(item3[0]).toHaveStyle(`visibility: hidden`);
116+
117+
expect(document.body).toMatchSnapshot();
118+
119+
rerender(
120+
<Toolbar data-testid="toolbar" style={{ width: '1000px' }}>
121+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
122+
Item1
123+
</Text>
124+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
125+
Item2
126+
</Text>
127+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
128+
Item3
129+
</Text>
130+
</Toolbar>
131+
);
132+
const updatedItem1 = getByText('Item1');
133+
const updatedItem2 = getByText('Item2');
134+
const updatedItem3 = getByText('Item3');
135+
expect(queryByTitle('Show More')).toBeNull();
136+
expect(updatedItem1).toBeInTheDocument();
137+
expect(updatedItem2).toBeInTheDocument();
138+
expect(updatedItem3).toBeInTheDocument();
139+
expect(updatedItem1).not.toHaveStyle(`visibility: hidden`);
140+
expect(updatedItem2).not.toHaveStyle(`visibility: hidden`);
141+
expect(updatedItem3).not.toHaveStyle(`visibility: hidden`);
142+
143+
//with fragments
144+
rerender(
145+
<Toolbar data-testid="toolbar" style={{ width: '300px' }}>
146+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
147+
Item1
148+
</Text>
149+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
150+
Item2
151+
</Text>
152+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
153+
Item3
154+
</Text>
155+
</Toolbar>
156+
);
157+
expect(getByTitle('Show More')).toBeInTheDocument();
158+
expect(getAllByTestId('toolbar-item')).toHaveLength(5);
159+
160+
const item1frag = getAllByText('Item1');
161+
const item2frag = getAllByText('Item2');
162+
const item3frag = getAllByText('Item3');
163+
expect(item1frag).toHaveLength(1);
164+
expect(item2frag).toHaveLength(2);
165+
expect(item3frag).toHaveLength(2);
166+
expect(item1frag[0]).not.toHaveStyle(`visibility: hidden`);
167+
expect(item2frag[0]).toHaveStyle(`visibility: hidden`);
168+
expect(item3frag[0]).toHaveStyle(`visibility: hidden`);
169+
170+
expect(document.body).toMatchSnapshot();
171+
172+
rerender(
173+
<Toolbar data-testid="toolbar" style={{ width: '1000px' }}>
174+
<>
175+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
176+
Item1
177+
</Text>
178+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
179+
Item2
180+
</Text>
181+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
182+
Item3
183+
</Text>
184+
</>
185+
</Toolbar>
186+
);
187+
188+
const updatedItem1frag = getByText('Item1');
189+
const updatedItem2frag = getByText('Item2');
190+
const updatedItem3frag = getByText('Item3');
191+
expect(queryByTitle('Show More')).toBeNull();
192+
expect(updatedItem1frag).toBeInTheDocument();
193+
expect(updatedItem2frag).toBeInTheDocument();
194+
expect(updatedItem3frag).toBeInTheDocument();
195+
expect(updatedItem1frag).not.toHaveStyle(`visibility: hidden`);
196+
expect(updatedItem2frag).not.toHaveStyle(`visibility: hidden`);
197+
expect(updatedItem3frag).not.toHaveStyle(`visibility: hidden`);
198+
199+
//with separator
200+
rerender(
201+
<Toolbar data-testid="toolbar" style={{ width: '300px' }}>
202+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
203+
Item1
204+
</Text>
205+
<ToolbarSeparator />
206+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
207+
Item2
208+
</Text>
209+
<Text data-testid="toolbar-item" style={{ width: '200px' }}>
210+
Item3
211+
</Text>
212+
</Toolbar>
213+
);
214+
215+
const popoverSeparator = getAllByLabelText('Separator')[1];
216+
217+
expect(popoverSeparator).toHaveClass('ToolbarSeparator-separator');
218+
expect(popoverSeparator).toHaveStyle('height: 0.0625rem; margin: 0.375rem 0.1875rem; width: 100%;');
219+
220+
expect(document.body).toMatchSnapshot();
221+
});
61222

62223
test('active', () => {
63224
const onClick = jest.fn();

0 commit comments

Comments
 (0)