Skip to content

Commit 90edd73

Browse files
pan-kotpan-kot
committed
chore: Experiment with flaky performance marks test
1 parent 62efe83 commit 90edd73

File tree

2 files changed

+174
-168
lines changed

2 files changed

+174
-168
lines changed

‎src/button-dropdown/__integ__/performance-marks.test.ts‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,28 @@ function setupTest(
2525
});
2626
}
2727

28-
describe('ButtonDropdown', () => {
29-
test(
30-
'Emits a single mark',
31-
setupTest('main-action', async ({ getMarks, getElementPerformanceMarkText }) => {
32-
const marks = await getMarks();
28+
for (let i = 0; i < 100; i++) {
29+
describe('ButtonDropdown', () => {
30+
test(
31+
'Emits a single mark',
32+
setupTest('main-action', async ({ getMarks, getElementPerformanceMarkText }) => {
33+
const marks = await getMarks();
3334

34-
expect(marks).toHaveLength(1);
35-
expect(marks[0].name).toBe('primaryButtonRendered');
36-
expect(marks[0].detail).toMatchObject({
37-
source: 'awsui',
38-
instanceIdentifier: expect.any(String),
39-
loading: false,
40-
disabled: false,
41-
inViewport: true,
42-
text: 'Launch instance',
43-
});
35+
expect(marks).toHaveLength(1);
36+
expect(marks[0].name).toBe('primaryButtonRendered');
37+
expect(marks[0].detail).toMatchObject({
38+
source: 'awsui',
39+
instanceIdentifier: expect.any(String),
40+
loading: false,
41+
disabled: false,
42+
inViewport: true,
43+
text: 'Launch instance',
44+
});
4445

45-
await expect(getElementPerformanceMarkText(marks[0].detail.instanceIdentifier)).resolves.toBe('Launch instance');
46-
})
47-
);
48-
});
46+
await expect(getElementPerformanceMarkText(marks[0].detail.instanceIdentifier)).resolves.toBe(
47+
'Launch instance'
48+
);
49+
})
50+
);
51+
});
52+
}

‎src/flashbar/__integ__/collapsible.test.ts‎

Lines changed: 151 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -8,176 +8,178 @@ import { FlashbarBasePage } from './pages/base';
88
import { setupTest } from './pages/interactive-page';
99
import { setupTest as setupStickyFlashbarTest } from './pages/sticky-page';
1010

