From ef1916d1d7bac943539e5e1574315324179860f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Doreau?= <remi.d45@gmail.com>
Date: Thu, 13 May 2021 18:44:23 +0200
Subject: [PATCH] feat(app): update 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>
---
 packages/app/cypress.json                     |   4 +-
 packages/app/cypress/.eslintrc.json           |  11 +-
 .../fixtures/techdocs/components/default.html |   6 +-
 .../fixtures/techdocs/components/roadmap.html |  46 +++-
 .../app/cypress/integration/techdocs.spec.js  | 121 -----------
 .../integration/techdocs/techdocs.spec.js     | 202 ++++++++++++++++++
 .../integration/{ => user}/login.spec.js      |   0
 .../cypress/integration/user/logout.spec.js   |  33 +++
 packages/app/cypress/support/commands.js      |  21 +-
 9 files changed, 300 insertions(+), 144 deletions(-)
 delete mode 100644 packages/app/cypress/integration/techdocs.spec.js
 create mode 100644 packages/app/cypress/integration/techdocs/techdocs.spec.js
 rename packages/app/cypress/integration/{ => user}/login.spec.js (100%)
 create mode 100644 packages/app/cypress/integration/user/logout.spec.js

diff --git a/packages/app/cypress.json b/packages/app/cypress.json
index 6ae1ae6026..6c4e2658ca 100644
--- a/packages/app/cypress.json
+++ b/packages/app/cypress.json
@@ -1,4 +1,6 @@
 {
   "baseUrl": "http://localhost:3000",
-  "pluginsFile": false
+  "pluginsFile": false,
+  "viewportHeight": 900,
+  "viewportWidth": 1440
 }
diff --git a/packages/app/cypress/.eslintrc.json b/packages/app/cypress/.eslintrc.json
index 2b3a458b95..b7b7a349f9 100644
--- a/packages/app/cypress/.eslintrc.json
+++ b/packages/app/cypress/.eslintrc.json
@@ -17,5 +17,14 @@
         "bundledDependencies": true
       }
     ]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.spec.js"],
+      "rules": {
+        "jest/valid-expect": 0,
+        "jest/expect-expect": 0
+      }
+    }
+  ]
 }
diff --git a/packages/app/cypress/fixtures/techdocs/components/default.html b/packages/app/cypress/fixtures/techdocs/components/default.html
index a09a5c9293..e49e59a0f5 100644
--- a/packages/app/cypress/fixtures/techdocs/components/default.html
+++ b/packages/app/cypress/fixtures/techdocs/components/default.html
@@ -219,7 +219,10 @@
                   </div>
 
                   <ul class="md-nav__list" data-md-scrollfix>
-                    <li class="md-nav__item md-nav__item--nested">
+                    <li
+                      data-testid="md-nav-overview"
+                      class="md-nav__item md-nav__item--nested"
+                    >
                       <input
                         class="md-nav__toggle md-toggle"
                         data-md-toggle="nav-1"
@@ -284,6 +287,7 @@
                               href="overview/roadmap/"
                               title="Roadmap"
                               class="md-nav__link"
+                              data-testid="md-nav-roadmap"
                             >
                               Roadmap
                             </a>
diff --git a/packages/app/cypress/fixtures/techdocs/components/roadmap.html b/packages/app/cypress/fixtures/techdocs/components/roadmap.html
index 2e9548cf1a..44cf4cc62a 100644
--- a/packages/app/cypress/fixtures/techdocs/components/roadmap.html
+++ b/packages/app/cypress/fixtures/techdocs/components/roadmap.html
@@ -380,7 +380,11 @@
                                       </li>
 
                                       <li class="md-nav__item">
-                                        <a href="#plugins" class="md-nav__link">
+                                        <a
+                                          href="#plugins"
+                                          class="md-nav__link"
+                                          data-testid="md-nav-plugins"
+                                        >
                                           Plugins
                                         </a>
                                       </li>
@@ -2242,30 +2246,52 @@
                   </label>
                   <ul class="md-nav__list" data-md-scrollfix>
                     <li class="md-nav__item">
-                      <a href="#current-status" class="md-nav__link">
+                      <a
+                        data-testid="md-nav-current-status"
+                        href="#current-status"
+                        class="md-nav__link"
+                      >
                         Current status
                       </a>
                     </li>
 
                     <li class="md-nav__item">
