Skip to content

Commit

Permalink
fix: Updated Select Preview spec and moved contexts out
Browse files Browse the repository at this point in the history
  • Loading branch information
@josh-bagwell
josh-bagwell committed Nov 25, 2024
1 parent b59c877 commit 1c2f286
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 84 deletions.
13 changes: 8 additions & 5 deletions cypress/component/Modal.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`, () => {
Expand Down
164 changes: 85 additions & 79 deletions cypress/component/SelectPreview.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
});
Expand Down

0 comments on commit 1c2f286

Please sign in to comment.