feat(e2e): move TechDocs tests to cypress folder

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

cypress/.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
         bundledDependencies: false,
       },
     ],
+    'jest/valid-expect': 'off',
     'jest/expect-expect': 'off',
     'no-restricted-syntax': 'off',
   },

cypress/cypress.json

@@ -2,7 +2,9 @@
   "baseUrl": "http://localhost:7000",
   "integrationFolder": "./src/integration",
   "supportFile": "./src/support",
-  "fixturesFolder": "./src/fixures",
+  "fixturesFolder": "./src/fixtures",
   "pluginsFile": "./src/plugins",
-  "defaultCommandTimeout": 10000
+  "defaultCommandTimeout": 10000,
+  "viewportHeight": 900,
+  "viewportWidth": 1440
 }

cypress/src/fixtures/guest.json

@@ -0,0 +1,69 @@
+{
+  "metadata": {
+    "namespace": "default",
+    "annotations": {
+      "backstage.io/managed-by-location": "file:../catalog-model/examples/acme/team-a-group.yaml",
+      "backstage.io/managed-by-origin-location": "bootstrap:bootstrap"
+    },
+    "name": "guest",
+    "uid": "88074c2a-9d6b-4cd9-9d61-6901da330cac",
+    "etag": "YzE2NjMxN2YtOGNhNy00NWRkLTlhOTItNjFmYmIzZjM5ZDI4",
+    "generation": 1
+  },
+  "apiVersion": "backstage.io/v1alpha1",
+  "kind": "User",
+  "spec": {
+    "profile": {
+      "displayName": "Guest User",
+      "email": "guest@example.com",
+      "picture": "https://avatars.dicebear.com/api/avataaars/guest@example.com.svg?background=%23fff"
+    },
+    "memberOf": ["team-a"]
+  },
+  "relations": [
+    {
+      "target": { "kind": "group", "namespace": "default", "name": "team-a" },
+      "type": "memberOf"
+    },
+    {
+      "target": {
+        "kind": "component",
+        "namespace": "default",
+        "name": "backstage"
+      },
+      "type": "ownerOf"
+    },
+    {
+      "target": {
+        "kind": "component",
+        "namespace": "default",
+        "name": "documented-component"
+      },
+      "type": "ownerOf"
+    },
+    {
+      "target": {
+        "kind": "component",
+        "namespace": "default",
+        "name": "playback-order"
+      },
+      "type": "ownerOf"
+    },
+    {
+      "target": {
+        "kind": "component",
+        "namespace": "default",
+        "name": "searcher"
+      },
+      "type": "ownerOf"
+    },
+    {
+      "target": {
+        "kind": "component",
+        "namespace": "default",
+        "name": "shuffle-api"
+      },
+      "type": "ownerOf"
+    }
+  ]
+}

cypress/src/fixtures/techdocs/metadata-entity.json

@@ -0,0 +1,33 @@
+{
+  "metadata": {
+    "namespace": "default",
+    "annotations": {
+      "backstage.io/managed-by-location": "file:../../plugins/github-actions/examples/sample.yaml",
+      "backstage.io/managed-by-origin-location": "bootstrap:bootstrap",
+      "github.com/project-slug": "backstage/backstage",
+      "backstage.io/techdocs-ref": "url:https://github.com/backstage/backstage"
+    },
+    "name": "backstage",
+    "description": "backstage.io",
+    "uid": "b3bae9fa-c34f-47d0-ae14-547c1d77c147",
+    "etag": "MDU1MzdiYWYtYjFjZC00OGQ4LThhMmEtN2Q5NjA3ZGVhM2Rl",
+    "generation": 1
+  },
+  "apiVersion": "backstage.io/v1alpha1",
+  "kind": "Component",
+  "spec": {
+    "type": "website",
+    "lifecycle": "production",
+    "owner": "user:guest"
+  },
+  "relations": [
+    {
+      "target": { "kind": "user", "namespace": "default", "name": "guest" },
+      "type": "ownedBy"
+    }
+  ],
+  "locationMetadata": {
+    "type": "url",
+    "target": "https://github.com/backstage/backstage"
+  }
+}

cypress/src/fixtures/techdocs/metadata-techdocs.json

@@ -0,0 +1,4 @@
+{
+  "site_name": "Backstage",
+  "site_description": "Main documentation for Backstage features and platform APIs"
+}

cypress/src/fixtures/techdocs/sync.json

@@ -0,0 +1 @@
+{ "message": "Docs updated or did not need updating" }

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

