diff --git a/cypress.config.js b/cypress.config.js index 856fb85f022..52263a9e4d0 100644 --- a/cypress.config.js +++ b/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 }), }); diff --git a/e2e/cypress/plugins/compareScreenshots.js b/e2e/cypress/plugins/compareScreenshots.js deleted file mode 100644 index 426d12adac5..00000000000 --- a/e2e/cypress/plugins/compareScreenshots.js +++ /dev/null @@ -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; diff --git a/e2e/cypress/plugins/index.js b/e2e/cypress/plugins/index.js index 7ec85fecae1..596d58acca9 100644 --- a/e2e/cypress/plugins/index.js +++ b/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); diff --git a/e2e/cypress/support/commands.js b/e2e/cypress/support/commands.js index 27f72b24890..c1be8c4413b 100644 --- a/e2e/cypress/support/commands.js +++ b/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 }); }); diff --git a/e2e/cypress/support/index.d.ts b/e2e/cypress/support/index.d.ts index 40dcf83105e..a62601e97c1 100644 --- a/e2e/cypress/support/index.d.ts +++ b/e2e/cypress/support/index.d.ts @@ -1,13 +1,7 @@ /// -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; diff --git a/e2e/utils/flows/configurePanel.ts b/e2e/utils/flows/configurePanel.ts index 20139f1876b..4aa6a6cc5ab 100644 --- a/e2e/utils/flows/configurePanel.ts +++ b/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 }); }); diff --git a/package.json b/package.json index ee51f05d3f4..8c55c049fc1 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 3b727acab8e..bd34b2ec426 100644 --- a/yarn.lock +++ b/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"