From 1c2f286bb67273e31e435bc3ce65a20d3d87b46c Mon Sep 17 00:00:00 2001 From: "josh.bagwell" Date: Mon, 25 Nov 2024 16:48:31 -0700 Subject: [PATCH] fix: Updated Select Preview spec and moved contexts out --- cypress/component/Modal.spec.tsx | 13 +- cypress/component/SelectPreview.spec.tsx | 164 ++++++++++++----------- 2 files changed, 93 insertions(+), 84 deletions(-) diff --git a/cypress/component/Modal.spec.tsx b/cypress/component/Modal.spec.tsx index fdbe0ac8ea..83f3dfa271 100644 --- a/cypress/component/Modal.spec.tsx +++ b/cypress/component/Modal.spec.tsx @@ -261,12 +261,15 @@ context(`given the [Testing/Popups/Modal, With Tooltips] story is rendered`, () beforeEach(() => { cy.findByRole('button', {name: 'OK'}).focus(); }); - it(`should open the 'OK' tooltip`, () => { + + it(`should be focused`, () => { cy.findByRole('button', {name: 'OK'}).should('have.focus'); - cy.findByRole('button', {name: 'OK'}).should('exist'); - cy.findByRole('tooltip', {name: 'Really, Really, Really, Really, Really sure'}).should( - 'be.visible' - ); + }); + + it(`should open the 'OK' tooltip`, () => { + cy.findByRole('tooltip', {name: 'Really, Really, Really, Really, Really sure'}) + .wait(50) + .should('be.visible'); }); context(`when clicking outside the modal`, () => { diff --git a/cypress/component/SelectPreview.spec.tsx b/cypress/component/SelectPreview.spec.tsx index eba222f64e..73577530ab 100644 --- a/cypress/component/SelectPreview.spec.tsx +++ b/cypress/component/SelectPreview.spec.tsx @@ -203,113 +203,119 @@ describe('Select', () => { .should('have.focus'); }); }); + }); - context('when the down arrow key is pressed for a second time', () => { + context('when the down arrow key is pressed for a second time', () => { + beforeEach(() => { + cy.findByRole('button', {name: 'Label'}) + .should('exist') + .type('{downArrow}', {delay: 50}) + .pipe(h.selectPreview.getMenu) + .type('{downArrow}'); + }); + + context('the menu', () => { + it('should set assistive focus to the "Phone" option', () => { + cy.findByRole('button', {name: 'Label'}) + .pipe(h.selectPreview.getMenu) + .should('exist') + .pipe(getAssistiveFocus) + .should('have.text', 'Phone'); + }); + }); + context('when the up arrow key is pressed', () => { beforeEach(() => { cy.findByRole('button', {name: 'Label'}) .pipe(h.selectPreview.getMenu) .should('exist') - .type('{downArrow}'); + .type('{upArrow}'); }); context('the menu', () => { - it('should set assistive focus to the "Phone" option', () => { + it('should set assistive focus to the "E-mail" option', () => { cy.findByRole('button', {name: 'Label'}) .pipe(h.selectPreview.getMenu) .should('exist') .pipe(getAssistiveFocus) - .should('have.text', 'Phone'); + .should('have.text', 'E-mail'); }); }); + }); + }); - context('when the down arrow key is pressed for a third time', () => { - beforeEach(() => { - cy.findByRole('button', {name: 'Label'}) - .pipe(h.selectPreview.getMenu) - .should('exist') - .type('{downArrow}'); - }); - - context('the menu', () => { - it('should set assistive focus to the "Mail" option', () => { - cy.findByRole('button', {name: 'Label'}) - .pipe(h.selectPreview.getMenu) - .pipe(getAssistiveFocus) - .should('have.text', 'Mail'); - }); - }); - - context('when the enter key is pressed', () => { - beforeEach(() => { - cy.findByRole('button', {name: 'Label'}) - .pipe(h.selectPreview.getMenu) - .type('{enter}'); - }); + context('when the down arrow key is pressed for a third time', () => { + beforeEach(() => { + cy.findByRole('button', {name: 'Label'}) + .should('exist') + .type('{downArrow}', {delay: 50}) + .pipe(h.selectPreview.getMenu) + .type('{downArrow}', {delay: 50}) + .type('{downArrow}'); + }); - context('the select button', () => { - it(`should read "Mail"`, () => { - cy.findByRole('button', {name: 'Label'}).should('have.text', 'Mail'); - }); + context('the menu', () => { + it('should set assistive focus to the "Mail" option', () => { + cy.findByRole('button', {name: 'Label'}) + .pipe(h.selectPreview.getMenu) + .pipe(getAssistiveFocus) + .should('have.text', 'Mail'); + }); + }); + }); - it(`should have a value of "mail"`, () => { - cy.findByRole('button', {name: 'Label'}).should('have.value', 'mail'); - }); + context('when the enter key is pressed', () => { + beforeEach(() => { + cy.findByRole('button', {name: 'Label'}) + .should('exist') + .type('{downArrow}', {delay: 50}) + .pipe(h.selectPreview.getMenu) + .type('{downArrow}', {delay: 50}) + .type('{downArrow}', {delay: 50}) + .type('{enter}'); + }); - it(`should re-acquire focus`, () => { - cy.findByRole('button', {name: 'Label'}).should('have.focus'); - }); - }); + context('the select button', () => { + it(`should read "Mail"`, () => { + cy.findByRole('button', {name: 'Label'}).should('have.text', 'Mail'); + }); - context('the menu', () => { - it('should not be visible', () => { - cy.findByRole('button', {name: 'Label'}) - .pipe(h.selectPreview.getMenu) - .should('not.exist'); - }); - }); + it(`should have a value of "mail"`, () => { + cy.findByRole('button', {name: 'Label'}).should('have.value', 'mail'); + }); - context('when the menu is expanded again', () => { - beforeEach(() => { - cy.findByRole('button', {name: 'Label'}).should('exist').type('{downArrow}'); - }); + it(`should re-acquire focus`, () => { + cy.findByRole('button', {name: 'Label'}).should('have.focus'); + }); + }); - context('the menu', () => { - it('should set assistive focus to the "Mail" option', () => { - cy.findByRole('button', {name: 'Label'}) - .pipe(h.selectPreview.getMenu) - .pipe(getAssistiveFocus) - .should('have.text', 'Mail'); - }); - }); + context('the menu', () => { + it('should not be visible', () => { + cy.findByRole('button', {name: 'Label'}) + .pipe(h.selectPreview.getMenu) + .should('not.exist'); + }); + }); - context('the "Mail" option', () => { - it('should have an aria-selected attribute set to "true"', () => { - cy.findByRole('button', {name: 'Label'}) - .pipe(h.selectPreview.getMenu) - .pipe(getAssistiveFocus) - .should('have.attr', 'aria-selected', 'true'); - }); - }); - }); - }); + context('when the menu is expanded again', () => { + beforeEach(() => { + cy.findByRole('button', {name: 'Label'}).should('exist').type('{downArrow}'); }); - context('when the up arrow key is pressed', () => { - beforeEach(() => { + context('the menu', () => { + it('should set assistive focus to the "Mail" option', () => { cy.findByRole('button', {name: 'Label'}) .pipe(h.selectPreview.getMenu) - .should('exist') - .realPress('{uparrow}'); + .pipe(getAssistiveFocus) + .should('have.text', 'Mail'); }); + }); - context('the menu', () => { - it('should set assistive focus to the "E-mail" option', () => { - cy.findByRole('button', {name: 'Label'}) - .pipe(h.selectPreview.getMenu) - .should('exist') - .pipe(getAssistiveFocus) - .should('have.text', 'E-mail'); - }); + context('the "Mail" option', () => { + it('should have an aria-selected attribute set to "true"', () => { + cy.findByRole('button', {name: 'Label'}) + .pipe(h.selectPreview.getMenu) + .pipe(getAssistiveFocus) + .should('have.attr', 'aria-selected', 'true'); }); }); });