feat: expose deviceDetails in healthcheck endpoint for responsive capture (#2112)

* feat: add deviceDetails to healthcheck endpoint and SDK

- Export complete deviceDetails object from /percy/healthcheck endpoint
- Store deviceDetails in percy object in sdk-utils for easy access
- Previously only device widths were available, now full device info is accessible

* test: add tests for deviceDetails in healthcheck and SDK

- Add deviceDetails to expected healthcheck response validation
- Test deviceDetails is properly stored in percy object after isPercyEnabled
- Add test cases for both empty and populated deviceDetails scenarios
- Validate deviceDetails integration in /test/api/config test

* fixing tests

Author: bhokaremoin

packages/core/src/api.js

@@ -89,6 +89,7 @@ export function createPercyServer(percy, port) {
         // This will only be used if width is not passed in options
         config: percy.config.snapshot.widths
       },
+      deviceDetails: percy.deviceDetails || [],
       success: true,
       type: percy.client.tokenType()
     }))
@@ -216,7 +217,8 @@ export function createPercyServer(percy, port) {
         percy.testing.version = body;
       } else if (cmd === 'config') {
         percy.config.snapshot.widths = body.config;
-        percy.deviceDetails = body.mobile?.map((w) => { return { width: w }; });
+        // Support setting deviceDetails directly or deriving from mobile widths
+        percy.deviceDetails = body.deviceDetails || body.mobile?.map((w) => { return { width: w }; });
         percy.config.snapshot.responsiveSnapshotCapture = !!body.responsive;
         percy.config.percy.deferUploads = !!body.deferUploads;
       } else if (cmd === 'error' || cmd === 'disconnect') {

packages/core/test/api.test.js

@@ -61,6 +61,7 @@ describe('API Server', () => {
       loglevel: 'info',
       config: PercyConfig.getDefaults(),
       widths: { mobile: [], config: PercyConfig.getDefaults().snapshot.widths },
+      deviceDetails: [],
       build: {
         id: '123',
         number: 1,
@@ -88,7 +89,8 @@ describe('API Server', () => {
       widths: {
         mobile: [390],
         config: [1000]
-      }
+      },
+      deviceDetails: [{ width: 390, devicePixelRatio: 2 }]
     }));
   });
 
@@ -741,21 +743,24 @@ describe('API Server', () => {
     });
 
     it('can manipulate the config widths via /test/api/config', async () => {
-      let { widths, config } = await get('/percy/healthcheck');
+      let { widths, config, deviceDetails } = await get('/percy/healthcheck');
       expect(widths.config).toEqual([375, 1280]);
       expect(widths.mobile).toEqual([]);
+      expect(deviceDetails).toEqual([]);
 
       await post('/test/api/config', { config: [390], deferUploads: true });
-      ({ widths, config } = await get('/percy/healthcheck'));
+      ({ widths, config, deviceDetails } = await get('/percy/healthcheck'));
       expect(widths.config).toEqual([390]);
       expect(config.snapshot.responsiveSnapshotCapture).toEqual(false);
       expect(config.percy.deferUploads).toEqual(true);
+      expect(deviceDetails).toEqual([]);
 
       await post('/test/api/config', { config: [375, 1280], mobile: [456], responsive: true });
-      ({ widths, config } = await get('/percy/healthcheck'));
+      ({ widths, config, deviceDetails } = await get('/percy/healthcheck'));
       expect(widths.mobile).toEqual([456]);
       expect(config.snapshot.responsiveSnapshotCapture).toEqual(true);
       expect(config.percy.deferUploads).toEqual(false);
+      expect(deviceDetails).toEqual([{ width: 456 }]);
     });
 
     it('can make endpoints return server errors via /test/api/error', async () => {

packages/sdk-utils/src/percy-enabled.js

@@ -16,6 +16,7 @@ export async function isPercyEnabled() {
       percy.enabled = true;
       percy.type = response.body.type;
       percy.widths = response.body.widths;
+      percy.deviceDetails = response.body.deviceDetails;
     } catch (e) {
       percy.enabled = false;
       error = e;

packages/sdk-utils/test/helpers.js

@@ -7,6 +7,7 @@ const helpers = {
     delete utils.percy.build;
     delete utils.percy.enabled;
     delete utils.percy.domScript;
+    delete utils.percy.deviceDetails;
     delete utils.logger.log.history;
     delete utils.logger.loglevel.lvl;
     delete process.env.PERCY_LOGLEVEL;

packages/sdk-utils/test/index.test.js

@@ -66,6 +66,10 @@ describe('SDK Utils', () => {
         expect(percy.widths).toHaveProperty('config', [375, 1280]);
         expect(percy.widths).toHaveProperty('mobile', []);
       });
+
+      it('contains percy deviceDetails', () => {
+        expect(percy.deviceDetails).toEqual([]);
+      });
     });
   });
 
@@ -117,6 +121,25 @@ describe('SDK Utils', () => {
       await expectAsync(utils.postSnapshot({})).toBeResolved();
       await expectAsync(isPercyEnabled()).toBeResolvedTo(false);
     });
+
+    it('stores deviceDetails when populated', async () => {
+      // Set up deviceDetails via test config
+      await helpers.test('config', { mobile: [390, 456] });
+
+      // Reset and refetch healthcheck data
+      utils.percy.enabled = null;
+      await expectAsync(isPercyEnabled()).toBeResolvedTo(true);
+
+      expect(utils.percy.deviceDetails).toEqual([
+        { width: 390 },
+        { width: 456 }
+      ]);
+
+      // Cleanup: reset deviceDetails back to empty
+      await helpers.test('config', { config: [375, 1280] });
+      utils.percy.enabled = null;
+      utils.percy.deviceDetails = undefined;
+    });
   });
 
   describe('waitForPercyIdle()', () => {