From b5628f4aa00250f4667306daf0278f84a8e9ae36 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
Date: Thu, 26 Aug 2021 06:34:39 -0500
Subject: [PATCH] test(ComboBox): add vrt (#9497)

* test(ComboBox): add vrt

* fix: open snapshot for combobox

* fix: remove unnecessary html

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../components/ComboBox/ComboBox-test.e2e.js  | 157 ++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 packages/react/src/components/ComboBox/ComboBox-test.e2e.js

diff --git a/packages/react/src/components/ComboBox/ComboBox-test.e2e.js b/packages/react/src/components/ComboBox/ComboBox-test.e2e.js
new file mode 100644
index 000000000000..6934e73f02f5
--- /dev/null
+++ b/packages/react/src/components/ComboBox/ComboBox-test.e2e.js
@@ -0,0 +1,157 @@
+/**
+ * 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/combo-box/_combo-box.scss';
+import 'carbon-components/scss/components/list-box/_list-box.scss';
+import 'carbon-components/scss/components/text-input/_text-input.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import ComboBox from './ComboBox';
+
+describe('ComboBox', () => {
+  beforeEach(() => {
+    const items = [
+      {
+        id: 'option-0',
+        text:
+          'An example option that is really long to show what should be done to handle long text',
+      },
+      {
+        id: 'option-1',
+        text: 'Option 1',
+      },
+      {
+        id: 'option-2',
+        text: 'Option 2',
+      },
+      {
+        id: 'option-3',
+        text: 'Option 3',
+      },
+      {
+        id: 'option-4',
+        text: 'Option 4',
+      },
+      {
+        id: 'option-5',
+        text: 'Option 5',
+      },
+    ];
+
+    mount(
+      <>
+        <div style={{ marginBottom: '2rem' }}>
+          <ComboBox
+            onChange={() => {}}
+            id="carbon-combobox"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            placeholder="Filter..."
+            titleText="Default combobox"
+            helperText="Optional combobox helper text"
+          />
+        </div>
+        <div style={{ marginBottom: '2rem' }}>
+          <ComboBox
+            onChange={() => {}}
+            id="carbon-combobox"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            placeholder="Filter..."
+            titleText="Small combobox"
+            helperText="Combobox helper text"
+            size="sm"
+          />
+        </div>
+        <div style={{ marginBottom: '2rem' }}>
+          <ComboBox
+            onChange={() => {}}
+            id="carbon-combobox"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            placeholder="Filter..."
+            titleText="Large combobox"
+            helperText="Combobox helper text"
+            size="lg"
+          />
+        </div>
+        <div style={{ marginBottom: '2rem' }}>
+          <ComboBox
+            onChange={() => {}}
+            id="carbon-combobox"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            placeholder="Filter..."
+            titleText="Disabled combobox"
+            helperText="Combobox helper text"
+            disabled
+          />
+        </div>
+        <div style={{ marginBottom: '2rem' }}>
+          <ComboBox
+            onChange={() => {}}
+            id="carbon-combobox"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            placeholder="Filter..."
+            titleText="Light combobox"
+            helperText="Combobox helper text"
+            light
+          />
+        </div>
+        <div style={{ marginBottom: '2rem' }}>
+          <ComboBox
+            onChange={() => {}}
+            id="carbon-combobox"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            placeholder="Filter..."
+            titleText="Combobox with warning state"
+            helperText="Combobox helper text"
+            warn
+            warnText="Warning state message here"
+          />
+        </div>
+        <div style={{ marginBottom: 8 }}>
+          <ComboBox
+            onChange={() => {}}
+            id="carbon-combobox"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            placeholder="Filter..."
+            titleText="Combobox with invalid state"
+            helperText="Combobox with invalid state"
+            invalid
+            invalidText="Invalid text message here"
+          />
+        </div>
+      </>
+    );
+  });
+
+  it('should render', () => {
+    cy.findByText(/Optional/).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 open on click and display list items', () => {
+    cy.findAllByRole('button').first().click();
+    cy.findAllByText(/Option 1/)
+      .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();
+  });
+});