test: 调整自动化测试截图方式

jest-setup.js

 const path = require('path');
+const fs = require("fs");
 const {
 	configureToMatchImageSnapshot
 } = require('jest-image-snapshot');
@@ -22,4 +23,181 @@ expect.extend({
 		customSnapshotsDir: path.join(__dirname, baseFolderName),
 		customDiffDir: path.join(__dirname, `${folderName}/`, 'diff'),
 	}),
+	toSaveSnapshot,
+	toSaveImageSnapshot,
 });
+
+
+const testCaseToSnapshotFilePath =
+    process.env.testCaseToSnapshotFilePath || "./testCaseToSnapshotFilePath.json";
+
+if (!fs.existsSync(testCaseToSnapshotFilePath)) {
+    fs.writeFileSync(testCaseToSnapshotFilePath, "{}");
+}
+
+function writeTestCaseToSnapshotFile(testCaseName, snapshotFilePath) {
+    const data = JSON.parse(fs.readFileSync(testCaseToSnapshotFilePath));
+
+    if (testCaseName.includes(__dirname)) {
+        testCaseName = testCaseName.substring(`${__dirname}`.length);
+        if (testCaseName[0] == '/'  || testCaseName[0] == '\\') {
+            testCaseName = testCaseName.substring(1);
+        };
+    };
+
+    if (!data[testCaseName]) {
+        data[testCaseName] = [snapshotFilePath];
+    } else {
+        data[testCaseName].push(snapshotFilePath);
+    }
+    fs.writeFileSync(testCaseToSnapshotFilePath, JSON.stringify(data, null, 2));
+}
+
+function toSaveSnapshot(received, {
+    customSnapshotsDir,
+    fileName
+} = {}) {
+    const {
+        snapshotState: {
+            _rootDir
+        },
+        testPath,
+        currentTestName,
+    } = this;
+    const SNAPSHOTS_DIR = "__file_snapshots__";
+    const snapshotDir =
+        process.env.saveSnapshotDir ||
+        createSnapshotDir({
+            customSnapshotsDir,
+            testPath,
+            SNAPSHOTS_DIR,
+        });
+    const _fileName = createFileName({
+        fileName,
+        testPath,
+        currentTestName,
+    });
+    const filePath = path.join(snapshotDir, _fileName);
+    let message = () => `${currentTestName} toSaveSnapshot success`;
+    let pass = true;
+
+    try {
+        checkSnapshotDir(path.dirname(filePath));
+        fs.writeFileSync(filePath, received);
+        writeTestCaseToSnapshotFile(testPath.replace(`${_rootDir}/`, ""), filePath);
+    } catch (e) {
+        console.log("toSaveSnapshot fail", e);
+        message = () => e.message;
+        pass = false;
+    }
+
+    return {
+        message,
+        pass,
+    };
+}
+
+function toSaveImageSnapshot(
+    received, {
+        customSnapshotsDir,
+        customSnapshotIdentifier
+    } = {}
+) {
+    const {
+        snapshotState: {
+            _rootDir
+        },
+        testPath,
+        currentTestName,
+    } = this;
+    const SNAPSHOTS_DIR = "__image_snapshots__";
+    const snapshotDir =
+        process.env.saveImageSnapshotDir ||
+        createSnapshotDir({
+            customSnapshotsDir,
+            testPath,
+            SNAPSHOTS_DIR,
+        });
+    const _fileName = createFileName({
+        fileName: customSnapshotIdentifier ? `${customSnapshotIdentifier()}.png` : "",
+        testPath,
+        currentTestName,
+        fileType: "png",
+    });
+    const filePath = path.join(snapshotDir, _fileName);
+    let message = () => `${currentTestName} toSaveImageSnapshot success`;
+    let pass = true;
+
+    try {
+        checkSnapshotDir(path.dirname(filePath));
+        fs.writeFileSync(filePath, Buffer.from(received, "base64"));
+        writeTestCaseToSnapshotFile(testPath.replace(`${_rootDir}/`, ""), filePath);
+    } catch (e) {
+        console.log("toSaveImageSnapshot fail", e);
+        message = () => e.message;
+        pass = false;
+    }
+
+    return {
+        message,
+        pass,
+    };
+}
+
+function createSnapshotDir({
+    customSnapshotsDir,
+    testPath,
+    SNAPSHOTS_DIR
+}) {
+    return customSnapshotsDir || path.join(path.dirname(testPath), SNAPSHOTS_DIR);
+}
+
+function createFileName({
+    fileName,
+    testPath,
+    currentTestName,
+    fileType
+}) {
+    return (
+        fileName ||
+        createSnapshotIdentifier({
+            testPath,
+            currentTestName,
+            fileType,
+        })
+    );
+}
+
+function createSnapshotIdentifier({
+    testPath,
+    currentTestName,
+    fileType = "txt",
+}) {
+    const snapshotIdentifier = kebabCase(
+        `${path.basename(testPath)}-${currentTestName}`
+    );
+    const counter = timesCalled.get(`${snapshotIdentifier}-${fileType}`) || 1;
+    timesCalled.set(`${snapshotIdentifier}-${fileType}`, counter + 1);
+    return `${snapshotIdentifier}-${counter}.${fileType}`;
+}
+
+function kebabCase(str) {
+    return str
+        .replaceAll(/([a-z])([A-Z])/g, "$1-$2")
+        .replaceAll(/\s+/g, "-")
+        .replaceAll(/_+/g, "-")
+        .replaceAll(/\/+/g, "-")
+        .replaceAll(/\.+/g, "-")
+        .toLowerCase();
+}
+
+function checkSnapshotDir(snapshotDir) {
+    if (!fs.existsSync(snapshotDir)) {
+        fs.mkdirSync(snapshotDir, {
+            recursive: true,
+        });
+    }
+}
+
+const timesCalled = new Map();
+

