-
Notifications
You must be signed in to change notification settings - Fork 159
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test(pictogram-item): add e2e tests (#7662)
### Related Ticket(s) #7433 ### Description This PR adds Pictogram Item e2e tests for the following scenarios a. Check pictogram item and content is loaded b. Check the Link with icon is loaded and clickable c. Verify Pictogram item can be customized (desktop, touch, pattern) [depends on #7661] d. Customize theme from Carbon theme and verify gray 10, gray 90 and gray 100 theme. <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
- Loading branch information
Showing
5 changed files
with
449 additions
and
3 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
233 changes: 233 additions & 0 deletions
233
packages/react/tests/e2e-storybook/cypress/integration/PictogramItem/PictogramItem.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,233 @@ | ||
| /** | ||
| * 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 correct path (default Pictogram item) | ||
| * | ||
| * @type {string} | ||
| * @private | ||
| */ | ||
| const _pathDefault = '/iframe.html?id=components-pictogram-item--default'; | ||
|
|
||
| describe('dds-pictogram-item | Pictogram item (desktop)', () => { | ||
| it('should load pictogram item and content', () => { | ||
| cy.visit(`/${_pathDefault}`); | ||
| cy.viewport(1280, 780); | ||
| cy.get('[data-autoid="dds--pictogram-item"]').should('have.length', 1); | ||
| cy.get( | ||
| '[data-autoid="dds--pictogram-item"] [data-autoid="dds--pictogram-item__pictogram"]' | ||
| ).should('have.length', 1); | ||
| cy.get( | ||
| '[data-autoid="dds--pictogram-item"] [data-autoid="dds--content-item__heading"]' | ||
| ).should('have.length', 1); | ||
| cy.screenshot(); | ||
|
|
||
| // Take a snapshot for visual diffing | ||
| cy.percySnapshot('PictogramItem | Pictogram item (desktop)', { | ||
| widths: [1280], | ||
| }); | ||
| }); | ||
|
|
||
| it('should check that the Link with icon is loaded and clickable', () => { | ||
| cy.visit(`/${_pathDefault}`); | ||
| cy.viewport(1280, 780); | ||
| const linkWithIcon = cy.get( | ||
| '[data-autoid="dds--pictogram-item"] [data-autoid="dds--link-with-icon"]' | ||
| ); | ||
| linkWithIcon.should('have.length', 1); | ||
| linkWithIcon.find('a').each($link => { | ||
| const url = $link.prop('href'); | ||
| expect(url).not.to.be.empty; | ||
| }); | ||
| }); | ||
|
|
||
| it('should support customizable pictogram SVGs', () => { | ||
| cy.visit( | ||
| `/${_pathDefault}&knob-Pictogram%20(required)_PictogramItem=Touch` | ||
| ); | ||
| cy.viewport(1280, 780); | ||
| cy.screenshot(); | ||
|
|
||
| // Take a snapshot for visual diffing | ||
| cy.percySnapshot( | ||
| 'PictogramItem | Pictogram item w/Touch pictogram (desktop)', | ||
| { | ||
| widths: [1280], | ||
| } | ||
| ); | ||
| }); | ||
|
|
||
| it('should load the g100 theme', () => { | ||
| cy.visit(`/${_pathDefault}&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( | ||
| 'PictogramItem | Pictogram item (desktop) | g100 theme', | ||
| { | ||
| widths: [1280], | ||
| } | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| it('should load the g90 theme', () => { | ||
| cy.visit(`/${_pathDefault}&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('PictogramItem | Pictogram item (desktop) | g90 theme', { | ||
| widths: [1280], | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('should load the g10 theme', () => { | ||
| cy.visit(`/${_pathDefault}&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('PictogramItem | Pictogram item (desktop) | g10 theme', { | ||
| widths: [1280], | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('dds-pictogram-item | Pictogram item (mobile)', () => { | ||
| it('should load pictogram item and content', () => { | ||
| cy.visit(`/${_pathDefault}`); | ||
| cy.viewport(320, 780); | ||
| cy.get('[data-autoid="dds--pictogram-item"]').should('have.length', 1); | ||
| cy.get( | ||
| '[data-autoid="dds--pictogram-item"] [data-autoid="dds--pictogram-item__pictogram"]' | ||
| ).should('have.length', 1); | ||
| cy.get( | ||
| '[data-autoid="dds--pictogram-item"] [data-autoid="dds--content-item__heading"]' | ||
| ).should('have.length', 1); | ||
|
|
||
| cy.screenshot(); | ||
|
|
||
| // Take a snapshot for visual diffing | ||
| cy.percySnapshot('PictogramItem | Pictogram item (mobile)', { | ||
| widths: [320], | ||
| }); | ||
| }); | ||
|
|
||
| it('should check that the Link with icon is loaded and clickable', () => { | ||
| cy.visit(`/${_pathDefault}`); | ||
| cy.viewport(320, 780); | ||
| const linkWithIcon = cy.get( | ||
| '[data-autoid="dds--pictogram-item"] [data-autoid="dds--link-with-icon"]' | ||
| ); | ||
| linkWithIcon.should('have.length', 1); | ||
| linkWithIcon.find('a').each($link => { | ||
| const url = $link.prop('href'); | ||
| expect(url).not.to.be.empty; | ||
| }); | ||
| }); | ||
|
|
||
| it('should support customizable pictogram SVGs', () => { | ||
| cy.visit( | ||
| `/${_pathDefault}&knob-Pictogram%20(required)_PictogramItem=Touch` | ||
| ); | ||
|
|
||
| cy.viewport(320, 780); | ||
| cy.screenshot(); | ||
|
|
||
| // Take a snapshot for visual diffing | ||
| cy.percySnapshot( | ||
| 'PictogramItem | Pictogram item w/Touch pictogram (mobile)', | ||
| { | ||
| widths: [320], | ||
| } | ||
| ); | ||
| }); | ||
|
|
||
| it('should load the g100 theme', () => { | ||
| cy.visit(`/${_pathDefault}&theme=g100`); | ||
| cy.viewport(320, 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('PictogramItem | Pictogram item (mobile) | g100 theme', { | ||
| widths: [320], | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('should load the g90 theme', () => { | ||
| cy.visit(`/${_pathDefault}&theme=g90`); | ||
| cy.viewport(320, 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('PictogramItem | Pictogram item (mobile) | g90 theme', { | ||
| widths: [320], | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('should load the g10 theme', () => { | ||
| cy.visit(`/${_pathDefault}&theme=g10`); | ||
| cy.viewport(320, 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('PictogramItem | Pictogram item (mobile) | g10 theme', { | ||
| widths: [320], | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.