-
Notifications
You must be signed in to change notification settings - Fork 160
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test(e2e): introduce cypress for web components & react storybook (#7096
) ### Related Ticket(s) Refs #6139 ### Description This PR fully moves the existing `test-e2e` package to a dedicated cypress test setup for web components and react storybooks. A few tests have been included for `masthead`, `locale-modal`, and `leadspace`. They are largely focused on snapshot testing, though percy has been disabled for now as rendering of dynamic states are still not supported in percy for web components (see percy/cli#280). Actual cypress tests can be created now though, and also the current tests uses the built-in cypress screenshot feature:  And video that shows how the tests are run: https://user-images.githubusercontent.com/1641214/132697174-a778c055-d3d8-4e01-877d-bd58c2aa7491.mp4 ### Changelog **New** - Cypress testing for web components and react storybook **Changed** - disabled video recording by default to speed up tests **Removed** - Removed `test-e2e` package
- Loading branch information
Showing
48 changed files
with
1,979 additions
and
1,512 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
83 changes: 83 additions & 0 deletions
83
packages/react/src/components/CalloutQuote/__tests__/CalloutQuote.e2e.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2021 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| /** | ||
| * Sets the host to run tests | ||
| * | ||
| * @type {string|string} | ||
| * @private | ||
| */ | ||
| const _host = | ||
| (process && process.env.C4IBM_E2E_STORYBOOK_HOST) || 'http://localhost:8081'; | ||
|
|
||
| /** | ||
| * Sets the correct path | ||
| * | ||
| * @type {string} | ||
| * @private | ||
| */ | ||
| const _path = '/iframe.html?id=components-callout-quote--default'; | ||
|
|
||
| /* eslint-disable cypress/no-unnecessary-waiting */ | ||
| describe('CalloutQuote | default', () => { | ||
| it('should load the g100 theme', () => { | ||
| cy.visit(`${_host}/${_path}&theme=g100`); | ||
| cy.viewport(1280, 780); | ||
|
|
||
| cy.window().then(win => { | ||
| win.document.documentElement.setAttribute( | ||
| 'storybook-carbon-theme', | ||
| 'g100' | ||
| ); | ||
| cy.wait(500); | ||
| cy.screenshot(); | ||
|
|
||
| // Take a snapshot for visual diffing | ||
| cy.percySnapshot('CalloutQuote | default | g100 theme', { | ||
| widths: [1280], | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('should load the g90 theme', () => { | ||
| cy.visit(`${_host}/${_path}&theme=g90`); | ||
| cy.viewport(1280, 780); | ||
|
|
||
| cy.window().then(win => { | ||
| win.document.documentElement.setAttribute( | ||
| 'storybook-carbon-theme', | ||
| 'g90' | ||
| ); | ||
| cy.wait(500); | ||
|
|
||
| cy.screenshot(); | ||
| // Take a snapshot for visual diffing | ||
| cy.percySnapshot('CalloutQuote | default | g90 theme', { | ||
| widths: [1280], | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('should load the g10 theme', () => { | ||
| cy.visit(`${_host}/${_path}&theme=g10`); | ||
| cy.viewport(1280, 780); | ||
|
|
||
| cy.window().then(win => { | ||
| win.document.documentElement.setAttribute( | ||
| 'storybook-carbon-theme', | ||
| 'g10' | ||
| ); | ||
| cy.wait(500); | ||
|
|
||
| cy.screenshot(); | ||
| // Take a snapshot for visual diffing | ||
| cy.percySnapshot('CalloutQuote | default | g10 theme', { | ||
| widths: [1280], | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.