add visual regression tests

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

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__/*"]
 }

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
+      }
+    ]
+  }
+}

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"
+}

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', () => {
+/// <reference types="cypress" />
+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();
+    });
   });
 });

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', () => {
+/// <reference types="cypress" />
+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();
+    });
   });
 });

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;
+};

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) => { ... })

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')

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",