diff --git a/packages/cypress-commands/src/commands.ts b/packages/cypress-commands/src/commands.ts index 4da5e335032..3cfb54b41fb 100644 --- a/packages/cypress-commands/src/commands.ts +++ b/packages/cypress-commands/src/commands.ts @@ -65,6 +65,23 @@ declare global { * @example cy.clickUi5ListItemByText("List Item") */ clickUi5ListItemByText(text: string): Chainable; + + /** + * Click on an `ui5-option` of the `ui5-select` component by text. + * @param text text of the ui5-option that should be clicked + * @example cy.get('[ui5-select]').clickUi5SelectOptionByText('Option2'); + * + * __Note:__ The select popover must be visible, otherwise the `change` event is not fired. + */ + clickUi5SelectOptionByText(text: string, options?: Partial): Chainable; + + /** + * Click on chained `ui5-option`. + * @example cy.get('[ui5-option]').clickUi5SelectOption(); + * + * __Note:__ The select popover must be visible, otherwise the `change` event is not fired. + */ + clickUi5SelectOption(options?: Partial): Chainable; } } } @@ -119,4 +136,20 @@ Cypress.Commands.add('clickUi5ListItemByText', (text) => { cy.contains(text).find('li').click({ force: true }); }); +Cypress.Commands.add('clickUi5SelectOptionByText', { prevSubject: 'element' }, (subject, text, options = {}) => { + cy.wrap(subject).then(async ($select) => { + // @ts-expect-error: cannot set $select to use SelectDomRef + const domRef = await $select.get(0).getStaticAreaItemDomRef(); + cy.wrap(domRef).contains(text).click(options); + }); +}); + +Cypress.Commands.add('clickUi5SelectOption', { prevSubject: 'element' }, (subject, options = {}) => { + cy.wrap(subject).then(($option) => { + // @ts-expect-error: cannot set $option to use OptionDomRef + const domRef = $option.get(0).getDomRef(); + cy.wrap(domRef).click(options); + }); +}); + export {}; diff --git a/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx b/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx index 466424f5e09..d3dcde29103 100644 --- a/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx +++ b/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx @@ -13,14 +13,16 @@ import { MultiComboBoxItem, ComboBox, ComboBoxItem, - SuggestionItem + SuggestionItem, + Select, + Option } from '@ui5/webcomponents-react'; import '@ui5/webcomponents/dist/features/InputSuggestions.js'; describe('UI5 Web Components - Child Commands', () => { it('clickUi5Tab', () => { cy.mount( - + Tab 2 @@ -30,7 +32,7 @@ describe('UI5 Web Components - Child Commands', () => { ); - cy.findByTestId('tabContainer').findUi5TabByText('Tab 2').click(); + cy.get('[ui5-tabcontainer]').findUi5TabByText('Tab 2').click(); cy.findByTestId('tab1').should('not.have.attr', 'selected'); cy.findByTestId('tab2').should('have.attr', 'selected'); }); @@ -154,4 +156,30 @@ describe('UI5 Web Components - Child Commands', () => { document.querySelector('ui5-static-area')?.remove(); }); }); + + it('click Option of Select', () => { + const select = cy.spy().as('select'); + cy.mount( + + ); + cy.get('[ui5-select]').click(); + cy.get('[ui5-select]').clickUi5SelectOptionByText('Test2'); + cy.get('@select').should('have.been.calledOnce'); + cy.get('[ui5-select]').clickUi5SelectOptionByText('Test3', { force: true }); + // the web component doesn't fire the event if the popover is not opened + cy.get('@select').should('have.been.calledOnce'); + + cy.get('[ui5-select]').click(); + cy.findByTestId('5').clickUi5SelectOption(); + cy.get('@select').should('have.been.calledTwice'); + cy.findByTestId('4').clickUi5SelectOption({ force: true }); + // the web component doesn't fire the event if the popover is not opened + cy.get('@select').should('have.been.calledTwice'); + }); }); diff --git a/packages/cypress-commands/tsconfig.json b/packages/cypress-commands/tsconfig.json index 037e4e9fafa..42ed5e4e817 100644 --- a/packages/cypress-commands/tsconfig.json +++ b/packages/cypress-commands/tsconfig.json @@ -9,7 +9,8 @@ "declarationDir": "./dist", "rootDir": "./src", "types": ["cypress"], - "strict": true + "strict": true, + "skipLibCheck": true }, "include": ["src"] }