@percy/core 1.27.5-beta.0 → 1.27.5-beta.2

package/dist/config.js

@@ -176,6 +176,10 @@ export const configSchema = {
       disableCache: {
         type: 'boolean'
       },
+      captureMockedServiceWorker: {
+        type: 'boolean',
+        default: false
+      },
       requestHeaders: {
         type: 'object',
         normalize: false,
@@ -311,6 +315,9 @@ export const snapshotSchema = {
             disableCache: {
               $ref: '/config/discovery#/properties/disableCache'
             },
+            captureMockedServiceWorker: {
+              $ref: '/config/discovery#/properties/captureMockedServiceWorker'
+            },
             userAgent: {
               $ref: '/config/discovery#/properties/userAgent'
             },

package/dist/discovery.js

@@ -42,6 +42,7 @@ function debugSnapshotOptions(snapshot) {
   debugProp(snapshot, 'discovery.requestHeaders', JSON.stringify);
   debugProp(snapshot, 'discovery.authorization', JSON.stringify);
   debugProp(snapshot, 'discovery.disableCache');
+  debugProp(snapshot, 'discovery.captureMockedServiceWorker');
   debugProp(snapshot, 'discovery.userAgent');
   debugProp(snapshot, 'clientInfo');
   debugProp(snapshot, 'environmentInfo');
@@ -279,7 +280,7 @@ export function createDiscoveryQueue(percy) {
   let {
     concurrency
   } = percy.config.discovery;
-  let queue = new Queue();
+  let queue = new Queue('discovery');
   let cache;
   return queue.set({
     concurrency
@@ -322,6 +323,7 @@ export function createDiscoveryQueue(percy) {
       requestHeaders: snapshot.discovery.requestHeaders,
       authorization: snapshot.discovery.authorization,
       userAgent: snapshot.discovery.userAgent,
+      captureMockedServiceWorker: snapshot.discovery.captureMockedServiceWorker,
       meta: snapshot.meta,
       // enable network inteception
       intercept: {

package/dist/network.js

@@ -1,20 +1,31 @@
 import { request as makeRequest } from '@percy/client/utils';
 import logger from '@percy/logger';
 import mime from 'mime-types';
-import { createResource, hostnameMatches, normalizeURL, waitFor } from './utils.js';
+import { DefaultMap, createResource, hostnameMatches, normalizeURL, waitFor } from './utils.js';
 const MAX_RESOURCE_SIZE = 25 * 1024 ** 2; // 25MB
 const ALLOWED_STATUSES = [200, 201, 301, 302, 304, 307, 308];
 const ALLOWED_RESOURCES = ['Document', 'Stylesheet', 'Image', 'Media', 'Font', 'Other'];
 const ABORTED_MESSAGE = 'Request was aborted by browser';
 
+// RequestLifeCycleHandler handles life cycle of a requestId
+// Ideal flow:          requestWillBeSent -> requestPaused -> responseReceived -> loadingFinished / loadingFailed
+// ServiceWorker flow:  requestWillBeSent -> responseReceived -> loadingFinished / loadingFailed
+class RequestLifeCycleHandler {
+  constructor() {
+    this.resolveRequestWillBeSent = null;
+    this.resolveResponseReceived = null;
+    this.requestWillBeSent = new Promise(resolve => this.resolveRequestWillBeSent = resolve);
+    this.responseReceived = new Promise(resolve => this.resolveResponseReceived = resolve);
+  }
+}
 // The Interceptor class creates common handlers for dealing with intercepting asset requests
 // for a given page using various devtools protocol events and commands.
 export class Network {
   static TIMEOUT = undefined;
   log = logger('core:discovery');
+  #requestsLifeCycleHandler = new DefaultMap(() => new RequestLifeCycleHandler());
   #pending = new Map();
   #requests = new Map();
-  #intercepts = new Map();
   #authentications = new Set();
   #aborted = new Set();
   constructor(page, options) {
@@ -22,6 +33,7 @@ export class Network {
     this.timeout = options.networkIdleTimeout ?? 100;
     this.authorization = options.authorization;
     this.requestHeaders = options.requestHeaders ?? {};
+    this.captureMockedServiceWorker = options.captureMockedServiceWorker ?? false;
     this.userAgent = options.userAgent ??
     // by default, emulate a non-headless browser
     page.session.browser.version.userAgent.replace('Headless', '');
@@ -36,7 +48,7 @@ export class Network {
     session.on('Network.loadingFinished', this._handleLoadingFinished);
     session.on('Network.loadingFailed', this._handleLoadingFailed);
     let commands = [session.send('Network.enable'), session.send('Network.setBypassServiceWorker', {
-      bypass: true
+      bypass: !this.captureMockedServiceWorker
     }), session.send('Network.setCacheDisabled', {
       cacheDisabled: true
     }), session.send('Network.setUserAgentOverride', {
@@ -114,7 +126,6 @@ export class Network {
     this.#authentications.delete(interceptId);
     if (!keepPending) {
       this.#pending.delete(requestId);
-      this.#intercepts.delete(requestId);
     }
   }
 
@@ -153,23 +164,18 @@ export class Network {
       requestId: interceptId,
       resourceType
     } = event;
+
+    // wait for request to be sent
+    await this.#requestsLifeCycleHandler.get(requestId).requestWillBeSent;
     let pending = this.#pending.get(requestId);
     this.#pending.delete(requestId);
 
     // guard against redirects with the same requestId
-    if ((pending === null || pending === void 0 ? void 0 : pending.request.url) === event.request.url && pending.request.method === event.request.method) {
-      await this._handleRequest(session, {
-        ...pending,
-        resourceType,
-        interceptId
-      });
-    } else {
-      // track the session that intercepted the request
-      this.#intercepts.set(requestId, {
-        ...event,
-        session
-      });
-    }
+    (pending === null || pending === void 0 ? void 0 : pending.request.url) === event.request.url && pending.request.method === event.request.method && (await this._handleRequest(session, {
+      ...pending,
+      resourceType,
+      interceptId
+    }));
   };
 
   // Called when a request will be sent. If the request has already been intercepted, handle it;
@@ -177,35 +183,32 @@ export class Network {
   _handleRequestWillBeSent = async event => {
     let {
       requestId,
-      request
+      request,
+      type
     } = event;
 
     // do not handle data urls
     if (request.url.startsWith('data:')) return;
     if (this.intercept) {
-      let intercept = this.#intercepts.get(requestId);
       this.#pending.set(requestId, event);
-      if (intercept) {
-        // handle the request with the session that intercepted it
-        let {
-          session,
-          requestId: interceptId,
-          resourceType
-        } = intercept;
-        await this._handleRequest(session, {
+      if (this.captureMockedServiceWorker) {
+        await this._handleRequest(undefined, {
           ...event,
-          resourceType,
-          interceptId
-        });
-        this.#intercepts.delete(requestId);
+          resourceType: type,
+          interceptId: requestId
+        }, true);
       }
     }
+    // release request
+    // note: we are releasing this, even if intercept is not set for network.js
+    // since, we want to process all-requests in-order doesn't matter if it should be intercepted or not
+    this.#requestsLifeCycleHandler.get(requestId).resolveRequestWillBeSent();
   };
 
   // Called when a pending request is paused. Handles associating redirected requests with
   // responses and calls this.onrequest with request info and callbacks to continue, respond,
   // or abort a request. One of the callbacks is required to be called and only one.
-  _handleRequest = async (session, event) => {
+  _handleRequest = async (session, event, serviceWorker = false) => {
     let {
       request,
       requestId,
@@ -226,16 +229,21 @@ export class Network {
     request.interceptId = interceptId;
     request.redirectChain = redirectChain;
     this.#requests.set(requestId, request);
-    await sendResponseResource(this, request, session);
+    if (!serviceWorker) {
+      await sendResponseResource(this, request, session);
+    }
   };
 
   // Called when a response has been received for a specific request. Associates the response with
   // the request data and adds a buffer method to fetch the response body when needed.
-  _handleResponseReceived = (session, event) => {
+  _handleResponseReceived = async (session, event) => {
     let {
       requestId,
       response
     } = event;
+    // await on requestWillBeSent
+    // no explicitly wait on requestWillBePaused as we implictly wait on it, since it manipulates the lifeCycle of request using Fetch module
+    await this.#requestsLifeCycleHandler.get(requestId).requestWillBeSent;
     let request = this.#requests.get(requestId);
     /* istanbul ignore if: race condition paranioa */
     if (!request) return;
@@ -246,12 +254,19 @@ export class Network {
       });
       return Buffer.from(result.body, result.base64Encoded ? 'base64' : 'utf-8');
     };
+    // release response
+    this.#requestsLifeCycleHandler.get(requestId).resolveResponseReceived();
   };
 
   // Called when a request streams events. These types of requests break asset discovery because
   // they never finish loading, so we untrack them to signal idle after the first event.
-  _handleEventSourceMessageReceived = event => {
-    let request = this.#requests.get(event.requestId);
+  _handleEventSourceMessageReceived = async event => {
+    let {
+      requestId
+    } = event;
+    // wait for request to be sent
+    await this.#requestsLifeCycleHandler.get(requestId).requestWillBeSent;
+    let request = this.#requests.get(requestId);
     /* istanbul ignore else: race condition paranioa */
     if (request) this._forgetRequest(request);
   };
@@ -259,7 +274,12 @@ export class Network {
   // Called when a request has finished loading which triggers the this.onrequestfinished
   // callback. The request should have an associated response and be finished with any redirects.
   _handleLoadingFinished = async event => {
-    let request = this.#requests.get(event.requestId);
+    let {
+      requestId
+    } = event;
+    // wait for upto 2 seconds or check if response has been sent
+    await this.#requestsLifeCycleHandler.get(requestId).responseReceived;
+    let request = this.#requests.get(requestId);
     /* istanbul ignore if: race condition paranioa */
     if (!request) return;
     await saveResponseResource(this, request);
@@ -267,7 +287,15 @@ export class Network {
   };
 
   // Called when a request has failed loading and triggers the this.onrequestfailed callback.
-  _handleLoadingFailed = event => {
+  _handleLoadingFailed = async event => {
+    let {
+      requestId
+    } = event;
+    // wait for request to be sent
+    // note: we are waiting on requestWillBeSent and NOT responseReceived
+    // since, requests can be cancelled in-flight without Network.responseReceived having been triggered
+    // and in any case, order of processing for responseReceived and loadingFailed does not matter, as response capturing is done in loadingFinished
+    await this.#requestsLifeCycleHandler.get(requestId).requestWillBeSent;
     let request = this.#requests.get(event.requestId);
     /* istanbul ignore if: race condition paranioa */
     if (!request) return;

package/dist/queue.js

@@ -9,6 +9,7 @@ function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classEx
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
 function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
 import { yieldFor, generatePromise, AbortController } from './utils.js';
+import logger from '@percy/logger';
 
 // Assigns a deffered promise and resolve & reject functions to an object
 function deferred(obj) {
@@ -46,12 +47,15 @@ var _end = /*#__PURE__*/new WeakMap();
 var _process = /*#__PURE__*/new WeakSet();
 var _until = /*#__PURE__*/new WeakSet();
 export class Queue {
-  constructor() {
+  // item concurrency
+
+  constructor(name) {
     _classPrivateMethodInitSpec(this, _until);
     _classPrivateMethodInitSpec(this, _process);
     _classPrivateMethodInitSpec(this, _find);
     _classPrivateMethodInitSpec(this, _dequeue);
     _defineProperty(this, "concurrency", 10);
+    _defineProperty(this, "log", logger('core:queue'));
     _classPrivateFieldInitSpec(this, _handlers, {
       writable: true,
       value: {}
@@ -73,7 +77,9 @@ export class Queue {
       value: null
     });
     _defineProperty(this, "readyState", 0);
+    this.name = name;
   }
+
   // Configure queue properties
   set({
     concurrency
@@ -201,6 +207,7 @@ export class Queue {
   // clear and abort any queued tasks
   clear() {
     let tasks = [..._classPrivateFieldGet(this, _queued)];
+    this.log.debug(`Clearing ${this.name} queue, queued state: ${_classPrivateFieldGet(this, _queued).size}, pending state: ${_classPrivateFieldGet(this, _pending).size}`);
     _classPrivateFieldGet(this, _queued).clear();
     for (let task of tasks) {
       task.ctrl.abort();
@@ -235,6 +242,7 @@ export class Queue {
   // process items up to the latest queued item, starting the queue if necessary;
   // returns a generator that yields until the flushed item has finished processing
   flush(callback) {
+    this.log.debug(`Flushing ${this.name} queue, queued state: ${_classPrivateFieldGet(this, _queued).size}, pending state: ${_classPrivateFieldGet(this, _pending).size}`);
     let interrupt =
     // check for existing interrupts
     [..._classPrivateFieldGet(this, _pending)].find(t => t.stop) ?? [..._classPrivateFieldGet(this, _queued)].find(t => t.stop);
@@ -316,10 +324,8 @@ async function* _until2(task, callback) {
         pending = _classPrivateFieldGet(this, _pending).size;
       // calculate the position within queued when not pending
       if (task && task.pending == null) queued = positionOf(_classPrivateFieldGet(this, _queued), task);
-      // calculate the position within pending when not stopping
-      if (!(task !== null && task !== void 0 && task.stop) && (task === null || task === void 0 ? void 0 : task.pending) != null) pending = positionOf(_classPrivateFieldGet(this, _pending), task);
       // call the callback and return true when not queued or pending
-      let position = (queued ?? 0) + (pending ?? 0);
+      let position = (queued ?? 0) + pending;
       callback === null || callback === void 0 ? void 0 : callback(position);
       return !position;
     }, {

package/dist/snapshot.js

@@ -125,6 +125,7 @@ function getSnapshotOptions(options, {
       requestHeaders: config.discovery.requestHeaders,
       authorization: config.discovery.authorization,
       disableCache: config.discovery.disableCache,
+      captureMockedServiceWorker: config.discovery.captureMockedServiceWorker,
       userAgent: config.discovery.userAgent
     }
   }, options], (path, prev, next) => {
@@ -318,7 +319,7 @@ export function createSnapshotsQueue(percy) {
   let {
     concurrency
   } = percy.config.discovery;
-  let queue = new Queue();
+  let queue = new Queue('snapshot');
   let build;
   return queue.set({
     concurrency

package/dist/utils.js

@@ -324,4 +324,23 @@ export function serializeFunction(fn) {
     fnbody = fnbody.replace(/cov_.*?(;\n?|,)\s*/g, '');
   }
   return fnbody;
-}
+}
+
+// DefaultMap, which returns a default value for an uninitialized key
+// Similar to defaultDict in python
+export class DefaultMap extends Map {
+  constructor(getDefaultValue, ...mapConstructorArgs) {
+    super(...mapConstructorArgs);
+    if (typeof getDefaultValue !== 'function') {
+      throw new Error('getDefaultValue must be a function');
+    }
+    this.getDefaultValue = getDefaultValue;
+  }
+  get = key => {
+    if (!this.has(key)) {
+      this.set(key, this.getDefaultValue(key));
+    }
+    return super.get(key);
+  };
+}
+;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/core",
-  "version": "1.27.5-beta.0",
+  "version": "1.27.5-beta.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "latest"
+    "tag": "beta"
   },
   "engines": {
     "node": ">=14"
@@ -43,11 +43,11 @@
     "test:types": "tsd"
   },
   "dependencies": {
-    "@percy/client": "1.27.5-beta.0",
-    "@percy/config": "1.27.5-beta.0",
-    "@percy/dom": "1.27.5-beta.0",
-    "@percy/logger": "1.27.5-beta.0",
-    "@percy/webdriver-utils": "1.27.5-beta.0",
+    "@percy/client": "1.27.5-beta.2",
+    "@percy/config": "1.27.5-beta.2",
+    "@percy/dom": "1.27.5-beta.2",
+    "@percy/logger": "1.27.5-beta.2",
+    "@percy/webdriver-utils": "1.27.5-beta.2",
     "content-disposition": "^0.5.4",
     "cross-spawn": "^7.0.3",
     "extract-zip": "^2.0.1",
@@ -58,5 +58,5 @@
     "rimraf": "^3.0.2",
     "ws": "^8.0.0"
   },
-  "gitHead": "5fed59aa21112e7854a414306504ce7243df7365"
+  "gitHead": "9ea4b1f10c134e2c8135f7dddda764a9edafb336"
 }

package/types/index.d.ts

@@ -18,6 +18,7 @@ interface DiscoveryOptions {
   authorization?: AuthCredentials;
   allowedHostnames?: string[];
   disableCache?: boolean;
+  captureMockedServiceWorker?: boolean;
 }
 
 interface DiscoveryLaunchOptions {