test(popover): re-enable size (#27686)

Issue number: internal ticket

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Size tests were being skipped.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Size tests are no longer being skipped.
- Size tests have been provided comments to explain flakiness.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

I recommend adding a `.only` to the `popover: visible backdrop` and
running the test with `npm run test.e2e popover -- --repeat-each 100` a
few times

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/popover/test/size/popover.e2e.ts

@@ -8,26 +8,38 @@ import { openPopover, screenshotPopover } from '../test.utils';
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('popover: size'), async () => {
-    /**
+    test.beforeEach(async ({ page }) => {
-     * The popovers have showBackdrop=false so we can open most of them at once
-     * and massively cut down on screenshots taken. The content has its own
-     * backdrop so you can still see the popovers.
-     */
-    // TODO FW-3598
-    test.skip('should calculate popover width based on sizing method', async ({ page }) => {
       await page.goto('/src/components/popover/test/size', config);
-      await page.setViewportSize(Viewports.tablet.portrait); // avoid popovers overlapping
+    });
+
+    test.describe('popover: invisible backdrop', async () => {
+      /**
+       * The popovers have showBackdrop=false so we can open most of them at once
+       * and massively cut down on screenshots taken. The content has its own
+       * backdrop so you can still see the popovers.
+       */
+      test('should calculate popover width based on sizing method', async ({ page }) => {
+        await page.setViewportSize(Viewports.tablet.portrait); // avoid popovers overlapping
 
-      const sameTimeTriggers = ['auto-trigger', 'cover-trigger', 'event-trigger'];
+        const sameTimeTriggers = ['auto-trigger', 'cover-trigger', 'event-trigger'];
 
-      for (const trigger of sameTimeTriggers) {
+        for (const trigger of sameTimeTriggers) {
-        await openPopover(page, trigger, true);
+          await openPopover(page, trigger, true);
-      }
+        }
 
-      await expect(page).toHaveScreenshot(screenshot(`popover-size`));
+        await expect(page).toHaveScreenshot(screenshot(`popover-size`));
+      });
+    });
 
-      // test this one separately since it would overlap others
+    test.describe('popover: visible backdrop', async () => {
-      await screenshotPopover(page, screenshot, 'no-event-trigger', 'size');
+      test('should calculate popover width based on sizing method', async ({ page }) => {
+        /**
+         * This must be tested separately because it's not aimed to be opened at the same time as the others.
+         * Otherwise, the backdrops from the previous popovers would be mounted on top of each other. This is a problem because the following trigger won't be accessible to click.
+         * The mounted backdrops would be in the way and would need to be closed first.
+         */
+        await screenshotPopover(page, screenshot, 'no-event-trigger', 'size');
+      });
     });
   });
 });