nuxt-spec 0.2.4-alpha.2 → 0.2.4-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/utils/index.ts CHANGED
@@ -1,12 +1,12 @@
1
- import { gotoPage, getDataHtml, getAPIResultHtml } from './e2e'
2
- import { compareScreenshot } from './screenshot'
3
- import type { CompareScreenshotOptions } from './screenshot'
4
-
5
- export {
6
- compareScreenshot,
7
- gotoPage,
8
- getDataHtml,
9
- getAPIResultHtml,
10
- }
11
-
12
- export type { CompareScreenshotOptions }
1
+ import { gotoPage, getDataHtml, getAPIResultHtml } from './e2e'
2
+ import { compareScreenshot } from './screenshot'
3
+ import type { CompareScreenshotOptions } from './screenshot'
4
+
5
+ export {
6
+ compareScreenshot,
7
+ gotoPage,
8
+ getDataHtml,
9
+ getAPIResultHtml,
10
+ }
11
+
12
+ export type { CompareScreenshotOptions }
@@ -1,8 +1,8 @@
1
- <div class="failure">
2
- <h2>{{FILE_NAME}}</h2>
3
- <p class="message">{{MESSAGE}}</p>
4
- <div class="pair">
5
- <figure><figcaption>Baseline image</figcaption><img src="{{BASELINE_URI}}" alt="Baseline image for reference"></figure>
6
- <figure><figcaption>Actual screenshot</figcaption><img src="{{ACTUAL_URI}}" alt="Actual screenshot taken"></figure>
7
- </div>
8
- </div>
1
+ <div class="failure">
2
+ <h2>{{FILE_NAME}}</h2>
3
+ <p class="message">{{MESSAGE}}</p>
4
+ <div class="pair">
5
+ <figure><figcaption>Baseline image</figcaption><img src="{{BASELINE_URI}}" alt="Baseline image for reference"></figure>
6
+ <figure><figcaption>Actual screenshot</figcaption><img src="{{ACTUAL_URI}}" alt="Actual screenshot taken"></figure>
7
+ </div>
8
+ </div>
@@ -1,24 +1,24 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <title>Visual Regression Report</title>
6
- <style>
7
- body { font-family: system-ui, sans-serif; margin: 2rem; background: #f5f5f5; color: #222; }
8
- h1 { font-size: 1.4rem; }
9
- .failure { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 1rem; margin: 1rem 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
10
- .failure h2 { font-size: 1rem; margin: 0 0 .5rem; }
11
- .failure .message { color: #b00; font-size: .85rem; margin: 0 0 .75rem; }
12
- .pair { display: flex; gap: 1rem; flex-wrap: wrap; }
13
- .pair figure { margin: 0; flex: 1 1 0; min-width: 240px; }
14
- .pair figcaption { font-size: .8rem; margin-bottom: .25rem; font-weight: bold; }
15
- .pair figure:first-child figcaption { color: #0b0; }
16
- .pair figure:last-child figcaption { color: #b00; }
17
- .pair img { max-width: 100%; background: #fff; }
18
- .pair figure:first-child img { border: 2px solid #0b0; }
19
- .pair figure:last-child img { border: 2px solid #b00; }
20
- </style>
21
- </head>
22
- <body>
23
- <h1>Visual Regression Report - {{TIMESTAMP}}</h1>
24
- <!-- BEGIN failed screenshot entries -->
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Visual Regression Report</title>
6
+ <style>
7
+ body { font-family: system-ui, sans-serif; margin: 2rem; background: #f5f5f5; color: #222; }
8
+ h1 { font-size: 1.4rem; }
9
+ .failure { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 1rem; margin: 1rem 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
10
+ .failure h2 { font-size: 1rem; margin: 0 0 .5rem; }
11
+ .failure .message { color: #b00; font-size: .85rem; margin: 0 0 .75rem; }
12
+ .pair { display: flex; gap: 1rem; flex-wrap: wrap; }
13
+ .pair figure { margin: 0; flex: 1 1 0; min-width: 240px; }
14
+ .pair figcaption { font-size: .8rem; margin-bottom: .25rem; font-weight: bold; }
15
+ .pair figure:first-child figcaption { color: #0b0; }
16
+ .pair figure:last-child figcaption { color: #b00; }
17
+ .pair img { max-width: 100%; background: #fff; }
18
+ .pair figure:first-child img { border: 2px solid #0b0; }
19
+ .pair figure:last-child img { border: 2px solid #b00; }
20
+ </style>
21
+ </head>
22
+ <body>
23
+ <h1>Visual Regression Report - {{TIMESTAMP}}</h1>
24
+ <!-- BEGIN failed screenshot entries -->
@@ -1,4 +1,4 @@
1
- <!-- END failed screenshot entries -->
2
- <div>Generated by <a href="https://github.com/nuxt/nuxt-spec">Nuxt Spec</a> @ {{TIMESTAMP}}</div>
3
- </body>
4
- </html>
1
+ <!-- END failed screenshot entries -->
2
+ <div>Generated by <a href="https://github.com/nuxt/nuxt-spec">Nuxt Spec</a> @ {{TIMESTAMP}}</div>
3
+ </body>
4
+ </html>
@@ -1,210 +1,216 @@
1
- import { exec } from 'node:child_process'
2
- import { appendFileSync, existsSync, mkdirSync, readFileSync, statSync, unlinkSync, writeFileSync } from 'node:fs'
3
- import { platform } from 'node:os'
4
- import { resolve, sep } from 'node:path'
5
- import { fileURLToPath } from 'node:url'
6
- import type { DecodedPng } from 'fast-png'
7
-
8
- const templatesDir = resolve(fileURLToPath(import.meta.url), '..')
9
- const REPORT_ENTRY = readFileSync(resolve(templatesDir, 'report-entry.html'), 'utf-8')
10
- const REPORT_PATH = resolve(process.cwd(), '.report-path')
11
- const REPORT_LOCK = resolve(process.cwd(), '.report-lock')
12
-
13
- // create report file on first call
14
- // protected from parallel execution issues
15
- export function ensureReportCreated(targetDir = 'test/e2e'): void {
16
- withConcurrentLock(() => {
17
- let reportPath: string
18
-
19
- if (existsSync(REPORT_PATH)) {
20
- // Keep exactly one shared report per test run; first writer wins.
21
- reportPath = readFileSync(REPORT_PATH, 'utf-8').trim()
22
- } else {
23
- const root = process.cwd()
24
- const dir = resolveWithin(root, targetDir)
25
- const fileTimestamp = process.env.SCREENSHOT_REPORT_TIMESTAMP ?? reportTimestamp(new Date())
26
- reportPath = resolve(dir, '__current__', `report-${fileTimestamp}.html`)
27
- writeFileSync(REPORT_PATH, reportPath)
28
- }
29
-
30
- process.env.SCREENSHOT_REPORT_PATH = reportPath
31
- if (!reportPath || existsSync(reportPath)) return
32
-
33
- const titleTimestamp = process.env.SCREENSHOT_REPORT_TITLE ?? reportTimestamp(new Date(), true)
34
- mkdirSync(resolve(reportPath, '..'), { recursive: true })
35
-
36
- const template = readFileSync(resolve(templatesDir, 'report-head.html'), 'utf-8')
37
- const report = template.replace('{{TIMESTAMP}}', titleTimestamp)
38
- writeFileSync(reportPath, report)
39
- })
40
- }
41
-
42
- // append a side-by-side baseline/actual comparison
43
- // to the HTML report if the screenshots don't match
44
- // protected from parallel execution issues
45
- export function appendToReport(fileName: string, message: string, baseline: Uint8Array, actual: Uint8Array): void {
46
- const baselineUri = `data:image/png;base64,${Buffer.from(baseline).toString('base64')}`
47
- const actualUri = `data:image/png;base64,${Buffer.from(actual).toString('base64')}`
48
-
49
- const entry = REPORT_ENTRY
50
- .replace('{{FILE_NAME}}', escapeHtml(fileName))
51
- .replace('{{MESSAGE}}', escapeHtml(message))
52
- .replace('{{BASELINE_URI}}', baselineUri)
53
- .replace('{{ACTUAL_URI}}', actualUri)
54
-
55
- withConcurrentLock(() => {
56
- const reportPath = process.env.SCREENSHOT_REPORT_PATH || (existsSync(REPORT_PATH)
57
- ? readFileSync(REPORT_PATH, 'utf-8').trim()
58
- : '')
59
- if (!reportPath || !existsSync(reportPath)) return
60
-
61
- appendFileSync(reportPath, entry)
62
- })
63
- }
64
-
65
- // Vitest globalSetup entry point
66
- // - computes stable timestamp values and exposes them via env variables
67
- // - the report file itself is created lazily on first compareScreenshot call
68
- // - provides a callback to close the HTML report once tests are finished (if it was created)
69
- export function screenshotSetup() {
70
- const NOW = new Date()
71
- const fileTimestamp = reportTimestamp(NOW)
72
- const titleTimestamp = reportTimestamp(NOW, true)
73
-
74
- process.env.SCREENSHOT_REPORT_TIMESTAMP = fileTimestamp
75
- process.env.SCREENSHOT_REPORT_TITLE = titleTimestamp
76
-
77
- return () => {
78
- if (!existsSync(REPORT_PATH)) return
79
-
80
- const reportPath = readFileSync(REPORT_PATH, 'utf-8').trim()
81
- unlinkSync(REPORT_PATH)
82
-
83
- if (!reportPath) return
84
- if (!existsSync(reportPath)) return
85
-
86
- let footer = readFileSync(resolve(templatesDir, 'report-tail.html'), 'utf-8')
87
- footer = footer.replace('{{TIMESTAMP}}', new Date().toISOString())
88
- appendFileSync(reportPath, footer)
89
- console.log(`\n(nuxt-spec) Visual regression report available at:\nfile://${reportPath}`)
90
-
91
- if (!process.env.CI) {
92
- console.log('(nuxt-spec) Opening report in default browser...')
93
- const openCmd = platform() === 'darwin' ? 'open' : platform() === 'win32' ? 'start' : 'xdg-open'
94
- exec(`${openCmd} "${reportPath}"`, (err) => {
95
- if (err) {
96
- console.log('(nuxt-spec) Failed to automatically open report')
97
- }
98
- })
99
- }
100
-
101
- console.log('\n')
102
- }
103
- }
104
-
105
- // helper to keep user-provided targetDir inside the current project root
106
- export function resolveWithin(base: string, segment: string): string {
107
- const target = resolve(base, segment)
108
- if (target !== base && !target.startsWith(base + sep)) {
109
- throw new Error(`Invalid path: "${segment}" resolves outside of "${base}"`)
110
- }
111
- return target
112
- }
113
-
114
- // helper for bridging difference between Vitest PNG saving and fast-png encoding
115
- export function toRGBA(img: DecodedPng): Uint8Array {
116
- const { width, height, data, channels = 4 } = img
117
- if (channels === 4) return data as Uint8Array
118
- const pixels = width * height
119
- const rgba = new Uint8Array(pixels * 4)
120
- for (let i = 0; i < pixels; i++) {
121
- rgba[i * 4] = data[i * 3]
122
- rgba[i * 4 + 1] = data[i * 3 + 1]
123
- rgba[i * 4 + 2] = data[i * 3 + 2]
124
- rgba[i * 4 + 3] = 255
125
- }
126
- return rgba
127
- }
128
-
129
- // protection from parallel execution issues
130
- function withConcurrentLock<T>(fn: () => T): T {
131
- const start = Date.now()
132
-
133
- while (true) {
134
- try {
135
- // try acquiring the lock
136
- writeFileSync(REPORT_LOCK, String(process.pid), { flag: 'wx' })
137
- break
138
- } catch (error) {
139
- // we only expect "file already exists" error
140
- // otherwise it is an issue
141
- const code = (error as NodeJS.ErrnoException).code
142
- if (code !== 'EEXIST') throw error
143
-
144
- try {
145
- const lockAge = Date.now() - statSync(REPORT_LOCK).mtimeMs
146
- if (lockAge > 30_000) {
147
- // stale lock
148
- unlinkSync(REPORT_LOCK)
149
- continue
150
- }
151
- } catch {
152
- // lock disappeared between checks, retry acquisition
153
- }
154
-
155
- if (Date.now() - start > 10_000) {
156
- // not successful in 10 minutes, give up
157
- throw new Error('Timed out while waiting for screenshot report lock', {
158
- cause: error,
159
- })
160
- }
161
-
162
- // sleep before next attempt
163
- Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, 25)
164
- }
165
- }
166
-
167
- try {
168
- return fn()
169
- } finally {
170
- try {
171
- unlinkSync(REPORT_LOCK)
172
- } catch {
173
- // lock file may already be removed
174
- }
175
- }
176
- }
177
-
178
- // timestamp string
179
- // separators=false produces YYYYMMDDHHMMSS for report file name
180
- // separators=true produces YYYY-MM-DD HH:MM:SS for report title
181
- function reportTimestamp(date: Date, separators = false): string {
182
- const pad2 = (n: number) => String(n).padStart(2, '0')
183
- const dateSeparator = separators ? '-' : ''
184
- const midSeparator = separators ? ' ' : ''
185
- const timeSeparator = separators ? ':' : ''
186
- return [
187
- date.getFullYear(),
188
- dateSeparator,
189
- pad2(date.getMonth() + 1),
190
- dateSeparator,
191
- pad2(date.getDate()),
192
- midSeparator,
193
- pad2(date.getHours()),
194
- timeSeparator,
195
- pad2(date.getMinutes()),
196
- timeSeparator,
197
- pad2(date.getSeconds()),
198
- ].join('')
199
- }
200
-
201
- // helper to escape a string for safe interpolation into the HTML report
202
- function escapeHtml(value: string): string {
203
- return value.replace(/[&<>"']/g, char => ({
204
- '&': '&amp;',
205
- '<': '&lt;',
206
- '>': '&gt;',
207
- '"': '&quot;',
208
- '\'': '&#39;',
209
- }[char] ?? char))
210
- }
1
+ import { exec } from 'node:child_process'
2
+ import { appendFileSync, existsSync, mkdirSync, readFileSync, statSync, unlinkSync, writeFileSync } from 'node:fs'
3
+ import { platform } from 'node:os'
4
+ import { resolve, sep } from 'node:path'
5
+ import { fileURLToPath, pathToFileURL } from 'node:url'
6
+ import type { DecodedPng } from 'fast-png'
7
+
8
+ const templatesDir = resolve(fileURLToPath(import.meta.url), '..')
9
+ const REPORT_ENTRY = readFileSync(resolve(templatesDir, 'report-entry.html'), 'utf-8')
10
+ const REPORT_PATH = resolve(process.cwd(), '.nuxt/.nuxt-spec-report-path')
11
+ const REPORT_LOCK = resolve(process.cwd(), '.nuxt/.nuxt-spec-report-lock')
12
+
13
+ // create report file on first call
14
+ // protected from parallel execution issues
15
+ export function ensureReportCreated(targetDir = 'test/e2e'): void {
16
+ withConcurrentLock(() => {
17
+ let reportPath: string
18
+
19
+ if (existsSync(REPORT_PATH)) {
20
+ // Keep exactly one shared report per test run; first writer wins.
21
+ reportPath = readFileSync(REPORT_PATH, 'utf-8').trim()
22
+ } else {
23
+ const root = process.cwd()
24
+ const dir = resolveWithin(root, targetDir)
25
+ const fileTimestamp = process.env.SCREENSHOT_REPORT_TIMESTAMP ?? reportTimestamp(new Date())
26
+ reportPath = resolve(dir, '__current__', `report-${fileTimestamp}.html`)
27
+ writeFileSync(REPORT_PATH, reportPath)
28
+ }
29
+
30
+ process.env.SCREENSHOT_REPORT_PATH = reportPath
31
+ if (!reportPath || existsSync(reportPath)) return
32
+
33
+ const titleTimestamp = process.env.SCREENSHOT_REPORT_TITLE ?? reportTimestamp(new Date(), true)
34
+ mkdirSync(resolve(reportPath, '..'), { recursive: true })
35
+
36
+ const template = readFileSync(resolve(templatesDir, 'report-head.html'), 'utf-8')
37
+ const report = template.replace('{{TIMESTAMP}}', titleTimestamp)
38
+ writeFileSync(reportPath, report)
39
+ })
40
+ }
41
+
42
+ // append a side-by-side baseline/actual comparison
43
+ // to the HTML report if the screenshots don't match
44
+ // protected from parallel execution issues
45
+ export function appendToReport(fileName: string, message: string, baseline: Uint8Array, actual: Uint8Array): void {
46
+ const baselineUri = `data:image/png;base64,${Buffer.from(baseline).toString('base64')}`
47
+ const actualUri = `data:image/png;base64,${Buffer.from(actual).toString('base64')}`
48
+
49
+ const entry = REPORT_ENTRY
50
+ .replace('{{FILE_NAME}}', escapeHtml(fileName))
51
+ .replace('{{MESSAGE}}', escapeHtml(message))
52
+ .replace('{{BASELINE_URI}}', baselineUri)
53
+ .replace('{{ACTUAL_URI}}', actualUri)
54
+
55
+ withConcurrentLock(() => {
56
+ const reportPath = process.env.SCREENSHOT_REPORT_PATH || (existsSync(REPORT_PATH)
57
+ ? readFileSync(REPORT_PATH, 'utf-8').trim()
58
+ : '')
59
+ if (!reportPath || !existsSync(reportPath)) return
60
+
61
+ appendFileSync(reportPath, entry)
62
+ })
63
+ }
64
+
65
+ // Vitest globalSetup entry point
66
+ // - computes stable timestamp values and exposes them via env variables
67
+ // - the report file itself is created lazily on first compareScreenshot call
68
+ // - provides a callback to close the HTML report once tests are finished (if it was created)
69
+ export function screenshotSetup() {
70
+ const NOW = new Date()
71
+ const fileTimestamp = reportTimestamp(NOW)
72
+ const titleTimestamp = reportTimestamp(NOW, true)
73
+
74
+ process.env.SCREENSHOT_REPORT_TIMESTAMP = fileTimestamp
75
+ process.env.SCREENSHOT_REPORT_TITLE = titleTimestamp
76
+
77
+ return () => {
78
+ if (!existsSync(REPORT_PATH)) return
79
+
80
+ const reportPath = readFileSync(REPORT_PATH, 'utf-8').trim()
81
+ unlinkSync(REPORT_PATH)
82
+
83
+ if (!reportPath) return
84
+ if (!existsSync(reportPath)) return
85
+
86
+ let footer = readFileSync(resolve(templatesDir, 'report-tail.html'), 'utf-8')
87
+ footer = footer.replace('{{TIMESTAMP}}', new Date().toISOString())
88
+ appendFileSync(reportPath, footer)
89
+ console.log(`\n(nuxt-spec) Visual regression report available at:\n${pathToFileURL(reportPath).href}`)
90
+
91
+ if (!process.env.CI) {
92
+ console.log('(nuxt-spec) Opening report in default browser...')
93
+ const openCmd
94
+ = platform() === 'darwin'
95
+ ? `open "${reportPath}"`
96
+ : platform() === 'win32'
97
+ ? `start "" "${reportPath}"`
98
+ : `xdg-open "${reportPath}"`
99
+ exec(openCmd, (err) => {
100
+ if (err) {
101
+ console.log('(nuxt-spec) Failed to automatically open report')
102
+ }
103
+ })
104
+ }
105
+
106
+ console.log('\n')
107
+ }
108
+ }
109
+
110
+ // helper to keep user-provided targetDir inside the current project root
111
+ export function resolveWithin(base: string, segment: string): string {
112
+ const target = resolve(base, segment)
113
+ if (target !== base && !target.startsWith(base + sep)) {
114
+ throw new Error(`Invalid path: "${segment}" resolves outside of "${base}"`)
115
+ }
116
+ return target
117
+ }
118
+
119
+ // helper for bridging difference between Vitest PNG saving and fast-png encoding
120
+ export function toRGBA(img: DecodedPng): Uint8Array {
121
+ const { width, height, data, channels = 4 } = img
122
+ if (channels === 4) return data as Uint8Array
123
+ const pixels = width * height
124
+ const rgba = new Uint8Array(pixels * 4)
125
+ for (let i = 0; i < pixels; i++) {
126
+ const src = i * 3
127
+ rgba[i * 4 + 0] = data[src + 0] ?? 0
128
+ rgba[i * 4 + 1] = data[src + 1] ?? 0
129
+ rgba[i * 4 + 2] = data[src + 2] ?? 0
130
+ rgba[i * 4 + 3] = 255
131
+ }
132
+ return rgba
133
+ }
134
+
135
+ // protection from parallel execution issues
136
+ function withConcurrentLock<T>(fn: () => T): T {
137
+ const start = Date.now()
138
+
139
+ while (true) {
140
+ try {
141
+ // try acquiring the lock
142
+ writeFileSync(REPORT_LOCK, String(process.pid), { flag: 'wx' })
143
+ break
144
+ } catch (error) {
145
+ // we only expect "file already exists" error
146
+ // otherwise it is an issue
147
+ const code = (error as NodeJS.ErrnoException).code
148
+ if (code !== 'EEXIST') throw error
149
+
150
+ try {
151
+ const lockAge = Date.now() - statSync(REPORT_LOCK).mtimeMs
152
+ if (lockAge > 30_000) {
153
+ // stale lock
154
+ unlinkSync(REPORT_LOCK)
155
+ continue
156
+ }
157
+ } catch {
158
+ // lock disappeared between checks, retry acquisition
159
+ }
160
+
161
+ if (Date.now() - start > 10_000) {
162
+ // not successful in 10 minutes, give up
163
+ throw new Error('Timed out while waiting for screenshot report lock', {
164
+ cause: error,
165
+ })
166
+ }
167
+
168
+ // sleep before next attempt
169
+ Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, 25)
170
+ }
171
+ }
172
+
173
+ try {
174
+ return fn()
175
+ } finally {
176
+ try {
177
+ unlinkSync(REPORT_LOCK)
178
+ } catch {
179
+ // lock file may already be removed
180
+ }
181
+ }
182
+ }
183
+
184
+ // timestamp string
185
+ // separators=false produces YYYYMMDDHHMMSS for report file name
186
+ // separators=true produces YYYY-MM-DD HH:MM:SS for report title
187
+ function reportTimestamp(date: Date, separators = false): string {
188
+ const pad2 = (n: number) => String(n).padStart(2, '0')
189
+ const dateSeparator = separators ? '-' : ''
190
+ const midSeparator = separators ? ' ' : ''
191
+ const timeSeparator = separators ? ':' : ''
192
+ return [
193
+ date.getFullYear(),
194
+ dateSeparator,
195
+ pad2(date.getMonth() + 1),
196
+ dateSeparator,
197
+ pad2(date.getDate()),
198
+ midSeparator,
199
+ pad2(date.getHours()),
200
+ timeSeparator,
201
+ pad2(date.getMinutes()),
202
+ timeSeparator,
203
+ pad2(date.getSeconds()),
204
+ ].join('')
205
+ }
206
+
207
+ // helper to escape a string for safe interpolation into the HTML report
208
+ function escapeHtml(value: string): string {
209
+ return value.replace(/[&<>"']/g, char => ({
210
+ '&': '&amp;',
211
+ '<': '&lt;',
212
+ '>': '&gt;',
213
+ '"': '&quot;',
214
+ '\'': '&#39;',
215
+ }[char] ?? char))
216
+ }