-                      <a href="#phases" class="md-nav__link"> Phases </a>
+                      <a
+                        data-testid="md-nav-phases"
+                        href="#phases"
+                        class="md-nav__link"
+                      >
+                        Phases
+                      </a>
                     </li>
 
                     <li class="md-nav__item">
-                      <a href="#detailed-roadmap" class="md-nav__link">
+                      <a
+                        data-testid="md-nav-detailed-roadmap"
+                        href="#detailed-roadmap"
+                        class="md-nav__link"
+                      >
                         Detailed roadmap
                       </a>
 
                       <nav class="md-nav" aria-label="Detailed roadmap">
                         <ul class="md-nav__list">
                           <li class="md-nav__item">
-                            <a href="#ongoing-work" class="md-nav__link">
+                            <a
+                              data-testid="md-nav-ongoing-work"
+                              href="#ongoing-work"
+                              class="md-nav__link"
+                            >
                               Ongoing work 🚧
                             </a>
                           </li>
 
                           <li class="md-nav__item">
-                            <a href="#future-work" class="md-nav__link">
+                            <a
+                              data-testid="md-nav-future-work"
+                              href="#future-work"
+                              class="md-nav__link"
+                            >
                               Future work 🔮
                             </a>
                           </li>
@@ -2280,6 +2306,7 @@
                             <a
                               href="#community-initiatives-coming-soon"
                               class="md-nav__link"
+                              data-testid="md-nav-community"
                             >
                               Community Initiatives 🧑‍🤝‍🧑 (Coming soon)
                             </a>
@@ -2289,6 +2316,7 @@
                             <a
                               href="#completed-milestones"
                               class="md-nav__link"
+                              data-testid="md-nav-milestones"
                             >
                               Completed milestones ✅
                             </a>
@@ -2676,6 +2704,12 @@
                     >AWS</a
                   >
                 </li>
+                <li>
+                  <a
+                    href="/docs/default/Component/backstage/overview/roadmap/#phases"
+                    >Link to Phases</a
+                  >
+                </li>
               </ul>
             </article>
           </div>
