Skip to content

Commit 820d28d

Browse files
MarcusNotheisMarcusNotheis
authored
fix(VariantManagement): fix invalid hook calls (#421)
BREAKING CHANGE: rename prop `initialSelectedKey` to `selectedKey`
1 parent a237d51 commit 820d28d

File tree

5 files changed

+337
-219
lines changed

5 files changed

+337
-219
lines changed

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

Lines changed: 117 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ exports[`FilterBar Hide Filter Bar 1`] = `
88
class="FilterBar-filterBarHeader-0"
99
>
1010
<div
11-
class="VariantManagement-VariantManagement-0"
11+
class="VariantManagement-container-0"
1212
>
1313
<ui5-title
14-
class="VariantManagement-VariantManagementText-0"
14+
class="VariantManagement-title-0"
1515
level="H4"
1616
>
1717
Variant 1
@@ -20,46 +20,46 @@ exports[`FilterBar Hide Filter Bar 1`] = `
2020
design="Transparent"
2121
icon="navigation-down-arrow"
2222
/>
23-
</div>
24-
<ui5-responsive-popover
25-
header-text="Variants"
26-
horizontal-align="Center"
27-
initial-focus=""
28-
placement-type="Bottom"
29-
vertical-align="Center"
30-
>
31-
<ui5-button
32-
class="VariantManagement-footer-0"
33-
design="Emphasized"
34-
icon=""
35-
slot="footer"
23+
<ui5-responsive-popover
24+
header-text="Variants"
25+
horizontal-align="Center"
26+
initial-focus=""
27+
placement-type="Bottom"
28+
vertical-align="Center"
3629
>
37-
Cancel
38-
</ui5-button>
39-
<ui5-list
40-
footer-text=""
41-
header-text=""
42-
mode="SingleSelect"
43-
no-data-text=""
44-
separators="All"
45-
>
46-
<ui5-li
47-
data-key="1"
48-
selected="true"
49-
style="width: 300px;"
50-
type="Active"
30+
<ui5-button
31+
class="VariantManagement-footer-0"
32+
design="Emphasized"
33+
icon=""
34+
slot="footer"
5135
>
52-
Variant 1
53-
</ui5-li>
54-
<ui5-li
55-
data-key="2"
56-
style="width: 300px;"
57-
type="Active"
36+
Cancel
37+
</ui5-button>
38+
<ui5-list
39+
footer-text=""
40+
header-text=""
41+
mode="SingleSelect"
42+
no-data-text=""
43+
separators="All"
5844
>
59-
Variant 2
60-
</ui5-li>
61-
</ui5-list>
62-
</ui5-responsive-popover>
45+
<ui5-li
46+
data-key="1"
47+
selected="true"
48+
style="width: 300px;"
49+
type="Active"
50+
>
51+
Variant 1
52+
</ui5-li>
53+
<ui5-li
54+
data-key="2"
55+
style="width: 300px;"
56+
type="Active"
57+
>
58+
Variant 2
59+
</ui5-li>
60+
</ui5-list>
61+
</ui5-responsive-popover>
62+
</div>
6363
<div
6464
class="FilterBar-headerRowRight-0"
6565
>
@@ -157,10 +157,10 @@ exports[`FilterBar Render without crashing 1`] = `
157157
class="FilterBar-filterBarHeader-0"
158158
>
159159
<div
160-
class="VariantManagement-VariantManagement-0"
160+
class="VariantManagement-container-0"
161161
>
162162
<ui5-title
163-
class="VariantManagement-VariantManagementText-0"
163+
class="VariantManagement-title-0"
164164
level="H4"
165165
>
166166
Variant 1
@@ -169,46 +169,46 @@ exports[`FilterBar Render without crashing 1`] = `
169169
design="Transparent"
170170
icon="navigation-down-arrow"
171171
/>
172-
</div>
173-
<ui5-responsive-popover
174-
header-text="Variants"
175-
horizontal-align="Center"
176-
initial-focus=""
177-
placement-type="Bottom"
178-
vertical-align="Center"
179-
>
180-
<ui5-button
181-
class="VariantManagement-footer-0"
182-
design="Emphasized"
183-
icon=""
184-
slot="footer"
185-
>
186-
Cancel
187-
</ui5-button>
188-
<ui5-list
189-
footer-text=""
190-
header-text=""
191-
mode="SingleSelect"
192-
no-data-text=""
193-
separators="All"
172+
<ui5-responsive-popover
173+
header-text="Variants"
174+
horizontal-align="Center"
175+
initial-focus=""
176+
placement-type="Bottom"
177+
vertical-align="Center"
194178
>
195-
<ui5-li
196-
data-key="1"
197-
selected="true"
198-
style="width: 300px;"
199-
type="Active"
179+
<ui5-button
180+
class="VariantManagement-footer-0"
181+
design="Emphasized"
182+
icon=""
183+
slot="footer"
200184
>
201-
Variant 1
202-
</ui5-li>
203-
<ui5-li
204-
data-key="2"
205-
style="width: 300px;"
206-
type="Active"
185+
Cancel
186+
</ui5-button>
187+
<ui5-list
188+
footer-text=""
189+
header-text=""
190+
mode="SingleSelect"
191+
no-data-text=""
192+
separators="All"
207193
>
208-
Variant 2
209-
</ui5-li>
210-
</ui5-list>
211-
</ui5-responsive-popover>
194+
<ui5-li
195+
data-key="1"
196+
selected="true"
197+
style="width: 300px;"
198+
type="Active"
199+
>
200+
Variant 1
201+
</ui5-li>
202+
<ui5-li
203+
data-key="2"
204+
style="width: 300px;"
205+
type="Active"
206+
>
207+
Variant 2
208+
</ui5-li>
209+
</ui5-list>
210+
</ui5-responsive-popover>
211+
</div>
212212
<div
213213
class="FilterBar-vLine-0"
214214
>
@@ -297,10 +297,10 @@ exports[`FilterBar Select Filter Item 1`] = `
297297
class="FilterBar-filterBarHeader-0"
298298
>
299299
<div
300-
class="VariantManagement-VariantManagement-0"
300+
class="VariantManagement-container-0"
301301
>
302302
<ui5-title
303-
class="VariantManagement-VariantManagementText-0"
303+
class="VariantManagement-title-0"
304304
level="H4"
305305
>
306306
Variant 1
@@ -309,46 +309,46 @@ exports[`FilterBar Select Filter Item 1`] = `
309309
design="Transparent"
310310
icon="navigation-down-arrow"
311311
/>
312-
</div>
313-
<ui5-responsive-popover
314-
header-text="Variants"
315-
horizontal-align="Center"
316-
initial-focus=""
317-
placement-type="Bottom"
318-
vertical-align="Center"
319-
>
320-
<ui5-button
321-
class="VariantManagement-footer-0"
322-
design="Emphasized"
323-
icon=""
324-
slot="footer"
312+
<ui5-responsive-popover
313+
header-text="Variants"
314+
horizontal-align="Center"
315+
initial-focus=""
316+
placement-type="Bottom"
317+
vertical-align="Center"
325318
>
326-
Cancel
327-
</ui5-button>
328-
<ui5-list
329-
footer-text=""
330-
header-text=""
331-
mode="SingleSelect"
332-
no-data-text=""
333-
separators="All"
334-
>
335-
<ui5-li
336-
data-key="1"
337-
selected="true"
338-
style="width: 300px;"
339-
type="Active"
319+
<ui5-button
320+
class="VariantManagement-footer-0"
321+
design="Emphasized"
322+
icon=""
323+
slot="footer"
340324
>
341-
Variant 1
342-
</ui5-li>
343-
<ui5-li
344-
data-key="2"
345-
style="width: 300px;"
346-
type="Active"
325+
Cancel
326+
</ui5-button>
327+
<ui5-list
328+
footer-text=""
329+
header-text=""
330+
mode="SingleSelect"
331+
no-data-text=""
332+
separators="All"
347333
>
348-
Variant 2
349-
</ui5-li>
350-
</ui5-list>
351-
</ui5-responsive-popover>
334+
<ui5-li
335+
data-key="1"
336+
selected="true"
337+
style="width: 300px;"
338+
type="Active"
339+
>
340+
Variant 1
341+
</ui5-li>
342+
<ui5-li
343+
data-key="2"
344+
style="width: 300px;"
345+
type="Active"
346+
>
347+
Variant 2
348+
</ui5-li>
349+
</ui5-list>
350+
</ui5-responsive-popover>
351+
</div>
352352
<div
353353
class="FilterBar-headerRowRight-0"
354354
>

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

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { createPassThroughPropsTest } from '@shared/tests/utils';
1+
import { createPassThroughPropsTest, getEventFromCallback } from '@shared/tests/utils';
22
import { mount } from 'enzyme';
33
import { VariantManagement } from '@ui5/webcomponents-react/lib/VariantManagement';
44
import React from 'react';
5+
import sinon from 'sinon';
6+
import { act } from 'react-dom/test-utils';
57

68
const variantItems = [
79
{ label: 'Variant 1', key: '1' },
@@ -10,36 +12,40 @@ const variantItems = [
1012

1113
describe('VariantManagement', () => {
1214
test('Render without crashing', () => {
13-
const wrapper = mount(<VariantManagement variantItems={variantItems} />);
15+
const wrapper = mount(<VariantManagement variantItems={variantItems} selectedKey="1" />);
1416
expect(wrapper.render()).toMatchSnapshot();
1517
});
1618

17-
// it('With suggestions', () => {
18-
// const callback = sinon.spy();
19-
// const wrapper = mount(<VariantManagement onSelect={callback} variantItems={variantItems} />);
20-
//
21-
// console.log('find button', wrapper.find(Button));
22-
//
23-
//
24-
//
25-
// // @ts-ignore
26-
// (wrapper.find(Button).first().prop('onPress') as any)({target: {}});
27-
//
28-
//
29-
// wrapper.update();
30-
//
31-
// const listItem = wrapper
32-
// // @ts-ignore
33-
// .find(ListItem.InnerComponent)
34-
// .last()
35-
// .find('li');
36-
// listItem.simulate('click');
37-
//
38-
// expect(wrapper.debug()).to.matchSnapshot();
39-
// expect(getEventFromCallback(callback).getParameter('selectedItem')).to.equal(variantItems[1]);
40-
//
41-
//
42-
// });
19+
test('Render without crashing - disabled', () => {
20+
const wrapper = mount(<VariantManagement variantItems={variantItems} disabled />);
21+
expect(wrapper.render()).toMatchSnapshot();
22+
});
23+
24+
test('With suggestions', () => {
25+
const callback = sinon.spy();
26+
const container = document.body.appendChild(document.createElement('div'));
27+
const wrapper = mount(<VariantManagement onSelect={callback} variantItems={variantItems} />, {
28+
attachTo: container
29+
});
30+
31+
wrapper
32+
.find('ui5-button')
33+
.first()
34+
.instance()
35+
.fireEvent('click');
36+
37+
act(() => {
38+
wrapper
39+
.find('ui5-li')
40+
.last()
41+
.instance()
42+
.fireItemPress({});
43+
});
44+
45+
expect(wrapper.render()).toMatchSnapshot();
46+
expect(getEventFromCallback(callback).detail.selectedItem).toEqual(variantItems[1]);
47+
wrapper.unmount();
48+
});
4349

4450
createPassThroughPropsTest(VariantManagement, { variantItems });
4551
});

0 commit comments

Comments
 (0)