Cypress visual testing integration

venia-integration-tests/cypress.config.json

@@ -1,12 +1,17 @@
 {
     "baseUrl": "https://develop.pwa-venia.com/",
     "defaultCommandTimeout": 10000,
-    "env": {},
+    "supportFile": "src/support/index.js",
+    "pluginsFile": "src/plugins/index.js",
     "fixturesFolder": "src/fixtures",
     "integrationFolder": "src/tests",
+    "screenshotsFolder": "src/snapshots",
     "pageLoadTimeout": 30000,
     "requestTimeout": 30000,
     "testFiles": "**/*.spec.js",
     "viewportHeight": 900,
-    "viewportWidth": 1440
+    "viewportWidth": 1440,
+    "scrollBehavior": false,
+    "ignoreTestFiles": ["**/__snapshots__/*", "**/__image_snapshots__/*"],
+    "env": {}
 }

venia-integration-tests/cypress.json

@@ -0,0 +1 @@
+{}

venia-integration-tests/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    testMatch: ['**/__tests__/**/*.[jt]s?(x)']
+};

venia-integration-tests/package.json

@@ -5,13 +5,18 @@
     "author": "Magento Commerce",
     "license": "MIT",
     "devDependencies": {
-        "cypress": "~6.8.0"
+        "cypress": "~7.1.0",
+        "cypress-image-snapshot": "~4.0.1",
+        "jest": "~26.0.1",
+        "jimp": "~0.16.1"
     },
     "scripts": {
         "test": "cypress open --browser chrome --config-file cypress.config.json",
         "test:firefox": "cypress open --browser firefox --config-file cypress.config.json",
-        "test:headless": "cypress open --browser chrome --headless --config-file cypress.config.json",
+        "test:headless": "cypress run --browser chrome --headless --config-file cypress.config.json",
         "test:run": "cypress run --browser chrome --config-file cypress.config.json",
-        "test:debug": "node --inspect-brk ./node_modules/cypress/bin/cypress open --browser chrome --config-file cypress.config.json"
+        "test:devTest": "jest",
+        "test:debug": "node --inspect-brk ./node_modules/cypress/bin/cypress run --browser chrome --config-file cypress.config.json",
+        "test:update-snapshots": "cypress run --browser chrome --config-file cypress.config.json --env updateSnapshots=true"
     }
 }

venia-integration-tests/src/fields/categoryPage/index.js

@@ -0,0 +1 @@
+export const filterButton = 'button[class^="category-filterButton"]';

venia-integration-tests/src/plugins/__tests__/resizeSnapshotPlugin.spec.js

