Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test(pictogram-item): add e2e tests #7662

Merged
merged 6 commits into from
Nov 23, 2021
Merged

test(pictogram-item): add e2e tests #7662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dd3c327
chore: format
emyarod Nov 15, 2021
9dc8aa7
feat(PictogramItem): add data-autoid
emyarod Nov 15, 2021
d5acc8d
test(pictogram-item): add e2e tests
emyarod Nov 15, 2021
6ebf27f
test(PictogramItem): add e2e tests
emyarod Nov 15, 2021
168310e
chore: update snapshots
emyarod Nov 23, 2021
2527cfc
Merge branch 'master' into 7433-test/pictogram-item-e2e
kodiakhq[bot] Nov 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26695,6 +26695,7 @@ dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequ
>
<div
className="bx--content-group-pictograms__item bx--pictogram-item"
data-autoid="dds--pictogram-item"
>
<div
className="bx--pictogram-item__row"
Expand Down Expand Up @@ -26895,6 +26896,7 @@ dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequ
>
<div
className="bx--content-group-pictograms__item bx--pictogram-item"
data-autoid="dds--pictogram-item"
>
<div
className="bx--pictogram-item__row"
Expand Down Expand Up @@ -27095,6 +27097,7 @@ dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequ
>
<div
className="bx--content-group-pictograms__item bx--pictogram-item"
data-autoid="dds--pictogram-item"
>
<div
className="bx--pictogram-item__row"
Expand Down Expand Up @@ -28996,6 +28999,7 @@ dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequ
>
<div
className="bx--content-group-pictograms__item bx--pictogram-item"
data-autoid="dds--pictogram-item"
>
<div
className="bx--pictogram-item__row"
Expand Down Expand Up @@ -29196,6 +29200,7 @@ dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequ
>
<div
className="bx--content-group-pictograms__item bx--pictogram-item"
data-autoid="dds--pictogram-item"
>
<div
className="bx--pictogram-item__row"
Expand Down Expand Up @@ -29396,6 +29401,7 @@ dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequ
>
<div
className="bx--content-group-pictograms__item bx--pictogram-item"
data-autoid="dds--pictogram-item"
>
<div
className="bx--pictogram-item__row"
Expand Down Expand Up @@ -36507,6 +36513,7 @@ exports[`Storyshots Components|Content group pictograms Default 1`] = `
>
<div
className="bx--content-group-pictograms__item bx--pictogram-item"
data-autoid="dds--pictogram-item"
>
<div
className="bx--pictogram-item__row"
Expand Down Expand Up @@ -36707,6 +36714,7 @@ exports[`Storyshots Components|Content group pictograms Default 1`] = `
>
<div
className="bx--content-group-pictograms__item bx--pictogram-item"
data-autoid="dds--pictogram-item"
>
<div
className="bx--pictogram-item__row"
Expand Down Expand Up @@ -36907,6 +36915,7 @@ exports[`Storyshots Components|Content group pictograms Default 1`] = `
>
<div
className="bx--content-group-pictograms__item bx--pictogram-item"
data-autoid="dds--pictogram-item"
>
<div
className="bx--pictogram-item__row"
Expand Down Expand Up @@ -138447,6 +138456,7 @@ exports[`Storyshots Components|Pictogram item Default 1`] = `
>
<div
className="bx--pictogram-item"
data-autoid="dds--pictogram-item"
>
<div
className="bx--pictogram-item__row"
Expand Down
4 changes: 3 additions & 1 deletion packages/react/src/components/PictogramItem/PictogramItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ const PictogramItem = ({
cta,
className,
}) => (
<div className={classNames(className, `${prefix}--pictogram-item`)}>
<div
className={classNames(className, `${prefix}--pictogram-item`)}
data-autoid={`${stablePrefix}--pictogram-item`}>
<div className={`${prefix}--pictogram-item__row`}>
<div className={`${prefix}--pictogram-item__wrapper`}>
<Pictogram
Expand Down
2 changes: 0 additions & 2 deletions packages/react/src/components/PictogramItem/__stories__/PictogramItem.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,11 @@ export default {
knobs: {
PictogramItem: ({ groupId }) => ({
heading: text('Heading (required)', 'Lorem ipsum dolor sit', groupId),

copy: text(
'Copy (required)',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
groupId
),

pictogram: {
src: selectPictogram(
select(
Expand Down
233 changes: 233 additions & 0 deletions packages/react/tests/e2e-storybook/cypress/integration/PictogramItem/PictogramItem.e2e.js
View file
Open in desktop
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],
});
});
});
});
Loading