feat(cypress-commands): allow clickUi5ListItemByText to be chained (#7312)

Author: Lukas742

packages/cypress-commands/src/commands.ts

@@ -64,11 +64,17 @@ declare global {
       closeUi5PopupWithEsc(): Chainable<Element>;
 
       /**
-       * Click on a list item of the `List` component by text.
+       * Click on a list item of the `ui5-list` component by text.
+       *
+       * __Note:__ Chaining this command to a `ui5-list` selector is recommended.
+       *
        * @param {string} text The text of the list item that should be clicked.
-       * @example cy.clickUi5ListItemByText("List Item")
+       * @param options ClickOptions
+       * @example
+       * cy.get('[ui5-list]').clickUi5ListItemByText("List Item")
+       * cy.clickUi5ListItemByText("List Item")
        */
-      clickUi5ListItemByText(text: string): Chainable<Element>;
+      clickUi5ListItemByText(text: string, options: Partial<ClickOptions>): Chainable<Element>;
 
       /**
        * Click on an `ui5-option` of the `ui5-select` component by text.
@@ -188,8 +194,17 @@ Cypress.Commands.add('closeUi5PopupWithEsc', () => {
   cy.get('body').type('{esc}', { force: true });
 });
 
-Cypress.Commands.add('clickUi5ListItemByText', (text) => {
-  cy.contains(text).find('li').click({ force: true });
+Cypress.Commands.add('clickUi5ListItemByText', { prevSubject: 'optional' }, (subject, text) => {
+  cy.document().then((doc) => {
+    const _subject = (subject as Cypress.JQueryWithSelector<UI5Element>)?.[0] || doc;
+    const li = _subject.querySelector(`[text="${text}"]`);
+
+    if (li) {
+      cy.wrap(li).click();
+    } else {
+      cy.wrap(_subject).contains(text).click();
+    }
+  });
 });
 
 Cypress.Commands.add('clickUi5SelectOptionByText', { prevSubject: 'element' }, (subject, text, options = {}) => {

packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx

@@ -124,13 +124,29 @@ describe('UI5 Web Components - Child Commands', () => {
 
   it('click list item', () => {
     cy.mount(
-      <List selectionMode="Multiple">
-        <ListItemStandard data-testid="s" text="ListItemStandard" />
-        <ListItemCustom data-testid="c">ListItemCustom</ListItemCustom>
-      </List>
+      <>
+        <List selectionMode="Multiple" data-testid="list">
+          <ListItemStandard data-testid="li1" text="ListItemStandard" />
+          <ListItemStandard data-testid="li2">ListItemStandard2</ListItemStandard>
+          <ListItemCustom data-testid="li3">ListItemCustom</ListItemCustom>
+        </List>
+      </>
     );
-    cy.findByText('ListItemStandard').click();
-    cy.findByTestId('c').click();
+    cy.clickUi5ListItemByText('ListItemStandard');
+    cy.clickUi5ListItemByText('ListItemStandard2');
+    cy.clickUi5ListItemByText('ListItemCustom');
+
+    cy.findByTestId('li1').should('have.attr', 'selected', 'selected');
+    cy.findByTestId('li2').should('have.attr', 'selected', 'selected');
+    cy.findByTestId('li3').should('have.attr', 'selected', 'selected');
+
+    cy.get('[ui5-list]').clickUi5ListItemByText('ListItemStandard');
+    cy.get('[ui5-list]').clickUi5ListItemByText('ListItemStandard2');
+    cy.get('[ui5-list]').clickUi5ListItemByText('ListItemCustom');
+
+    cy.findByTestId('li1').should('not.have.attr', 'selected');
+    cy.findByTestId('li2').should('not.have.attr', 'selected');
+    cy.findByTestId('li3').should('not.have.attr', 'selected');
   });
 
   // TODO figure out how to re-enable this test. Currently the popover directly closes after any interaction with the component.