|
| 1 | +import { join } from 'node:path'; |
| 2 | +import { |
| 3 | + copyFileSync, |
| 4 | + existsSync, |
| 5 | + mkdirSync, |
| 6 | + readFileSync, |
| 7 | + readdirSync, |
| 8 | + rmSync, |
| 9 | + unlinkSync, |
| 10 | + writeFileSync, |
| 11 | +} from 'node:fs'; |
| 12 | +import { cwd } from 'node:process'; |
| 13 | + |
| 14 | +import { PNG } from 'pngjs'; |
| 15 | + |
| 16 | +import { getPackageMetadata, loadPixelmatch } from './utils'; |
| 17 | +import { Metadata, Result } from './types'; |
| 18 | +import { generateCliReport, generateHtmlReport, generateJsonReport, generateMarkdownReport } from './reporters'; |
| 19 | + |
| 20 | +async function compareSnapshots( |
| 21 | + baselinePath: string, |
| 22 | + actualPath: string, |
| 23 | + diffPath: string, |
| 24 | +): Promise<Omit<Result, 'file'>> { |
| 25 | + try { |
| 26 | + const baselineImg = PNG.sync.read(readFileSync(baselinePath)); |
| 27 | + const actualImg = PNG.sync.read(readFileSync(actualPath)); |
| 28 | + const { width, height } = baselineImg; |
| 29 | + |
| 30 | + if (actualImg.width !== width || actualImg.height !== height) { |
| 31 | + return { passed: false, error: 'Image dimensions mismatch', changeType: 'dimensions-diff' }; |
| 32 | + } |
| 33 | + |
| 34 | + const diff = new PNG({ width, height }); |
| 35 | + const pixelmatch = await loadPixelmatch(); |
| 36 | + const numDiffPixels = pixelmatch(baselineImg.data, actualImg.data, diff.data, width, height, { threshold: 0.1 }); |
| 37 | + |
| 38 | + if (numDiffPixels > 0) { |
| 39 | + writeFileSync(diffPath, PNG.sync.write(diff)); |
| 40 | + return { |
| 41 | + passed: false, |
| 42 | + error: `Diff pixels: ${numDiffPixels}`, |
| 43 | + changeType: 'diff', |
| 44 | + diffPixels: numDiffPixels, |
| 45 | + diffPath: diffPath, |
| 46 | + }; |
| 47 | + } |
| 48 | + |
| 49 | + if (existsSync(diffPath)) { |
| 50 | + unlinkSync(diffPath); |
| 51 | + } |
| 52 | + |
| 53 | + return { passed: true }; |
| 54 | + } catch (error) { |
| 55 | + console.error(error); |
| 56 | + return { passed: false, error: (error as Error).message }; |
| 57 | + } |
| 58 | +} |
| 59 | + |
| 60 | +export async function runSnapshotTests(options: { |
| 61 | + baselineDir: string; |
| 62 | + outputPath: string; |
| 63 | + reportFileName: string; |
| 64 | + updateSnapshots: boolean; |
| 65 | +}) { |
| 66 | + const { updateSnapshots, reportFileName, baselineDir, outputPath } = options; |
| 67 | + |
| 68 | + const relativePaths = { |
| 69 | + baselineDir, |
| 70 | + outputPath, |
| 71 | + outputBaselineDir: join(outputPath, 'baseline'), |
| 72 | + actualDir: join(outputPath, 'actual'), |
| 73 | + diffDir: join(outputPath, 'diff'), |
| 74 | + }; |
| 75 | + |
| 76 | + const normalizedPaths = { |
| 77 | + outputPath: join(cwd(), outputPath), |
| 78 | + baselineDir: join(cwd(), relativePaths.baselineDir), |
| 79 | + outputBaselineDir: join(cwd(), relativePaths.outputBaselineDir), |
| 80 | + actualDir: join(cwd(), relativePaths.actualDir), |
| 81 | + diffDir: join(cwd(), relativePaths.diffDir), |
| 82 | + }; |
| 83 | + |
| 84 | + if (!existsSync(normalizedPaths.actualDir)) { |
| 85 | + throw new Error( |
| 86 | + `actualDir "${normalizedPaths.actualDir}" doesn't exist. Make sure to provide images for assertion`, |
| 87 | + ); |
| 88 | + } |
| 89 | + |
| 90 | + const metadata: Metadata = { |
| 91 | + paths: normalizedPaths, |
| 92 | + project: getPackageMetadata(normalizedPaths.outputPath), |
| 93 | + }; |
| 94 | + |
| 95 | + if (updateSnapshots) { |
| 96 | + console.info('======================'); |
| 97 | + console.info('💡 UPDATING SNAPSHOTS!'); |
| 98 | + console.info('======================'); |
| 99 | + } |
| 100 | + |
| 101 | + if (!existsSync(normalizedPaths.baselineDir)) { |
| 102 | + mkdirSync(normalizedPaths.baselineDir, { recursive: true }); |
| 103 | + } |
| 104 | + |
| 105 | + if (!existsSync(normalizedPaths.outputBaselineDir)) { |
| 106 | + mkdirSync(normalizedPaths.outputBaselineDir, { recursive: true }); |
| 107 | + } else { |
| 108 | + rmSync(normalizedPaths.outputBaselineDir, { recursive: true }); |
| 109 | + mkdirSync(normalizedPaths.outputBaselineDir, { recursive: true }); |
| 110 | + } |
| 111 | + |
| 112 | + if (!existsSync(normalizedPaths.diffDir)) { |
| 113 | + mkdirSync(normalizedPaths.diffDir, { recursive: true }); |
| 114 | + } else { |
| 115 | + rmSync(normalizedPaths.diffDir, { recursive: true }); |
| 116 | + mkdirSync(normalizedPaths.diffDir, { recursive: true }); |
| 117 | + } |
| 118 | + |
| 119 | + const baselineFiles = readdirSync(normalizedPaths.baselineDir); |
| 120 | + const actualFiles = readdirSync(normalizedPaths.actualDir); |
| 121 | + let allPassed = true; |
| 122 | + const results: Result[] = []; |
| 123 | + |
| 124 | + const removedFilesFromBaseline = baselineFiles.filter(file => { |
| 125 | + if (!file.endsWith('.png')) { |
| 126 | + throw new Error(`Only png files are supported - ${file}`); |
| 127 | + } |
| 128 | + |
| 129 | + if (!actualFiles.includes(file)) { |
| 130 | + const baselinePath = join(normalizedPaths.baselineDir, file); |
| 131 | + if (!updateSnapshots) { |
| 132 | + // copy baseline img that is being removed to our reports /baseline folder |
| 133 | + copyFileSync(baselinePath, join(normalizedPaths.outputBaselineDir, file)); |
| 134 | + results.push({ |
| 135 | + file, |
| 136 | + passed: updateSnapshots ? true : false, |
| 137 | + error: updateSnapshots ? undefined : 'Remove Snapshot', |
| 138 | + changeType: 'remove', |
| 139 | + }); |
| 140 | + allPassed = false; |
| 141 | + } else { |
| 142 | + unlinkSync(baselinePath); |
| 143 | + } |
| 144 | + } |
| 145 | + }); |
| 146 | + |
| 147 | + if (removedFilesFromBaseline.length > 0) { |
| 148 | + console.error(`🧹 Removed snapshots: ${removedFilesFromBaseline.join(', ')}`); |
| 149 | + } |
| 150 | + |
| 151 | + for (const file of actualFiles) { |
| 152 | + if (!file.endsWith('.png')) { |
| 153 | + throw new Error(`Only png files are supported - ${file}`); |
| 154 | + } |
| 155 | + |
| 156 | + const baselinePath = join(normalizedPaths.baselineDir, file); |
| 157 | + const actualPath = join(normalizedPaths.actualDir, file); |
| 158 | + const diffPath = join(normalizedPaths.diffDir, file); |
| 159 | + |
| 160 | + if (!existsSync(baselinePath)) { |
| 161 | + results.push({ |
| 162 | + file, |
| 163 | + passed: updateSnapshots ? true : false, |
| 164 | + error: updateSnapshots ? undefined : 'New Snapshot', |
| 165 | + changeType: 'add', |
| 166 | + }); |
| 167 | + |
| 168 | + if (!updateSnapshots) { |
| 169 | + allPassed = false; |
| 170 | + } else { |
| 171 | + copyFileSync(actualPath, baselinePath); |
| 172 | + } |
| 173 | + continue; |
| 174 | + } |
| 175 | + |
| 176 | + if (!updateSnapshots) { |
| 177 | + const result = await compareSnapshots(baselinePath, actualPath, diffPath); |
| 178 | + if (!result.passed) { |
| 179 | + copyFileSync(baselinePath, join(normalizedPaths.outputBaselineDir, file)); |
| 180 | + allPassed = false; |
| 181 | + } |
| 182 | + results.push({ file, ...result }); |
| 183 | + } else { |
| 184 | + copyFileSync(actualPath, baselinePath); |
| 185 | + results.push({ file, passed: true }); |
| 186 | + } |
| 187 | + } |
| 188 | + |
| 189 | + const reportConfig = { |
| 190 | + metadata, |
| 191 | + reportFileName, |
| 192 | + paths: { absolute: normalizedPaths, relative: relativePaths }, |
| 193 | + }; |
| 194 | + |
| 195 | + generateCliReport(results, reportConfig); |
| 196 | + generateJsonReport(results, reportConfig); |
| 197 | + generateHtmlReport(results, reportConfig); |
| 198 | + generateMarkdownReport(results, reportConfig); |
| 199 | + |
| 200 | + if (!allPassed) { |
| 201 | + return { passed: false }; |
| 202 | + } |
| 203 | + |
| 204 | + return { passed: true }; |
| 205 | +} |
0 commit comments