feat(cypress-commands): add clickUi5SelectOptionByText & clickUi5SelectOption commands (#5150)

Author: Lukas742

packages/cypress-commands/src/commands.ts

@@ -65,6 +65,23 @@ declare global {
        * @example cy.clickUi5ListItemByText("List Item")
        */
       clickUi5ListItemByText(text: string): Chainable<Element>;
+
+      /**
+       * 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<ClickOptions>): Chainable<Element>;
+
+      /**
+       * 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<ClickOptions>): Chainable<Element>;
     }
   }
 }
@@ -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 {};

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(
-      <TabContainer data-testId={'tabContainer'}>
+      <TabContainer>
         <Tab data-testId="tab1" text={'Tab 1'} selected>
           Tab 2
         </Tab>
@@ -30,7 +32,7 @@ describe('UI5 Web Components - Child Commands', () => {
       </TabContainer>
     );
 
-    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(
+      <Select onChange={select}>
+        <Option>Test1</Option>
+        <Option>Test2</Option>
+        <Option>Test3</Option>
+        <Option data-testid="4">Test4</Option>
+        <Option data-testid="5">Test5</Option>
+      </Select>
+    );
+    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');
+  });
 });

packages/cypress-commands/tsconfig.json

@@ -9,7 +9,8 @@
     "declarationDir": "./dist",
     "rootDir": "./src",
     "types": ["cypress"],
-    "strict": true
+    "strict": true,
+    "skipLibCheck": true
   },
   "include": ["src"]
 }