@vizzly-testing/cli 0.19.0 → 0.19.1

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.
@@ -12,13 +12,11 @@ import { sendError, sendServiceUnavailable, sendSuccess } from '../middleware/re
12
12
  * @param {Object} context - Router context
13
13
  * @param {Object} context.screenshotHandler - Screenshot handler
14
14
  * @param {Object} context.tddService - TDD service for baseline downloads
15
- * @param {Object} context.authService - Auth service for OAuth requests
16
15
  * @returns {Function} Route handler
17
16
  */
18
17
  export function createBaselineRouter({
19
18
  screenshotHandler,
20
- tddService,
21
- authService
19
+ tddService
22
20
  }) {
23
21
  return async function handleBaselineRoute(req, res, pathname) {
24
22
  // Accept a single screenshot as baseline
@@ -96,49 +94,16 @@ export function createBaselineRouter({
96
94
  return true;
97
95
  }
98
96
  try {
99
- const body = await parseJsonBody(req);
100
- const {
101
- buildId,
102
- organizationSlug,
103
- projectSlug
97
+ let body = await parseJsonBody(req);
98
+ let {
99
+ buildId
104
100
  } = body;
105
101
  if (!buildId) {
106
102
  sendError(res, 400, 'buildId is required');
107
103
  return true;
108
104
  }
109
105
  output.info(`Downloading baselines from build ${buildId}...`);
110
-
111
- // If organizationSlug and projectSlug are provided, use OAuth-based download
112
- if (organizationSlug && projectSlug && authService) {
113
- try {
114
- const result = await tddService.downloadBaselinesWithAuth(buildId, organizationSlug, projectSlug, authService);
115
- sendSuccess(res, {
116
- success: true,
117
- message: `Baselines downloaded from build ${buildId}`,
118
- ...result
119
- });
120
- return true;
121
- } catch (authError) {
122
- // Log the OAuth error with details
123
- output.warn(`OAuth download failed (org=${organizationSlug}, project=${projectSlug}): ${authError.message}`);
124
-
125
- // If the error is a 404, it's likely the build doesn't belong to the project
126
- // or the project/org is incorrect - provide a helpful error
127
- if (authError.message?.includes('404')) {
128
- sendError(res, 404, `Build not found or does not belong to project "${projectSlug}" in organization "${organizationSlug}". ` + `Please verify the build exists and you have access to it.`);
129
- return true;
130
- }
131
-
132
- // For auth errors, try API token fallback
133
- if (!authError.message?.includes('401')) {
134
- // For other errors, don't fall through - report them directly
135
- throw authError;
136
- }
137
- }
138
- }
139
-
140
- // Fall back to API token-based download (when no OAuth info or OAuth auth failed)
141
- const result = await tddService.downloadBaselines('test',
106
+ let result = await tddService.downloadBaselines('test',
142
107
  // environment
143
108
  null,
144
109
  // branch (not needed when buildId is specified)
@@ -122,6 +122,16 @@ export class ApiService {
122
122
  return this.request(endpoint);
123
123
  }
124
124
 
125
+ /**
126
+ * Get TDD baselines for a build
127
+ * Returns screenshots with pre-computed filenames for baseline download
128
+ * @param {string} buildId - Build ID
129
+ * @returns {Promise<Object>} { build, screenshots, signatureProperties }
130
+ */
131
+ async getTddBaselines(buildId) {
132
+ return this.request(`/api/sdk/builds/${buildId}/tdd-baselines`);
133
+ }
134
+
125
135
  /**
126
136
  * Get comparison information
127
137
  * @param {string} comparisonId - Comparison ID
@@ -178,13 +178,8 @@ export class TddService {
178
178
  try {
179
179
  let baselineBuild;
180
180
  if (buildId) {
181
- // Use specific build ID - get it with screenshots in one call
182
- const apiResponse = await this.api.getBuild(buildId, 'screenshots');
183
-
184
- // API response available in verbose mode
185
- output.debug('tdd', 'fetched baseline build', {
186
- id: apiResponse?.build?.id || apiResponse?.id
187
- });
181
+ // Use the tdd-baselines endpoint which returns pre-computed filenames
182
+ let apiResponse = await this.api.getTddBaselines(buildId);
188
183
  if (!apiResponse) {
189
184
  throw new Error(`Build ${buildId} not found or API returned null`);
190
185
  }
@@ -196,23 +191,19 @@ export class TddService {
196
191
  output.info(`Using custom signature properties: ${this.signatureProperties.join(', ')}`);
197
192
  }
198
193
  }
199
-
200
- // Handle wrapped response format
201
- baselineBuild = apiResponse.build || apiResponse;
202
- if (!baselineBuild.id) {
203
- output.warn(`⚠️ Build response structure: ${JSON.stringify(Object.keys(apiResponse))}`);
204
- output.warn(`⚠️ Extracted build keys: ${JSON.stringify(Object.keys(baselineBuild))}`);
205
- }
194
+ baselineBuild = apiResponse.build;
206
195
 
207
196
  // Check build status and warn if it's not successful
208
197
  if (baselineBuild.status === 'failed') {
209
198
  output.warn(`⚠️ Build ${buildId} is marked as FAILED - falling back to local baselines`);
210
199
  output.info(`💡 To use remote baselines, specify a successful build ID instead`);
211
- // Fall back to local baseline logic
212
200
  return await this.handleLocalBaselines();
213
201
  } else if (baselineBuild.status !== 'completed') {
214
202
  output.warn(`⚠️ Build ${buildId} has status: ${baselineBuild.status} (expected: completed)`);
215
203
  }
204
+
205
+ // Attach screenshots to build for unified processing below
206
+ baselineBuild.screenshots = apiResponse.screenshots;
216
207
  } else if (comparisonId) {
217
208
  // Use specific comparison ID - download only this comparison's baseline screenshot
218
209
  output.info(`Using comparison: ${comparisonId}`);
@@ -262,6 +253,11 @@ export class TddService {
262
253
  }
263
254
  output.info(`📊 Extracted properties for signature: ${JSON.stringify(screenshotProperties)}`);
264
255
 
256
+ // Generate filename locally for comparison path (we don't have API-provided filename)
257
+ const screenshotName = comparison.baseline_name || comparison.current_name;
258
+ const signature = generateScreenshotSignature(screenshotName, screenshotProperties, this.signatureProperties);
259
+ const filename = generateBaselineFilename(screenshotName, signature);
260
+
265
261
  // For a specific comparison, we only download that one baseline screenshot
266
262
  // Create a mock build structure with just this one screenshot
267
263
  baselineBuild = {
@@ -269,10 +265,11 @@ export class TddService {
269
265
  name: `Comparison ${comparisonId.substring(0, 8)}`,
270
266
  screenshots: [{
271
267
  id: comparison.baseline_screenshot.id,
272
- name: comparison.baseline_name || comparison.current_name,
268
+ name: screenshotName,
273
269
  original_url: baselineUrl,
274
270
  metadata: screenshotProperties,
275
- properties: screenshotProperties
271
+ properties: screenshotProperties,
272
+ filename: filename // Generated locally for comparison path
276
273
  }]
277
274
  };
278
275
  } else {
@@ -288,18 +285,27 @@ export class TddService {
288
285
  output.info('💡 Run a build in normal mode first to create baselines');
289
286
  return null;
290
287
  }
291
- baselineBuild = builds.data[0];
288
+
289
+ // Use getTddBaselines to get screenshots with pre-computed filenames
290
+ const apiResponse = await this.api.getTddBaselines(builds.data[0].id);
291
+ if (!apiResponse) {
292
+ throw new Error(`Build ${builds.data[0].id} not found or API returned null`);
293
+ }
294
+
295
+ // Extract signature properties from API response (for variant support)
296
+ if (apiResponse.signatureProperties && Array.isArray(apiResponse.signatureProperties)) {
297
+ this.signatureProperties = apiResponse.signatureProperties;
298
+ if (this.signatureProperties.length > 0) {
299
+ output.info(`Using custom signature properties: ${this.signatureProperties.join(', ')}`);
300
+ }
301
+ }
302
+ baselineBuild = apiResponse.build;
303
+ baselineBuild.screenshots = apiResponse.screenshots;
292
304
  }
293
305
 
294
- // For specific buildId, we already have screenshots
306
+ // For both buildId and getBuilds paths, we now have screenshots with filenames
295
307
  // For comparisonId, we created a mock build with just the one screenshot
296
- // Otherwise, get build details with screenshots
297
308
  let buildDetails = baselineBuild;
298
- if (!buildId && !comparisonId) {
299
- // Get build details with screenshots for non-buildId/non-comparisonId cases
300
- const actualBuildId = baselineBuild.id;
301
- buildDetails = await this.api.getBuild(actualBuildId, 'screenshots');
302
- }
303
309
  if (!buildDetails.screenshots || buildDetails.screenshots.length === 0) {
304
310
  output.warn('⚠️ No screenshots found in baseline build');
305
311
  return null;
@@ -308,12 +314,12 @@ export class TddService {
308
314
  output.info(`Checking ${colors.cyan(buildDetails.screenshots.length)} baseline screenshots...`);
309
315
 
310
316
  // Check existing baseline metadata for efficient SHA comparison
311
- const existingBaseline = await this.loadBaseline();
312
- const existingShaMap = new Map();
317
+ let existingBaseline = await this.loadBaseline();
318
+ let existingShaMap = new Map();
313
319
  if (existingBaseline) {
314
320
  existingBaseline.screenshots.forEach(s => {
315
- if (s.sha256 && s.signature) {
316
- existingShaMap.set(s.signature, s.sha256);
321
+ if (s.sha256 && s.filename) {
322
+ existingShaMap.set(s.filename, s.sha256);
317
323
  }
318
324
  });
319
325
  }
@@ -338,26 +344,21 @@ export class TddService {
338
344
  continue;
339
345
  }
340
346
 
341
- // Generate signature for baseline matching (same as compareScreenshot)
342
- // Build properties object with top-level viewport_width and browser
343
- // These are returned as top-level fields from the API, not inside metadata
344
- const properties = validateScreenshotProperties({
345
- viewport_width: screenshot.viewport_width,
346
- browser: screenshot.browser,
347
- ...(screenshot.metadata || screenshot.properties || {})
348
- });
349
- const signature = generateScreenshotSignature(sanitizedName, properties, this.signatureProperties);
350
-
351
- // Use API-provided filename if available, otherwise generate hash-based filename
352
- // Both return the full filename with .png extension
353
- const filename = screenshot.filename || generateBaselineFilename(sanitizedName, signature);
354
- const imagePath = safePath(this.baselinePath, filename);
347
+ // Use API-provided filename (required from tdd-baselines endpoint)
348
+ // This ensures filenames match between cloud and local TDD
349
+ let filename = screenshot.filename;
350
+ if (!filename) {
351
+ output.warn(`⚠️ Screenshot ${sanitizedName} has no filename from API - skipping`);
352
+ errorCount++;
353
+ continue;
354
+ }
355
+ let imagePath = safePath(this.baselinePath, filename);
355
356
 
356
- // Check if we already have this file with the same SHA (using metadata)
357
+ // Check if we already have this file with the same SHA
357
358
  if (existsSync(imagePath) && screenshot.sha256) {
358
- const storedSha = existingShaMap.get(signature);
359
+ let storedSha = existingShaMap.get(filename);
359
360
  if (storedSha === screenshot.sha256) {
360
- downloadedCount++; // Count as "downloaded" since we have it
361
+ downloadedCount++;
361
362
  skippedCount++;
362
363
  continue;
363
364
  }
@@ -375,9 +376,7 @@ export class TddService {
375
376
  sanitizedName,
376
377
  imagePath,
377
378
  downloadUrl,
378
- signature,
379
- filename,
380
- properties
379
+ filename
381
380
  });
382
381
  }
383
382
 
@@ -458,41 +457,23 @@ export class TddService {
458
457
  approvalStatus: baselineBuild.approval_status,
459
458
  completedAt: baselineBuild.completed_at
460
459
  },
461
- screenshots: buildDetails.screenshots.map(s => {
462
- let sanitizedName;
463
- try {
464
- sanitizedName = sanitizeScreenshotName(s.name);
465
- } catch (error) {
466
- output.warn(`Screenshot name sanitization failed for '${s.name}': ${error.message}`);
467
- return null; // Skip invalid screenshots
460
+ screenshots: buildDetails.screenshots.filter(s => s.filename) // Only include screenshots with filenames
461
+ .map(s => ({
462
+ name: sanitizeScreenshotName(s.name),
463
+ originalName: s.name,
464
+ sha256: s.sha256,
465
+ id: s.id,
466
+ filename: s.filename,
467
+ path: safePath(this.baselinePath, s.filename),
468
+ browser: s.browser,
469
+ viewport_width: s.viewport_width,
470
+ originalUrl: s.original_url,
471
+ fileSize: s.file_size_bytes,
472
+ dimensions: {
473
+ width: s.width,
474
+ height: s.height
468
475
  }
469
-
470
- // Build properties object with top-level viewport_width and browser
471
- // These are returned as top-level fields from the API, not inside metadata
472
- const properties = validateScreenshotProperties({
473
- viewport_width: s.viewport_width,
474
- browser: s.browser,
475
- ...(s.metadata || s.properties || {})
476
- });
477
- const signature = generateScreenshotSignature(sanitizedName, properties, this.signatureProperties);
478
- const filename = generateBaselineFilename(sanitizedName, signature);
479
- return {
480
- name: sanitizedName,
481
- originalName: s.name,
482
- sha256: s.sha256,
483
- // Store remote SHA for quick comparison
484
- id: s.id,
485
- properties: properties,
486
- path: safePath(this.baselinePath, filename),
487
- signature: signature,
488
- originalUrl: s.original_url,
489
- fileSize: s.file_size_bytes,
490
- dimensions: {
491
- width: s.width,
492
- height: s.height
493
- }
494
- };
495
- }).filter(Boolean) // Remove null entries from invalid screenshots
476
+ }))
496
477
  };
497
478
  const metadataPath = join(this.baselinePath, 'metadata.json');
498
479
  writeFileSync(metadataPath, JSON.stringify(this.baselineData, null, 2));
@@ -685,180 +666,6 @@ export class TddService {
685
666
  };
686
667
  }
687
668
 
688
- /**
689
- * Download baselines using OAuth authentication
690
- * Used when user is logged in via device flow but no API token is configured
691
- * @param {string} buildId - Build ID to download from
692
- * @param {string} organizationSlug - Organization slug
693
- * @param {string} projectSlug - Project slug
694
- * @param {Object} authService - Auth service for OAuth requests
695
- * @returns {Promise<Object>} Download result
696
- */
697
- async downloadBaselinesWithAuth(buildId, organizationSlug, projectSlug, authService) {
698
- output.info(`Downloading baselines using OAuth from build ${buildId}...`);
699
- try {
700
- // Fetch build with screenshots via OAuth endpoint
701
- const endpoint = `/api/build/${projectSlug}/${buildId}/tdd-baselines`;
702
- const response = await authService.authenticatedRequest(endpoint, {
703
- method: 'GET',
704
- headers: {
705
- 'X-Organization': organizationSlug
706
- }
707
- });
708
- const {
709
- build,
710
- screenshots,
711
- signatureProperties
712
- } = response;
713
-
714
- // Extract signature properties from API response (for variant support)
715
- if (signatureProperties && Array.isArray(signatureProperties)) {
716
- this.signatureProperties = signatureProperties;
717
- if (this.signatureProperties.length > 0) {
718
- output.info(`Using custom signature properties: ${this.signatureProperties.join(', ')}`);
719
- }
720
- }
721
- if (!screenshots || screenshots.length === 0) {
722
- output.warn('⚠️ No screenshots found in build');
723
- return {
724
- downloadedCount: 0,
725
- skippedCount: 0,
726
- errorCount: 0
727
- };
728
- }
729
- output.info(`Using baseline from build: ${colors.cyan(build.name || 'Unknown')} (${build.id})`);
730
- output.info(`Checking ${colors.cyan(screenshots.length)} baseline screenshots...`);
731
-
732
- // Load existing baseline metadata for SHA comparison
733
- const existingBaseline = await this.loadBaseline();
734
- const existingShaMap = new Map();
735
- if (existingBaseline) {
736
- existingBaseline.screenshots.forEach(s => {
737
- if (s.sha256 && s.signature) {
738
- existingShaMap.set(s.signature, s.sha256);
739
- }
740
- });
741
- }
742
-
743
- // Process and download screenshots
744
- let downloadedCount = 0;
745
- let skippedCount = 0;
746
- let errorCount = 0;
747
- const downloadedScreenshots = [];
748
- for (const screenshot of screenshots) {
749
- let sanitizedName;
750
- try {
751
- sanitizedName = sanitizeScreenshotName(screenshot.name);
752
- } catch (error) {
753
- output.warn(`Screenshot name sanitization failed for '${screenshot.name}': ${error.message}`);
754
- errorCount++;
755
- continue;
756
- }
757
-
758
- // Build properties object with top-level viewport_width and browser
759
- // These are returned as top-level fields from the API, not inside metadata
760
- const properties = validateScreenshotProperties({
761
- viewport_width: screenshot.viewport_width,
762
- browser: screenshot.browser,
763
- ...screenshot.metadata
764
- });
765
- const signature = generateScreenshotSignature(sanitizedName, properties, this.signatureProperties);
766
- // Use API-provided filename if available, otherwise generate hash-based filename
767
- const filename = screenshot.filename || generateBaselineFilename(sanitizedName, signature);
768
- const filePath = safePath(this.baselinePath, filename);
769
-
770
- // Check if we can skip via SHA comparison
771
- if (screenshot.sha256 && existingShaMap.get(signature) === screenshot.sha256) {
772
- skippedCount++;
773
- downloadedScreenshots.push({
774
- name: sanitizedName,
775
- sha256: screenshot.sha256,
776
- signature,
777
- path: filePath,
778
- properties
779
- });
780
- continue;
781
- }
782
-
783
- // Download the screenshot
784
- const downloadUrl = screenshot.original_url;
785
- if (!downloadUrl) {
786
- output.warn(`⚠️ No download URL for screenshot: ${sanitizedName}`);
787
- errorCount++;
788
- continue;
789
- }
790
- try {
791
- const imageResponse = await fetchWithTimeout(downloadUrl, {}, 30000);
792
- if (!imageResponse.ok) {
793
- throw new Error(`HTTP ${imageResponse.status}`);
794
- }
795
- const imageBuffer = Buffer.from(await imageResponse.arrayBuffer());
796
-
797
- // Calculate SHA256 of downloaded content
798
- const sha256 = crypto.createHash('sha256').update(imageBuffer).digest('hex');
799
- writeFileSync(filePath, imageBuffer);
800
- downloadedCount++;
801
- downloadedScreenshots.push({
802
- name: sanitizedName,
803
- sha256,
804
- signature,
805
- path: filePath,
806
- properties,
807
- originalUrl: downloadUrl
808
- });
809
- } catch (error) {
810
- output.warn(`⚠️ Failed to download ${sanitizedName}: ${error.message}`);
811
- errorCount++;
812
- }
813
- }
814
-
815
- // Store baseline metadata
816
- this.baselineData = {
817
- buildId: build.id,
818
- buildName: build.name,
819
- branch: build.branch,
820
- threshold: this.threshold,
821
- signatureProperties: this.signatureProperties,
822
- // Store for TDD comparison
823
- screenshots: downloadedScreenshots
824
- };
825
- const metadataPath = join(this.baselinePath, 'metadata.json');
826
- writeFileSync(metadataPath, JSON.stringify(this.baselineData, null, 2));
827
-
828
- // Save baseline build metadata
829
- const baselineMetadataPath = safePath(this.workingDir, '.vizzly', 'baseline-metadata.json');
830
- writeFileSync(baselineMetadataPath, JSON.stringify({
831
- buildId: build.id,
832
- buildName: build.name,
833
- branch: build.branch,
834
- commitSha: build.commit_sha,
835
- downloadedAt: new Date().toISOString()
836
- }, null, 2));
837
-
838
- // Summary
839
- if (skippedCount > 0 && downloadedCount === 0) {
840
- output.info(`✅ All ${skippedCount} baselines up-to-date (matching local SHA)`);
841
- } else if (skippedCount > 0) {
842
- output.info(`✅ Downloaded ${downloadedCount} new screenshots, ${skippedCount} already up-to-date`);
843
- } else {
844
- output.info(`✅ Downloaded ${downloadedCount}/${screenshots.length} screenshots successfully`);
845
- }
846
- if (errorCount > 0) {
847
- output.warn(`⚠️ ${errorCount} screenshots failed to download`);
848
- }
849
- return {
850
- downloadedCount,
851
- skippedCount,
852
- errorCount,
853
- buildId: build.id,
854
- buildName: build.name
855
- };
856
- } catch (error) {
857
- output.error(`❌ OAuth download failed: ${error.message} (org=${organizationSlug}, project=${projectSlug}, build=${buildId})`);
858
- throw error;
859
- }
860
- }
861
-
862
669
  /**
863
670
  * Handle local baseline logic (either load existing or prepare for new baselines)
864
671
  * @returns {Promise<Object|null>} Baseline data or null if no local baselines exist
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vizzly-testing/cli",
3
- "version": "0.19.0",
3
+ "version": "0.19.1",
4
4
  "description": "Visual review platform for UI developers and designers",
5
5
  "keywords": [
6
6
  "visual-testing",