From 337f579155a5dfb70f6cacee7f6a1ae6068c6fa2 Mon Sep 17 00:00:00 2001 From: Pradum Kumar Date: Thu, 6 Jun 2024 10:59:15 +0530 Subject: [PATCH] supporting PERCY_DO_N0T_CAPTURE_RESPONSIVE_ASSETS env variable to disable fetching of responsive assets (#1610) * supporting PERCY_DISABLE_DEVICE_DETAIL_FETCH env variable to disable device detail fetch * removing single test * renaming env variable * renaming env variable --- packages/core/src/percy.js | 6 ++- packages/core/test/discovery.test.js | 80 ++++++++++++++++++++++++++-- 2 files changed, 81 insertions(+), 5 deletions(-) diff --git a/packages/core/src/percy.js b/packages/core/src/percy.js index 63653c7aa..7afb1b5af 100644 --- a/packages/core/src/percy.js +++ b/packages/core/src/percy.js @@ -164,7 +164,11 @@ export class Percy { if (!this.skipDiscovery) yield this.#discovery.start(); // start a local API server for SDK communication if (this.server) yield this.server.listen(); - if (this.projectType === 'web') this.deviceDetails = yield this.client.getDeviceDetails(this.build?.id); + if (this.projectType === 'web') { + if (!process.env.PERCY_DO_NOT_CAPTURE_RESPONSIVE_ASSETS || process.env.PERCY_DO_NOT_CAPTURE_RESPONSIVE_ASSETS !== 'true') { + this.deviceDetails = yield this.client.getDeviceDetails(this.build?.id); + } + } const snapshotType = this.projectType === 'web' ? 'snapshot' : 'comparison'; this.syncQueue = new WaitForJob(snapshotType, this); // log and mark this instance as started diff --git a/packages/core/test/discovery.test.js b/packages/core/test/discovery.test.js index c3849d544..a0d50d14a 100644 --- a/packages/core/test/discovery.test.js +++ b/packages/core/test/discovery.test.js @@ -2092,12 +2092,12 @@ describe('Discovery', () => { const fetchUpstream = async(request) => { return await fetch(request.clone()); } - + self.addEventListener('fetch', (event) => { const { request } = event event.respondWith(fetchUpstream(request)); }); - + self.addEventListener("activate", (event) => { event.waitUntil(clients.claim()); }); @@ -2107,9 +2107,9 @@ describe('Discovery', () => { const registerServiceWorker = async () => { await navigator.serviceWorker.register('sw.js',{ scope: './', }); }; - + await registerServiceWorker(); - + // create and insert image element which will be intercepted and resolved by service worker // adding a sleep of 1s for service worker to get activated await new Promise(r => setTimeout(r, 1000)); @@ -2254,6 +2254,9 @@ describe('Discovery', () => { }); describe('Capture responsive assets =>', () => { + afterEach(() => { + delete process.env.PERCY_DO_NOT_CAPTURE_RESPONSIVE_ASSETS; + }); it('should capture js based assets', async () => { api.reply('/discovery/device-details?build_id=123', () => [200, { data: [{ width: 375, deviceScaleFactor: 2 }, { width: 390, deviceScaleFactor: 3 }] }]); // stop current instance to create a new one @@ -2324,6 +2327,75 @@ describe('Discovery', () => { })); }); + it('should not capture js based assets and returns default', async () => { + process.env.PERCY_DO_NOT_CAPTURE_RESPONSIVE_ASSETS = 'true'; + api.reply('/discovery/device-details?build_id=123', () => [200, { data: [{ width: 375, deviceScaleFactor: 2 }, { width: 390, deviceScaleFactor: 3 }] }]); + // stop current instance to create a new one + await percy.stop(); + percy = await Percy.start({ + projectType: 'web', + token: 'PERCY_TOKEN', + snapshot: { widths: [1000] }, + discovery: { concurrency: 1 } + }); + let responsiveDOM = dedent` + + + + +

Responsive Images Example

+ Responsive Image + + + + `; + + server.reply('/', () => [200, 'text/html', responsiveDOM]); + server.reply('/default.jpg', () => [200, 'image/jpg', pixel]); + server.reply('/small.jpg', () => [200, 'image/jpg', pixel]); + server.reply('/medium.jpg', () => [200, 'image/jpg', pixel]); + server.reply('/large.jpg', () => [200, 'image/jpg', pixel]); + + await percy.snapshot({ + name: 'image srcset', + url: 'http://localhost:8000', + widths: [1024] + }); + + await percy.idle(); + + let resource = path => jasmine.objectContaining({ + attributes: jasmine.objectContaining({ + 'resource-url': `http://localhost:8000${path}` + }) + }); + + expect(captured[0]).toEqual(jasmine.arrayContaining([ + resource('/default.jpg') + ])); + + expect(captured[0]).not.toContain(jasmine.objectContaining({ + attributes: jasmine.objectContaining({ + 'resource-url': 'http://localhost:8000/large.jpg' + }) + })); + }); + it('handle cases when asset was changed on load', async () => { api.reply('/discovery/device-details?build_id=123', () => [200, { data: [{ width: 390, deviceScaleFactor: 3 }] }]); // stop current instance to create a new one