Skip to content

Commit 943a099

Browse files
bobborbobbor
committed
fix: wait for dialog
1 parent 4dc9007 commit 943a099

File tree

9 files changed

+73
-32
lines changed

9 files changed

+73
-32
lines changed

‎build-system-tests/e2e/cypress/integration/common/shared.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,21 @@ Given(
2929
When('I click the {string} tab', (label: string) => {
3030
cy.findByRole('tab', {
3131
name: new RegExp(`^${escapeRegExp(label)}$`, 'i'),
32+
timeout: 5000
3233
}).click();
3334
});
3435

3536
When('I click the {string} button', (name: string) => {
3637
cy.findByRole('button', {
3738
name: new RegExp(`^${escapeRegExp(name)}$`, 'i'),
39+
timeout: 5000,
3840
}).click();
3941
});
4042

4143
Then('I see the {string} button', (name: string) => {
4244
cy.findByRole('button', {
4345
name: new RegExp(`^${escapeRegExp(name)}$`, 'i'),
46+
timeout: 5000
4447
}).should('be.visible');
4548
});
4649

‎examples/next/next-env.d.ts‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/next/pages/ui/components/in-app-messaging/demo/index.page.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import React, { useState } from 'react';
24
import { Amplify } from 'aws-amplify';
35
import { initializeInAppMessaging } from 'aws-amplify/in-app-messaging';
@@ -23,13 +25,14 @@ initializeInAppMessaging();
2325

2426
function DemoCheckbox({ label, onChange, ...rest }) {
2527
return (
26-
<label>
28+
<label key={`${label}:${rest.checked}`}>
2729
<input
2830
disabled={rest.isDisabled}
2931
name={label}
3032
type="checkbox"
3133
checked={rest.checked}
32-
onChange={() => {
34+
onChange={(e) => {
35+
e.preventDefault();
3336
onChange((prev) => !prev);
3437
}}
3538
/>
@@ -49,9 +52,13 @@ function DemoRadioGroup({ data, legend, onChange, ...rest }) {
4952
<fieldset>
5053
<legend>{legend}</legend>
5154
{data.map((item) => (
52-
<label key={`${legend}:${item}`} style={{ display: 'block' }}>
55+
<label
56+
key={`${legend}:${item}:${rest.value === item}`}
57+
style={{ display: 'block' }}
58+
>
5359
<input
5460
onChange={(e) => {
61+
e.preventDefault();
5562
onChange(e.target.value);
5663
}}
5764
disabled={rest.isDisabled}
@@ -189,7 +196,14 @@ function Content({ colorMode, setColorMode }) {
189196
<DemoDivider />
190197
</View>
191198
</div>
192-
<button onClick={displayDemoMessage}>Display Demo Message</button>
199+
<button
200+
onClick={(e) => {
201+
e.preventDefault();
202+
displayDemoMessage();
203+
}}
204+
>
205+
Display Demo Message
206+
</button>
193207
</div>
194208
</View>
195209
);

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@
123123
"tmp": "^0.2.4",
124124
"**/jest/**/js-yaml": "~3.14.2",
125125
"**/@badeball/cypress-cucumber-preprocessor/**/glob": "~10.5.0",
126+
"**/@badeball/cacache/**/glob": "~10.5.0",
126127
"**/@changesets/cli/**/js-yaml": "~3.14.2",
127128
"@tensorflow-models/face-detection/rimraf": "5.0.0"
128129
},

‎packages/e2e/cypress.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,5 @@ export default defineConfig({
3333
return config;
3434
},
3535
},
36-
video: false,
36+
video: true,
3737
});

‎packages/e2e/cypress/integration/common/in-app-messaging.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
22

33
When('I dismiss the banner', () => {
4-
cy.findByRole('button', { name: 'Dismiss message' }).click();
4+
cy.findByRole('button', { name: 'Dismiss message', timeout: 5000 }).click();
55
});
66

77
Then('I do not see the banner', () => {
8-
cy.findByRole('dialog').should('not.exist');
8+
cy.findByRole('dialog', { timeout: 5000 }).should('not.exist');
99
});
1010

1111
Then('the banner has {int} buttons', (buttonCount: number) => {
1212
const context = cy.findAllByRole('dialog');
1313
if (buttonCount > 0) {
14-
context.findByRole('group').children().should('have.length', buttonCount);
14+
context.findByRole('group', { timeout: 5000 }).children().should('have.length', buttonCount);
1515
} else {
16-
context.findByRole('group').should('not.exist');
16+
context.findByRole('group', { timeout: 5000 }).should('not.exist');
1717
}
1818
});

‎packages/e2e/cypress/integration/ui/components/in-app-messaging/demo/demo.steps.ts‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
22

33
Given('{string} checkbox is checked', (checkboxName: string) => {
4-
cy.findByRole('checkbox', { name: checkboxName }).should(
4+
cy.findByRole('checkbox', { name: checkboxName, timeout: 5000 }).should(
55
'have.prop',
66
'checked',
77
true
88
);
99
});
1010
Given('{string} checkbox is unchecked', (checkboxName: string) => {
11-
cy.findByRole('checkbox', { name: checkboxName }).should(
11+
cy.findByRole('checkbox', { name: checkboxName, timeout: 5000 }).should(
1212
'have.prop',
1313
'checked',
1414
false
1515
);
1616
});
1717

18-
Given('{string} layout radio option is selected', (radioOption: string) => {
19-
cy.findByRole('radio', { name: radioOption }).should('have.attr', 'checked');
18+
Given('the {string} layout radio option is selected', (radioOption: string) => {
19+
cy.findByRole('radio', { name: radioOption, timeout: 5000 }).should(
20+
'be.checked'
21+
);
2022
});
2123

2224
When('I click the {string} layout radio option', (radioOption: string) => {
@@ -37,17 +39,23 @@ When('I wait for pinpoint messages to sync', () => {
3739
});
3840

3941
Then('the banner has an image', () => {
40-
cy.findByRole('img', { name: 'In-App Message Image' }).should('exist');
42+
cy.findByRole('img', { name: 'In-App Message Image', timeout: 5000 }).should(
43+
'exist'
44+
);
4145
});
4246

4347
Then('I see a {string} banner dialog', (type: string) => {
44-
cy.findByRole('dialog')
48+
cy.findByRole('dialog', { timeout: 5000 })
4549
.should('exist')
4650
.should('have.attr', 'data-testid', `inappmessaging-${type}banner-dialog`);
4751
});
4852

4953
Then('I see a {string} dialog', (type: string) => {
50-
cy.findByRole('dialog')
54+
cy.findByRole('dialog', { timeout: 5000 })
5155
.should('exist')
5256
.should('have.attr', 'data-testid', `inappmessaging-${type}-dialog`);
5357
});
58+
59+
Then('I wait for {int} ms', (timeout: number) => {
60+
cy.wait(timeout);
61+
});

‎packages/e2e/features/ui/components/in-app-messaging/demo.feature‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ Feature: In-App Messaging demo page to show banners with various configurations
44

55
Background:
66
Given I'm running the example "ui/components/in-app-messaging/demo"
7+
Then I wait for 2000 ms
78

89
@react @react-native
910
Scenario: Verify that the default banner is top banner with primary and secondary buttons
1011
Given "Has Primary Button" checkbox is checked
1112
Then "Has Secondary Button" checkbox is checked
12-
Then "TOP_BANNER" layout radio option is selected
13+
Then the "TOP_BANNER" layout radio option is selected
14+
Then I see the "Display Demo Message" button
1315
When I click the "Display Demo Message" button
1416
Then I see a "top" banner dialog
1517
Then the banner has 2 buttons
@@ -18,13 +20,19 @@ Feature: In-App Messaging demo page to show banners with various configurations
1820

1921
@react @react-native
2022
Scenario: Verify that the banner has expected number of buttons
23+
Given "Has Primary Button" checkbox is checked
24+
Then "Has Secondary Button" checkbox is checked
2125
When I toggle "Has Secondary Button" checkbox
26+
Then "Has Secondary Button" checkbox is unchecked
27+
Then I see the "Display Demo Message" button
2228
Then I click the "Display Demo Message" button
2329
Then I see a "top" banner dialog
2430
Then the banner has 1 buttons
2531
When I dismiss the banner
2632
Then I do not see the banner
2733
When I toggle "Has Primary Button" checkbox
34+
Then "Has Primary Button" checkbox is unchecked
35+
Then I see the "Display Demo Message" button
2836
Then I click the "Display Demo Message" button
2937
Then I see a "top" banner dialog
3038
Then the banner has 0 buttons
@@ -34,31 +42,40 @@ Feature: In-App Messaging demo page to show banners with various configurations
3442
@react @react-native
3543
Scenario: Verify that the banner is shown as a bottom banner
3644
When I click the "BOTTOM_BANNER" layout radio option
45+
Then the "BOTTOM_BANNER" layout radio option is selected
46+
Then I see the "Display Demo Message" button
3747
Then I click the "Display Demo Message" button
3848
Then I see a "bottom" banner dialog
3949

4050
@react @react-native
4151
Scenario: Verify that the banner is shown as a middle banner
4252
When I click the "MIDDLE_BANNER" layout radio option
53+
Then the "MIDDLE_BANNER" layout radio option is selected
54+
Then I see the "Display Demo Message" button
4355
Then I click the "Display Demo Message" button
4456
Then I see a "middle" banner dialog
4557

4658
@react @react-native
4759
Scenario: Verify that the banner is shown as a modal
4860
When I click the "MODAL" layout radio option
61+
Then the "MODAL" layout radio option is selected
62+
Then I see the "Display Demo Message" button
4963
Then I click the "Display Demo Message" button
5064
Then I see a "modal" dialog
5165

5266
@react @react-native
5367
Scenario: Verify that the banner is shown as fullscreen
5468
When I click the "FULL_SCREEN" layout radio option
69+
Then the "FULL_SCREEN" layout radio option is selected
70+
Then I see the "Display Demo Message" button
5571
Then I click the "Display Demo Message" button
5672
Then I see a "fullscreen" dialog
5773

5874
@react @react-native
5975
Scenario: Verify that top banner is shown with an image
6076
Given "Has Image" checkbox is checked
61-
Then "TOP_BANNER" layout radio option is selected
77+
Then the "TOP_BANNER" layout radio option is selected
78+
Then I see the "Display Demo Message" button
6279
When I click the "Display Demo Message" button
6380
Then I see a "top" banner dialog
6481
Then the banner has an image
@@ -68,6 +85,8 @@ Feature: In-App Messaging demo page to show banners with various configurations
6885
When I toggle "Use Analytic events" checkbox
6986
Then I wait for pinpoint messages to sync
7087
Then I click the "TOP_BANNER" layout radio option
88+
Then the "TOP_BANNER" layout radio option is selected
89+
Then I see the "Display Demo Message" button
7190
Then I click the "Display Demo Message" button
7291
Then I see a "top" banner dialog
7392

@@ -76,6 +95,8 @@ Feature: In-App Messaging demo page to show banners with various configurations
7695
When I toggle "Use Analytic events" checkbox
7796
Then I wait for pinpoint messages to sync
7897
Then I click the "BOTTOM_BANNER" layout radio option
98+
Then the "BOTTOM_BANNER" layout radio option is selected
99+
Then I see the "Display Demo Message" button
79100
Then I click the "Display Demo Message" button
80101
Then I see a "bottom" banner dialog
81102

@@ -84,6 +105,8 @@ Feature: In-App Messaging demo page to show banners with various configurations
84105
When I toggle "Use Analytic events" checkbox
85106
Then I wait for pinpoint messages to sync
86107
Then I click the "MIDDLE_BANNER" layout radio option
108+
Then the "MIDDLE_BANNER" layout radio option is selected
109+
Then I see the "Display Demo Message" button
87110
Then I click the "Display Demo Message" button
88111
Then I see a "middle" banner dialog
89112

@@ -92,6 +115,8 @@ Feature: In-App Messaging demo page to show banners with various configurations
92115
When I toggle "Use Analytic events" checkbox
93116
Then I wait for pinpoint messages to sync
94117
Then I click the "MODAL" layout radio option
118+
Then the "MODAL" layout radio option is selected
119+
Then I see the "Display Demo Message" button
95120
Then I click the "Display Demo Message" button
96121
Then I see a "modal" dialog
97122

@@ -100,5 +125,7 @@ Feature: In-App Messaging demo page to show banners with various configurations
100125
When I toggle "Use Analytic events" checkbox
101126
Then I wait for pinpoint messages to sync
102127
Then I click the "FULL_SCREEN" layout radio option
128+
Then the "FULL_SCREEN" layout radio option is selected
129+
Then I see the "Display Demo Message" button
103130
Then I click the "Display Demo Message" button
104131
Then I see a "fullscreen" dialog

‎yarn.lock‎

Lines changed: 1 addition & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)