javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-04 13:17:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(test): fix Stencil Nightly build (#29780)

Browse Source 
## 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](https://github.com/ionic-team/stencil/pull/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
This commit is contained in:
Christian Bromann
2024-08-20 10:12:50 -07:00
committed by GitHub
parent 4580edc21f
commit bf7f6f6acf
1 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
core/src/components/menu/test/safe-area/menu.e2e.ts
View File

@ -14,13 +14,14 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
const ionDidOpen = await page.spyOnEvent('ionDidOpen'); const ionDidOpen = await page.spyOnEvent('ionDidOpen');
await page.evaluate(() => { await page.evaluate(() => {
const style = document.querySelector('style'); const overwrittenStyle = document.createElement('style');
style!.innerHTML = ` overwrittenStyle.innerHTML = `
:root { :root {
--ion-safe-area-left: 50px !important; --ion-safe-area-left: 50px !important;
--ion-safe-area-right: 10px !important; --ion-safe-area-right: 10px !important;
} }
`; `;
document.head.appendChild(overwrittenStyle);
}); });
await page.click('#open-start'); await page.click('#open-start');
@ -28,20 +29,20 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
const startMenu = page.locator('[menu-id="start-menu"]'); const startMenu = page.locator('[menu-id="start-menu"]');
await expect(startMenu).toHaveClass(/show-menu/); await expect(startMenu).toHaveClass(/show-menu/);
await expect(page).toHaveScreenshot(screenshot(`menu-start-safe-area-left-notch`)); 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 }) => { test('should render with safe area when notch is on the right', async ({ page }) => {
const ionDidOpen = await page.spyOnEvent('ionDidOpen'); const ionDidOpen = await page.spyOnEvent('ionDidOpen');
await page.evaluate(() => { await page.evaluate(() => {
const style = document.querySelector('style'); const overwrittenStyle = document.createElement('style');
style!.innerHTML = ` overwrittenStyle.innerHTML = `
:root { :root {
--ion-safe-area-left: 10px !important; --ion-safe-area-left: 10px !important;
--ion-safe-area-right: 50px !important; --ion-safe-area-right: 50px !important;
} }
`; `;
document.head.appendChild(overwrittenStyle);
}); });
await page.click('#open-start'); await page.click('#open-start');
@ -58,13 +59,14 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
const ionDidOpen = await page.spyOnEvent('ionDidOpen'); const ionDidOpen = await page.spyOnEvent('ionDidOpen');
await page.evaluate(() => { await page.evaluate(() => {
const style = document.querySelector('style'); const overwrittenStyle = document.createElement('style');
style!.innerHTML = ` overwrittenStyle.innerHTML = `
:root { :root {
--ion-safe-area-left: 50px !important; --ion-safe-area-left: 50px !important;
--ion-safe-area-right: 10px !important; --ion-safe-area-right: 10px !important;
} }
`; `;
document.head.appendChild(overwrittenStyle);
}); });
await page.click('#open-end'); await page.click('#open-end');
@ -79,13 +81,14 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
const ionDidOpen = await page.spyOnEvent('ionDidOpen'); const ionDidOpen = await page.spyOnEvent('ionDidOpen');
await page.evaluate(() => { await page.evaluate(() => {
const style = document.querySelector('style'); const overwrittenStyle = document.createElement('style');
style!.innerHTML = ` overwrittenStyle.innerHTML = `
:root { :root {
--ion-safe-area-left: 10px !important; --ion-safe-area-left: 10px !important;
--ion-safe-area-right: 50px !important; --ion-safe-area-right: 50px !important;
} }
`; `;
document.head.appendChild(overwrittenStyle);
}); });
await page.click('#open-end'); await page.click('#open-end');