@@ -0,0 +1,222 @@
+/*
+ * 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.
+ */
+/// <reference types="cypress" />
+import 'os';
+
+describe('TechDocs', () => {
+  beforeEach(() => {
+    cy.loginAsGuest();
+  });
+
+  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 entity 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 section 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');
+      });
+    });
+
+    it('should navigate to a specific TechDocs fragment from a URL', () => {
+      cy.visit(
+        '/docs/default/Component/backstage/overview/roadmap/#future-work',
+      );
+
+      // This is used to test the post-render behavior of the techdocs Reader
+      cy.wait(500);
+
+      return cy.getTechDocsShadowRoot().within(() => {
+        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 entity page from a URL', () => {
+      cy.visit('/docs/default/Component/wrong-component');
+
+      cy.get('[data-testid=error]').should('be.visible');
+    });
+  });
+
+  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.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);
+            });
+        });
+      });
+    });
+
+    it('should navigate to the TechDocs page via the table of contents - Level 2', () => {
+      cy.visit('/docs/default/Component/backstage/overview/roadmap');
+
+      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);
+            });
+        });
+      });
+    });
+
+    it('should navigate to a specific fragment within a TechDocs page', () => {
+      cy.visit('/docs/default/Component/backstage/overview/roadmap');
+      cy.scrollTo('bottom');
+
+      return cy.getTechDocsShadowRoot().within(() => {
+        cy.contains('Link to Phases').click();
+
+        cy.get('#phases').then($el => {
+          cy.window()
+            .its('scrollY')
+            .should($scrollY => {
+              expect($scrollY).to.be.closeTo($el[0].offsetTop, 200);
+            });
+        });
+      });
+    });
+
+    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/',
+          );
+        });
+      });
+    });
+  });
+});

cypress/src/integration/user/login.spec.ts

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+/// <reference types="cypress" />
+import 'os';
+
+describe('Login', () => {
+  beforeEach(() => {
+    cy.intercept('GET', '**/catalog/entities**', {
+      fixture: 'entities.json',
+    });
+
+    cy.intercept('GET', '**/guest', {
+      fixture: 'guest.json',
+    });
+  });
+
+  it('should render the login page', () => {
+    cy.visit('/');
+    cy.contains('Backstage Example App');
+  });
+
+  it('should be able to login', () => {
+    cy.get('button').contains('Enter').click();
+    cy.url().should('include', '/catalog');
+
+    cy.contains('artist-lookup');
+  });
+});

cypress/src/integration/user/logout.spec.ts

@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+/// <reference types="cypress" />
+import 'os';
+
+describe('Logout', () => {
+  before(() => {
+    cy.loginAsGuest();
+  });
+  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;
+      });
+  });
+});

cypress/src/support/commands.ts

@@ -0,0 +1,70 @@
+/*
+ * Copyright 2021 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.
+ */
+/// <reference types="cypress" />
+import 'os';
+
+Cypress.Commands.add('loginAsGuest', () => {
+  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',
+    '**/techdocs/metadata/entity/default/Component/backstage',
+    {
+      fixture: 'techdocs/metadata-entity.json',
+    },
+  );
+
+  cy.intercept(
+    'GET',
+    '**/techdocs/metadata/techdocs/default/Component/backstage',
+    {
+      fixture: 'techdocs/metadata-techdocs.json',
+    },
+  );
+
+  cy.intercept('GET', '**/techdocs/sync/default/Component/backstage', {
+    fixture: 'techdocs/sync.json',
+  });
+
+  // Backstage Roadmap - TechDocs HTML
+  cy.intercept(
+    'GET',
+    '**/techdocs/static/docs/default/Component/backstage/overview/roadmap/index.html',
+    {
+      fixture: 'techdocs/components/roadmap.html',
+    },
+  );
+
+  // Backstage Home - TechDocs HTML
+  cy.intercept(
+    'GET',
+    '**/techdocs/static/docs/default/Component/backstage/index.html',
+    {
+      fixture: 'techdocs/components/default.html',
+    },
+  );
+
+  // TechDocs CSS
+  cy.intercept('GET', '**/assets/stylesheets/main.fe0cca5b.min.css', {
+    fixture: 'techdocs/components/style.css',
+  });
+});

cypress/src/support/index.ts

@@ -14,12 +14,4 @@
  * limitations under the License.
  */
 /// <reference types="cypress" />
-
-Cypress.Commands.add('loginAsGuest', () => {
-  cy.visit('/', {
-    onLoad: (win: Window) =>
-      win.localStorage.setItem('@backstage/core:SignInPage:provider', 'guest'),
-  });
-});
-
-export {};
+import './commands';

cypress/src/types.d.ts

@@ -22,5 +22,15 @@ declare namespace Cypress {
      * @example cy.loginAsGuests
      */
     loginAsGuest(): Chainable<Element>;
+    /**
+     * Get the TechDocs shadow root element
+     * @example cy.getTechDocsShadowRoot
+     */
+    getTechDocsShadowRoot(): Chainable<Element>;
+    /**
+     * Mock TechDocs backend API
+     * @example cy.mockTechDocs
+     */
+    mockTechDocs(): void;
   }
 }