Skip to content

Commit bad3b31

Browse files
MarcusNotheisMarcusNotheis
committed
Merge remote-tracking branch 'origin/master' into test/replace-sinon-with-jest-mock
2 parents 8edc22c + bcb187f commit bad3b31

File tree

5 files changed

+134
-137
lines changed

5 files changed

+134
-137
lines changed

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
2+
import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
3+
import { VariantManagement } from '@ui5/webcomponents-react/lib/VariantManagement';
4+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
5+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
6+
import { DocsHeader } from '@shared/stories/DocsHeader';
7+
8+
<Meta
9+
title="Components / VariantManagement"
10+
component={VariantManagement}
11+
argTypes={{
12+
...createSelectArgTypes({ placement: PlacementType, level: TitleLevel }),
13+
ref: {
14+
type: null
15+
}
16+
}}
17+
args={{
18+
selectedKey: '2',
19+
placement: PlacementType.Bottom,
20+
level: TitleLevel.H4,
21+
variantItems: [
22+
{ label: 'Variant 1', key: '1' },
23+
{ label: 'Variant 2', key: '2' }
24+
]
25+
}}
26+
/>
27+
28+
<DocsHeader />
29+
30+
<Canvas>
31+
<Story name="Default">
32+
{(props) => (
33+
<VariantManagement
34+
closeOnItemSelect={props.closeOnItemSelect}
35+
selectedKey={props.selectedKey}
36+
variantItems={props.variantItems}
37+
onSelect={props.onSelect}
38+
placement={props.placement}
39+
level={props.level}
40+
disabled={props.disabled}
41+
/>
42+
)}
43+
</Story>
44+
</Canvas>
45+
46+
<ArgsTable story="." />

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1+
import { fireEvent, render, screen, waitFor, getByText } from '@shared/tests';
12
import { createPassThroughPropsTest } from '@shared/tests/utils';
2-
import { mount } from 'enzyme';
33
import { VariantManagement } from '@ui5/webcomponents-react/lib/VariantManagement';
44
import React from 'react';
5-
import { act } from 'react-dom/test-utils';
65

