From cbcfed28e459eb2e22e12c4b62362d3ace233b5d Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Wed, 27 Apr 2022 21:44:32 +0200 Subject: [PATCH] tests(techdocs): cover addons integration Signed-off-by: Camila Belo --- .../src/integration/plugins/techdocs.spec.ts | 74 ++++++++++++++----- cypress/src/support/commands.ts | 6 +- 2 files changed, 57 insertions(+), 23 deletions(-) diff --git a/cypress/src/integration/plugins/techdocs.spec.ts b/cypress/src/integration/plugins/techdocs.spec.ts index d6049ea53d..1e69ba46ad 100644 --- a/cypress/src/integration/plugins/techdocs.spec.ts +++ b/cypress/src/integration/plugins/techdocs.spec.ts @@ -38,6 +38,7 @@ describe('TechDocs', () => { it('should navigate to the TechDocs home page from the URL', () => { cy.visit('/docs'); + cy.wait(500); cy.contains('Documentation'); @@ -45,15 +46,12 @@ describe('TechDocs', () => { it('should navigate to a specific TechDocs entity from the "Overview" tab', () => { cy.visit('/docs'); - cy.contains('techdocs-e2e-fixture') - .parents() - .eq(2) - .contains('Read Docs') - .click(); + + cy.contains('techdocs-e2e-fixture').click(); cy.location().should(loc => { expect(loc.pathname).to.eq( - '/docs/default/Component/techdocs-e2e-fixture', + '/docs/default/component/techdocs-e2e-fixture', ); }); }); @@ -84,7 +82,6 @@ describe('TechDocs', () => { cy.visit( '/docs/default/Component/techdocs-e2e-fixture/sub-page-two#section-23', ); - cy.waitSectionTwoPage(); // This is used to test the post-render behavior of the techdocs Reader cy.wait(500); @@ -101,10 +98,43 @@ describe('TechDocs', () => { }); }); + describe('Rendering TechDocs Addons', () => { + it('should render a content addon', () => { + cy.visit('/docs/default/Component/techdocs-e2e-fixture'); + + cy.contains('e2e Fixture Documentation'); + + // highlight a snippet of text + cy.getTechDocsShadowRoot() + .find('article > p') + .then($el => { + const el = $el[0]; + const document = el.ownerDocument; + const range = document.createRange(); + range.selectNodeContents(el); + document?.getSelection()?.removeAllRanges(); + document?.getSelection()?.addRange(range); + }); + + cy.document().trigger('selectionchange'); + + // wait for new issue default debounce time + cy.wait(600); + + // assert that the new issue button has a right url + cy.getTechDocsShadowRoot() + .contains('Open new Github issue') + .should( + 'have.attr', + 'href', + 'https://github.com/backstage/backstage/issues/new?title=Documentation%20feedback%3A%20This%20is%20a%20basic%20documentation%20used%20for%20end-to-end%20tests.&body=%23%23%20Documentation%20Feedback%20%F0%9F%93%9D%0A%0A%20%23%23%23%23%20The%20highlighted%20text%3A%20%0A%0A%20%3E%20This%20is%20a%20basic%20documentation%20used%20for%20end-to-end%20tests.%0A%0A%20%23%23%23%23%20The%20comment%20on%20the%20text%3A%20%0A%20_%3Ereplace%20this%20line%20with%20your%20comment%3C_%0A%0A%20___%0ABackstage%20URL%3A%20%3Chttp%3A%2F%2Flocalhost%3A7007%2Fdocs%2Fdefault%2FComponent%2Ftechdocs-e2e-fixture%3E%20%0AMarkdown%20URL%3A%20%3Chttps%3A%2F%2Fgithub.com%2Fbackstage%2Fbackstage%2Fblob%2Fmaster%2Fcypress%2Ffixtures%2Fdocs%2Findex.md%3E', + ); + }); + }); + describe('Navigating within TechDocs', () => { it('should navigate to a specific TechDocs page via the navigation bar', () => { cy.visit('/docs/default/Component/techdocs-e2e-fixture'); - cy.waitHomePage(); cy.getTechDocsShadowRoot().within(() => { cy.getTechDocsNavigation() @@ -118,14 +148,18 @@ describe('TechDocs', () => { describe('Navigating within a TechDocs page', () => { beforeEach(() => { cy.visit('/docs/default/Component/techdocs-e2e-fixture/sub-page-two'); - cy.waitSectionTwoPage(); }); + it('should navigate to a specific fragment within the page via the table of contents - Level 1', () => { return cy.getTechDocsShadowRoot().within(() => { // Section 3 - cy.getTechDocsTableOfContents().within(() => { - cy.get('> div > div > nav > ul > li:nth-child(3) > a').click(); - }); + cy.getTechDocsTableOfContents() + .find('a') + .contains('Section 2.3') + .click(); + + // wait scroll timeout + cy.wait(500); cy.isInViewport('#section-23'); }); @@ -136,20 +170,20 @@ describe('TechDocs', () => { cy.isNotInViewport('#sub-section-222'); // Section 2.2 cy.getTechDocsTableOfContents() - .find( - '> div > div > nav > ul > li:nth-child(2) > nav > ul > li:nth-child(2) > a', - ) + .find('a') + .contains('Section 2.2.2') .click(); + // wait scroll timeout + cy.wait(500); + cy.isInViewport('#sub-section-222'); }); }); it('should navigate to a specific TechDocs page fragment from a link', () => { return cy.getTechDocsShadowRoot().within(() => { - cy.get('.md-content > article') - .contains('Link to Section 1.1') - .click(); + cy.get('article').contains('Link to Section 1.1').click(); cy.location().should(loc => { expect(loc.pathname).to.eq( @@ -162,7 +196,7 @@ describe('TechDocs', () => { it('should navigate to the next page within a TechDocs entity', () => { return cy.getTechDocsShadowRoot().within(() => { - cy.get('.md-footer-nav__link--next').click(); + cy.get('footer a').contains('Sub-page 3').click(); cy.location().should(loc => { expect(loc.pathname).to.eq( @@ -174,7 +208,7 @@ describe('TechDocs', () => { it('should navigate to the previous page within a TechDocs entity', () => { return cy.getTechDocsShadowRoot().within(() => { - cy.get('.md-footer-nav__link--prev').click(); + cy.get('footer a').contains('Sub-page 1').click(); cy.location().should(loc => { expect(loc.pathname).to.eq( diff --git a/cypress/src/support/commands.ts b/cypress/src/support/commands.ts index 666dc157d7..9973afb6a7 100644 --- a/cypress/src/support/commands.ts +++ b/cypress/src/support/commands.ts @@ -25,7 +25,7 @@ Cypress.Commands.add('loginAsGuest', () => { }); Cypress.Commands.add('getTechDocsShadowRoot', () => { - cy.get('[data-testid="techdocs-content-shadowroot"]').shadow(); + cy.get('[data-testid="techdocs-native-shadowroot"]').shadow(); }); Cypress.Commands.add('isNotInViewport', element => { @@ -57,11 +57,11 @@ Cypress.Commands.add('isInViewport', element => { }); Cypress.Commands.add('getTechDocsTableOfContents', () => { - cy.get('[data-md-component="toc"]'); + cy.get('[data-md-type="toc"]'); }); Cypress.Commands.add('getTechDocsNavigation', () => { - cy.get('[data-md-component="navigation"]'); + cy.get('[data-md-type="navigation"]'); }); Cypress.Commands.add('mockSockJSNode', () => {