Skip to content

Commit

Permalink
Upgrade Storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
@NicholasBoll
NicholasBoll committed Jan 7, 2022
1 parent 6e38744 commit cc78614
Show file tree
Hide file tree
Showing 4 changed files with 940 additions and 645 deletions.
4 changes: 2 additions & 2 deletions cypress/integration/Button.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ describe('Button', () => {
});

it('should render the correct text', () => {
cy.get('button')
cy.findAllByRole('button')
.first()
.should('contain', 'Primary');
});
Expand All @@ -31,7 +31,7 @@ describe('Button', () => {
});

it('should render the correct text', () => {
cy.get('button')
cy.findAllByRole('button')
.first()
.should('contain', 'Click Me');
});
Expand Down
79 changes: 48 additions & 31 deletions cypress/integration/Tooltip.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ describe('Tooltip', () => {
});

it('the button should have an aria-label of "Close"', () => {
cy.get('button').should('have.ariaLabel', 'Close');
cy.findAllByRole('button').should('have.ariaLabel', 'Close');
});

context('when the close icon is hovered', () => {
beforeEach(() => {
cy.get('button').trigger('mouseover');
cy.findAllByRole('button').trigger('mouseover');
});

it('should open the tooltip', () => {
Expand All @@ -35,7 +35,7 @@ describe('Tooltip', () => {
beforeEach(() => {
cy.clock();
cy.tick(300); // advance the timer by the amount of default delay time
cy.get('button').trigger('mouseout');
cy.findAllByRole('button').trigger('mouseout');
cy.findByRole('tooltip').trigger('mouseover');
});

Expand All @@ -58,7 +58,7 @@ describe('Tooltip', () => {

context('when the target is clicked', () => {
beforeEach(() => {
cy.get('button').click();
cy.findAllByRole('button').click();
});

it('should not close the tooltip', () => {
Expand All @@ -69,7 +69,7 @@ describe('Tooltip', () => {

context('when the close icon gains focus', () => {
beforeEach(() => {
cy.get('button').focus();
cy.findAllByRole('button').focus();
});

it('should open the tooltip', () => {
Expand All @@ -78,7 +78,7 @@ describe('Tooltip', () => {

context('then the close icon loses focus', () => {
beforeEach(() => {
cy.get('button').blur();
cy.findAllByRole('button').blur();
});

it('should close the tooltip', () => {
Expand All @@ -88,13 +88,13 @@ describe('Tooltip', () => {

context('then the Escape key is pressed', () => {
beforeEach(() => {
cy.get('button').trigger('keydown', {
cy.findAllByRole('button').trigger('keydown', {
key: 'Escape',
});
});

it('should not remove focus from the close icon button', () => {
cy.get('button').should('have.focus');
cy.findAllByRole('button').should('have.focus');
});
});

Expand All @@ -120,12 +120,12 @@ describe('Tooltip', () => {
});

it('the "Delete" button should not have an aria-describedby', () => {
cy.get('button').should('not.have.attr', 'aria-describedby');
cy.findAllByRole('button').should('not.have.attr', 'aria-describedby');
});

context('when the "Delete" button is hovered', () => {
beforeEach(() => {
cy.get('button').trigger('mouseover');
cy.findAllByRole('button').trigger('mouseover');
});

it('should show the tooltip', () => {
Expand All @@ -137,7 +137,7 @@ describe('Tooltip', () => {
});

it('the "Delete" button should have an aria-describedby linking to the role="tooltip" element', () => {
cy.get('button').should(
cy.findAllByRole('button').should(
'have.ariaDescription',
'The service will restart after this action'
);
Expand All @@ -155,34 +155,51 @@ describe('Tooltip', () => {
});

it('the span element should not have an aria-describedby attribute', () => {
cy.get('span').should('not.have.attr', 'aria-describedby');
cy.contains('The contents of the tooltip are invisible to screen reader users').should(
'not.have.attr',
'aria-describedby'
);
});

it('the span element should not have an aria-label attribute', () => {
cy.get('span').should('not.have.attr', 'aria-describedby');
cy.contains('The contents of the tooltip are invisible to screen reader users').should(
'not.have.attr',
'aria-describedby'
);
});

context('when the "Some Text" text is hovered', () => {
beforeEach(() => {
cy.get('span').trigger('mouseover');
});
context(
'when the "The contents of the tooltip are invisible to screen reader users" text is hovered',
() => {
beforeEach(() => {
cy.contains('The contents of the tooltip are invisible to screen reader users').trigger(
'mouseover'
);
});

it('should show the tooltip', () => {
cy.findByRole('tooltip').should('be.visible');
});
it('should show the tooltip', () => {
cy.findByRole('tooltip').should('be.visible');
});

it('should not have any axe-core errors', () => {
cy.checkA11y();
});
it('should not have any axe-core errors', () => {
cy.checkA11y();
});

it('the span element should not have an aria-describedby attribute', () => {
cy.get('span').should('not.have.attr', 'aria-describedby');
});
it('the span element should not have an aria-describedby attribute', () => {
cy.contains('The contents of the tooltip are invisible to screen reader users').should(
'not.have.attr',
'aria-describedby'
);
});

it('the span element should not have an aria-label attribute', () => {
cy.get('span').should('not.have.attr', 'aria-describedby');
});
});
it('the span element should not have an aria-label attribute', () => {
cy.contains('The contents of the tooltip are invisible to screen reader users').should(
'not.have.attr',
'aria-describedby'
);
});
}
);
});

context('given the [Components/Popups/Tooltip/React, Ellipsis] example is rendered', () => {
Expand All @@ -195,7 +212,7 @@ describe('Tooltip', () => {
});

it('the button should not have an aria-label', () => {
cy.get('button').should('not.have.attr', 'aria-label');
cy.findAllByRole('button').should('not.have.attr', 'aria-label');
});

context('when the "Short Content" button is hovered', () => {
Expand Down
10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@
"@commitlint/config-conventional": "^8.1.0",
"@emotion/is-prop-valid": "^0.8.2",
"@emotion/styled-base": "^10.0.27",
"@storybook/addon-essentials": "^6.2.9",
"@storybook/addon-storysource": "^6.2.9",
"@storybook/components": "^6.2.9",
"@storybook/react": "^6.2.9",
"@storybook/source-loader": "^6.2.9",
"@storybook/addon-essentials": "^6.4.9",
"@storybook/addon-storysource": "^6.4.9",
"@storybook/components": "^6.4.9",
"@storybook/react": "^6.4.9",
"@storybook/source-loader": "^6.4.9",
"@testing-library/cypress": "^8.0.2",
"@testing-library/jest-dom": "^5.15.0",
"@testing-library/react": "^12.1.2",
Expand Down

0 comments on commit cc78614

Please sign in to comment.