chore(test): add baseline e2e tests and percy snapshots (#8958)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/AspectRatio/__tests__/AspectRatio-test.e2e.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import 'carbon-components/scss/globals/grid/_grid.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import { default as AspectRatio } from '../AspectRatio';
+
+describe('AspectRatio', () => {
+  const style = { border: '1px solid black', margin: '1rem' };
+  beforeEach(() => {
+    mount(
+      <>
+        <AspectRatio ratio="16x9" style={style}>
+          16x9
+        </AspectRatio>
+        <AspectRatio ratio="9x16" style={style}>
+          9x16
+        </AspectRatio>
+        <AspectRatio ratio="2x1" style={style}>
+          2x1
+        </AspectRatio>
+        <AspectRatio ratio="1x2" style={style}>
+          1x2
+        </AspectRatio>
+        <AspectRatio ratio="4x3" style={style}>
+          4x3
+        </AspectRatio>
+        <AspectRatio ratio="3x4" style={style}>
+          3x4
+        </AspectRatio>
+        <AspectRatio ratio="1x1" style={style}>
+          1x1
+        </AspectRatio>
+      </>
+    );
+  });
+
+  it('should render', () => {
+    cy.findByText(/16x9/).should('be.visible');
+    cy.findByText(/9x16/).should('be.visible');
+    cy.findByText(/2x1/).should('be.visible');
+    cy.findByText(/1x2/).should('be.visible');
+    cy.findByText(/4x3/).should('be.visible');
+    cy.findByText(/3x4/).should('be.visible');
+    cy.findByText(/1x1/).should('be.visible');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+});

packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.e2e.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import 'carbon-components/scss/components/breadcrumb/_breadcrumb.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import { Breadcrumb, BreadcrumbItem } from '../index';
+
+describe('Breadcrumb', () => {
+  beforeEach(() => {
+    mount(
+      <Breadcrumb>
+        <BreadcrumbItem>
+          <a href="/#">Breadcrumb 1</a>
+        </BreadcrumbItem>
+        <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
+        <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
+      </Breadcrumb>
+    );
+  });
+
+  it('should render', () => {
+    cy.findByText(/Breadcrumb 1/).should('be.visible');
+    cy.findByText(/Breadcrumb 2/).should('be.visible');
+    cy.findByText(/Breadcrumb 3/).should('be.visible');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+});

packages/react/src/components/Button/Button-test.e2e.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import 'carbon-components/scss/components/button/_button.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import { default as Button } from './Button';
+import { Add16 } from '@carbon/icons-react';
+
+describe('Button', () => {
+  beforeEach(() => {
+    mount(
+      <>
+        <Button>button</Button>
+        <Button size="sm">size-sm</Button>
+        <Button size="md">size-md</Button>
+        <Button size="lg">size-lg</Button>
+        <Button size="xl">size-xl</Button>
+        <Button size="sm" expressive>
+          expressive size-sm
+        </Button>
+        <Button size="md" expressive>
+          expressive size-md
+        </Button>
+        <Button size="lg" expressive>
+          expressive size-lg
+        </Button>
+        <Button size="xl" expressive>
+          expressive size-xl
+        </Button>
+        <Button kind="secondary">secondary</Button>
+        <Button kind="tertiary">tertiary</Button>
+        <Button kind="ghost">ghost</Button>
+        <Button kind="danger" dangerDescription="sample">
+          danger
+        </Button>
+        <Button kind="danger--tertiary" dangerDescription="sample">
+          danger--tertiary
+        </Button>
+        <Button kind="danger--ghost" dangerDescription="sample">
+          danger--ghost
+        </Button>
+        <Button hasIconOnly renderIcon={Add16} data-testid="icon-only" />
+      </>
+    );
+  });
+
+  it('should render', () => {
+    // full string match regex syntax ^string$ to prevent collisions
+    cy.findByText(/^button$/).should('be.visible');
+    cy.findByText(/^size-sm$/).should('be.visible');
+    cy.findByText(/^size-md$/).should('be.visible');
+    cy.findByText(/^size-lg$/).should('be.visible');
+    cy.findByText(/^size-xl$/).should('be.visible');
+    cy.findByText(/^expressive size-sm$/).should('be.visible');
+    cy.findByText(/^expressive size-md$/).should('be.visible');
+    cy.findByText(/^expressive size-lg$/).should('be.visible');
+    cy.findByText(/^expressive size-xl$/).should('be.visible');
+    cy.findByText(/^secondary$/).should('be.visible');
+    cy.findByText(/^tertiary$/).should('be.visible');
+    cy.findByText(/^ghost$/).should('be.visible');
+    cy.findByText(/^danger$/).should('be.visible');
+    cy.findByText(/^danger--tertiary$/).should('be.visible');
+    cy.findByText(/^danger--ghost$/).should('be.visible');
+    cy.findByTestId('icon-only').should('be.visible');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+});

packages/react/src/components/ButtonSet/ButtonSet-test.e2e.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import 'carbon-components/scss/components/button/_button.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import { default as Button } from '../Button';
+import { default as ButtonSet } from './ButtonSet';
+
+describe('ButtonSet', () => {
+  beforeEach(() => {
+    mount(
+      <>
+        <ButtonSet>
+          <Button kind="secondary">set-secondary</Button>
+          <Button kind="primary">set-primary</Button>
+        </ButtonSet>
+        <ButtonSet stacked>
+          <Button kind="secondary">set-stacked-secondary</Button>
+          <Button kind="primary">set-stacked-primary</Button>
+        </ButtonSet>
+        <ButtonSet>
+          <Button kind="secondary" isExpressive>
+            set-secondary-expressive
+          </Button>
+          <Button kind="primary" isExpressive>
+            set-primary-expressive
+          </Button>
+        </ButtonSet>
+      </>
+    );
+  });
+
+  it('should render', () => {
+    // full string match regex syntax ^string$ to prevent collisions
+    cy.findByText(/^set-secondary$/).should('be.visible');
+    cy.findByText(/^set-primary$/).should('be.visible');
+    cy.findByText(/^set-stacked-secondary$/).should('be.visible');
+    cy.findByText(/^set-stacked-primary$/).should('be.visible');
+    cy.findByText(/^set-secondary-expressive$/).should('be.visible');
+    cy.findByText(/^set-primary-expressive$/).should('be.visible');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+});

packages/react/src/components/Modal/Modal-test.e2e.js

@@ -0,0 +1,75 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import 'carbon-components/scss/components/modal/_modal.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import Modal from '../Modal';
+import Select from '../Select';
+import SelectItem from '../SelectItem';
+import TextInput from '../TextInput';
+import { breakpoints, baseFontSize } from '@carbon/layout';
+
+describe('Modal', () => {
+  beforeEach(() => {
+    mount(
+      <Modal
+        open
+        modalHeading="Add a custom domain"
+        modalLabel="Account resources"
+        primaryButtonText="Add"
+        secondaryButtonText="Cancel">
+        <p style={{ marginBottom: '1rem' }}>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </p>
+        <TextInput
+          data-modal-primary-focus
+          id="text-input-1"
+          labelText="Domain name"
+          placeholder="e.g. github.com"
+          style={{ marginBottom: '1rem' }}
+        />
+        <Select id="select-1" defaultValue="us-south" labelText="Region">
+          <SelectItem value="us-south" text="US South" />
+          <SelectItem value="us-east" text="US East" />
+        </Select>
+      </Modal>
+    );
+  });
+
+  Object.keys(breakpoints).forEach((breakpoint) => {
+    // make assertions on the modal using
+    // the array of different breakpoints
+    it(`should render at ${breakpoint} breakpoint`, () => {
+      // convert rem value from breakpoints into a raw number representation of pixels.
+      // cy.viewport() only accepts numbers that equate to pixel values
+      const width =
+        parseInt(breakpoints[breakpoint].width.replace('rem', '')) *
+        baseFontSize;
+      cy.viewport(width, 500);
+
+      cy.findByText(/Add a custom domain/).should('be.visible');
+      cy.findByText(/Account resources/).should('be.visible');
+      cy.findByText(/^Add$/).should('be.visible'); // full string match to prevent collisions
+      cy.findByText(/Cancel/).should('be.visible');
+      cy.findByLabelText(/Domain name/).should('be.visible');
+      cy.findByLabelText(/Region/).should('be.visible');
+
+      // snapshots should always be taken _after_ an assertion that
+      // a element/component should be visible. This is to ensure
+      // the DOM has settled and the element has fully loaded.
+      //
+      // only take snapshots at two primary widths to be mindful of our snapshot quota limit
+      if (breakpoint === 'sm' || breakpoint === 'lg') {
+        cy.percySnapshot();
+      }
+    });
+  });
+});