From 6c3f6269e4f7ce70508972ede8b437df897aa615 Mon Sep 17 00:00:00 2001 From: Samuel Freiberg <32719011+samuelfreiberg@users.noreply.github.com> Date: Tue, 14 May 2024 15:49:02 -0700 Subject: [PATCH] Split FocusZone E2E Tests (#3619) * Adding resolutions to specific packages with security vulnerabilities * Remove * Adding whitespace * Revert * Removing unused file * Split focus zone tests into smaller, separate spec files * Change files --- .../specs/FocusZone_Directional.spec.win.ts | 150 ++++++++++++++++++ ...n.ts => FocusZone_Tab_CircNav.spec.win.ts} | 119 +------------- ...-9f62de15-8607-4900-ada1-fadd78c9a79e.json | 7 + 3 files changed, 158 insertions(+), 118 deletions(-) create mode 100644 apps/E2E/src/FocusZone/specs/FocusZone_Directional.spec.win.ts rename apps/E2E/src/FocusZone/specs/{FocusZone.spec.win.ts => FocusZone_Tab_CircNav.spec.win.ts} (57%) create mode 100644 change/@fluentui-react-native-e2e-testing-9f62de15-8607-4900-ada1-fadd78c9a79e.json diff --git a/apps/E2E/src/FocusZone/specs/FocusZone_Directional.spec.win.ts b/apps/E2E/src/FocusZone/specs/FocusZone_Directional.spec.win.ts new file mode 100644 index 0000000000..17cde774e9 --- /dev/null +++ b/apps/E2E/src/FocusZone/specs/FocusZone_Directional.spec.win.ts @@ -0,0 +1,150 @@ +import { Attribute, AttributeValue, Keys } from '../../common/consts'; +import FocusZonePageObject from '../pages/FocusZonePageObject'; + +// Before testing begins, allow up to 60 seconds for app to open +describe('FocusZone Testing Initialization', () => { + it('Wait for app load', async () => { + expect(await FocusZonePageObject.waitForInitialPageToDisplay()).toBeTrue(); + }); + + it('Click and navigate to FocusZone test page', async () => { + /* Click on component button to navigate to test page */ + expect(await FocusZonePageObject.navigateToPageAndLoadTests()).toBeTrue(); + + /* Expand E2E section */ + expect(await FocusZonePageObject.enableE2ETesterMode()).toBeTrue(); + + await expect(await FocusZonePageObject.didAssertPopup()) + .withContext(FocusZonePageObject.ERRORMESSAGE_ASSERT) + .toBeFalsy(); // Ensure no asserts popped up + }); +}); + +/* FocusZone Functional Testing + * + * Focuses on the directional aspect of FocusZone with arrow keys. + * + * */ +describe('FocusZone Functional Testing', () => { + beforeEach(async () => { + await FocusZonePageObject.scrollToTestElement(); + + await FocusZonePageObject.resetTest(); + }); + + it('Navigate bidirectional focuszone using arrow keys. Validate focus switches correctly.', async () => { + // move to 2 with right arrow + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(1), [Keys.ARROW_RIGHT]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + // move to 3 with down arrow + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_DOWN]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(3), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + expect(await FocusZonePageObject.didAssertPopup()) + .withContext(FocusZonePageObject.ERRORMESSAGE_ASSERT) + .toBeFalsy(); + }); + + it('Navigate horizontal focuszone using arrow keys. Validate focus switches correctly.', async () => { + await FocusZonePageObject.configureGridFocusZone('SetDirection', 'horizontal'); + // move to 2 with right arrow + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(1), [Keys.ARROW_RIGHT]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + // down arrow shouldn't move focus + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_DOWN]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + // left arrow goes back + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(4), [Keys.ARROW_LEFT]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(3), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + expect(await FocusZonePageObject.didAssertPopup()) + .withContext(FocusZonePageObject.ERRORMESSAGE_ASSERT) + .toBeFalsy(); + }); + + it('Navigates vertical focuszone using arrow keys. Validate focus switches correctly.', async () => { + await FocusZonePageObject.configureGridFocusZone('SetDirection', 'vertical'); + + // move to 2 with down arrow + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(1), [Keys.ARROW_DOWN]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + // right arrow shouldn't move focus + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_RIGHT]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + // up arrow goes back + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(4), [Keys.ARROW_UP]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(3), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + expect(await FocusZonePageObject.didAssertPopup()) + .withContext(FocusZonePageObject.ERRORMESSAGE_ASSERT) + .toBeFalsy(); + }); + + it('Navigates none-direction focuszone using arrow keys. Validate focus does not switch.', async () => { + await FocusZonePageObject.configureGridFocusZone('SetDirection', 'none'); + + // none of these key commands should move + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_DOWN]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_UP]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_LEFT]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_RIGHT]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + expect(await FocusZonePageObject.didAssertPopup()) + .withContext(FocusZonePageObject.ERRORMESSAGE_ASSERT) + .toBeFalsy(); + }); + + it('Navigates bi-directional focuszone with 2d navigation. Validate focus switches correctly.', async () => { + await FocusZonePageObject.configureGridFocusZone('Set2DNavigation', true); + + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(1), [Keys.ARROW_DOWN]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(4), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(4), [Keys.ARROW_RIGHT]); + expect( + await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(5), Attribute.IsFocused, AttributeValue.true), + ).toBeTruthy(); + + expect(await FocusZonePageObject.didAssertPopup()) + .withContext(FocusZonePageObject.ERRORMESSAGE_ASSERT) + .toBeFalsy(); + }); +}); diff --git a/apps/E2E/src/FocusZone/specs/FocusZone.spec.win.ts b/apps/E2E/src/FocusZone/specs/FocusZone_Tab_CircNav.spec.win.ts similarity index 57% rename from apps/E2E/src/FocusZone/specs/FocusZone.spec.win.ts rename to apps/E2E/src/FocusZone/specs/FocusZone_Tab_CircNav.spec.win.ts index 9b817d5595..21cff10801 100644 --- a/apps/E2E/src/FocusZone/specs/FocusZone.spec.win.ts +++ b/apps/E2E/src/FocusZone/specs/FocusZone_Tab_CircNav.spec.win.ts @@ -22,8 +22,7 @@ describe('FocusZone Testing Initialization', () => { /* FocusZone Functional Testing * - * This test validates that keyboard navigation using both arrow keys and - * tab key works, even when modifying how the FocusZone functions. + * These tests validate Circular Navigation, disabled FZ, and tab with/without default tabbable element. * * */ describe('FocusZone Functional Testing', () => { @@ -33,122 +32,6 @@ describe('FocusZone Functional Testing', () => { await FocusZonePageObject.resetTest(); }); - it('Navigate bidirectional focuszone using arrow keys. Validate focus switches correctly.', async () => { - // move to 2 with right arrow - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(1), [Keys.ARROW_RIGHT]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - // move to 3 with down arrow - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_DOWN]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(3), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - expect(await FocusZonePageObject.didAssertPopup()) - .withContext(FocusZonePageObject.ERRORMESSAGE_ASSERT) - .toBeFalsy(); - }); - - it('Navigate horizontal focuszone using arrow keys. Validate focus switches correctly.', async () => { - await FocusZonePageObject.configureGridFocusZone('SetDirection', 'horizontal'); - // move to 2 with right arrow - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(1), [Keys.ARROW_RIGHT]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - // down arrow shouldn't move focus - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_DOWN]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - // left arrow goes back - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(4), [Keys.ARROW_LEFT]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(3), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - expect(await FocusZonePageObject.didAssertPopup()) - .withContext(FocusZonePageObject.ERRORMESSAGE_ASSERT) - .toBeFalsy(); - }); - - it('Navigates vertical focuszone using arrow keys. Validate focus switches correctly.', async () => { - await FocusZonePageObject.configureGridFocusZone('SetDirection', 'vertical'); - - // move to 2 with down arrow - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(1), [Keys.ARROW_DOWN]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - // right arrow shouldn't move focus - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_RIGHT]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - // up arrow goes back - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(4), [Keys.ARROW_UP]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(3), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - expect(await FocusZonePageObject.didAssertPopup()) - .withContext(FocusZonePageObject.ERRORMESSAGE_ASSERT) - .toBeFalsy(); - }); - - it('Navigates none-direction focuszone using arrow keys. Validate focus does not switch.', async () => { - await FocusZonePageObject.configureGridFocusZone('SetDirection', 'none'); - - // none of these key commands should move - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_DOWN]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_UP]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_LEFT]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(2), [Keys.ARROW_RIGHT]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(2), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - expect(await FocusZonePageObject.didAssertPopup()) - .withContext(FocusZonePageObject.ERRORMESSAGE_ASSERT) - .toBeFalsy(); - }); - - it('Navigates bi-directional focuszone with 2d navigation. Validate focus switches correctly.', async () => { - await FocusZonePageObject.configureGridFocusZone('Set2DNavigation', true); - - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(1), [Keys.ARROW_DOWN]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(4), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(4), [Keys.ARROW_RIGHT]); - expect( - await FocusZonePageObject.compareAttribute(FocusZonePageObject.gridButton(5), Attribute.IsFocused, AttributeValue.true), - ).toBeTruthy(); - - expect(await FocusZonePageObject.didAssertPopup()) - .withContext(FocusZonePageObject.ERRORMESSAGE_ASSERT) - .toBeFalsy(); - }); - it("Navigates focuszone with circular navigation off. Validate focus between start and end doesn't switch.", async () => { await FocusZonePageObject.sendKeys(FocusZonePageObject.gridButton(1), [Keys.ARROW_LEFT]); expect( diff --git a/change/@fluentui-react-native-e2e-testing-9f62de15-8607-4900-ada1-fadd78c9a79e.json b/change/@fluentui-react-native-e2e-testing-9f62de15-8607-4900-ada1-fadd78c9a79e.json new file mode 100644 index 0000000000..4186e73314 --- /dev/null +++ b/change/@fluentui-react-native-e2e-testing-9f62de15-8607-4900-ada1-fadd78c9a79e.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Split focus zone tests into smaller, separate spec files", + "packageName": "@fluentui-react-native/e2e-testing", + "email": "safreibe@microsoft.com", + "dependentChangeType": "patch" +}