test looks-same

Author: ajivanyandev

packages/devextreme-cli/package.json

@@ -66,6 +66,7 @@
     "eslint-stylish": "^0.2.0",
     "jest": "^29.7.0",
     "jest-image-snapshot": "^6.4.0",
+    "looks-same": "^9.0.1",
     "prettier": "^2.8.8",
     "rimraf": "^2.7.1",
     "tree-kill": "^1.2.2",

packages/devextreme-cli/testing/app-template.test.shared.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const waitOn = require('wait-on');
 const ip = require('ip');
-
+const { compareImages } = require('./utils/imageComparator');
 const getBrowser = require('./utils/puppeteer').getBrowser;
 const { viewports, themes, layouts } = require('./constants');
 const DevServer = require('./dev-server');
@@ -94,12 +94,19 @@ module.exports = (env, { port = 8080, urls = {} } = {}) => {
                             const customConfig = { threshold: 0.012, includeAA: true };
 
                             function compareSnapshot(image, name, overrideConfig = {}) {
-                                expect(image).toMatchImageSnapshot({
-                                    customDiffConfig: { ...customConfig, ...overrideConfig },
-                                    customSnapshotIdentifier: `${layout}-${theme}-${viewportName}-${name}-snap`,
-                                    customDiffDir: diffSnapshotsDir,
-                                    storeReceivedOnFailure: true,
-                                    customReceivedDir: diffSnapshotsDir
+                                const snapshotName = `${layout}-${theme}-${viewportName}-${name}`;
+                                const snapshotPath = path.join(diffSnapshotsDir, `${snapshotName}.png`);
+                                const diffPath = path.join(diffSnapshotsDir, `${snapshotName}.diff.png`);
+
+                                return compareImages({
+                                    imageBuffer: image,
+                                    snapshotPath,
+                                    diffPath,
+                                    threshold: overrideConfig.threshold ?? customConfig.threshold,
+                                }).then(({ equal, created }) => {
+                                    if (!equal) {
+                                        throw new Error(`Image mismatch for "${snapshotName}". See diff at: ${diffPath}`);
+                                    }
                                 });
                             }
 
@@ -155,11 +162,11 @@ module.exports = (env, { port = 8080, urls = {} } = {}) => {
                             //     await page.waitForTimeout(3000);
                             // }
 
-                            async function takeScreenshot(options) {
-                                // await hideFooter();
+                           async function takeScreenshot(options) {
                                 return await page.screenshot({
                                     ...(options || {}),
-                                    captureBeyondViewport: false
+                                    captureBeyondViewport: false,
+                                    encoding: 'binary'
                                 });
                             }
 

packages/devextreme-cli/testing/utils/imageComparator.js

@@ -0,0 +1,45 @@
+// utils/imageComparator.js
+const fs = require('fs');
+const path = require('path');
+const looksSame = require('looks-same');
+
+function ensureDirSync(dir) {
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
+}
+
+async function compareImages({ imageBuffer, snapshotPath, diffPath, threshold = 0.01 }) {
+    ensureDirSync(path.dirname(snapshotPath));
+    ensureDirSync(path.dirname(diffPath));
+
+    // If no snapshot exists, create it
+    if (!fs.existsSync(snapshotPath)) {
+        fs.writeFileSync(snapshotPath, imageBuffer);
+        return { equal: true, created: true };
+    }
+
+    return new Promise((resolve, reject) => {
+        looksSame(imageBuffer, fs.readFileSync(snapshotPath), {
+            strict: false,
+            tolerance: threshold,
+        }, (err, { equal }) => {
+            if (err) return reject(err);
+
+            if (!equal) {
+                looksSame.createDiff({
+                    reference: snapshotPath,
+                    current: imageBuffer,
+                    diff: diffPath,
+                    highlightColor: '#ff00ff', // pink
+                }, () => {
+                    resolve({ equal: false });
+                });
+            } else {
+                resolve({ equal: true });
+            }
+        });
+    });
+}
+
+module.exports = { compareImages };