create a new branch with every thing from PR #14868

Signed-off-by: MALIN WIDÈN <malwi130@student.liu.se>

packages/techdocs-cli/cypress.config.js

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+import { defineConfig } from 'cypress';
+import { initPlugin } from '@frsource/cypress-plugin-visual-regression-diff/plugins';
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      initPlugin(on, config);
+    },
+    excludeSpecPattern: ['**/__snapshots__/*', '**/__image_snapshots__/*'],
+  },
+
+  viewportWidth: 1920,
+  viewportHeight: 1080,
+  includeShadowDom: true,
+});

packages/techdocs-cli/cypress.json

@@ -1,17 +0,0 @@
-{
-  "env": {
-    "mkDocsBaseUrl": "http://localhost:8000",
-    "backstageBaseUrl": "http://localhost:3000",
-    "cypress-plugin-snapshots": {
-      "autoCleanUp": false,
-      "imageConfig": {
-        "resizeDevicePixelRatio": true,
-        "threshold": 0.01
-      }
-    }
-  },
-  "viewportWidth": 1920,
-  "viewportHeight": 1080,
-  "includeShadowDom": true,
-  "ignoreTestFiles": ["**/__snapshots__/*", "**/__image_snapshots__/*"]
-}

packages/techdocs-cli/cypress/e2e/backstage_serve.cy.js

@@ -48,11 +48,11 @@ describe('TechDocs Live Preview - Backstage Serve', () => {
     cy.get('.md-footer').should('have.length', 1);
   });
 
-  it('toMatchImageSnapshot - Backstage TechDocs Page', () => {
+  it('matchImage - Backstage TechDocs Page', () => {
     cy.visit(
       `${Cypress.env('backstageBaseUrl')}/docs/default/component/local`,
     ).then(() => {
-      cy.document().toMatchImageSnapshot();
+      cy.document().matchImage();
     });
   });
 });

packages/techdocs-cli/cypress/e2e/mkdocs_serve.cy.js

@@ -40,9 +40,9 @@ describe('TechDocs Live Preview - MkDocs Serve', () => {
     cy.get('.md-footer').should('have.length', 1);
   });
 
-  it('toMatchImageSnapshot - MkDocs Page', () => {
+  it('matchImage - MkDocs Page', () => {
     cy.visit(Cypress.env('mkDocsBaseUrl')).then(() => {
-      cy.document().toMatchImageSnapshot();
+      cy.document().matchImage();
     });
   });
 });

packages/techdocs-cli/cypress/plugins/index.js

@@ -1,41 +0,0 @@
-/*
- * 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/e2e.js

@@ -30,7 +30,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands';
-import 'cypress-plugin-snapshots/commands';
+import '@frsource/cypress-plugin-visual-regression-diff/commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

packages/techdocs-cli/package.json

@@ -37,6 +37,7 @@
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",
+    "@frsource/cypress-plugin-visual-regression-diff": "^3.2.8",
     "@types/commander": "^2.12.2",
     "@types/fs-extra": "^9.0.6",
     "@types/http-proxy": "^1.17.4",
@@ -44,7 +45,6 @@
     "@types/serve-handler": "^6.1.0",
     "@types/webpack-env": "^1.15.3",
     "cypress": "^10.0.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",