diff --git a/packages/techdocs-cli/cypress.json b/packages/techdocs-cli/cypress.json index c684d973c7..b6f3b96019 100644 --- a/packages/techdocs-cli/cypress.json +++ b/packages/techdocs-cli/cypress.json @@ -1,12 +1,17 @@ { "env": { "mkDocsBaseUrl": "http://localhost:8000", - "backstageBaseUrl": "http://localhost:3000" + "backstageBaseUrl": "http://localhost:3000", + "cypress-plugin-snapshots": { + "autoCleanUp": false, + "imageConfig": { + "resizeDevicePixelRatio": true, + "threshold": 0.01 + } + } }, "viewportWidth": 1920, "viewportHeight": 1080, "includeShadowDom": true, - "fixturesFolder": false, - "pluginsFile": false, - "supportFile": false + "ignoreTestFiles": ["**/__snapshots__/*", "**/__image_snapshots__/*"] } diff --git a/packages/techdocs-cli/cypress/.eslintrc.json b/packages/techdocs-cli/cypress/.eslintrc.json new file mode 100644 index 0000000000..2481ac5715 --- /dev/null +++ b/packages/techdocs-cli/cypress/.eslintrc.json @@ -0,0 +1,21 @@ +{ + "plugins": ["cypress"], + "extends": ["plugin:cypress/recommended"], + "rules": { + "jest/expect-expect": [ + "error", + { + "assertFunctionNames": ["expect", "cy.contains", "cy.document"] + } + ], + "import/no-extraneous-dependencies": [ + "error", + { + "devDependencies": true, + "optionalDependencies": true, + "peerDependencies": true, + "bundledDependencies": true + } + ] + } +} diff --git a/packages/techdocs-cli/cypress/fixtures/example.json b/packages/techdocs-cli/cypress/fixtures/example.json new file mode 100644 index 0000000000..02e4254378 --- /dev/null +++ b/packages/techdocs-cli/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} diff --git a/packages/techdocs-cli/cypress/integration/__image_snapshots__/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage TechDocs Page #0.png b/packages/techdocs-cli/cypress/integration/__image_snapshots__/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage TechDocs Page #0.png new file mode 100644 index 0000000000..99fc1ea483 Binary files /dev/null and b/packages/techdocs-cli/cypress/integration/__image_snapshots__/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage TechDocs Page #0.png differ diff --git a/packages/techdocs-cli/cypress/integration/__image_snapshots__/TechDocs Live Preview - MkDocs Serve toMatchImageSnapshot - MkDocs Page #0.png b/packages/techdocs-cli/cypress/integration/__image_snapshots__/TechDocs Live Preview - MkDocs Serve toMatchImageSnapshot - MkDocs Page #0.png new file mode 100644 index 0000000000..193fb59c1d Binary files /dev/null and b/packages/techdocs-cli/cypress/integration/__image_snapshots__/TechDocs Live Preview - MkDocs Serve toMatchImageSnapshot - MkDocs Page #0.png differ diff --git a/packages/techdocs-cli/cypress/integration/backstage_serve.js b/packages/techdocs-cli/cypress/integration/backstage_serve.js index d36e132b89..15fc03f8f4 100644 --- a/packages/techdocs-cli/cypress/integration/backstage_serve.js +++ b/packages/techdocs-cli/cypress/integration/backstage_serve.js @@ -13,8 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -describe('TechDocs Live Preview - Backstage server', () => { +/// +describe('TechDocs Live Preview - Backstage Serve', () => { it('successfully serves documentation', () => { cy.visit(`${Cypress.env('backstageBaseUrl')}/docs/default/component/local`); cy.contains('hello mock docs'); @@ -30,21 +30,29 @@ describe('TechDocs Live Preview - Backstage server', () => { it('successfully renders all Backstage main elements', () => { cy.contains('header', 'Live preview environment'); - cy.contains('[data-testid="sidebar-root"]', 'Docs Preview'); + cy.get('[data-testid="sidebar-root"]') + .children() + .should('have.length.gt', 0); }); it('successfully renders all extracted MkDocs main elements', () => { // as it gets replaced by Backstage header cy.get('.md-header').should('have.length', 0); + cy.get('.md-main').should('have.length', 1); cy.contains( '.md-main', 'This is an md file in another docs folder using the MkDocs Monorepo Plugin', ); - cy.contains('.md-sidebar--primary', 'Home 2'); - cy.contains( - '.md-sidebar--secondary', - 'This is an md file in another docs folder using the MkDocs Monorepo Plugin', - ); - cy.contains('.md-footer', 'Introduction'); + cy.get('.md-sidebar.md-sidebar--primary').should('have.length', 1); + cy.get('.md-sidebar.md-sidebar--primary').should('have.length', 1); + cy.get('.md-footer').should('have.length', 1); + }); + + it('toMatchImageSnapshot - Backstage TechDocs Page', () => { + cy.visit( + `${Cypress.env('backstageBaseUrl')}/docs/default/component/local`, + ).then(() => { + cy.document().toMatchImageSnapshot(); + }); }); }); diff --git a/packages/techdocs-cli/cypress/integration/mkdocs_serve.js b/packages/techdocs-cli/cypress/integration/mkdocs_serve.js index bb91bf9227..1ace7298ce 100644 --- a/packages/techdocs-cli/cypress/integration/mkdocs_serve.js +++ b/packages/techdocs-cli/cypress/integration/mkdocs_serve.js @@ -13,8 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -describe('TechDocs Live Preview - Mkdocs server', () => { +/// +describe('TechDocs Live Preview - MkDocs Serve', () => { it('successfully serves documentation', () => { cy.visit(Cypress.env('mkDocsBaseUrl')); cy.contains('hello mock docs'); @@ -30,15 +30,19 @@ describe('TechDocs Live Preview - Mkdocs server', () => { it('successfully renders all main elements', () => { cy.get('.md-header').should('have.length', 1); + cy.get('.md-main').should('have.length', 1); cy.contains( - '.md-container', + '.md-main', 'This is an md file in another docs folder using the MkDocs Monorepo Plugin', ); - cy.contains('.md-sidebar--primary', 'Home 2'); - cy.contains( - '.md-sidebar--secondary', - 'This is an md file in another docs folder using the MkDocs Monorepo Plugin', - ); - cy.contains('.md-footer', 'Introduction'); + cy.get('.md-sidebar.md-sidebar--primary').should('have.length', 1); + cy.get('.md-sidebar.md-sidebar--primary').should('have.length', 1); + cy.get('.md-footer').should('have.length', 1); + }); + + it('toMatchImageSnapshot - MkDocs Page', () => { + cy.visit(Cypress.env('mkDocsBaseUrl')).then(() => { + cy.document().toMatchImageSnapshot(); + }); }); }); diff --git a/packages/techdocs-cli/cypress/plugins/index.js b/packages/techdocs-cli/cypress/plugins/index.js new file mode 100644 index 0000000000..92faabb6ad --- /dev/null +++ b/packages/techdocs-cli/cypress/plugins/index.js @@ -0,0 +1,41 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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. + */ + +// *********************************************************** +// This example plugins/index.js can be used to load plugins +// +// You can change the location of this file or turn off loading +// the plugins file with the 'pluginsFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/plugins-guide +// *********************************************************** + +// This function is called when a project is opened or re-opened (e.g. due to +// the project's config changing) + +const { initPlugin } = require('cypress-plugin-snapshots/plugin'); + +/** + * @type {Cypress.PluginConfig} + */ +// eslint-disable-next-line no-unused-vars +module.exports = (on, config) => { + // `on` is used to hook into various events Cypress emits + // `config` is the resolved Cypress config + initPlugin(on, config); + return config; +}; diff --git a/packages/techdocs-cli/cypress/screenshots/backstage_serve.js/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage Header #0.png b/packages/techdocs-cli/cypress/screenshots/backstage_serve.js/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage Header #0.png new file mode 100644 index 0000000000..867e8ddd81 Binary files /dev/null and b/packages/techdocs-cli/cypress/screenshots/backstage_serve.js/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage Header #0.png differ diff --git a/packages/techdocs-cli/cypress/screenshots/backstage_serve.js/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage TechDocs Page #0 (1).png b/packages/techdocs-cli/cypress/screenshots/backstage_serve.js/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage TechDocs Page #0 (1).png new file mode 100644 index 0000000000..3f1078345d Binary files /dev/null and b/packages/techdocs-cli/cypress/screenshots/backstage_serve.js/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage TechDocs Page #0 (1).png differ diff --git a/packages/techdocs-cli/cypress/screenshots/backstage_serve.js/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage TechDocs Page #0 (2).png b/packages/techdocs-cli/cypress/screenshots/backstage_serve.js/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage TechDocs Page #0 (2).png new file mode 100644 index 0000000000..c576be51c5 Binary files /dev/null and b/packages/techdocs-cli/cypress/screenshots/backstage_serve.js/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage TechDocs Page #0 (2).png differ diff --git a/packages/techdocs-cli/cypress/screenshots/backstage_serve.js/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage TechDocs Page #0.png b/packages/techdocs-cli/cypress/screenshots/backstage_serve.js/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage TechDocs Page #0.png new file mode 100644 index 0000000000..3f1078345d Binary files /dev/null and b/packages/techdocs-cli/cypress/screenshots/backstage_serve.js/TechDocs Live Preview - Backstage Serve toMatchImageSnapshot - Backstage TechDocs Page #0.png differ diff --git a/packages/techdocs-cli/cypress/support/commands.js b/packages/techdocs-cli/cypress/support/commands.js new file mode 100644 index 0000000000..a8d6a5fdb7 --- /dev/null +++ b/packages/techdocs-cli/cypress/support/commands.js @@ -0,0 +1,40 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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. + */ + +// This example commands.js shows you how to +// create various custom commands and overwrite +// existing commands. +// +// For more comprehensive examples of custom +// commands please read more here: +// https://on.cypress.io/custom-commands +// *********************************************** +// +// +// -- This is a parent command -- +// Cypress.Commands.add('login', (email, password) => { ... }) +// +// +// -- This is a child command -- +// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) +// +// +// -- This is a dual command -- +// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) +// +// +// -- This will overwrite an existing command -- +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) diff --git a/packages/techdocs-cli/cypress/support/index.js b/packages/techdocs-cli/cypress/support/index.js new file mode 100644 index 0000000000..a1a5b10ea4 --- /dev/null +++ b/packages/techdocs-cli/cypress/support/index.js @@ -0,0 +1,36 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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. + */ + +// This example support/index.js is processed and +// loaded automatically before your test files. +// +// This is a great place to put global configuration and +// behavior that modifies Cypress. +// +// You can change the location of this file or turn off +// automatically serving support files with the +// 'supportFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/configuration +// *********************************************************** + +// Import commands.js using ES2015 syntax: +import './commands'; +import 'cypress-plugin-snapshots/commands'; + +// Alternatively you can use CommonJS syntax: +// require('./commands') diff --git a/packages/techdocs-cli/package.json b/packages/techdocs-cli/package.json index d4e7372e68..3d50b1c868 100644 --- a/packages/techdocs-cli/package.json +++ b/packages/techdocs-cli/package.json @@ -46,6 +46,7 @@ "@types/serve-handler": "^6.1.0", "@types/webpack-env": "^1.15.3", "cypress": "^7.3.0", + "cypress-plugin-snapshots": "^1.4.4", "find-process": "^1.4.5", "nodemon": "^2.0.2", "techdocs-cli-embedded-app": "link:../techdocs-cli-embedded-app",