pages/app-instance/globalProperties/globalProperties.test.js

@@ -54,6 +54,6 @@ describe('globalProperties', () => {
 		const image = await program.screenshot({
 			fullPage: true
 		});
-		expect(image).toMatchImageSnapshot();
+		expect(image).toSaveImageSnapshot();
 	})
 })
\ No newline at end of file

pages/built-in-component/teleport/teleport.test.js

@@ -17,6 +17,6 @@ describe('teleport', () => {
   it('teleport', async () => {
   	await page.waitFor(500)
   	const image = await program.screenshot();
-  	expect(image).toMatchImageSnapshot();
+  	expect(image).toSaveImageSnapshot();
   })
 })

pages/directive/v-bind/v-bind-css.test.js

@@ -17,6 +17,6 @@ describe('v-bind-css', () => {
     const image = await program.screenshot({
       fullPage: true
     });
-    expect(image).toMatchImageSnapshot();
+    expect(image).toSaveImageSnapshot();
   })
 })
\ No newline at end of file

pages/directive/v-html/v-html.test.js

@@ -8,9 +8,9 @@ describe('v-html', () => {
   })
   it('basic', async () => {
     // 补充延迟确保渲染完成
-    await page.waitFor(500)
+    await page.waitFor(500)
     
     const image = await program.screenshot()
-    expect(image).toMatchImageSnapshot()
+    expect(image).toSaveImageSnapshot()
   })
 })
\ No newline at end of file

pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class.test.js

@@ -10,6 +10,6 @@ describe('自定义组件中使用 class 定制另一个自定义组件根节点
 
   it('screenshot', async () => {
     const image = await program.screenshot()
-    expect(image).toMatchImageSnapshot()
+    expect(image).toSaveImageSnapshot()
   })
 })

pages/rendering/template/template-map-style.test.js

@@ -6,13 +6,13 @@ describe('/pages/rendering/template/template-map-style', () => {
   })
   it('init screen shot', async () => {
     const image = await program.screenshot();
-    expect(image).toMatchImageSnapshot();
+    expect(image).toSaveImageSnapshot();
   })
 
   it('change isClassValid screen shot', async () => {
     const btn = await page.$('#btn')
     await btn.tap()
     const image = await program.screenshot();
-    expect(image).toMatchImageSnapshot();
+    expect(image).toSaveImageSnapshot();
   })
 });
\ No newline at end of file

testCaseToSnapshotFilePath.json

+{
+  "pages/rendering/template/template-map-style.test.js": [
+    "/Users/wangzhenyu/work/DCloud/git/hello-uvue/pages/rendering/template/__image_snapshots__/template-map-style-test-js--pages-rendering-template-template-map-style-init-screen-shot-1.png",
+    "/Users/wangzhenyu/work/DCloud/git/hello-uvue/pages/rendering/template/__image_snapshots__/template-map-style-test-js--pages-rendering-template-template-map-style-change-is-class-valid-screen-shot-1.png"
+  ],
+  "pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class.test.js": [
+    "/Users/wangzhenyu/work/DCloud/git/hello-uvue/pages/examples/set-custom-child-component-root-node-class/__image_snapshots__/set-custom-child-component-root-node-class-test-js-自定义组件中使用-class-定制另一个自定义组件根节点样式-screenshot-1.png"
+  ],
+  "pages/directive/v-html/v-html.test.js": [
+    "/Users/wangzhenyu/work/DCloud/git/hello-uvue/pages/directive/v-html/__image_snapshots__/v-html-test-js-v-html-basic-1.png"
+  ],
+  "pages/directive/v-bind/v-bind-css.test.js": [
+    "/Users/wangzhenyu/work/DCloud/git/hello-uvue/pages/directive/v-bind/__image_snapshots__/v-bind-css-test-js-v-bind-css-screenshot-1.png"
+  ],
+  "pages/built-in-component/teleport/teleport.test.js": [
+    "/Users/wangzhenyu/work/DCloud/git/hello-uvue/pages/built-in-component/teleport/__image_snapshots__/teleport-test-js-teleport-teleport-1.png"
+  ],
+  "pages/app-instance/globalProperties/globalProperties.test.js": [
+    "/Users/wangzhenyu/work/DCloud/git/hello-uvue/pages/app-instance/globalProperties/__image_snapshots__/global-properties-test-js-global-properties-screenshot-1.png"
+  ]
+}
\ No newline at end of file