Skip to content

Commit bf7f6f6

Browse files
christian-bromannchristian-bromann
authored
fix(test): fix Stencil Nightly build (#29780)
## What is the current behavior? The Playwright test for `core/src/components/menu/test/safe-area/menu.e2e.ts` started to fail after introducing the following patch to Stencil: [#5926](stenciljs/core#5926). After debugging the situation it turns out that the test overwrites the first style in the `<head />` tag which turns out to be a component style that caused all screenshot test to fail. ## What is the new behavior? Overwrite the existing style by adding a new style tag at the bottom of the page. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information n/a
1 parent 4580edc commit bf7f6f6

File tree

1 file changed

+12
-9
lines changed

1 file changed

+12
-9
lines changed

‎core/src/components/menu/test/safe-area/menu.e2e.ts

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,34 +14,35 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
1414
const ionDidOpen = await page.spyOnEvent('ionDidOpen');
1515

1616
await page.evaluate(() => {
17-
const style = document.querySelector('style');
18-
style!.innerHTML = `
17+
const overwrittenStyle = document.createElement('style');
18+
overwrittenStyle.innerHTML = `
1919
:root {
2020
--ion-safe-area-left: 50px !important;
2121
--ion-safe-area-right: 10px !important;
2222
}
2323
`;
24+
document.head.appendChild(overwrittenStyle);
2425
});
2526

2627
await page.click('#open-start');
2728
await ionDidOpen.next();
2829

2930
const startMenu = page.locator('[menu-id="start-menu"]');
3031
await expect(startMenu).toHaveClass(/show-menu/);
31-
3232
await expect(page).toHaveScreenshot(screenshot(`menu-start-safe-area-left-notch`));
3333
});
3434
test('should render with safe area when notch is on the right', async ({ page }) => {
3535
const ionDidOpen = await page.spyOnEvent('ionDidOpen');
3636

3737
await page.evaluate(() => {
38-
const style = document.querySelector('style');
39-
style!.innerHTML = `
38+
const overwrittenStyle = document.createElement('style');
39+
overwrittenStyle.innerHTML = `
4040
:root {
4141
--ion-safe-area-left: 10px !important;
4242
--ion-safe-area-right: 50px !important;
4343
}
4444
`;
45+
document.head.appendChild(overwrittenStyle);
4546
});
4647

4748
await page.click('#open-start');
@@ -58,13 +59,14 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
5859
const ionDidOpen = await page.spyOnEvent('ionDidOpen');
5960

6061
await page.evaluate(() => {
61-
const style = document.querySelector('style');
62-
style!.innerHTML = `
62+
const overwrittenStyle = document.createElement('style');
63+
overwrittenStyle.innerHTML = `
6364
:root {
6465
--ion-safe-area-left: 50px !important;
6566
--ion-safe-area-right: 10px !important;
6667
}
6768
`;
69+
document.head.appendChild(overwrittenStyle);
6870
});
6971

7072
await page.click('#open-end');
@@ -79,13 +81,14 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
7981
const ionDidOpen = await page.spyOnEvent('ionDidOpen');
8082

8183
await page.evaluate(() => {
82-
const style = document.querySelector('style');
83-
style!.innerHTML = `
84+
const overwrittenStyle = document.createElement('style');
85+
overwrittenStyle.innerHTML = `
8486
:root {
8587
--ion-safe-area-left: 10px !important;
8688
--ion-safe-area-right: 50px !important;
8789
}
8890
`;
91+
document.head.appendChild(overwrittenStyle);
8992
});
9093

9194
await page.click('#open-end');

0 commit comments

Comments
 (0)