Merge pull request #11546 from backstage/camilal/add-entity-docs-tests

[TechDocs] Add Entity Docs Tests

.changeset/techdocs-ways-type.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Change the `EntityDocsPage` path to be more specific and also add integration tests for `sub-routes` on this page.

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

@@ -25,5 +25,62 @@ describe('Catalog', () => {
 
       cy.contains('Owned (10)').should('be.visible');
     });
+
+    it('Should navigate to a docs tab', () => {
+      cy.loginAsGuest();
+
+      cy.visit('/catalog');
+
+      cy.contains('techdocs-e2e-fixture').click();
+
+      cy.location().should(loc => {
+        expect(loc.pathname).to.eq(
+          '/catalog/default/component/techdocs-e2e-fixture',
+        );
+      });
+
+      cy.getCatalogDocsTab().click();
+
+      cy.getTechDocsShadowRoot()
+        .find('h1')
+        .contains('Home page')
+        .should('be.visible');
+    });
+
+    it('Should navigate to a sub-route in docs tab', () => {
+      cy.loginAsGuest();
+
+      cy.visit('/catalog');
+
+      cy.contains('techdocs-e2e-fixture').click();
+
+      cy.location().should(loc => {
+        expect(loc.pathname).to.eq(
+          '/catalog/default/component/techdocs-e2e-fixture',
+        );
+      });
+
+      cy.getCatalogDocsTab().click();
+
+      cy.getTechDocsShadowRoot()
+        .find('h1')
+        .contains('Home page')
+        .should('be.visible');
+
+      cy.getTechDocsShadowRoot().within(() => {
+        cy.getTechDocsNavigation().find('a').contains('Sub-page 1').click();
+      });
+
+      cy.location().should(loc => {
+        expect(loc.pathname).to.eq(
+          '/catalog/default/component/techdocs-e2e-fixture/docs/sub-page-one/',
+        );
+      });
+
+      cy.getTechDocsShadowRoot()
+        .find('h1')
+        .contains('Sub-page 1')
+        .should('be.visible');
+    });
   });
 });

cypress/src/support/commands.ts

@@ -64,6 +64,10 @@ Cypress.Commands.add('getTechDocsNavigation', () => {
   cy.get('[data-md-type="navigation"]');
 });
 
+Cypress.Commands.add('getCatalogDocsTab', () => {
+  cy.get('button[role="tab"]').contains('Docs');
+});
+
 Cypress.Commands.add('mockSockJSNode', () => {
   cy.intercept('GET', '**/sockjs-node/info**', {
     body: {

cypress/src/types.d.ts

@@ -42,6 +42,11 @@ declare namespace Cypress {
      * @example cy.getTechDocsNavigation
      */
     getTechDocsNavigation(): Chainable<Element>;
+    /**
+     * Get the Catalog docs tab
+     * @example cy.getCatalogDocsTab
+     */
+    getCatalogDocsTab(): Chainable<Element>;
     /**
      * Intercept the TechDocs API calls
      * @example cy.interceptTechDocsAPICalls

plugins/techdocs/src/Router.tsx

@@ -69,7 +69,7 @@ export const EmbeddedDocsRouter = (props: PropsWithChildren<{}>) => {
 
   return (
     <Routes>
-      <Route path="*" element={<EntityPageDocs entity={entity} />}>
+      <Route path="/*" element={<EntityPageDocs entity={entity} />}>
         {children}
       </Route>
     </Routes>