@@ -0,0 +1,135 @@
+const { read } = require('jimp');
+const { existsSync } = require('fs');
+const { matchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+
+const {
+    addSnapshotResizePlugin,
+    resizeSnapshot
+} = require('../resizeSnapshotPlugin');
+
+jest.mock('jimp', () => ({
+    read: jest.fn()
+}));
+
+jest.mock('cypress-image-snapshot/plugin', () => ({
+    matchImageSnapshotPlugin: jest.fn()
+}));
+
+jest.mock('fs', () => ({
+    existsSync: jest.fn().mockReturnValue(true),
+    readFileSync: jest.fn().mockReturnValue('image data')
+}));
+
+const mockWriteAsync = jest.fn().mockResolvedValue({});
+const mockResize = jest.fn().mockReturnValue({ writeAsync: mockWriteAsync });
+
+beforeAll(() => {
+    read.mockResolvedValue({
+        resize: mockResize
+    });
+});
+
+beforeEach(() => {
+    jest.clearAllMocks();
+});
+
+const imageConfig = {
+    path: 'path/to/the/snapshot/image',
+    pixelRatio: 2,
+    dimensions: {
+        width: 100,
+        height: 100
+    }
+};
+
+describe('testing resizeSnapshot', () => {
+    test('should write resized image to filesystem if exists', async () => {
+        const updatedImageConfig = await resizeSnapshot(imageConfig);
+
+        expect(read).toHaveBeenCalledWith('image data');
+        expect(mockResize).toHaveBeenCalledWith(50, 50);
+        expect(mockWriteAsync).toHaveBeenCalledWith(
+            'path/to/the/snapshot/image'
+        );
+        expect(updatedImageConfig).toMatchInlineSnapshot(`
+            Object {
+              "dimensions": Object {
+                "height": 50,
+                "width": 50,
+              },
+              "path": "path/to/the/snapshot/image",
+              "pixelRatio": 1,
+            }
+        `);
+    });
+
+    test('should not attemp to resize if image is not available', async () => {
+        existsSync.mockReturnValueOnce(false).mockReturnValueOnce(false);
+
+        const updatedImageConfig = await resizeSnapshot(imageConfig);
+
+        expect(mockResize).not.toHaveBeenCalled();
+        expect(mockWriteAsync).not.toHaveBeenCalled();
+        expect(updatedImageConfig).toMatchInlineSnapshot(`
+            Object {
+              "dimensions": Object {
+                "height": 100,
+                "width": 100,
+              },
+              "path": "path/to/the/snapshot/image",
+              "pixelRatio": 2,
+            }
+        `);
+    });
+});
+
+describe('testing addSnapshotResizePlugin', () => {
+    test('should register task and screenshot plugins', () => {
+        const on = jest.fn();
+
+        addSnapshotResizePlugin(on);
+
+        expect(on.mock.calls).toMatchInlineSnapshot(`
+            Array [
+              Array [
+                "task",
+                Object {
+                  "resizeSnapshot": [Function],
+                },
+              ],
+              Array [
+                "after:screenshot",
+                [Function],
+              ],
+            ]
+        `);
+    });
+
+    test('after:screenshot should return correct shape', async () => {
+        const on = jest.fn();
+
+        addSnapshotResizePlugin(on);
+
+        const [, screenshotResizeFn] = on.mock.calls.find(
+            call => call[0] === 'after:screenshot'
+        );
+
+        await screenshotResizeFn({ ...imageConfig, name: 'sample snapshot' });
+
+        expect(matchImageSnapshotPlugin.mock.calls).toMatchInlineSnapshot(`
+            Array [
+              Array [
+                Object {
+                  "dimensions": Object {
+                    "height": 100,
+                    "width": 100,
+                  },
+                  "name": "sample-snapshot",
+                  "path": "path/to/the/snapshot/image",
+                  "pixelRatio": 2,
+                },
+              ],
+            ]
+        `);
+    });
+});

venia-integration-tests/src/plugins/index.js

@@ -0,0 +1,9 @@
+const {
+    addMatchImageSnapshotPlugin
+} = require('cypress-image-snapshot/plugin');
+const { addSnapshotResizePlugin } = require('./resizeSnapshotPlugin');
+
+module.exports = (on, config) => {
+    addMatchImageSnapshotPlugin(on, config);
+    addSnapshotResizePlugin(on, config);
+};

venia-integration-tests/src/plugins/resizeSnapshotPlugin.js

@@ -0,0 +1,66 @@
+const jimp = require('jimp');
+const fs = require('fs');
+const { matchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+
+const resizeSnapshot = imageConfig => {
+    const { path, pixelRatio, dimensions } = imageConfig;
+    const { width, height } = dimensions;
+
+    const newDimensions = {
+        width: width / pixelRatio,
+        height: height / pixelRatio
+    };
+
+    if (fs.existsSync(path)) {
+        const imageData = fs.readFileSync(path);
+
+        return jimp
+            .read(imageData)
+            .then(image => {
+                return image
+                    .resize(newDimensions.width, newDimensions.height)
+                    .writeAsync(path)
+                    .then(() => {
+                        return {
+                            ...imageConfig,
+                            dimensions: newDimensions,
+                            pixelRatio: 1
+                        };
+                    });
+            })
+            .catch(() => {
+                return;
+            });
+    } else {
+        return Promise.resolve(imageConfig);
+    }
+};
+
+const replaceSpace = str => str.split(' ').join('-');
+
+const adjustDetails = screenshotDetails => {
+    return {
+        ...screenshotDetails,
+        name: replaceSpace(screenshotDetails.name),
+        path: replaceSpace(screenshotDetails.path)
+    };
+};
+
+const addSnapshotResizePlugin = on => {
+    on('task', {
+        resizeSnapshot
+    });
+    on('after:screenshot', rawScreenshotDetails => {
+        const screenshotDetails = adjustDetails(rawScreenshotDetails);
+
+        return resizeSnapshot(screenshotDetails)
+            .then(screenshotDetails => {
+                matchImageSnapshotPlugin(screenshotDetails);
+            })
+            .catch(err => {
+                console.error('Something went wrong', err);
+            });
+    });
+};
+
+module.exports = { resizeSnapshot, addSnapshotResizePlugin };

venia-integration-tests/src/support/__tests__/fullPageScreenshotCommand.spec.js

@@ -0,0 +1,90 @@
+const mockAdd = jest.fn();
+const mockMatchImageSnapshot = jest.fn();
+const mockDocument = jest.fn().mockReturnValue({
+    matchImageSnapshot: mockMatchImageSnapshot
+});
+const mockInvoke = jest.fn();
+const mockGet = jest.fn().mockReturnValue({
+    invoke: mockInvoke
+});
+
+beforeAll(() => {
+    global.Cypress = {
+        Commands: {
+            add: mockAdd
+        }
+    };
+
+    global.cy = {
+        document: mockDocument,
+        get: mockGet
+    };
+});
+
+afterAll(() => {
+    delete global.Cypress;
+    delete global.cy;
+});
+
+test('should match document snapshot', () => {
+    require('../fullPageScreenshotCommand');
+
+    expect(mockAdd.mock.calls).toMatchInlineSnapshot(`
+        Array [
+          Array [
+            "captureFullPageScreenshot",
+            [Function],
+          ],
+        ]
+    `);
+
+    const captureFullPageScreenshot = mockAdd.mock.calls[0][1];
+    captureFullPageScreenshot({ name: 'sample page snapshot' });
+
+    expect(mockMatchImageSnapshot.mock.calls).toMatchInlineSnapshot(`
+        Array [
+          Array [
+            "sample-page-snapshot",
+            Object {
+              "comparisonMethod": "ssim",
+              "failureThreshold": 0.01,
+              "failureThresholdType": "percent",
+              "name": "sample-page-snapshot",
+            },
+          ],
+        ]
+    `);
+});
+
+test('should throw error if name is not provided', () => {
+    require('../fullPageScreenshotCommand');
+
+    const captureFullPageScreenshot = mockAdd.mock.calls[0][1];
+    expect(() => captureFullPageScreenshot({})).toThrow();
+});
+
+test('should use custom options if provided', () => {
+    mockMatchImageSnapshot.mockClear();
+
+    require('../fullPageScreenshotCommand');
+
+    const captureFullPageScreenshot = mockAdd.mock.calls[0][1];
+    captureFullPageScreenshot({
+        name: 'sample page snapshot',
+        failureThreshold: 0.2
+    });
+
+    expect(mockMatchImageSnapshot.mock.calls).toMatchInlineSnapshot(`
+        Array [
+          Array [
+            "sample-page-snapshot",
+            Object {
+              "comparisonMethod": "ssim",
+              "failureThreshold": 0.2,
+              "failureThresholdType": "percent",
+              "name": "sample-page-snapshot",
+            },
+          ],
+        ]
+    `);
+});