mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
test(header): replace HTML test with setContent-based e2e test
This commit is contained in:
ShaneK
71
core/src/components/header/test/condense-modal/header.e2e.ts
Normal file
71
core/src/components/header/test/condense-modal/header.e2e.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* This test verifies that collapsible headers with mode="ios" work correctly
|
||||
* when both iOS and MD stylesheets are loaded. The bug occurred because
|
||||
* `.header-collapse-condense { display: none }` in the MD stylesheet was not
|
||||
* scoped to `.header-md`, causing it to hide iOS condense headers when both
|
||||
* stylesheets were present.
|
||||
*/
|
||||
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
test.describe(title('header: condense with iOS mode override'), () => {
|
||||
test('should show iOS condense header when both MD and iOS styles are loaded', async ({ page }) => {
|
||||
test.info().annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/29929',
|
||||
});
|
||||
|
||||
// Include both an MD header and an iOS modal to force both stylesheets to load
|
||||
await page.setContent(
|
||||
`
|
||||
<!-- MD header to force MD stylesheet to load -->
|
||||
<ion-header mode="md" id="mdHeader">
|
||||
<ion-toolbar>
|
||||
<ion-title>MD Header</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<!-- Modal with iOS condense header -->
|
||||
<ion-modal>
|
||||
<ion-header mode="ios" id="smallTitleHeader">
|
||||
<ion-toolbar>
|
||||
<ion-title>Header</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content fullscreen="true">
|
||||
<ion-header collapse="condense" mode="ios" id="largeTitleHeader">
|
||||
<ion-toolbar>
|
||||
<ion-title size="large">Large Header</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<p>Content</p>
|
||||
</ion-content>
|
||||
</ion-modal>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const modal = page.locator('ion-modal');
|
||||
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
|
||||
|
||||
await modal.evaluate((el: HTMLIonModalElement) => el.present());
|
||||
await ionModalDidPresent.next();
|
||||
|
||||
const largeTitleHeader = modal.locator('#largeTitleHeader');
|
||||
|
||||
// The large title header should be visible, not hidden by MD styles
|
||||
await expect(largeTitleHeader).toBeVisible();
|
||||
|
||||
// Verify it has the iOS mode class
|
||||
await expect(largeTitleHeader).toHaveClass(/header-ios/);
|
||||
|
||||
// Verify it does NOT have display: none applied
|
||||
// This would fail if the MD stylesheet's unscoped .header-collapse-condense rule applies
|
||||
const display = await largeTitleHeader.evaluate((el) => {
|
||||
return window.getComputedStyle(el).display;
|
||||
});
|
||||
expect(display).not.toBe('none');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,144 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Modal - Basic</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--ion-safe-area-top: 20px;
|
||||
--ion-safe-area-bottom: 20px;
|
||||
--ion-safe-area-right: 20px;
|
||||
--ion-safe-area-left: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<div class="ion-page">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Header condense-modal</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<button id="basic-modal" onclick="presentModal()">Present modal with mode=ios</button>
|
||||
</ion-content>
|
||||
</div>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
window.addEventListener('ionModalDidDismiss', function (e) {
|
||||
console.log('DidDismiss', e);
|
||||
});
|
||||
window.addEventListener('ionModalWillDismiss', function (e) {
|
||||
console.log('WillDismiss', e);
|
||||
});
|
||||
|
||||
function createModal() {
|
||||
// create component to open
|
||||
const element = document.createElement('div');
|
||||
element.innerHTML = `
|
||||
<ion-header translucent="true" id="smallTitleHeader" mode="ios">
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0">
|
||||
<img style="transform: rotate(180deg)" src="/src/components/header/test/img.jpg" />
|
||||
</div>
|
||||
<ion-toolbar>
|
||||
<ion-title>Header</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content fullscreen="true">
|
||||
<ion-header collapse="condense" id="largeTitleHeader" mode="ios">
|
||||
<ion-toolbar>
|
||||
<ion-title size="large">Header</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<div class="ion-padding">
|
||||
<ion-button>Close Modal</ion-button>
|
||||
<h1>Content</h1>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, justo vitae rhoncus porttitor,
|
||||
massa elit molestie nisl, ut tincidunt orci enim ac ante. Vestibulum tincidunt dignissim elit. Morbi
|
||||
cursus hendrerit turpis, ut egestas tortor pulvinar sit amet. Interdum et malesuada fames ac ante ipsum
|
||||
primis in faucibus. Phasellus faucibus consequat purus vel mollis. Ut ultricies elit nunc. Quisque
|
||||
ultrices turpis vel augue auctor accumsan. Donec bibendum at nisi vel finibus. Fusce id imperdiet odio.
|
||||
Morbi orci ipsum, imperdiet ut iaculis sit amet, suscipit vulputate felis. Nullam arcu leo, volutpat eu
|
||||
porttitor sed, fringilla et arcu. Pellentesque ac libero sapien. Quisque id dui velit. Mauris et pretium
|
||||
tortor.
|
||||
</p>
|
||||
<p>
|
||||
Ut ultricies id augue vel aliquam. Etiam ornare finibus nisl, nec egestas urna. Nam pellentesque libero
|
||||
nec justo tristique lacinia. In sit amet gravida metus, ac tincidunt mauris. Fusce sit amet tempus turpis.
|
||||
Nulla ligula nunc, vestibulum quis quam in, feugiat aliquet nibh. Quisque in ante non nulla luctus gravida
|
||||
vel at lacus. Vivamus erat magna, elementum et dignissim nec, posuere eu ante. Praesent elementum, arcu
|
||||
scelerisque venenatis sodales, turpis nulla aliquam urna, id hendrerit est orci et purus. Duis sem ipsum,
|
||||
imperdiet eu elit id, tincidunt tempus sapien. Praesent tincidunt, sapien sed rhoncus euismod, lectus
|
||||
velit ornare nunc, dapibus varius turpis leo ut magna.
|
||||
</p>
|
||||
<p>
|
||||
Nam quis quam id ante mattis pulvinar non sed mauris. Donec tempor sed nulla at semper. Vivamus ac nunc
|
||||
bibendum, ullamcorper lacus quis, ornare massa. Cras gravida nibh risus, id sollicitudin eros ultricies
|
||||
non. Integer velit massa, suscipit tincidunt rhoncus ut, lacinia et nisl. Maecenas volutpat ipsum blandit
|
||||
sollicitudin lobortis. Suspendisse potenti. Cras non mi non arcu varius dapibus. Suspendisse maximus eget
|
||||
justo a lobortis. Donec nulla ipsum, efficitur eget velit eget, varius rutrum quam. Nulla metus risus,
|
||||
accumsan a tellus ac, faucibus blandit quam. Donec luctus, nisl ac ultricies ornare, nunc elit finibus
|
||||
magna, id elementum ante urna congue ex. Cras condimentum nisi sollicitudin tortor vestibulum luctus.
|
||||
Curabitur non ipsum et ex vestibulum congue.
|
||||
</p>
|
||||
<p>
|
||||
Maecenas rhoncus elit ut consectetur faucibus. Etiam sed sem sed mauris condimentum viverra sit amet at
|
||||
nibh. Mauris bibendum at purus a cursus. Suspendisse potenti. Donec vel lacus ac odio euismod lacinia id
|
||||
in urna. Donec commodo ipsum augue, at bibendum ex convallis suscipit. Nulla ac rhoncus odio. Aenean
|
||||
elementum est nec arcu ultricies dignissim.
|
||||
</p>
|
||||
<p>
|
||||
Sed tincidunt bibendum massa, egestas bibendum est imperdiet vitae. Fusce dignissim consectetur ante a
|
||||
fermentum. Morbi suscipit turpis sapien. Suspendisse eleifend sapien eget nunc mattis mattis. Phasellus
|
||||
rhoncus sodales libero a imperdiet. Nam in vulputate lectus. Proin accumsan enim non nibh sagittis
|
||||
ultricies. Nullam vitae ultricies nunc. Nullam ultrices dolor nec vehicula posuere.
|
||||
</p>
|
||||
</div>
|
||||
</ion-content>
|
||||
<ion-footer translucent="true">
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
`;
|
||||
|
||||
// present the modal
|
||||
const modalElement = Object.assign(document.createElement('ion-modal'), {
|
||||
component: element,
|
||||
htmlAttributes: {
|
||||
'data-testid': 'basic-modal',
|
||||
},
|
||||
});
|
||||
// listen for close event
|
||||
const button = element.querySelector('ion-button');
|
||||
button.addEventListener('click', () => {
|
||||
modalElement.dismiss();
|
||||
});
|
||||
document.body.appendChild(modalElement);
|
||||
return modalElement;
|
||||
}
|
||||
|
||||
async function presentModal() {
|
||||
const presentingEl = document.querySelectorAll('.ion-page')[1];
|
||||
const modal = createModal();
|
||||
await modal.present(presentingEl);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user