76
const variantItems = [
87
{ label: 'Variant 1', key: '1' },
@@ -11,29 +10,30 @@ const variantItems = [
1110

1211
describe('VariantManagement', () => {
1312
test('Render without crashing', () => {
14-
const wrapper = mount(<VariantManagement variantItems={variantItems} selectedKey="1" />);
15-
expect(wrapper.render()).toMatchSnapshot();
13+
const wrapper = render(<VariantManagement variantItems={variantItems} selectedKey="1" />);
14+
expect(wrapper.asFragment()).toMatchSnapshot();
1615
});
1716

1817
test('Render without crashing - disabled', () => {
19-
const wrapper = mount(<VariantManagement variantItems={variantItems} disabled />);
20-
expect(wrapper.render()).toMatchSnapshot();
18+
const wrapper = render(<VariantManagement variantItems={variantItems} disabled />);
19+
expect(wrapper.asFragment()).toMatchSnapshot();
2120
});
2221

23-
test.skip('With suggestions', () => {
22+
test.skip('With suggestions', async () => {
2423
const callback = jest.fn();
25-
const wrapper = mount(<VariantManagement onSelect={callback} variantItems={variantItems} />, {
26-
attachTo: document.body.appendChild(document.createElement('div'))
27-
});
24+
const wrapper = render(<VariantManagement onSelect={callback} variantItems={variantItems} />);
2825

29-
wrapper.find('ui5-button').first().instance().fireEvent('click');
26+
fireEvent.click(wrapper.container.querySelector('ui5-button[icon="navigation-down-arrow"]'));
3027

31-
act(() => {
32-
wrapper.find('ui5-li').last().instance().fireItemPress({});
28+
// wait for appearance
29+
await waitFor(() => {
30+
expect(screen.getByText(variantItems[1].label)).toBeVisible();
3331
});
3432

35-
expect(wrapper.render()).toMatchSnapshot();
36-
expect(callback.mock[0][0].detail.selectedItem).toEqual(variantItems[1]);
33+
fireEvent.click(screen.getByText(variantItems[1].label));
34+
35+
expect(wrapper.asFragment()).toMatchSnapshot();
36+
expect(callback.mock.calls[0][0].detail.selectedItem).toEqual(variantItems[1]);
3737
wrapper.unmount();
3838
});
3939

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

Lines changed: 45 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,59 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`VariantManagement Render without crashing - disabled 1`] = `
4-
<div
5-
class="VariantManagement-container-0 VariantManagement-disabled-0"
6-
>
7-
<ui5-title
8-
class="VariantManagement-title-0"
9-
level="H4"
4+
<DocumentFragment>
5+
<div
6+
class="VariantManagement-container VariantManagement-disabled"
107
>
11-
Variant 1
12-
</ui5-title>
13-
<ui5-button
14-
design="Transparent"
15-
disabled="true"
16-
icon="navigation-down-arrow"
17-
/>
18-
</div>
8+
<ui5-title
9+
class="VariantManagement-title"
10+
level="H4"
11+
>
12+
Variant 1
13+
</ui5-title>
14+
<ui5-button
15+
design="Transparent"
16+
disabled="true"
17+
icon="navigation-down-arrow"
18+
/>
19+
</div>
20+
</DocumentFragment>
1921
`;
2022

2123
exports[`VariantManagement Render without crashing 1`] = `
22-
<div
23-
class="VariantManagement-container-0"
24-
>
25-
<ui5-title
26-
class="VariantManagement-title-0"
27-
level="H4"
24+
<DocumentFragment>
25+
<div
26+
class="VariantManagement-container"
2827
>
29-
Variant 1
30-
</ui5-title>
31-
<ui5-button
32-
design="Transparent"
33-
icon="navigation-down-arrow"
34-
/>
35-
</div>
28+
<ui5-title
29+
class="VariantManagement-title"
30+
level="H4"
31+
>
32+
Variant 1
33+
</ui5-title>
34+
<ui5-button
35+
design="Transparent"
36+
icon="navigation-down-arrow"
37+
/>
38+
</div>
39+
</DocumentFragment>
3640
`;
3741

3842
exports[`VariantManagement With suggestions 1`] = `
39-
<div
40-
class="VariantManagement-container-0"
41-
>
42-
<ui5-title
43-
class="VariantManagement-title-0"
44-
level="H4"
43+
<DocumentFragment>
44+
<div
45+
class="VariantManagement-container"
4546
>
46-
Variant 1
47-
</ui5-title>
48-
<ui5-button
49-
design="Transparent"
50-
icon="navigation-down-arrow"
51-
/>
52-
<ui5-responsive-popover
53-
header-text="Variants"
54-
horizontal-align="Center"
55-
placement-type="Bottom"
56-
style="z-index: 102; visibility: visible; display: none;"
57-
vertical-align="Center"
58-
>
59-
<ui5-button
60-
class="VariantManagement-footer-0"
61-
design="Emphasized"
62-
slot="footer"
47+
<ui5-title
48+
class="VariantManagement-title"
49+
level="H4"
6350
>
64-
Cancel
65-
</ui5-button>
66-
<ui5-list
67-
mode="SingleSelect"
68-
separators="All"
69-
>
70-
<ui5-li
71-
actionable=""
72-
data-key="1"
73-
has-title=""
74-
info-state="None"
75-
selected="true"
76-
style="width: 300px;"
77-
type="Active"
78-
>
79-
Variant 1
80-
</ui5-li>
81-
<ui5-li
82-
actionable=""
83-
data-key="2"
84-
has-title=""
85-
info-state="None"
86-
selected=""
87-
style="width: 300px;"
88-
type="Active"
89-
>
90-
Variant 2
91-
</ui5-li>
92-
</ui5-list>
93-
</ui5-responsive-popover>
94-
</div>
51+
Variant 1
52+
</ui5-title>
53+
<ui5-button
54+
design="Transparent"
55+
icon="navigation-down-arrow"
56+
/>
57+
</div>
58+
</DocumentFragment>
9559
`;

‎packages/main/src/components/VariantManagement/demo.stories.tsx

Lines changed: 0 additions & 40 deletions
This file was deleted.

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

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,38 @@ export interface VariantItem {
2828
}
2929

3030
export interface VariantManagementPropTypes extends CommonProps {
31+
/**
32+
* Determines on which side the VariantManagement popover is placed at.
33+
*/
3134
placement?: PlacementType;
35+
/**
36+
* Describes the title of the VariantManagement popover.
37+
*/
3238
popupTitle?: string;
39+
/**
40+
* Selects the <code>variantItem</code> by its key.
41+
*/
3342
selectedKey?: string;
43+
/**
44+
* Defines whether the VariantManagement should be closed if an item was selected.
45+
*/
3446
closeOnItemSelect?: boolean;
47+
/**
48+
* Variant items displayed by the VariantManagement component.
49+
*/
3550
variantItems: VariantItem[];
36-
onSelect?: (event: CustomEvent<{ item: HTMLElement; selectedItem: VariantItem }>) => void;
51+
/**
52+
* Describes the <code>heading</code> level of the variants.
53+
*/
3754
level?: TitleLevel;
55+
/**
56+
* Defines whether the VariantManagement is disabled.
57+
*/
3858
disabled?: boolean;
59+
/**
60+
* Fired after a variant has been selected.
61+
*/
62+
onSelect?: (event: CustomEvent<{ item: HTMLElement; selectedItem: VariantItem }>) => void;
3963
}
4064

4165
const styles = {
@@ -68,6 +92,9 @@ const styles = {
6892

6993
const useStyles = createComponentStyles(styles, { name: 'VariantManagement' });
7094

95+
/**
96+
* The `VariantManagement` component can be used to manage variants, such as FilterBar variants or AnalyticalTable variants.
97+
*/
7198
const VariantManagement: FC<VariantManagementPropTypes> = forwardRef(
7299
(props: VariantManagementPropTypes, ref: Ref<HTMLDivElement>) => {
73100
const {

0 commit comments

Comments
 (0)