From aa7ad5ac3ef04237daa869da04a8dbd95b13b307 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Wed, 18 Aug 2021 15:51:48 -0500
Subject: [PATCH] test(multiselect): add visual regression tests

---
 .../FilterableMultiSelect-test.e2e.js         | 133 ++++++++++++++++++
 .../__tests__/MultiSelect-test.e2e.js         |  97 +++++++++++++
 2 files changed, 230 insertions(+)
 create mode 100644 packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.e2e.js
 create mode 100644 packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.e2e.js

diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.e2e.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.e2e.js
new file mode 100644
index 000000000000..b54cf19711a4
--- /dev/null
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.e2e.js
@@ -0,0 +1,133 @@
+/**
+ * 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/multi-select/_multi-select.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import { generateItems, generateGenericItem } from '../../ListBox/test-helpers';
+import FilterableMultiSelect from '../../MultiSelect/FilterableMultiSelect';
+
+describe('FilterableMultiSelect', () => {
+  beforeEach(() => {
+    const items = generateItems(5, generateGenericItem);
+    const placeholder = 'Placeholder...';
+
+    // eslint-disable-next-line react/prop-types
+    function WrappedFilterableMultiSelect({ marginBottom = '1rem', ...props }) {
+      return (
+        <div style={{ marginBottom: marginBottom }}>
+          <FilterableMultiSelect {...props} />
+        </div>
+      );
+    }
+
+    mount(
+      <>
+        <WrappedFilterableMultiSelect
+          marginBottom="14rem"
+          items={items}
+          placeholder={placeholder}
+        />
+        <WrappedFilterableMultiSelect
+          items={items}
+          placeholder={placeholder}
+          size="sm"
+        />
+        <WrappedFilterableMultiSelect
+          items={items}
+          placeholder={placeholder}
+          size="md"
+        />
+        <WrappedFilterableMultiSelect
+          items={items}
+          placeholder={placeholder}
+          size="lg"
+        />
+        <WrappedFilterableMultiSelect
+          items={items}
+          placeholder={placeholder}
+          size="xl"
+        />
+        <WrappedFilterableMultiSelect
+          items={items}
+          placeholder={placeholder}
+          disabled
+        />
+        <WrappedFilterableMultiSelect
+          items={items}
+          placeholder={placeholder}
+          helperText="This is helper text"
+        />
+        <WrappedFilterableMultiSelect
+          items={items}
+          placeholder={placeholder}
+          warn
+        />
+        <WrappedFilterableMultiSelect
+          items={items}
+          placeholder={placeholder}
+          warn
+          warnText="This is warn text"
+        />
+        <WrappedFilterableMultiSelect
+          items={items}
+          placeholder={placeholder}
+          invalid
+          invalidText="This is invalid text"
+        />
+        <WrappedFilterableMultiSelect
+          items={items}
+          placeholder={placeholder}
+          light
+        />
+        <WrappedFilterableMultiSelect
+          items={items}
+          placeholder={placeholder}
+          light
+          invalid
+          invalidText="This is invalid text"
+        />
+        <WrappedFilterableMultiSelect
+          items={items}
+          placeholder={placeholder}
+          type="inline"
+        />
+      </>
+    );
+  });
+
+  it('should render', () => {
+    cy.findAllByPlaceholderText(/Placeholder.../)
+      .should('have.length', 13)
+      .last()
+      .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();
+  });
+
+  it('should render listbox when clicked', () => {
+    cy.findAllByPlaceholderText(/Placeholder.../)
+      .first()
+      .click();
+
+    cy.findAllByText(/Item 0/)
+      .first()
+      .should('be.visible');
+    cy.findAllByText(/Item 4/)
+      .first()
+      .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();
+  });
+});
diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.e2e.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.e2e.js
new file mode 100644
index 000000000000..759b47fe8a3a
--- /dev/null
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.e2e.js
@@ -0,0 +1,97 @@
+/**
+ * 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/multi-select/_multi-select.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import { generateItems, generateGenericItem } from '../../ListBox/test-helpers';
+import MultiSelect from '../';
+
+describe('MultiSelect', () => {
+  beforeEach(() => {
+    const items = generateItems(5, generateGenericItem);
+    const label = 'MultiSelect menu options';
+
+    // eslint-disable-next-line react/prop-types
+    function WrappedMultiSelect({ marginBottom = '1rem', ...props }) {
+      return (
+        <div style={{ marginBottom: marginBottom }}>
+          <MultiSelect {...props} />
+        </div>
+      );
+    }
+
+    mount(
+      <>
+        <WrappedMultiSelect marginBottom="14rem" items={items} label={label} />
+        <WrappedMultiSelect items={items} label={label} size="sm" />
+        <WrappedMultiSelect items={items} label={label} size="md" />
+        <WrappedMultiSelect items={items} label={label} size="lg" />
+        <WrappedMultiSelect items={items} label={label} size="xl" />
+        <WrappedMultiSelect items={items} label={label} disabled />
+        <WrappedMultiSelect
+          items={items}
+          label={label}
+          helperText="This is helper text"
+        />
+        <WrappedMultiSelect items={items} label={label} warn />
+        <WrappedMultiSelect
+          items={items}
+          label={label}
+          warn
+          warnText="This is warn text"
+        />
+        <WrappedMultiSelect
+          items={items}
+          label={label}
+          invalid
+          invalidText="This is invalid text"
+        />
+        <WrappedMultiSelect items={items} label={label} light />
+        <WrappedMultiSelect
+          items={items}
+          label={label}
+          light
+          invalid
+          invalidText="This is invalid text"
+        />
+        <WrappedMultiSelect items={items} label={label} type="inline" />
+      </>
+    );
+  });
+
+  it('should render', () => {
+    cy.findAllByText(/MultiSelect menu options/)
+      .should('have.length', 13)
+      .last()
+      .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();
+  });
+
+  it('should render listbox when clicked', () => {
+    cy.findAllByText(/MultiSelect menu options/)
+      .first()
+      .click();
+
+    cy.findAllByText(/Item 0/)
+      .first()
+      .should('be.visible');
+    cy.findAllByText(/Item 4/)
+      .first()
+      .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();
+  });
+});