diff --git a/packages/app/cypress/integration/techdocs.spec.js b/packages/app/cypress/integration/techdocs.spec.js
deleted file mode 100644
index b6c06ccc66..0000000000
--- a/packages/app/cypress/integration/techdocs.spec.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-describe('TechDocs', () => {
-  beforeEach(() => {
-    cy.login();
-  });
-
-  describe('Navigating to TechDocs', () => {
-    beforeEach(() => {
-      cy.intercept('GET', '**/catalog/entities**', {
-        fixture: 'entities.json',
-      });
-
-      cy.intercept('GET', '**/guest', {
-        fixture: 'guest.json',
-      });
-
-      cy.mockTechDocs();
-    });
-
-    it('should navigate to the TechDocs page via the primary navigation bar', () => {
-      cy.visit('/');
-      cy.get('[data-testid="sidebar-root"]')
-        .get('div')
-        .get('a[href="/docs"]')
-        .click();
-
-      cy.contains('Documentation');
-    });
-
-    it('should navigate to the TechDocs home page from a URL', () => {
-      cy.visit('/docs');
-
-      cy.contains('Documentation');
-    });
-
-    it('should navigate to a specific TechDocs component page from a URL', () => {
-      cy.visit('/docs/default/Component/backstage');
-
-      cy.contains('Backstage');
-      cy.contains(
-        'Main documentation for Backstage features and platform APIs',
-      );
-      cy.get('[data-testid="techdocs-content-shadowroot"]')
-        .shadow()
-        .contains('The Backstage documentation is available at');
-    });
-
-    it('should navigate to a specific TechDocs fragment from a URL', () => {
-      cy.visit('/docs/default/Component/backstage/overview/roadmap');
-
-      cy.get('[data-testid="techdocs-content-shadowroot"]')
-        .shadow()
-        .within(() => {
-          cy.contains('Phases');
-          cy.contains('Detailed roadmap');
-        });
-    });
-
-    it('should navigate to a specific TechDocs hash from a URL', () => {
-      cy.visit(
-        '/docs/default/Component/backstage/overview/roadmap/#future-work',
-      );
-
-      cy.get('[data-testid="techdocs-content-shadowroot"]')
-        .shadow()
-        .within(() => {
-          // eslint-disable-next-line jest/valid-expect
-          cy.get('#future-work').should($element =>
-            expect($element[0].offsetTop).to.be.closeTo(1040, 200),
-          );
-          cy.contains('Future work');
-        });
-    });
-  });
-
-  describe('Navigating within TechDocs', () => {
-    beforeEach(() => {
-      cy.intercept('GET', '**/catalog/entities**', {
-        fixture: 'entities.json',
-      });
-
-      cy.intercept('GET', '**/guest', {
-        fixture: 'guest.json',
-      });
-
-      cy.mockTechDocs();
-    });
-    it('should navigate to the TechDocs page via the table of contents', () => {
-      cy.visit('/docs/default/Component/backstage/overview/roadmap');
-
-      cy.get('[data-testid="techdocs-content-shadowroot"]')
-        .shadow()
-        .within(() => {
-          cy.get(
-            'body > div.md-container > main > div > div.md-sidebar.md-sidebar--primary > div > div > nav > ul > li:nth-child(1)',
-          ).click();
-          cy.get(
-            'body > div.md-container > main > div > div.md-sidebar.md-sidebar--primary > div > div > nav > ul > li:nth-child(1) > nav > ul > li:nth-child(3)',
-          ).click();
-
-          cy.contains('Phases');
-          cy.contains('Detailed roadmap');
-        });
-    });
-  });
-});
diff --git a/packages/app/cypress/integration/techdocs/techdocs.spec.js b/packages/app/cypress/integration/techdocs/techdocs.spec.js
new file mode 100644
index 0000000000..f7975c9ef0
--- /dev/null
+++ b/packages/app/cypress/integration/techdocs/techdocs.spec.js
@@ -0,0 +1,202 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+describe('TechDocs', () => {
+  beforeEach(() => {
+    cy.login();
+  });
+
+  describe('Navigating to TechDocs', () => {
+    beforeEach(() => {
+      cy.intercept('GET', '**/catalog/entities**', {
+        fixture: 'entities.json',
+      });
+
+      cy.intercept('GET', '**/guest', {
+        fixture: 'guest.json',
+      });
+
+      cy.mockTechDocs();
+    });
+
+    it('should navigate to the TechDocs page via the primary navigation bar', () => {
+      cy.visit('/');
+      cy.get('[data-testid="sidebar-root"]')
+        .get('div')
+        .get('a[href="/docs"]')
+        .click();
+
+      cy.contains('Documentation');
+    });
+
+    it('should navigate to the TechDocs home page from the "Overview" tab', () => {
+      cy.visit('/docs');
+      cy.get('[data-testid="read_docs"]').eq(0).click();
+
+      cy.location().should(loc => {
+        expect(loc.pathname).to.eq('/docs/default/Component/backstage');
+      });
+    });
+
+    it('should navigate to the TechDocs home page from the "Owned documents" tab', () => {
+      cy.visit('/docs');
+      cy.get('[data-testid="header-tab-1"]').click();
+      cy.get('[value="backstage"] > div > a').click();
+
+      cy.location().should(loc => {
+        expect(loc.pathname).to.eq('/docs/default/Component/backstage');
+      });
+    });
+
+    it('should navigate to a specific TechDocs project page', () => {
+      cy.visit('/docs');
+      cy.contains('Documentation');
+    });
+
+    it('should navigate to a specific TechDocs component page from a URL', () => {
+      cy.visit('/docs/default/Component/backstage');
+
+      cy.contains('Backstage');
+      cy.contains(
+        'Main documentation for Backstage features and platform APIs',
+      );
+      cy.getTechDocsShadowRoot().contains(
+        'The Backstage documentation is available at',
+      );
+    });
+
+    it('should navigate to a specific TechDocs fragment from a URL', () => {
+      cy.visit('/docs/default/Component/backstage/overview/roadmap');
+
+      cy.getTechDocsShadowRoot().within(() => {
+        cy.contains('Phases');
+        cy.contains('Detailed roadmap');
+      });
+    });
+
+    it('should navigate to a specific TechDocs hash from a URL', () => {
+      cy.visit(
+        '/docs/default/Component/backstage/overview/roadmap/#future-work',
+      );
+
+      cy.window().its('scrollY').should('equal', 1422);
+    });
+  });
+
+  describe('Navigating within TechDocs', () => {
+    beforeEach(() => {
+      cy.intercept('GET', '**/catalog/entities**', {
+        fixture: 'entities.json',
+      });
+
+      cy.intercept('GET', '**/guest', {
+        fixture: 'guest.json',
+      });
+
+      cy.mockTechDocs();
+    });
+    it('should navigate to the TechDocs page via the navigation bar', () => {
+      cy.visit('/docs/default/Component/backstage');
+
+      cy.getTechDocsShadowRoot().within(() => {
+        cy.get('[data-testid="md-nav-overview"]').click();
+        cy.get('[data-testid="md-nav-roadmap"]').click();
+
+        cy.contains('Phases');
+        cy.contains('Detailed roadmap');
+      });
+    });
+
+    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);
+            });
+        });
+      });
+    });
+
+    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);
+            });
+        });
+      });
+    });
+
+    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(() => {
+        cy.contains('Link to Phases').click();
+        cy.window().its('scrollY').should('equal', 407);
+      });
+    });
+
+    it('should navigate to the next page within a TechDocs page', () => {
+      cy.visit('/docs/default/Component/backstage/overview/roadmap');
+      cy.scrollTo('bottom');
+      cy.getTechDocsShadowRoot().within(() => {
+        cy.get('.md-footer-nav__link.md-footer-nav__link--next').click();
+
+        cy.location().should(loc => {
+          expect(loc.pathname).to.eq(
+            '/docs/default/Component/backstage/overview/vision/',
+          );
+        });
+      });
+    });
+
+    it('should navigate to the previous page within a TechDocs page', () => {
+      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/',
+          );
+        });
+      });
+    });
+
+    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/integration/login.spec.js b/packages/app/cypress/integration/user/login.spec.js
similarity index 100%
rename from packages/app/cypress/integration/login.spec.js
rename to packages/app/cypress/integration/user/login.spec.js
diff --git a/packages/app/cypress/integration/user/logout.spec.js b/packages/app/cypress/integration/user/logout.spec.js
new file mode 100644
index 0000000000..c8519ad003
--- /dev/null
+++ b/packages/app/cypress/integration/user/logout.spec.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+describe('Logout', () => {
+  before(() => {
+    cy.login();
+  });
+  it('should be able to logout', () => {
+    cy.visit('/settings');
+    cy.get('[data-testid="user-settings-menu"]').click();
+    return cy
+      .get('[data-testid="sign-out"]')
+      .click()
+      .then(() => {
+        return expect(
+          localStorage.getItem('@backstage/core:SignInPage:provider'),
+        ).to.be.null;
+      });
+  });
+});
diff --git a/packages/app/cypress/support/commands.js b/packages/app/cypress/support/commands.js
index a695613e42..c286c97054 100644
--- a/packages/app/cypress/support/commands.js
+++ b/packages/app/cypress/support/commands.js
@@ -22,6 +22,10 @@ Cypress.Commands.add('login', () => {
   window.localStorage.setItem('@backstage/core:SignInPage:provider', 'guest');
 });
 
+Cypress.Commands.add('getTechDocsShadowRoot', () => {
+  cy.get('[data-testid="techdocs-content-shadowroot"]').shadow();
+});
+
 Cypress.Commands.add('mockTechDocs', () => {
   cy.intercept(
     'GET',
@@ -61,18 +65,7 @@ Cypress.Commands.add('mockTechDocs', () => {
   );
 
   // CSS
-  cy.intercept(
-    'GET',
-    '**/techdocs/static/docs/default/Component/backstage/assets/stylesheets/main.fe0cca5b.min.css',
-    {
-      fixture: 'techdocs/components/style.css',
-    },
-  );
-  cy.intercept(
-    'GET',
-    '**/techdocs/static/docs/default/Component/assets/stylesheets/main.fe0cca5b.min.css',
-    {
-      fixture: 'techdocs/components/style.css',
-    },
-  );
+  cy.intercept('GET', '**/assets/stylesheets/main.fe0cca5b.min.css', {
+    fixture: 'techdocs/components/style.css',
+  });
 });