add openDropDownByClick

SAP · Apr 25, 2024 · 2668db1 · 2668db1
1 parent 74356ed
commit 2668db1
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 14 deletions.
diff --git a/packages/cypress-commands/src/commands.ts b/packages/cypress-commands/src/commands.ts
@@ -106,11 +106,18 @@ declare global {
       /**
        * Click on a chained option of "select-like" components. Currently supported components are `ui5-option` and `ui5-mcb-item`.
        *
-       * __Note:__ The select popover must be visible, otherwise it can lead to unwanted side effects.
+       * __Note:__ The popover must be visible, otherwise it can lead to unwanted side effects.
        *
        * @example cy.get('[ui5-option]').clickDropdownMenuItem();
        */
       clickDropdownMenuItem(options?: Partial<ClickOptions>): Chainable<Element>;
+
+      /**
+       * Click on the open button in "select-like" components to open the popover. Currently supported components are `ui5-select`, `ui5-combobox` and `ui5-multi-combobox`.
+       *
+       * @example cy.get('[ui5-select]').openDropDownByClick();
+       */
+      openDropDownByClick(options?: Partial<ClickOptions>): Chainable<Element>;
     }
   }
 }
@@ -208,4 +215,13 @@ Cypress.Commands.add('clickDropdownMenuItem', { prevSubject: 'element' }, (subje
       .click({ force: true, ...options });
   });
 });
+
+Cypress.Commands.add('openDropDownByClick', { prevSubject: 'element' }, (subject, options = {}) => {
+  if (subject.get(0).hasAttribute('ui5-multi-combobox')) {
+    // mcb needs a lot of calculation time to make the popover available
+    cy.wait(500);
+  }
+  cy.wrap(subject).shadow().find('[input-icon]').click(options);
+});
+
 export {};
diff --git a/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx b/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx
@@ -214,11 +214,7 @@ describe('UI5 Web Components - Child Commands', () => {
 
     components.forEach((component) => {
       cy.mount(component);
-      if (component.key === 'ui5-multi-combobox') {
-        // mcb needs a lot of calculation time to make the popover available
-        cy.wait(500);
-      }
-      cy.get(`[${component.key}]`).shadow().get('[input-icon]').click();
+      cy.get(`[${component.key}]`).openDropDownByClick();
       cy.get(`[${component.key}]`).clickDropdownMenuItemByText(selectItemText);
 
       switch (component.key) {
@@ -235,35 +231,51 @@ describe('UI5 Web Components - Child Commands', () => {
 
       cy.get('@change').should('have.callCount', callCounter);
       callCounter++;
+      cy.wait(200);
     });
   });
 
   it('clickDropDownMenuItem', () => {
     const selectItemText = 'Select me';
+    const changeSpy = cy.spy().as('change');
+    let callCounter = 1;
     const components = [
       // todo: activate cb test once `getDomRef` returns correct value: https://github.com/SAP/ui5-webcomponents/issues/8841
       // <ComboBox key="ui5-combobox">
-      //   {...new Array(5).fill(<ComboBoxItem text="Item" />)}
+      //   {...new Array(5).fill(<ComboBoxItem text="Item" onSelectionChange={changeSpy}/>)}
       //   <ComboBoxItem text={selectItemText} data-testid="selectItem" />
       // </ComboBox>,
-      <MultiComboBox key="ui5-multi-combobox" onKeyDown={console.log}>
+      <MultiComboBox key="ui5-multi-combobox" onSelectionChange={changeSpy}>
         {...new Array(5).fill(<MultiComboBoxItem text="Item" />)}
         <MultiComboBoxItem text={selectItemText} data-testid="selectItem" />
       </MultiComboBox>,
-      <Select key="ui5-select">
+      <Select key="ui5-select" onChange={changeSpy}>
         {...new Array(5).fill(<Option>Item</Option>)}
         <Option data-testid="selectItem">{selectItemText}</Option>
       </Select>
     ];
 
     components.forEach((component) => {
       cy.mount(component);
-      if (component.key === 'ui5-multi-combobox') {
-        // mcb needs a lot of calculation time to make the popover available
-        cy.wait(500);
-      }
-      cy.get(`[${component.key}]`).shadow().find('[input-icon]').click();
+      cy.get(`[${component.key}]`).openDropDownByClick();
+      cy.get('[ui5-responsive-popover][open]').should('be.visible');
       cy.get(`[data-testid="selectItem"]`).clickDropdownMenuItem();
+
+      switch (component.key) {
+        case 'ui5-combobox':
+          cy.get(`[${component.key}]`).should('have.value', selectItemText);
+          break;
+        case 'ui5-multi-combobox':
+          cy.get(`[${component.key}]`).find('[ui5-token]').contains(selectItemText);
+          break;
+        case 'ui5-select':
+          cy.get(`[${component.key}]`).should('have.value', selectItemText);
+          break;
+      }
+
+      cy.get('@change').should('have.callCount', callCounter);
+      callCounter++;
+      cy.wait(200);
     });
   });
 });