temp

Author: Lukas742

.github/workflows/test.yml

@@ -19,6 +19,7 @@ jobs:
           - charts
           - cypress-commands
           - main/src/components
+          - main/src/components/SelectDialog
           - main/src/webComponents
           - main/src/internal
           - compat

package.json

@@ -8,14 +8,14 @@
   "scripts": {
     "start": "yarn setup && yarn create-cypress-commands-docs && npm-run-all -p start:watcher start:storybook",
     "start:watcher": "lerna run watch:css",
-    "start:storybook": "storybook dev -p 6006",
+    "start:storybook": "storybook dev -p 6008",
     "setup": "lerna run build:i18n && lerna run build:css && lerna run build:css-bundle && lerna run build:version-info && rimraf node_modules/@types/mocha",
     "build": "yarn setup && tsc --build tsconfig.build.json && lerna run build:client && lerna run build:wrapper",
     "build:storybook": "yarn build && yarn create-cypress-commands-docs && storybook build -o .out",
     "build:storybook-sitemap": "node ./scripts/create-storybook-sitemap.js --directory .out",
     "test:prepare": "rimraf temp && lerna run build",
     "test:open": "CYPRESS_COVERAGE=false cypress open --component --browser chrome",
-    "test": "yarn test:prepare && cypress run --component --browser chrome --spec packages",
+    "test": "yarn test:prepare && cypress run --component --browser chrome --spec packages/main/src/components/SelectDialog",
     "clean": "tsc --build --clean && tsc --build tsconfig.build.json --clean && rimraf temp .out && lerna run clean",
     "clean:remove-modules": "yarn clean && rimraf node_modules",
     "prettier:all": "prettier --write --config ./prettier.config.js \"**/*\"",

packages/main/src/components/SelectDialog/SelectDialog.cy.tsx

@@ -304,23 +304,36 @@ describe('SelectDialog', () => {
     cy.findByTestId('confirmBtn').should('have.attr', 'design', 'Emphasized');
   });
 
-  it('invisible messaging', () => {
-    cy.mount(
-      <SelectDialog open selectionMode={ListSelectionMode.Multiple}>
-        <ListItemStandard text={'ListItem 1'} data-testid="1" />
-        <ListItemStandard text={'ListItem 2'} data-testid="2" />
-        <ListItemStandard text={'ListItem 3'} data-testid="3" />
-        <ListItemStandard text={'ListItem 4'} data-testid="4" />
-      </SelectDialog>,
-    );
-    cy.findByTestId('1').click();
-    cy.get('ui5-announcement-area').should('contain.text', 'Selected Items 1');
-    cy.findByTestId('1').click();
-    cy.get('ui5-announcement-area').should('not.contain.text', 'Selected Items 1');
-    cy.findByTestId('1').click();
-    cy.findByTestId('2').click();
-    cy.findByTestId('3').click();
-    cy.findByTestId('4').click();
-    cy.get('ui5-announcement-area').should('contain.text', 'Selected Items 4');
-  });
+  for (let i = 0; i <= 100; ++i) {
+    it.only('invisible messaging', () => {
+      cy.mount(
+        <SelectDialog open selectionMode={ListSelectionMode.Multiple}>
+          <ListItemStandard text={'ListItem 1'} data-testid="1" />
+          <ListItemStandard text={'ListItem 2'} data-testid="2" />
+          <ListItemStandard text={'ListItem 3'} data-testid="3" />
+          <ListItemStandard text={'ListItem 4'} data-testid="4" />
+        </SelectDialog>,
+      );
+      // Note: announce() from @ui5/webcomponents-base sets textContent="" before setting the message,
+      // creating a brief moment where the text is empty. cy.wait(0) yields to the event loop to let the DOM settle.
+      cy.findByTestId('1').click();
+      cy.findByTestId('1').should('have.attr', 'selected');
+      cy.wait(0);
+      cy.get('ui5-announcement-area').should('contain.text', 'Selected Items 1');
+      cy.findByTestId('1').click();
+      cy.findByTestId('1').should('not.have.attr', 'selected');
+      cy.wait(0);
+      cy.get('ui5-announcement-area').should('not.contain.text', 'Selected Items 1');
+      cy.findByTestId('1').click();
+      cy.findByTestId('1').should('have.attr', 'selected');
+      cy.findByTestId('2').click();
+      cy.findByTestId('2').should('have.attr', 'selected');
+      cy.findByTestId('3').click();
+      cy.findByTestId('3').should('have.attr', 'selected');
+      cy.findByTestId('4').click();
+      cy.findByTestId('4').should('have.attr', 'selected');
+      cy.wait(0);
+      cy.get('ui5-announcement-area').should('contain.text', 'Selected Items 4');
+    });
+  }
 });