From f83861bb50d5d40017de3137e61c3dcb4a966222 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Doreau?= <remi.d45@gmail.com>
Date: Fri, 14 May 2021 01:39:30 +0200
Subject: [PATCH] feat(app): refactor e2e tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Rémi Doreau <remi.d45@gmail.com>
---
 .../fixtures/techdocs/components/roadmap.html |  4 +-
 .../integration/techdocs/techdocs.spec.js     | 73 +++++++++++--------
 packages/app/cypress/support/commands.js      |  3 +-
 .../src/layout/ErrorPage/ErrorPage.tsx        |  6 +-
 4 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/packages/app/cypress/fixtures/techdocs/components/roadmap.html b/packages/app/cypress/fixtures/techdocs/components/roadmap.html
index 44cf4cc62a..4b8a4660da 100644
--- a/packages/app/cypress/fixtures/techdocs/components/roadmap.html
+++ b/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>
diff --git a/packages/app/cypress/integration/techdocs/techdocs.spec.js b/packages/app/cypress/integration/techdocs/techdocs.spec.js
index f7975c9ef0..d5b52e71bb 100644
--- a/packages/app/cypress/integration/techdocs/techdocs.spec.js
+++ b/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/',
-          );
-        });
-      });
-    });
   });
 });
diff --git a/packages/app/cypress/support/commands.js b/packages/app/cypress/support/commands.js
index c286c97054..f86a55962b 100644
--- a/packages/app/cypress/support/commands.js
+++ b/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',
diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
index cca88147c4..fee69fc916 100644
--- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
+++ b/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}>