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 @@
-
- Deploy a product demo at
demo.backstage.io
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 = ({
-
+
ERROR {status}: {statusMessage}