Chore: Remove `compareScreenshot` + `blink-diff` dependency from core (#77920)

* remove compareScreenshot + blink-diff dependency from core

* missed one...

cypress.config.js

@@ -3,7 +3,6 @@ const fs = require('fs');
 const path = require('path');
 
 const benchmarkPlugin = require('./e2e/cypress/plugins/benchmark/index');
-const compareScreenshots = require('./e2e/cypress/plugins/compareScreenshots');
 const readProvisions = require('./e2e/cypress/plugins/readProvisions');
 const typescriptPreprocessor = require('./e2e/cypress/plugins/typescriptPreprocessor');
 
@@ -29,7 +28,6 @@ module.exports = defineConfig({
       }
 
       on('task', {
-        compareScreenshots,
         readProvisions: (filePaths) => readProvisions({ CWD: process.cwd(), filePaths }),
       });
 

e2e/cypress/plugins/compareScreenshots.js

@@ -1,49 +0,0 @@
-'use strict';
-const BlinkDiff = require('blink-diff');
-const { resolve } = require('path');
-
-// @todo use npmjs.com/pixelmatch or an available cypress plugin
-const compareScreenshots = async ({ config, screenshotsFolder, specName }) => {
-  const name = config.name || config; // @todo use `??`
-  const threshold = config.threshold || 0.001; // @todo use `??`
-
-  const imageAPath = `${screenshotsFolder}/${specName}/${name}.png`;
-  const imageBPath = resolve(`${screenshotsFolder}/../expected/${specName}/${name}.png`);
-
-  const imageOutputPath = screenshotsFolder.endsWith('actual') ? imageAPath.replace('.png', '.diff.png') : undefined;
-
-  const { code } = await new Promise((resolve, reject) => {
-    new BlinkDiff({
-      imageAPath,
-      imageBPath,
-      imageOutputPath,
-      threshold,
-      thresholdType: BlinkDiff.THRESHOLD_PERCENT,
-    }).run((error, result) => {
-      if (error) {
-        reject(error);
-      } else {
-        resolve(result);
-      }
-    });
-  });
-
-  if (code <= 1) {
-    let msg = `\nThe screenshot [${imageAPath}] differs from [${imageBPath}]`;
-    msg += '\n';
-    msg += '\nCheck the Artifacts tab in the CircleCi build output for the actual screenshots.';
-    msg += '\n';
-    msg += '\n  If the difference between expected and outcome is NOT acceptable then do the following:';
-    msg += '\n    - Check the code for changes that causes this difference, fix that and retry.';
-    msg += '\n';
-    msg += '\n  If the difference between expected and outcome is acceptable then do the following:';
-    msg += '\n    - Replace the expected image with the outcome and retry.';
-    msg += '\n';
-    throw new Error(msg);
-  } else {
-    // Must return a value
-    return true;
-  }
-};
-
-module.exports = compareScreenshots;

e2e/cypress/plugins/index.js

@@ -2,7 +2,6 @@ const fs = require('fs');
 const path = require('path');
 
 const benchmarkPlugin = require('./benchmark');
-const compareScreenshots = require('./compareScreenshots');
 const extendConfig = require('./extendConfig');
 const readProvisions = require('./readProvisions');
 const typescriptPreprocessor = require('./typescriptPreprocessor');
@@ -13,7 +12,6 @@ module.exports = (on, config) => {
   }
 
   on('file:preprocessor', typescriptPreprocessor);
-  on('task', { compareScreenshots, readProvisions });
   on('task', {
     log({ message, optional }) {
       optional ? console.log(message, optional) : console.log(message);

e2e/cypress/support/commands.js

@@ -1,13 +1,5 @@
 import 'cypress-file-upload';
 
-Cypress.Commands.add('compareScreenshots', (config) => {
-  cy.task('compareScreenshots', {
-    config,
-    screenshotsFolder: Cypress.config('screenshotsFolder'),
-    specName: Cypress.spec.name,
-  });
-});
-
 Cypress.Commands.add('logToConsole', (message, optional) => {
   cy.task('log', { message: '(' + new Date().toISOString() + ') ' + message, optional });
 });

e2e/cypress/support/index.d.ts

@@ -1,13 +1,7 @@
 /// <reference types="cypress" />
 
-interface CompareScreenshotsConfig {
-  name: string;
-  threshold?: number;
-}
-
 declare namespace Cypress {
   interface Chainable {
-    compareScreenshots(config: CompareScreenshotsConfig | string): Chainable;
     logToConsole(message: string, optional?: unknown): void;
     readProvisions(filePaths: string[]): Chainable;
     getJSONFilesFromDir(dirPath: string): Chainable;

e2e/utils/flows/configurePanel.ts

@@ -21,9 +21,7 @@ interface ConfigurePanelDefault {
     route: string | RegExp;
   };
   dashboardUid: string;
-  matchScreenshot: boolean;
   saveDashboard: boolean;
-  screenshotName: string;
   visitDashboardAtStart: boolean; // @todo remove when possible
 }
 
@@ -60,9 +58,7 @@ export const configurePanel = (config: PartialAddPanelConfig | PartialEditPanelC
         route: '/api/ds/query',
       },
       dashboardUid: lastAddedDashboardUid,
-      matchScreenshot: false,
       saveDashboard: true,
-      screenshotName: 'panel-visualization',
       visitDashboardAtStart: true,
       ...config,
     };
@@ -72,10 +68,8 @@ export const configurePanel = (config: PartialAddPanelConfig | PartialEditPanelC
       dashboardUid,
       dataSourceName,
       isEdit,
-      matchScreenshot,
       panelTitle,
       queriesForm,
-      screenshotName,
       timeRange,
       visitDashboardAtStart,
       visualizationName,
@@ -157,15 +151,6 @@ export const configurePanel = (config: PartialAddPanelConfig | PartialEditPanelC
     // Wait for RxJS
     cy.wait(timeout ?? Cypress.config().defaultCommandTimeout);
 
-    if (matchScreenshot) {
-      let visualization;
-
-      visualization = e2e.components.Panels.Panel.containerByTitle(panelTitle).find('.panel-content');
-
-      visualization.scrollIntoView().screenshot(screenshotName);
-      cy.compareScreenshots(screenshotName);
-    }
-
     // @todo remove `wrap` when possible
     return cy.wrap({ config: fullConfig }, { log: false });
   });

package.json

@@ -159,7 +159,6 @@
     "babel-loader": "9.1.3",
     "babel-plugin-angularjs-annotate": "0.10.0",
     "babel-plugin-macros": "3.1.0",
-    "blink-diff": "1.0.13",
     "blob-polyfill": "7.0.20220408",
     "browserslist": "^4.21.4",
     "chance": "^1.0.10",

yarn.lock

@@ -17484,7 +17484,6 @@ __metadata:
     babel-plugin-angularjs-annotate: "npm:0.10.0"
     babel-plugin-macros: "npm:3.1.0"
     baron: "npm:3.0.3"
-    blink-diff: "npm:1.0.13"
     blob-polyfill: "npm:7.0.20220408"
     brace: "npm:0.11.1"
     browserslist: "npm:^4.21.4"