From bf7f6f6acf63ac4d7d536c8a297ff14f704b13c7 Mon Sep 17 00:00:00 2001 From: Christian Bromann Date: Tue, 20 Aug 2024 10:12:50 -0700 Subject: [PATCH] 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](https://github.com/ionic-team/stencil/pull/5926). After debugging the situation it turns out that the test overwrites the first style in the `` 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 ## Other information n/a --- .../menu/test/safe-area/menu.e2e.ts | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts b/core/src/components/menu/test/safe-area/menu.e2e.ts index 9ab66c454a..004c928bef 100644 --- a/core/src/components/menu/test/safe-area/menu.e2e.ts +++ b/core/src/components/menu/test/safe-area/menu.e2e.ts @@ -14,13 +14,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-start'); @@ -28,20 +29,20 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => { 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'); @@ -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'); @@ -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');