Skip to content

Commit

Permalink
fix(test): fix Stencil Nightly build (#29780)
Browse files Browse the repository at this point in the history 
## 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](ionic-team/stencil#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
  • Loading branch information
@christian-bromann
christian-bromann authored Aug 20, 2024
1 parent 4580edc commit bf7f6f6
Showing 1 changed file with 12 additions and 9 deletions.
21 changes: 12 additions & 9 deletions core/src/components/menu/test/safe-area/menu.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,35 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
const ionDidOpen = await page.spyOnEvent('ionDidOpen');

await page.evaluate(() => {
const style = document.querySelector('style');
style!.innerHTML = `
const overwrittenStyle = document.createElement('style');
overwrittenStyle.innerHTML = `
:root {
--ion-safe-area-left: 50px !important;
--ion-safe-area-right: 10px !important;
}
`;
document.head.appendChild(overwrittenStyle);
});

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

const startMenu = page.locator('[menu-id="start-menu"]');
await expect(startMenu).toHaveClass(/show-menu/);

await expect(page).toHaveScreenshot(screenshot(`menu-start-safe-area-left-notch`));
});
test('should render with safe area when notch is on the right', async ({ page }) => {
const ionDidOpen = await page.spyOnEvent('ionDidOpen');

await page.evaluate(() => {
const style = document.querySelector('style');
style!.innerHTML = `
const overwrittenStyle = document.createElement('style');
overwrittenStyle.innerHTML = `
:root {
--ion-safe-area-left: 10px !important;
--ion-safe-area-right: 50px !important;
}
`;
document.head.appendChild(overwrittenStyle);
});

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

await page.evaluate(() => {
const style = document.querySelector('style');
style!.innerHTML = `
const overwrittenStyle = document.createElement('style');
overwrittenStyle.innerHTML = `
:root {
--ion-safe-area-left: 50px !important;
--ion-safe-area-right: 10px !important;
}
`;
document.head.appendChild(overwrittenStyle);
});

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

await page.evaluate(() => {
const style = document.querySelector('style');
style!.innerHTML = `
const overwrittenStyle = document.createElement('style');
overwrittenStyle.innerHTML = `
:root {
--ion-safe-area-left: 10px !important;
--ion-safe-area-right: 50px !important;
}
`;
document.head.appendChild(overwrittenStyle);
});

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

0 comments on commit bf7f6f6

Please sign in to comment.