From 405e6a0717c71fa9a4aaba1d3c2177a5e1f3bf7a Mon Sep 17 00:00:00 2001
From: andrew <emyarod@users.noreply.github.com>
Date: Tue, 23 Nov 2021 10:41:32 -0600
Subject: [PATCH] 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) -->
---
 .../__snapshots__/storyshots.test.js.snap     |  10 +
 .../components/PictogramItem/PictogramItem.js |   4 +-
 .../__stories__/PictogramItem.stories.js      |   2 -
 .../PictogramItem/PictogramItem.e2e.js        | 233 ++++++++++++++++++
 .../pictogram-item/pictogram-item.e2e.js      | 203 +++++++++++++++
 5 files changed, 449 insertions(+), 3 deletions(-)
 create mode 100644 packages/react/tests/e2e-storybook/cypress/integration/PictogramItem/PictogramItem.e2e.js
 create mode 100644 packages/web-components/tests/e2e-storybook/cypress/integration/pictogram-item/pictogram-item.e2e.js

diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
index d759e9e4bd5..dffc57f63ae 100644
--- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
diff --git a/packages/react/src/components/PictogramItem/PictogramItem.js b/packages/react/src/components/PictogramItem/PictogramItem.js
index 8a2e110bd02..3076e0a0633 100644
--- a/packages/react/src/components/PictogramItem/PictogramItem.js
+++ b/packages/react/src/components/PictogramItem/PictogramItem.js
@@ -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
diff --git a/packages/react/src/components/PictogramItem/__stories__/PictogramItem.stories.js b/packages/react/src/components/PictogramItem/__stories__/PictogramItem.stories.js
index 1b8da6144fe..22338297b05 100644
--- a/packages/react/src/components/PictogramItem/__stories__/PictogramItem.stories.js
+++ b/packages/react/src/components/PictogramItem/__stories__/PictogramItem.stories.js
@@ -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(
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/PictogramItem/PictogramItem.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/PictogramItem/PictogramItem.e2e.js
new file mode 100644
index 00000000000..6fa06b31267
--- /dev/null
+++ b/packages/react/tests/e2e-storybook/cypress/integration/PictogramItem/PictogramItem.e2e.js
@@ -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],
+      });
+    });
+  });
+});
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/pictogram-item/pictogram-item.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/pictogram-item/pictogram-item.e2e.js
new file mode 100644
index 00000000000..590c190470d
--- /dev/null
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/pictogram-item/pictogram-item.e2e.js
@@ -0,0 +1,203 @@
+/**
+ * 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
+    // TODO: click states currently not working in percy for web components
+    // cy.percySnapshot('dds-pictogram-item | 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
+      .shadow()
+      .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
+    // TODO: click states currently not working in percy for web components
+    // 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
+      // TODO: click states currently not working in percy for web components
+      // cy.percySnapshot('dds-pictogram-item | 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
+      // TODO: click states currently not working in percy for web components
+      // cy.percySnapshot('dds-pictogram-item | 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
+      // TODO: click states currently not working in percy for web components
+      // cy.percySnapshot('dds-pictogram-item | 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
+    // TODO: click states currently not working in percy for web components
+    // cy.percySnapshot('dds-pictogram-item | 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
+      .shadow()
+      .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
+    // TODO: click states currently not working in percy for web components
+    // 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
+      // TODO: click states currently not working in percy for web components
+      // cy.percySnapshot('dds-pictogram-item | 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
+      // TODO: click states currently not working in percy for web components
+      // cy.percySnapshot('dds-pictogram-item | 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
+      // TODO: click states currently not working in percy for web components
+      // cy.percySnapshot('dds-pictogram-item | Pictogram item (mobile) | g10 theme', {
+      //   widths: [320],
+      // });
+    });
+  });
+});