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

test(segment): undo skip for keyboard navigable (#27574)

Browse Source 
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.
This commit is contained in:
Maria Hutt
2023-06-07 08:07:45 -07:00
committed by GitHub
parent 0e7d80cdbd
commit 9d459bdc88
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
core/src/components/segment/test/a11y/segment.e2e.ts
View File

@ -11,12 +11,8 @@ configs().forEach(({ title, config }) => {
expect(results.violations).toEqual([]); expect(results.violations).toEqual([]);
}); });
// TODO FW-3710 test('segment buttons should be keyboard navigable', async ({ page, pageUtils }) => {
test.skip('segment buttons should be keyboard navigable', async ({ page, browserName, skip }, testInfo) => { const isRTL = config.direction === 'rtl';
// 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;
const nextKey = isRTL ? 'ArrowLeft' : 'ArrowRight'; const nextKey = isRTL ? 'ArrowLeft' : 'ArrowRight';
const previousKey = isRTL ? 'ArrowRight' : 'ArrowLeft'; const previousKey = isRTL ? 'ArrowRight' : 'ArrowLeft';
@ -24,7 +20,16 @@ configs().forEach(({ title, config }) => {
const segmentButtons = page.locator('ion-segment-button'); 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 expect(segmentButtons.nth(0)).toBeFocused();
await page.keyboard.press(nextKey); await page.keyboard.press(nextKey);