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( + <> +
+ {}} + id="carbon-combobox" + items={items} + itemToString={(item) => (item ? item.text : '')} + placeholder="Filter..." + titleText="Default combobox" + helperText="Optional combobox helper text" + /> +
+
+ {}} + id="carbon-combobox" + items={items} + itemToString={(item) => (item ? item.text : '')} + placeholder="Filter..." + titleText="Small combobox" + helperText="Combobox helper text" + size="sm" + /> +
+
+ {}} + id="carbon-combobox" + items={items} + itemToString={(item) => (item ? item.text : '')} + placeholder="Filter..." + titleText="Large combobox" + helperText="Combobox helper text" + size="lg" + /> +
+
+ {}} + id="carbon-combobox" + items={items} + itemToString={(item) => (item ? item.text : '')} + placeholder="Filter..." + titleText="Disabled combobox" + helperText="Combobox helper text" + disabled + /> +
+
+ {}} + id="carbon-combobox" + items={items} + itemToString={(item) => (item ? item.text : '')} + placeholder="Filter..." + titleText="Light combobox" + helperText="Combobox helper text" + light + /> +
+
+ {}} + 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" + /> +
+
+ {}} + 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" + /> +
+ + ); + }); + + 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(); + }); +});