Skip to content

fix(popover): adjust position to account for approximate safe area #29068

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 13 commits into
base: main
Choose a base branch
from
Prev Previous commit
Next Next commit
add tests
  • Loading branch information
amandaesmith3 committed Apr 16, 2024
commit cfac073c2af80ef942cf11e56b2e1a7d33f7a060
42 changes: 41 additions & 1 deletion core/src/components/popover/test/adjustment/popover.e2e.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
import { configs, test, Viewports } from '@utils/test/playwright';

/**
* This behavior does not vary across modes/directions.
Expand Down Expand Up @@ -33,5 +33,45 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>

expect(box.y > 0).toBe(true);
});

test('should account for vertical safe area approximation in portrait mode', async ({ page }) => {
await page.goto('/src/components/popover/test/adjustment', config);
const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');

await page.mouse.click(0, 0);
await ionPopoverDidPresent.next();

const popoverContent = page.locator('ion-popover .popover-content');
const box = (await popoverContent.boundingBox())!;

/**
* The safe area approximation should move the y position by 5%
* of the screen height. We use 10px as the threshold to give
* wiggle room and help prevent flakiness.
*/
expect(box.x < 10).toBe(true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should be screenshot tests according to our best practices guide.

(same as below test)

expect(box.y > 10).toBe(true);
});

test('should account for vertical and horizontal safe area approximation in landscape mode', async ({ page }) => {
await page.goto('/src/components/popover/test/adjustment', config);
const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');

await page.setViewportSize(Viewports.tablet.landscape);

await page.mouse.click(0, 0);
await ionPopoverDidPresent.next();

const popoverContent = page.locator('ion-popover .popover-content');
const box = (await popoverContent.boundingBox())!;

/**
* The safe area approximation should move the y position by 5%
* of the screen height. We use 10px as the threshold to give
* wiggle room and help prevent flakiness.
*/
expect(box.x > 10).toBe(true);
expect(box.y > 10).toBe(true);
});
});
});