From 9d459bdc88f70d0094fd646c63d677573ab162e6 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Wed, 7 Jun 2023 08:07:45 -0700
Subject: [PATCH] test(segment): undo skip for keyboard navigable (#27574)

Issue number: internal

---------

<!-- 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. -->

The keyboard navigation was being skipped due to flakiness.

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

The keyboard navigation is no longer being skipped.
- Using the `pageUtils` to Tab
- Verify the buttons are visible before keyboard press

## 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. -->

The flaky test would occur due to the keyboard being pressed before the
buttons have loaded in. Weirdly, this only happens when testing "Mobile
Chrome" but works fine outside testing.

![Screenshot 2023-06-02 at 11 51 41
AM](https://github.com/ionic-team/ionic-framework/assets/13530427/c514472d-afce-4c90-874a-edabaa56048f)

I would recommend adding `only` to the test and using `npm run test.e2e
segment -- --repeat-each 50` to verify that it works.
---
 .../segment/test/a11y/segment.e2e.ts          | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/core/src/components/segment/test/a11y/segment.e2e.ts b/core/src/components/segment/test/a11y/segment.e2e.ts
index 33bebc50f2..279e8864aa 100644
--- a/core/src/components/segment/test/a11y/segment.e2e.ts
+++ b/core/src/components/segment/test/a11y/segment.e2e.ts
@@ -11,12 +11,8 @@ configs().forEach(({ title, config }) => {
       expect(results.violations).toEqual([]);
     });
 
-    // TODO FW-3710
-    test.skip('segment buttons should be keyboard navigable', async ({ page, browserName, skip }, testInfo) => {
-      // TODO (FW-2979)
-      skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
-      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
-      const isRTL = testInfo.project.metadata.rtl === true;
+    test('segment buttons should be keyboard navigable', async ({ page, pageUtils }) => {
+      const isRTL = config.direction === 'rtl';
       const nextKey = isRTL ? 'ArrowLeft' : 'ArrowRight';
       const previousKey = isRTL ? 'ArrowRight' : 'ArrowLeft';
 
@@ -24,7 +20,16 @@ configs().forEach(({ title, config }) => {
 
       const segmentButtons = page.locator('ion-segment-button');
 
-      await page.keyboard.press(tabKey);
+      // A flaky test only occurs on "Mobile Chrome"
+      // If it occurs, the elements are not visible yet
+      // when the test presses the any key on the keyboard
+      // This may be due to the fact that the elements are
+      // still updating their state before the render method
+      // The workaround is to wait for the first element to be visible
+      // If the first element is visible, then the rest of the elements are visible
+      await segmentButtons.nth(0).waitFor();
+
+      await pageUtils.pressKeys('Tab');
       await expect(segmentButtons.nth(0)).toBeFocused();
 
       await page.keyboard.press(nextKey);