test(ObjectPage): fix test in CI

Author: Lukas742

.github/workflows/test.yml

@@ -15,13 +15,7 @@ jobs:
     strategy:
       matrix:
         spec:
-          - base
-          - charts
-          - cypress-commands
-          - main/src/components
-          - main/src/webComponents
-          - main/src/internal
-          - compat
+          - main/src/components/ObjectPage
         react: ['18', '19']
       fail-fast: false
     steps:

package.json

@@ -15,7 +15,7 @@
     "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/ObjectPage",
     "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/ObjectPage/ObjectPage.cy.tsx

@@ -365,148 +365,150 @@ describe('ObjectPage', () => {
     });
   });
 
-  it('scroll to sections - default mode', () => {
-    document.body.style.margin = '0px';
-    cy.mount(
-      <ObjectPage data-testid="op" titleArea={DPTitle} headerArea={DPContent} style={{ height: '100vh' }}>
-        {OPContent}
-      </ObjectPage>,
-    );
-    cy.wait(200);
+  for (let i = 0; i < 50; i++) {
+    it.only('scroll to sections - default mode', () => {
+      document.body.style.margin = '0px';
+      cy.mount(
+        <ObjectPage data-testid="op" titleArea={DPTitle} headerArea={DPContent} style={{ height: '100vh' }}>
+          {OPContent}
+        </ObjectPage>,
+      );
+      cy.wait(200);
 
-    // first titleText should never be displayed (not.be.visible doesn't work here - only invisible for sighted users)
-    cy.findByText('Goals')
-      .parent()
-      .should('have.css', 'width', '1px')
-      .and('have.css', 'margin', '-1px')
-      .and('have.css', 'position', 'absolute');
-    cy.findByText('Employment').should('not.be.visible');
-    cy.findByText('Test').should('be.visible');
+      // first titleText should never be displayed (not.be.visible doesn't work here - only invisible for sighted users)
+      cy.findByText('Goals')
+        .parent()
+        .should('have.css', 'width', '1px')
+        .and('have.css', 'margin', '-1px')
+        .and('have.css', 'position', 'absolute');
+      cy.findByText('Employment').should('not.be.visible');
+      cy.findByText('Test').should('be.visible');
 
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
-    cy.get('[data-section-id="test"]').shouldNeverHaveAttribute('selected');
-    cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
-    cy.get(`[ui5-tab][data-index="3"]`).should('have.attr', 'selected');
-    cy.findByText('Employment').should('be.visible');
+      cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
+      cy.get('[data-section-id="test"]').shouldNeverHaveAttribute('selected');
+      cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
+      cy.get(`[ui5-tab][data-index="3"]`).should('have.attr', 'selected');
+      cy.findByText('Employment').should('be.visible');
 
-    cy.wait(200);
+      cy.wait(200);
 
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').realClick();
-    cy.findByText('Test').should('be.visible');
+      cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').realClick();
+      cy.findByText('Test').should('be.visible');
 
-    // no scroll when focusing something in the header area
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
-    cy.findByText('Job Information').should('be.visible');
-    cy.findByTestId('op').invoke('scrollTop').as('scrollTop');
-    cy.wait(100);
-    cy.realPress('ArrowLeft');
-    cy.get('@scrollTop').then((scrollTop) => {
-      cy.findByTestId('op').invoke('scrollTop').should('equal', scrollTop);
-    });
+      // no scroll when focusing something in the header area
+      cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
+      cy.findByText('Job Information').should('be.visible');
+      cy.findByTestId('op').invoke('scrollTop').as('scrollTop');
+      cy.wait(100);
+      cy.realPress('ArrowLeft');
+      cy.get('@scrollTop').then((scrollTop) => {
+        cy.findByTestId('op').invoke('scrollTop').should('equal', scrollTop);
+      });
 
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus();
-    cy.realPress('ArrowDown');
-    cy.realPress('ArrowDown');
-    cy.realPress('ArrowDown');
-    cy.realPress('Enter');
-    cy.get('[data-section-id="goals"]').shouldNeverHaveAttribute('selected');
-    cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
-    cy.findByText('Job Relationship').should('be.visible');
+      cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus();
+      cy.realPress('ArrowDown');
+      cy.realPress('ArrowDown');
+      cy.realPress('ArrowDown');
+      cy.realPress('Enter');
+      cy.get('[data-section-id="goals"]').shouldNeverHaveAttribute('selected');
+      cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
+      cy.findByText('Job Relationship').should('be.visible');
 
-    cy.mount(
-      <ObjectPage
-        data-testid
-        titleArea={DPTitle}
-        headerArea={DPContent}
-        footerArea={Footer}
-        style={{ height: '100vh' }}
-      >
-        {OPContent}
-      </ObjectPage>,
-    );
-    cy.wait(100);
+      cy.mount(
+        <ObjectPage
+          data-testid
+          titleArea={DPTitle}
+          headerArea={DPContent}
+          footerArea={Footer}
+          style={{ height: '100vh' }}
+        >
+          {OPContent}
+        </ObjectPage>,
+      );
+      cy.wait(100);
 
-    cy.findByText('Employment').should('not.be.visible');
-    cy.findByText('Test').should('be.visible');
-    cy.findByTestId('footer').should('be.visible');
+      cy.findByText('Employment').should('not.be.visible');
+      cy.findByText('Test').should('be.visible');
+      cy.findByTestId('footer').should('be.visible');
 
-    // Select Employment tab
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').focus();
-    cy.get('[ui5-tabcontainer]').realPress('ArrowRight');
-    cy.get('[ui5-tabcontainer]').realPress('ArrowRight');
-    cy.get('[ui5-tabcontainer]').realPress('ArrowRight');
-    cy.get('[ui5-tabcontainer]').realPress('Enter');
+      // Select Employment tab
+      cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').focus();
+      cy.get('[ui5-tabcontainer]').realPress('ArrowRight');
+      cy.get('[ui5-tabcontainer]').realPress('ArrowRight');
+      cy.get('[ui5-tabcontainer]').realPress('ArrowRight');
+      cy.get('[ui5-tabcontainer]').realPress('Enter');
 
-    cy.wait(200);
-    //fallback click
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
-    cy.get('[data-section-id="test"]').shouldNeverHaveAttribute('selected');
-    cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
-    cy.findByTestId('footer').should('be.visible');
-    cy.findByText('Employment').should('be.visible');
-    cy.findByText('Job Information').should('be.visible');
+      cy.wait(200);
+      //fallback click
+      cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
+      cy.get('[data-section-id="test"]').shouldNeverHaveAttribute('selected');
+      cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
+      cy.findByTestId('footer').should('be.visible');
+      cy.findByText('Employment').should('be.visible');
+      cy.findByText('Job Information').should('be.visible');
 
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click();
-    cy.get('[data-section-id="test"]').shouldNeverHaveAttribute('selected', 300);
-    cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
-    cy.findByText('Test').should('be.visible');
-    cy.findByTestId('footer').should('be.visible');
+      cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click();
+      cy.get('[data-section-id="test"]').shouldNeverHaveAttribute('selected', 300);
+      cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
+      cy.findByText('Test').should('be.visible');
+      cy.findByTestId('footer').should('be.visible');
 
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus();
-    cy.realPress('ArrowDown');
-    cy.wait(500);
-    cy.realPress('ArrowDown');
-    cy.realPress('ArrowDown');
-    cy.realPress('Enter');
-    cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
-    cy.get(`[ui5-tab][data-index="3"]`).should('have.attr', 'selected');
-    // wait for scroll
-    cy.wait(200);
-    cy.findByText('Job Relationship').should('be.visible');
+      cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus();
+      cy.realPress('ArrowDown');
+      cy.wait(500);
+      cy.realPress('ArrowDown');
+      cy.realPress('ArrowDown');
+      cy.realPress('Enter');
+      cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
+      cy.get(`[ui5-tab][data-index="3"]`).should('have.attr', 'selected');
+      // wait for scroll
+      cy.wait(200);
+      cy.findByText('Job Relationship').should('be.visible');
 
-    cy.findByTestId('footer').should('be.visible');
+      cy.findByTestId('footer').should('be.visible');
 
-    cy.mount(
-      <ObjectPage
-        data-testid
-        titleArea={DPTitle}
-        headerArea={DPContent}
-        footerArea={Footer}
-        style={{ height: '100vh' }}
-      >
-        {OPContent}
-        <ObjectPageSection aria-label="Long Section" id="long-section" titleText="Long Section">
-          <ObjectPageSubSection aria-label="Long Subsection 1" id="sub1" titleText="Long Subsection 1">
-            <FlexBox style={{ height: '2000px' }} direction="Column" justifyContent="SpaceBetween">
-              <span>Start SubSection1</span>
-              <span>End SubSection1</span>
-            </FlexBox>
-          </ObjectPageSubSection>
-          <ObjectPageSubSection aria-label="Long Subsection 2" id="sub2" titleText="Long Subsection 2">
-            <FlexBox style={{ height: '1000px' }} direction="Column" justifyContent="SpaceBetween">
-              <span>Start SubSection2</span>
-              <span>End SubSection2</span>
-            </FlexBox>
-          </ObjectPageSubSection>
-        </ObjectPageSection>
-      </ObjectPage>,
-    );
-    cy.wait(100);
+      cy.mount(
+        <ObjectPage
+          data-testid
+          titleArea={DPTitle}
+          headerArea={DPContent}
+          footerArea={Footer}
+          style={{ height: '100vh' }}
+        >
+          {OPContent}
+          <ObjectPageSection aria-label="Long Section" id="long-section" titleText="Long Section">
+            <ObjectPageSubSection aria-label="Long Subsection 1" id="sub1" titleText="Long Subsection 1">
+              <FlexBox style={{ height: '2000px' }} direction="Column" justifyContent="SpaceBetween">
+                <span>Start SubSection1</span>
+                <span>End SubSection1</span>
+              </FlexBox>
+            </ObjectPageSubSection>
+            <ObjectPageSubSection aria-label="Long Subsection 2" id="sub2" titleText="Long Subsection 2">
+              <FlexBox style={{ height: '1000px' }} direction="Column" justifyContent="SpaceBetween">
+                <span>Start SubSection2</span>
+                <span>End SubSection2</span>
+              </FlexBox>
+            </ObjectPageSubSection>
+          </ObjectPageSection>
+        </ObjectPage>,
+      );
+      cy.wait(100);
 
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Long Section').focus();
-    cy.realPress('ArrowDown');
-    cy.get('[ui5-responsive-popover]').should('be.visible');
-    cy.realPress('ArrowDown');
-    cy.wait(50);
-    cy.realPress('ArrowDown');
-    cy.realPress('Enter');
-    cy.get('[data-section-id="test"]').shouldNeverHaveAttribute('selected');
-    cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
-    cy.get(`[ui5-tab][data-index="3"]`).shouldNeverHaveAttribute('selected');
-    // wait for scroll
-    cy.wait(200);
-    cy.findByText('Start SubSection2').should('be.visible');
-  });
+      cy.get('[ui5-tabcontainer]').findUi5TabByText('Long Section').focus();
+      cy.realPress('ArrowDown');
+      cy.get('[ui5-responsive-popover]').should('be.visible');
+      cy.realPress('ArrowDown');
+      cy.wait(50);
+      cy.realPress('ArrowDown');
+      cy.realPress('Enter');
+      cy.get('[data-section-id="test"]').shouldNeverHaveAttribute('selected');
+      cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
+      cy.get(`[ui5-tab][data-index="3"]`).shouldNeverHaveAttribute('selected');
+      // wait for scroll
+      cy.wait(200);
+      cy.findByText('Start SubSection2').should('be.visible');
+    });
+  }
 
   it('scroll to sections - tab mode', () => {
     document.body.style.margin = '0px';