feat(cypress): update techdocs

Signed-off-by: Rémi Doreau <remi.d45@gmail.com>

cypress/src/integration/plugins/techdocs.spec.ts

@@ -27,6 +27,8 @@ describe('TechDocs', () => {
   describe('Navigating to TechDocs', () => {
     it('should navigate to the TechDocs home page via the primary navigation bar', () => {
       cy.visit('/');
+      cy.wait(500);
+
       cy.get('[data-testid="sidebar-root"]')
         .get('div')
         .get('a[href="/docs"]')
@@ -37,6 +39,9 @@ describe('TechDocs', () => {
 
     it('should navigate to the TechDocs home page from the URL', () => {
       cy.visit('/docs');
+
+      cy.wait(500);
+
       cy.contains('Documentation');
     });
 
@@ -55,18 +60,6 @@ describe('TechDocs', () => {
       });
     });
 
-    it('should navigate to a specific TechDocs entity from the "Owned documents" tab', () => {
-      cy.visit('/docs');
-      cy.get('[data-testid="header-tab-1"]').click();
-      cy.get('[value="techdocs-e2e-fixture"] > div > a').click();
-
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq(
-          '/docs/default/Component/techdocs-e2e-fixture',
-        );
-      });
-    });
-
     it('should navigate to a specific TechDocs entity page from a URL', () => {
       cy.visit('/docs/default/Component/techdocs-e2e-fixture');
       cy.waitHomePage();
@@ -85,7 +78,7 @@ describe('TechDocs', () => {
       cy.window().its('scrollY').should('equal', 0);
 
       cy.getTechDocsShadowRoot().within(() => {
-        cy.contains('Subpage 2');
+        cy.contains('Sub-page 2');
       });
     });
 
@@ -98,14 +91,8 @@ describe('TechDocs', () => {
       // This is used to test the post-render behavior of the techdocs Reader
       cy.wait(500);
 
-      return cy.getTechDocsShadowRoot().within(() => {
-        cy.get('#section-23').then($el => {
-          cy.window()
-            .its('scrollY')
-            .should($scrollY => {
-              expect($scrollY).to.be.closeTo($el[0].offsetTop, 200);
-            });
-        });
+      cy.getTechDocsShadowRoot().within(() => {
+        cy.isInViewport('#section-23');
       });
     });
 
@@ -125,7 +112,7 @@ describe('TechDocs', () => {
         cy.getTechDocsNavigation()
           .find('> div > div > [data-md-level="0"] > ul > li:nth-child(2) > a')
           .click();
-        cy.contains('Subpage 1');
+        cy.contains('Sub-page 1');
         cy.window().its('scrollY').should('eq', 0);
       });
     });
@@ -142,18 +129,13 @@ describe('TechDocs', () => {
             cy.get('> div > div > nav > ul > li:nth-child(3) > a').click();
           });
 
-          cy.get('#section-23').then($el => {
-            cy.window()
-              .its('scrollY')
-              .should($scrollY => {
-                expect($scrollY).to.be.closeTo($el[0].offsetTop, 200);
-              });
-          });
+          cy.isInViewport('#section-23');
         });
       });
 
       it('should navigate to a specific fragment within the page via the table of contents - Level 2', () => {
         return cy.getTechDocsShadowRoot().within(() => {
+          cy.isNotInViewport('#sub-section-222');
           // Section 2.2
           cy.getTechDocsTableOfContents()
             .find(
@@ -161,13 +143,7 @@ describe('TechDocs', () => {
             )
             .click();
 
-          cy.get('#sub-section-222').then($el => {
-            cy.window()
-              .its('scrollY')
-              .should($scrollY => {
-                expect($scrollY).to.be.closeTo($el[0].offsetTop, 200);
-              });
-          });
+          cy.isInViewport('#sub-section-222');
         });
       });
 
@@ -187,8 +163,6 @@ describe('TechDocs', () => {
       });
 
       it('should navigate to the next page within a TechDocs entity', () => {
-        cy.scrollTo('bottom');
-
         return cy.getTechDocsShadowRoot().within(() => {
           cy.get('.md-footer-nav__link--next').click();
 
@@ -201,8 +175,6 @@ describe('TechDocs', () => {
       });
 
       it('should navigate to the previous page within a TechDocs entity', () => {
-        cy.scrollTo('bottom');
-
         return cy.getTechDocsShadowRoot().within(() => {
           cy.get('.md-footer-nav__link--prev').click();
 

cypress/src/support/commands.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/* eslint-disable jest/no-standalone-expect */
 /// <reference types="cypress" />
 import 'os';
 
@@ -24,6 +25,34 @@ Cypress.Commands.add('getTechDocsShadowRoot', () => {
   cy.get('[data-testid="techdocs-content-shadowroot"]').shadow();
 });
 
+Cypress.Commands.add('isNotInViewport', element => {
+  cy.get(element).then($el => {
+    const bottom = Cypress.config(`viewportHeight`);
+    const rect = $el[0].getBoundingClientRect();
+
+    if (bottom) {
+      expect(rect.top).to.be.greaterThan(bottom);
+      expect(rect.bottom).to.be.greaterThan(bottom);
+      expect(rect.top).to.be.greaterThan(bottom);
+      expect(rect.bottom).to.be.greaterThan(bottom);
+    }
+  });
+});
+
+Cypress.Commands.add('isInViewport', element => {
+  cy.get(element).then($el => {
+    const bottom = Cypress.config(`viewportHeight`);
+    const rect = $el[0].getBoundingClientRect();
+
+    if (bottom) {
+      expect(rect.top).not.to.be.greaterThan(bottom);
+      expect(rect.bottom).not.to.be.greaterThan(bottom);
+      expect(rect.top).not.to.be.greaterThan(bottom);
+      expect(rect.bottom).not.to.be.greaterThan(bottom);
+    }
+  });
+});
+
 Cypress.Commands.add('getTechDocsTableOfContents', () => {
   cy.get('[data-md-component="toc"]');
 });

cypress/src/types.d.ts

@@ -64,8 +64,18 @@ declare namespace Cypress {
     waitHomePage(): Chainable<Element>;
     /**
      * Wait TechDocs API response for Section 2 page
-     * @example cy.waitRoadmapPage
+     * @example cy.waitSectionTwoPage
      */
     waitSectionTwoPage(): Chainable<Element>;
+    /**
+     * Check if the element is in viewport
+     * @example cy.isInViewport
+     */
+    isInViewport(element: string): Chainable<Element>;
+    /**
+     * Check if the element is not in viewport
+     * @example cy.isNotInViewport
+     */
+    isNotInViewport(element: string): Chainable<Element>;
   }
 }