/
ImageSnapshotDifference.ts
103 lines (83 loc) · 3.42 KB
/
ImageSnapshotDifference.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import * as $ from "jquery";
import { Constants } from "../../processor/Constants";
import * as AnsiParser from "ansi-parser";
/**
* Generate a side by side comparison of Jest image snapshot differences
* @export
* @class ImageSnapshotDifference
*/
export class ImageSnapshotDifference {
public static DIFF_INDICATOR: string = "different from snapshot";
public static DIFF_IMAGE: RegExp = /See diff for details:\s*((.*?)\.png)/;
public static DIFF_DETAILS: RegExp = /Error: (.*)/;
/**
* Test whether a failure message contains a image snapshot diff that we can render
* @static
* @param jestFailureMessage the failureMessage provided in the jest result object
* @memberof TestDifference
*/
public static containsDiff(jestFailureMessage: string): boolean {
return jestFailureMessage.indexOf(ImageSnapshotDifference.DIFF_INDICATOR) >= 0;
}
/**
* Generate diff html from jest diff message
* @static
* @param {string} jestFailureMessage - jest failure message
* @returns {HTMLElement} - html to contain diff error message and diff image which is link to full size diff
* @memberof TestDifference
*/
public static generate(jestFailureMessage: string): HTMLElement {
const imageDiffFilename = ImageSnapshotDifference.parseDiffImageName(jestFailureMessage);
const errorMessage = ImageSnapshotDifference.parseDiffError(jestFailureMessage);
const diffDiv = document.createElement("div") as HTMLDivElement;
diffDiv.className = "image-snapshot-diff";
const diffMessage = document.createElement("span") as HTMLSpanElement;
diffMessage.textContent = errorMessage;
diffMessage.className = "text-muted";
diffDiv.appendChild(diffMessage);
const diffImageLink = document.createElement("a") as HTMLAnchorElement;
diffImageLink.href = Constants.IMAGE_SNAPSHOT_DIFF_DIR + imageDiffFilename;
diffDiv.appendChild(diffImageLink);
const diffImage = document.createElement("img") as HTMLImageElement;
diffImage.src = Constants.IMAGE_SNAPSHOT_DIFF_DIR + imageDiffFilename;
diffImageLink.appendChild(diffImage);
return $(diffDiv).get(0);
}
/**
* Parse diff image file path from jest failure message.
*
* @param jestFailureMessage
* @returns {string} - file path or null if file not detected.
*/
public static parseDiffImagePath(jestFailureMessage: string): string {
const match = ImageSnapshotDifference.DIFF_IMAGE.exec(jestFailureMessage);
if (match) {
return AnsiParser.removeAnsi(match[1]).trim();
}
return null;
}
/**
* Parse diff image file name from jest failure message.
*
* @param jestFailureMessage
* @returns {string} - file name or null if file not detected.
*/
public static parseDiffImageName(jestFailureMessage: string): string {
const path = ImageSnapshotDifference.parseDiffImagePath(jestFailureMessage);
if (path) {
return path.replace(/^.*[\\\/]/, "");
}
}
/**
* Parse diff error message from jest failure message.
*
* @param jestFailureMessage
*/
private static parseDiffError(jestFailureMessage: string): string {
const match = ImageSnapshotDifference.DIFF_DETAILS.exec(jestFailureMessage);
if (match) {
return match[1];
}
return null;
}
}