Skip to content

Commit 6b8b45a

Browse files
MarcusNotheisMarcusNotheis
authored
refactor(MessageBox): make MessageBox SSR ready (#4116)
and rewrite test to cypress Part of #4091
1 parent 20c9915 commit 6b8b45a

File tree

5 files changed

+252
-917
lines changed

5 files changed

+252
-917
lines changed

‎packages/main/src/components/MessageBox/MessageBox.cy.tsx‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
import addIcon from '@ui5/webcomponents-icons/dist/add.js';
2+
import { Button, Icon, MessageBoxActions, MessageBoxTypes } from '../..';
3+
import { MessageBox } from './index';
4+
5+
describe('MessageBox', () => {
6+
[
7+
[MessageBoxTypes.Confirm, MessageBoxActions.OK],
8+
[MessageBoxTypes.Success, MessageBoxActions.OK],
9+
[MessageBoxTypes.Warning, MessageBoxActions.OK],
10+
[MessageBoxTypes.Error, MessageBoxActions.Close],
11+
[MessageBoxTypes.Information, MessageBoxActions.OK]
12+
].forEach(([type, buttonText]: [MessageBoxTypes, MessageBoxActions]) => {
13+
it(type, () => {
14+
const callback = cy.spy();
15+
cy.mount(
16+
<MessageBox type={type} open onClose={callback}>
17+
My Message Box Content
18+
</MessageBox>
19+
);
20+
cy.findByText(buttonText).click();
21+
cy.wrap(callback).should(
22+
'have.been.calledWith',
23+
Cypress.sinon.match({
24+
detail: {
25+
action: buttonText
26+
}
27+
})
28+
);
29+
});
30+
});
31+
32+
it('Custom Button', () => {
33+
const click = cy.spy().as('onButtonClick');
34+
const close = cy.spy().as('onMessageBoxClose');
35+
cy.mount(
36+
<MessageBox
37+
open
38+
onClose={close}
39+
actions={[
40+
MessageBoxActions.Cancel,
41+
<Button onClick={click} key="0">
42+
Custom
43+
</Button>,
44+
'Custom Text Action',
45+
MessageBoxActions.OK
46+
]}
47+
>
48+
My Message Box Content
49+
</MessageBox>
50+
);
51+
52+
cy.findByText('Cancel').should('be.visible');
53+
cy.findByText('Custom Text Action').should('be.visible');
54+
cy.findByText('OK').should('be.visible');
55+
56+
cy.findByText('Custom').click();
57+
cy.get('@onMessageBoxClose')
58+
.should('have.been.calledOnce')
59+
.should(
60+
'have.been.calledWith',
61+
Cypress.sinon.match({
62+
detail: {
63+
action: `1: custom action`
64+
}
65+
})
66+
);
67+
cy.get('@onButtonClick').should('have.been.calledOnce');
68+
});
69+
70+
it('Confirm - Cancel', () => {
71+
const callback = cy.spy().as('onMessageBoxClose');
72+
cy.mount(
73+
<MessageBox type={MessageBoxTypes.Confirm} open onClose={callback}>
74+
Confirm
75+
</MessageBox>
76+
);
77+
78+
cy.findByText('Cancel').click();
79+
cy.get('@onMessageBoxClose')
80+
.should('have.been.calledOnce')
81+
.should(
82+
'have.been.calledWith',
83+
Cypress.sinon.match({
84+
detail: {
85+
action: MessageBoxActions.Cancel
86+
}
87+
})
88+
);
89+
});
90+
91+
it('Show', () => {
92+
const callback = cy.spy().as('onMessageBoxClose');
93+
cy.mount(
94+
<MessageBox open onClose={callback} titleText="Custom" actions={[MessageBoxActions.Yes, MessageBoxActions.No]}>
95+
Custom
96+
</MessageBox>
97+
);
98+
99+
cy.findByText('Yes').click();
100+
cy.get('@onMessageBoxClose')
101+
.should('have.been.calledOnce')
102+
.should(
103+
'have.been.calledWith',
104+
Cypress.sinon.match({
105+
detail: {
106+
action: MessageBoxActions.Yes
107+
}
108+
})
109+
);
110+
111+
cy.findByText('No').click();
112+
cy.get('@onMessageBoxClose')
113+
.should('have.been.calledTwice')
114+
.should(
115+
'have.been.calledWith',
116+
Cypress.sinon.match({
117+
detail: {
118+
action: MessageBoxActions.No
119+
}
120+
})
121+
);
122+
});
123+
124+
it('Success w/ custom title', () => {
125+
const callback = cy.spy().as('onMessageBoxClose');
126+
cy.mount(
127+
<MessageBox
128+
type={MessageBoxTypes.Success}
129+
open
130+
onClose={callback}
131+
titleText="Custom Success"
132+
icon={<Icon name={addIcon} />}
133+
>
134+
Custom Success
135+
</MessageBox>
136+
);
137+
cy.findAllByText('Custom Success').should('have.length', 2);
138+
cy.findByText('OK').click();
139+
cy.get('@onMessageBoxClose')
140+
.should('have.been.calledOnce')
141+
.should(
142+
'have.been.calledWith',
143+
Cypress.sinon.match({
144+
detail: {
145+
action: MessageBoxActions.OK
146+
}
147+
})
148+
);
149+
});
150+
151+
it('No Title', () => {
152+
const callback = cy.spy().as('onMessageBoxClose');
153+
cy.mount(
154+
<MessageBox open onClose={callback}>
155+
No Title
156+
</MessageBox>
157+
);
158+
159+
cy.findByText('Confirmation').should('be.visible');
160+
});
161+
162+
it('Custom Action Text', () => {
163+
const callback = cy.spy().as('onMessageBoxClose');
164+
cy.mount(
165+
<MessageBox
166+
open
167+
type={MessageBoxTypes.Confirm}
168+
actions={[MessageBoxActions.OK, 'My Custom Action']}
169+
onClose={callback}
170+
>
171+
My Message Box Content
172+
</MessageBox>
173+
);
174+
175+
cy.findByText(MessageBoxActions.OK).should('be.visible').click();
176+
cy.get('@onMessageBoxClose')
177+
.should('have.been.calledOnce')
178+
.should(
179+
'have.been.calledWith',
180+
Cypress.sinon.match({
181+
detail: {
182+
action: MessageBoxActions.OK
183+
}
184+
})
185+
);
186+
cy.findByText('My Custom Action').should('be.visible').click();
187+
cy.get('@onMessageBoxClose')
188+
.should('have.been.calledTwice')
189+
.should(
190+
'have.been.calledWith',
191+
Cypress.sinon.match({
192+
detail: {
193+
action: 'My Custom Action'
194+
}
195+
})
196+
);
197+
});
198+
199+
it("Don't crash on unknown type", () => {
200+
const callback = cy.spy().as('onMessageBoxClose');
201+
cy.mount(
202+
// @ts-expect-error: testing an invalid type
203+
<MessageBox open onClose={callback} type="FOO_BAR">
204+
Unknown Type!
205+
</MessageBox>
206+
);
207+
cy.findByText('Unknown Type!').should('be.visible');
208+
});
209+
210+
it('initial focus', () => {
211+
cy.mount(
212+
<MessageBox open type={MessageBoxTypes.Confirm} initialFocus={MessageBoxActions.Cancel} data-testid="Dialog">
213+
Content
214+
</MessageBox>
215+
);
216+
217+
cy.focused().then(([el]) => {
218+
const focusedElementId = el.id;
219+
cy.findByText('Cancel').should('have.id', focusedElementId);
220+
cy.findByTestId('Dialog').should('have.attr', 'initial-focus', focusedElementId);
221+
});
222+
});
223+
224+
it('display custom header', () => {
225+
cy.mount(
226+
<MessageBox open header={<span>Custom Header</span>}>
227+
Content
228+
</MessageBox>
229+
);
230+
231+
cy.findByText('Confirmation').should('not.exist');
232+
cy.findByText('Custom Header').should('be.visible');
233+
});
234+
});

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,14 @@ const MessageBoxComponent = () => {
174174
<Story
175175
name="With Custom Action"
176176
args={{
177-
actions: [MessageBoxActions.OK, 'Custom Action', MessageBoxActions.Cancel, <Button key="0">Custom Button</Button>]
177+
actions: [
178+
MessageBoxActions.OK,
179+
'Custom Action',
180+
MessageBoxActions.Cancel,
181+
<Button key="0" id="custom-action">
182+
Custom Button
183+
</Button>
184+
]
178185
}}
179186
>
180187
{(args) => {

0 commit comments

Comments
 (0)