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

chore: sync with main

Browse Source
This commit is contained in:
Liam DeBeasi
2024-04-03 13:17:55 -04:00
parent 02e05bd7cb b5cb828861
commit ac7631a324
126 changed files with 575 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/popover/popover.scss
View File

@ -101,8 +101,6 @@
display: flex;
flex-direction: column;
overflow: hidden;
}
// Nested Popovers

92
core/src/components/popover/test/basic/popover.e2e.ts
View File

@ -48,6 +48,98 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
* Translucent popovers are only available on iOS
*/
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('popover: scrolling'), async () => {
test.beforeEach(({ skip }) => {
test.info().annotations.push({
type: 'issue',
description: 'https://github.com/ionic-team/ionic-framework/issues/29211',
});
// We are testing if Ionic sets overflow is set correctly on elements,
// so we do not need to test across browsers
skip.browser('webkit', 'Behavior does not vary across browsers');
skip.browser('firefox', 'Behavior does not vary across browsers');
});
test('should scroll to bottom without IonContent', async ({ page }) => {
await page.setContent(
`
<style>
ion-popover {
--height: 150px;
}
</style>
<ion-popover>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</ion-popover>
`,
config
);
const popover = page.locator('ion-popover');
const viewport = popover.locator('.popover-viewport');
const p = popover.locator('p');
const lastP = await p.last();
await popover.evaluate((el: HTMLIonPopoverElement) => el.present());
await expect(lastP).not.toBeInViewport();
// hover over viewport and scroll to bottom
await viewport.hover();
await page.mouse.wheel(0, 500);
await expect(lastP).toBeInViewport();
});
test('should scroll to bottom with IonContent', async ({ page }) => {
await page.setContent(
`
<style>
ion-popover {
--height: 150px;
}
</style>
<ion-popover>
<ion-content>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</ion-content>
</ion-popover>
`,
config
);
const popover = page.locator('ion-popover');
const content = popover.locator('ion-content');
const p = popover.locator('p');
const lastP = await p.last();
await popover.evaluate((el: HTMLIonPopoverElement) => el.present());
await expect(lastP).not.toBeInViewport();
// hover over viewport and scroll to bottom
await content.hover();
await page.mouse.wheel(0, 500);
await expect(lastP).toBeInViewport();
});
});
test.describe(title('popover: translucent variants'), async () => {
let popoverFixture!: PopoverFixture;
test.beforeEach(async ({ page }) => {