diff --git a/packages/react/src/components/Dropdown/Dropdown-test.e2e.js b/packages/react/src/components/Dropdown/Dropdown-test.e2e.js new file mode 100644 index 000000000000..535cefc46ac8 --- /dev/null +++ b/packages/react/src/components/Dropdown/Dropdown-test.e2e.js @@ -0,0 +1,101 @@ +/** + * 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/dropdown/_dropdown.scss'; + +import React from 'react'; +import { mount } from '@cypress/react'; +import { generateItems, generateGenericItem } from '../ListBox/test-helpers'; +import Dropdown from '../Dropdown'; +import DropdownSkeleton from '../Dropdown/Dropdown.Skeleton'; + +describe('Dropdown', () => { + beforeEach(() => { + const items = generateItems(5, generateGenericItem); + const label = 'Dropdown menu options'; + const style = { marginBottom: '1rem' }; + mount( + <> + + + + + + + + + + + + + + + + + + + ); + }); + + it('should render', () => { + cy.findAllByText(/Dropdown 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(/Dropdown 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(); + }); +}); diff --git a/packages/react/src/components/Dropdown/Dropdown.Skeleton.js b/packages/react/src/components/Dropdown/Dropdown.Skeleton.js index f872ac10ea28..a2db83c0dcb4 100644 --- a/packages/react/src/components/Dropdown/Dropdown.Skeleton.js +++ b/packages/react/src/components/Dropdown/Dropdown.Skeleton.js @@ -55,7 +55,7 @@ DropdownSkeleton.propTypes = { ), /** - * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option. + * Specify the size of the ListBox. */ size: ListBoxPropTypes.ListBoxSize, };