11-
describe('Collapsible Flashbar', () => {
12-
describe('Keyboard navigation', () => {
13-
it(
14-
'can expand and collapse stacked notifications with the keyboard',
15-
setupTest(async page => {
16-
await page.toggleStackingFeature();
17-
18-
// Navigate past all buttons to add and remove flashes
19-
await page.click('#focus-before');
20-
await page.keys('Tab');
21-
22-
await expect(page.countFlashes()).resolves.toBe(1);
23-
await page.keys('Space');
24-
25-
await page.pause(FOCUS_DEBOUNCE_DELAY);
26-
await expect(page.countFlashes()).resolves.toBe(5);
27-
await expect(page.isFlashFocused(1)).resolves.toBe(true);
28-
29-
// Navigate past all flash buttons
30-
await page.keys(new Array(11).fill('Tab'));
31-
32-
await page.keys('Space');
33-
await expect(page.countFlashes()).resolves.toBe(1);
34-
})
35-
);
36-
});
37-
38-
describe('Focus interactions', () => {
39-
describe('in collapsed state', () => {
40-
test(
41-
'adding flash with ariaRole="status" does not move focus',
11+
for (let i = 0; i < 50; i++) {
12+
describe(`Collapsible Flashbar $i`, () => {
13+
describe('Keyboard navigation', () => {
14+
it(
15+
'can expand and collapse stacked notifications with the keyboard',
4216
setupTest(async page => {
4317
await page.toggleStackingFeature();
44-
await page.addInfoFlash();
45-
return expect(page.isFlashFocused(1)).resolves.toBe(false);
46-
})
47-
);
4818

49-
test(
50-
'adding flash with ariaRole="alert" moves focus to the new flash',
51-
setupTest(async page => {
52-
await page.toggleStackingFeature();
53-
await page.addErrorFlash();
54-
return expect(page.isFlashFocused(1)).resolves.toBe(true);
55-
})
56-
);
19+
// Navigate past all buttons to add and remove flashes
20+
await page.click('#focus-before');
21+
await page.keys('Tab');
5722

58-
test(
59-
'adding new non-alert flashes does not move focus to the new flash',
60-
setupTest(async page => {
61-
await page.toggleStackingFeature();
62-
await page.addErrorFlash();
63-
await expect(page.isFlashFocused(1)).resolves.toBe(true);
64-
await page.addInfoFlash();
65-
await expect(page.isFlashFocused(1)).resolves.toBe(false);
66-
})
67-
);
68-
});
23+
await expect(page.countFlashes()).resolves.toBe(1);
24+
await page.keys('Space');
6925

70-
describe('in expanded state', () => {
71-
test(
72-
'adding flash with ariaRole="status" does not move focus',
73-
setupTest(async page => {
74-
await page.toggleStackingFeature();
75-
await page.toggleCollapsedState();
76-
await page.addInfoFlash();
77-
return expect(page.isFlashFocused(1)).resolves.toBe(false);
78-
})
79-
);
26+
await page.pause(FOCUS_DEBOUNCE_DELAY);
27+
await expect(page.countFlashes()).resolves.toBe(5);
28+
await expect(page.isFlashFocused(1)).resolves.toBe(true);
8029

81-
test(
82-
'adding flash with ariaRole="alert" moves focus to the new flash',
83-
setupTest(async page => {
84-
await page.toggleStackingFeature();
85-
await page.toggleCollapsedState();
86-
await page.addErrorFlash();
87-
return expect(page.isFlashFocused(1)).resolves.toBe(true);
88-
})
89-
);
30+
// Navigate past all flash buttons
31+
await page.keys(new Array(11).fill('Tab'));
9032

91-
test(
92-
'adding new non-alert flashes does not move focus to the new flash',
93-
setupTest(async page => {
94-
await page.toggleStackingFeature();
95-
await page.toggleCollapsedState();
96-
await page.addErrorFlash();
97-
await expect(page.isFlashFocused(1)).resolves.toBe(true);
98-
await page.addInfoFlash();
99-
await expect(page.isFlashFocused(1)).resolves.toBe(false);
33+
await page.keys('Space');
34+
await expect(page.countFlashes()).resolves.toBe(1);
10035
})
10136
);
37+
});
10238

103-
test(
104-
'adding new non-alert flashes does not move focus to previous alert flashes',
105-
setupTest(async page => {
106-
await page.toggleStackingFeature();
107-
await page.toggleCollapsedState();
108-
await page.addErrorFlash();
109-
await expect(page.isFlashFocused(1)).resolves.toBe(true);
110-
await page.addInfoFlash();
111-
await expect(page.isFlashFocused(2)).resolves.toBe(false);
112-
})
113-
);
39+
describe('Focus interactions', () => {
40+
describe('in collapsed state', () => {
41+
test(
42+
'adding flash with ariaRole="status" does not move focus',
43+
setupTest(async page => {
44+
await page.toggleStackingFeature();
45+
await page.addInfoFlash();
46+
return expect(page.isFlashFocused(1)).resolves.toBe(false);
47+
})
48+
);
49+
50+
test(
51+
'adding flash with ariaRole="alert" moves focus to the new flash',
52+
setupTest(async page => {
53+
await page.toggleStackingFeature();
54+
await page.addErrorFlash();
55+
return expect(page.isFlashFocused(1)).resolves.toBe(true);
56+
})
57+
);
58+
59+
test(
60+
'adding new non-alert flashes does not move focus to the new flash',
61+
setupTest(async page => {
62+
await page.toggleStackingFeature();
63+
await page.addErrorFlash();
64+
await expect(page.isFlashFocused(1)).resolves.toBe(true);
65+
await page.addInfoFlash();
66+
await expect(page.isFlashFocused(1)).resolves.toBe(false);
67+
})
68+
);
69+
});
70+
71+
describe('in expanded state', () => {
72+
test(
73+
'adding flash with ariaRole="status" does not move focus',
74+
setupTest(async page => {
75+
await page.toggleStackingFeature();
76+
await page.toggleCollapsedState();
77+
await page.addInfoFlash();
78+
return expect(page.isFlashFocused(1)).resolves.toBe(false);
79+
})
80+
);
81+
82+
test(
83+
'adding flash with ariaRole="alert" moves focus to the new flash',
84+
setupTest(async page => {
85+
await page.toggleStackingFeature();
86+
await page.toggleCollapsedState();
87+
await page.addErrorFlash();
88+
return expect(page.isFlashFocused(1)).resolves.toBe(true);
89+
})
90+
);
91+
92+
test(
93+
'adding new non-alert flashes does not move focus to the new flash',
94+
setupTest(async page => {
95+
await page.toggleStackingFeature();
96+
await page.toggleCollapsedState();
97+
await page.addErrorFlash();
98+
await expect(page.isFlashFocused(1)).resolves.toBe(true);
99+
await page.addInfoFlash();
100+
await expect(page.isFlashFocused(1)).resolves.toBe(false);
101+
})
102+
);
103+
104+
test(
105+
'adding new non-alert flashes does not move focus to previous alert flashes',
106+
setupTest(async page => {
107+
await page.toggleStackingFeature();
108+
await page.toggleCollapsedState();
109+
await page.addErrorFlash();
110+
await expect(page.isFlashFocused(1)).resolves.toBe(true);
111+
await page.addInfoFlash();
112+
await expect(page.isFlashFocused(2)).resolves.toBe(false);
113+
})
114+
);
115+
});
116+
117+
describe('on expand', () => {
118+
test(
119+
'focuses on the first flash',
120+
setupTest(async page => {
121+
await page.toggleStackingFeature();
122+
await page.addErrorFlash();
123+
await page.toggleCollapsedState();
124+
await page.pause(FOCUS_DEBOUNCE_DELAY);
125+
await expect(page.isFlashFocused(1)).resolves.toBe(true);
126+
})
127+
);
128+
});
114129
});
115130

116-
describe('on expand', () => {
131+
describe('Sticky Flashbar', () => {
117132
test(
118-
'focuses on the first flash',
119-
setupTest(async page => {
120-
await page.toggleStackingFeature();
121-
await page.addErrorFlash();
133+
'keeps a space to the screen bottom to prevent the notification bar from getting cropped',
134+
setupStickyFlashbarTest(async page => {
135+
const windowDimensions = { width: 1000, height: 500 };
136+
await page.setWindowSize(windowDimensions);
122137
await page.toggleCollapsedState();
123-
await page.pause(FOCUS_DEBOUNCE_DELAY);
124-
await expect(page.isFlashFocused(1)).resolves.toBe(true);
138+
expect(await page.getNotificationBarBottom()).toBeGreaterThan(windowDimensions.height);
139+
await page.windowScrollTo({ top: 1200 });
140+
await page.waitForAssertion(async () => {
141+
await expect(page.getNotificationBarBottom()).resolves.toBeLessThan(windowDimensions.height);
142+
});
125143
})
126144
);
127145
});
128146
});
129147

130-
describe('Sticky Flashbar', () => {
148+
describe('Flashbar Style API', () => {
131149
test(
132-
'keeps a space to the screen bottom to prevent the notification bar from getting cropped',
133-
setupStickyFlashbarTest(async page => {
134-
const windowDimensions = { width: 1000, height: 500 };
135-
await page.setWindowSize(windowDimensions);
136-
await page.toggleCollapsedState();
137-
expect(await page.getNotificationBarBottom()).toBeGreaterThan(windowDimensions.height);
138-
await page.windowScrollTo({ top: 1200 });
139-
await page.waitForAssertion(async () => {
140-
await expect(page.getNotificationBarBottom()).resolves.toBeLessThan(windowDimensions.height);
141-
});
142-
})
143-
);
144-
});
145-
});
150+
'active, hover and focus states',
151+
useBrowser(async browser => {
152+
await browser.url('#/light/flashbar/style-custom');
146153

147-
describe('Flashbar Style API', () => {
148-
test(
149-
'active, hover and focus states',
150-
useBrowser(async browser => {
151-
await browser.url('#/light/flashbar/style-custom');
154+
const page = new FlashbarBasePage(browser);
155+
const dismissButton = page.getDismissButton();
156+
const notificationBar = page.getNotificationBar();
157+
const expandButton = page.getExpandButton();
152158

153-
const page = new FlashbarBasePage(browser);
154-
const dismissButton = page.getDismissButton();
155-
const notificationBar = page.getNotificationBar();
156-
const expandButton = page.getExpandButton();
159+
await page.hoverElement(dismissButton);
160+
await expect((await browser.$(dismissButton).getCSSProperty('color')).value).toBe('rgba(63,125,74,1)');
157161

158-
await page.hoverElement(dismissButton);
159-
await expect((await browser.$(dismissButton).getCSSProperty('color')).value).toBe('rgba(63,125,74,1)');
162+
await page.buttonDownOnElement(dismissButton);
163+
await expect((await browser.$(dismissButton).getCSSProperty('color')).value).toBe('rgba(46,72,50,1)');
160164

161-
await page.buttonDownOnElement(dismissButton);
162-
await expect((await browser.$(dismissButton).getCSSProperty('color')).value).toBe('rgba(46,72,50,1)');
163-
164-
await page.click('[data-testid=collapsed]');
165-
await page.keys('Tab');
166-
await expect((await browser.$(dismissButton).getCSSProperty('box-shadow', '::before')).value).toBe(
167-
'rgb(63,125,74)0px0px0px1px'
168-
);
169-
170-
await page.click('[data-testid=collapsed]');
171-
await page.keys(['Shift', 'Tab']);
172-
await expect((await browser.$(expandButton).getCSSProperty('box-shadow', '::before')).value).toBe(
173-
'rgb(239,240,240)0px0px0px1px'
174-
);
175-
await expect((await browser.$(expandButton).getCSSProperty('border-radius', '::before')).value).toBe('4px');
176-
177-
await page.buttonDownOnElement(notificationBar);
178-
await expect((await browser.$(notificationBar).getCSSProperty('background-color')).value).toBe(
179-
'rgba(92,102,112,1)'
180-
);
181-
})
182-
);
183-
});
165+
await page.click('[data-testid=collapsed]');
166+
await page.keys('Tab');
167+
await expect((await browser.$(dismissButton).getCSSProperty('box-shadow', '::before')).value).toBe(
168+
'rgb(63,125,74)0px0px0px1px'
169+
);
170+
171+
await page.click('[data-testid=collapsed]');
172+
await page.keys(['Shift', 'Tab']);
173+
await expect((await browser.$(expandButton).getCSSProperty('box-shadow', '::before')).value).toBe(
174+
'rgb(239,240,240)0px0px0px1px'
175+
);
176+
await expect((await browser.$(expandButton).getCSSProperty('border-radius', '::before')).value).toBe('4px');
177+
178+
await page.buttonDownOnElement(notificationBar);
179+
await expect((await browser.$(notificationBar).getCSSProperty('background-color')).value).toBe(
180+
'rgba(92,102,112,1)'
181+
);
182+
})
183+
);
184+
});
185+
}

0 commit comments

Comments
 (0)