feat(app): refactor e2e tests

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

packages/app/cypress/fixtures/techdocs/components/roadmap.html

@@ -2610,7 +2610,9 @@
               </h3>
               <ul>
                 <li>
-                  <a href="https://demo.backstage.io"
+                  <a
+                    data-testid="external-link"
+                    href="https://demo.backstage.io"
                     >Deploy a product demo at <code>demo.backstage.io</code></a
                   >
                 </li>

packages/app/cypress/integration/techdocs/techdocs.spec.js

@@ -81,6 +81,8 @@ describe('TechDocs', () => {
     it('should navigate to a specific TechDocs fragment from a URL', () => {
       cy.visit('/docs/default/Component/backstage/overview/roadmap');
 
+      cy.window().its('scrollY').should('equal', 0);
+
       cy.getTechDocsShadowRoot().within(() => {
         cy.contains('Phases');
         cy.contains('Detailed roadmap');
@@ -92,7 +94,21 @@ describe('TechDocs', () => {
         '/docs/default/Component/backstage/overview/roadmap/#future-work',
       );
 
-      cy.window().its('scrollY').should('equal', 1422);
+      return cy.getTechDocsShadowRoot().within(() => {
+        return cy.get('#future-work').then($el => {
+          cy.window()
+            .its('scrollY')
+            .should($scrollY => {
+              expect($scrollY).to.be.closeTo($el[0].offsetTop, 200);
+            });
+        });
+      });
+    });
+
+    it('should navigate to a wrong TechDocs component page from a URL', () => {
+      cy.visit('/docs/default/Component/wrong-component');
+
+      cy.get('[data-testid=error]').should('be.visible');
     });
   });
 
@@ -108,6 +124,7 @@ describe('TechDocs', () => {
 
       cy.mockTechDocs();
     });
+
     it('should navigate to the TechDocs page via the navigation bar', () => {
       cy.visit('/docs/default/Component/backstage');
 
@@ -123,12 +140,14 @@ describe('TechDocs', () => {
     it('should navigate to the TechDocs page via the table of contents - Level 1', () => {
       cy.visit('/docs/default/Component/backstage/overview/roadmap');
 
-      return cy.window().then($win => {
-        cy.getTechDocsShadowRoot().within(() => {
-          cy.get('[data-testid="md-nav-phases"]', { timeout: 5000 })
-            .click()
-            .should(() => {
-              expect($win.scrollY).to.be.closeTo(407, 100);
+      return cy.getTechDocsShadowRoot().within(() => {
+        cy.get('[data-testid="md-nav-phases"]').click();
+
+        cy.get('#phases').then($el => {
+          cy.window()
+            .its('scrollY')
+            .should($scrollY => {
+              expect($scrollY).to.be.closeTo($el[0].offsetTop, 200);
             });
         });
       });
@@ -137,12 +156,14 @@ describe('TechDocs', () => {
     it('should navigate to the TechDocs page via the table of contents - Level 2', () => {
       cy.visit('/docs/default/Component/backstage/overview/roadmap');
 
-      return cy.window().then($win => {
-        cy.getTechDocsShadowRoot().within(() => {
-          cy.get('[data-testid="md-nav-future-work"]', { timeout: 5000 })
-            .click()
-            .should(() => {
-              expect($win.scrollY).to.be.closeTo(1422, 200);
+      return cy.getTechDocsShadowRoot().within(() => {
+        cy.get('[data-testid="md-nav-future-work"]').click();
+
+        cy.get('#future-work').then($el => {
+          cy.window()
+            .its('scrollY')
+            .should($scrollY => {
+              expect($scrollY).to.be.closeTo($el[0].offsetTop, 200);
             });
         });
       });
@@ -151,9 +172,17 @@ describe('TechDocs', () => {
     it('should navigate to a specific fragment within a TechDocs page', () => {
       cy.visit('/docs/default/Component/backstage/overview/roadmap');
       cy.scrollTo('bottom');
-      cy.getTechDocsShadowRoot().within(() => {
+
+      return cy.getTechDocsShadowRoot().within(() => {
         cy.contains('Link to Phases').click();
-        cy.window().its('scrollY').should('equal', 407);
+
+        cy.get('#phases').then($el => {
+          cy.window()
+            .its('scrollY')
+            .should($scrollY => {
+              expect($scrollY).to.be.closeTo($el[0].offsetTop, 200);
+            });
+        });
       });
     });
 
@@ -184,19 +213,5 @@ describe('TechDocs', () => {
         });
       });
     });
-
-    it('should navigate to an external site', () => {
-      cy.visit('/docs/default/Component/backstage/overview/roadmap');
-      cy.scrollTo('bottom');
-      cy.getTechDocsShadowRoot().within(() => {
-        cy.get('.md-footer-nav__link.md-footer-nav__link--prev').click();
-
-        cy.location().should(loc => {
-          expect(loc.pathname).to.eq(
-            '/docs/default/Component/backstage/overview/architecture-overview/',
-          );
-        });
-      });
-    });
   });
 });

packages/app/cypress/support/commands.js

@@ -47,7 +47,7 @@ Cypress.Commands.add('mockTechDocs', () => {
     fixture: 'techdocs/sync.json',
   });
 
-  // HTML
+  // Backstage Roadmap - TechDocs HTML
   cy.intercept(
     'GET',
     '**/techdocs/static/docs/default/Component/backstage/overview/roadmap/index.html',
@@ -56,6 +56,7 @@ Cypress.Commands.add('mockTechDocs', () => {
     },
   );
 
+  // Backstage Home - TechDocs HTML
   cy.intercept(
     'GET',
     '**/techdocs/static/docs/default/Component/backstage/index.html',

packages/core-components/src/layout/ErrorPage/ErrorPage.tsx

@@ -60,7 +60,11 @@ export const ErrorPage = ({
     <Grid container spacing={0} className={classes.container}>
       <MicDrop />
       <Grid item xs={12} sm={8} md={4}>
-        <Typography variant="body1" className={classes.subtitle}>
+        <Typography
+          data-testid="error"
+          variant="body1"
+          className={classes.subtitle}
+        >
           ERROR {status}: {statusMessage}
         </Typography>
         <Typography variant="body1" className={classes.subtitle}>