@percy/core 1.4.0 → 1.6.0

package/dist/api.js

@@ -8,7 +8,7 @@ export const PERCY_DOM = createRequire(import.meta.url).resolve('@percy/dom'); /
 
 export function createPercyServer(percy, port) {
   let pkg = getPackageJSON(import.meta.url);
-  return Server.createServer({
+  let server = Server.createServer({
     port
   }) // facilitate logger websocket connections
   .websocket('/(logger)?', ws => {
@@ -29,13 +29,31 @@ export function createPercyServer(percy, port) {
     }));
   }) // general middleware
   .route((req, res, next) => {
+    var _percy$testing, _percy$testing3, _percy$testing3$api, _percy$testing4, _percy$testing4$api;
+
     // treat all request bodies as json
     if (req.body) try {
       req.body = JSON.parse(req.body);
     } catch {} // add version header
 
-    res.setHeader('Access-Control-Expose-Headers', '*, X-Percy-Core-Version');
-    res.setHeader('X-Percy-Core-Version', pkg.version); // return json errors
+    res.setHeader('Access-Control-Expose-Headers', '*, X-Percy-Core-Version'); // skip or change api version header in testing mode
+
+    if (((_percy$testing = percy.testing) === null || _percy$testing === void 0 ? void 0 : _percy$testing.version) !== false) {
+      var _percy$testing2;
+
+      res.setHeader('X-Percy-Core-Version', ((_percy$testing2 = percy.testing) === null || _percy$testing2 === void 0 ? void 0 : _percy$testing2.version) ?? pkg.version);
+    } // support sabotaging requests in testing mode
+
+
+    if (((_percy$testing3 = percy.testing) === null || _percy$testing3 === void 0 ? void 0 : (_percy$testing3$api = _percy$testing3.api) === null || _percy$testing3$api === void 0 ? void 0 : _percy$testing3$api[req.url.pathname]) === 'error') {
+      return res.json(500, {
+        success: false,
+        error: 'Error: testing'
+      });
+    } else if (((_percy$testing4 = percy.testing) === null || _percy$testing4 === void 0 ? void 0 : (_percy$testing4$api = _percy$testing4.api) === null || _percy$testing4$api === void 0 ? void 0 : _percy$testing4$api[req.url.pathname]) === 'disconnect') {
+      return req.connection.destroy();
+    } // return json errors
+
 
     return next().catch(e => res.json(e.status ?? 500, {
       build: percy.build,
@@ -77,6 +95,42 @@ export function createPercyServer(percy, port) {
     return res.json(200, {
       success: true
     });
+  }); // add test endpoints only in testing mode
+
+  return !percy.testing ? server : server // manipulates testing mode configuration to trigger specific scenarios
+  .route('/test/api/:cmd', ({
+    body,
+    params: {
+      cmd
+    }
+  }, res) => {
+    body = Buffer.isBuffer(body) ? body.toString() : body;
+
+    if (cmd === 'reset') {
+      // the reset command will reset testing mode to its default options
+      percy.testing = {};
+    } else if (cmd === 'version') {
+      // the version command will update the api version header for testing
+      percy.testing.version = body;
+    } else if (cmd === 'error' || cmd === 'disconnect') {
+      // the error or disconnect commands will cause specific endpoints to fail
+      percy.testing.api = { ...percy.testing.api,
+        [body]: cmd
+      };
+    } else {
+      // 404 for unknown commands
+      return res.send(404);
+    }
+
+    return res.json(200, {
+      testing: percy.testing
+    });
+  }) // returns an array of raw logs from the logger
+  .route('get', '/test/logs', (req, res) => res.json(200, {
+    logs: Array.from(logger.instance.messages)
+  })) // serves a very basic html page for testing snapshots
+  .route('get', '/test/snapshot', (req, res) => {
+    return res.send(200, 'text/html', '<p>Snapshot Me!</p>');
   });
 } // Create a static server instance with an automatic sitemap
 

package/dist/config.js

@@ -28,6 +28,9 @@ export const configSchema = {
       },
       scope: {
         type: 'string'
+      },
+      devicePixelRatio: {
+        type: 'integer'
       }
     }
   },
@@ -177,6 +180,9 @@ export const snapshotSchema = {
         enableJavaScript: {
           $ref: '/config/snapshot#/properties/enableJavaScript'
         },
+        devicePixelRatio: {
+          $ref: '/config/snapshot#/properties/devicePixelRatio'
+        },
         discovery: {
           type: 'object',
           additionalProperties: false,

package/dist/discovery.js

@@ -89,8 +89,10 @@ export function createRequestFinishedHandler(network, {
 
         if (mimeType !== null && mimeType !== void 0 && mimeType.includes('font')) {
           // font responses from the browser may not be properly encoded, so request them directly
+          log.debug('- Requesting asset directly');
           body = await makeRequest(response.url, {
-            buffer: true
+            buffer: true,
+            headers: request.headers
           });
         }
 

package/dist/page.js

@@ -29,12 +29,14 @@ export class Page {
 
   async resize({
     width,
-    height
+    height,
+    deviceScaleFactor = 1,
+    mobile = false
   }) {
-    this.log.debug(`Resize page to ${width}x${height}`);
+    this.log.debug(`Resize page to ${width}x${height} @${deviceScaleFactor}x`);
     await this.session.send('Emulation.setDeviceMetricsOverride', {
-      deviceScaleFactor: 1,
-      mobile: false,
+      deviceScaleFactor,
+      mobile,
       height,
       width
     });

package/dist/percy.js

@@ -31,6 +31,8 @@ export class Percy {
     skipUploads,
     // implies `skipUploads` and also skips asset discovery
     dryRun,
+    // implies `dryRun`, silent logs, and adds extra api endpoints
+    testing,
     // configuration filepath
     config,
     // provided to @percy/client
@@ -44,8 +46,10 @@ export class Percy {
     // options which will become accessible via the `.config` property
     ...options
   } = {}) {
+    if (testing) loglevel = 'silent';
     if (loglevel) this.loglevel(loglevel);
-    this.dryRun = !!dryRun;
+    this.testing = testing ? {} : null;
+    this.dryRun = !!testing || !!dryRun;
     this.skipUploads = this.dryRun || !!skipUploads;
     this.deferUploads = this.skipUploads || !!deferUploads;
     if (this.deferUploads) this.#uploads.stop();

package/dist/snapshot.js

@@ -260,6 +260,7 @@ function debugSnapshotConfig(snapshot, showInfo) {
   debugProp(snapshot, 'widths', v => `${v}px`);
   debugProp(snapshot, 'minHeight', v => `${v}px`);
   debugProp(snapshot, 'enableJavaScript');
+  debugProp(snapshot, 'deviceScaleFactor');
   debugProp(snapshot, 'waitForTimeout');
   debugProp(snapshot, 'waitForSelector');
   debugProp(snapshot, 'execute.afterNavigation');
@@ -320,20 +321,55 @@ function waitForDiscoveryNetworkIdle(page, options) {
 } // Used to cache resources across core instances
 
 
-const RESOURCE_CACHE_KEY = Symbol('resource-cache'); // Discovers resources for a snapshot using a browser page to intercept requests. The callback
+const RESOURCE_CACHE_KEY = Symbol('resource-cache'); // Trigger resource requests for a page by iterating over snapshot widths and calling any provided
+// execute options. Additional resize options may be provided to capture resources mobile resources
+
+function* triggerResourceRequests(page, snapshot, options) {
+  // copy widths to prevent mutation later
+  let [initialWidth, ...widths] = snapshot.widths; // set the initial page size
+
+  yield page.resize({
+    width: initialWidth,
+    height: snapshot.minHeight,
+    ...options
+  }); // navigate to the url
+
+  yield page.goto(snapshot.url);
+
+  if (snapshot.execute) {
+    // when any execute options are provided, inject snapshot options
+
+    /* istanbul ignore next: cannot detect coverage of injected code */
+    yield page.eval((_, s) => window.__PERCY__.snapshot = s, snapshot);
+    yield page.evaluate(snapshot.execute.afterNavigation);
+  } // trigger resize events for other widths
+
+
+  for (let width of widths) {
+    var _snapshot$execute, _snapshot$execute2;
+
+    yield page.evaluate((_snapshot$execute = snapshot.execute) === null || _snapshot$execute === void 0 ? void 0 : _snapshot$execute.beforeResize);
+    yield waitForDiscoveryNetworkIdle(page, snapshot.discovery);
+    yield page.resize({
+      width,
+      height: snapshot.minHeight,
+      ...options
+    });
+    yield page.evaluate((_snapshot$execute2 = snapshot.execute) === null || _snapshot$execute2 === void 0 ? void 0 : _snapshot$execute2.afterResize);
+  }
+} // Discovers resources for a snapshot using a browser page to intercept requests. The callback
 // function will be called with the snapshot name (for additional snapshots) and an array of
 // discovered resources. When additional snapshots are provided, the callback will be called once
 // for each snapshot.
 
+
 export async function* discoverSnapshotResources(percy, snapshot, callback) {
   debugSnapshotConfig(snapshot, percy.dryRun); // when dry-running, invoke the callback for each snapshot and immediately return
 
   let allSnapshots = [snapshot, ...(snapshot.additionalSnapshots || [])];
   if (percy.dryRun) return allSnapshots.map(s => callback(s)); // keep a global resource cache across snapshots
 
-  let cache = percy[RESOURCE_CACHE_KEY] || (percy[RESOURCE_CACHE_KEY] = new Map()); // copy widths to prevent mutation later
-
-  let widths = snapshot.widths.slice(); // preload the root resource for existing dom snapshots
+  let cache = percy[RESOURCE_CACHE_KEY] || (percy[RESOURCE_CACHE_KEY] = new Map()); // preload the root resource for existing dom snapshots
 
   let resources = new Map(snapshot.domSnapshot && [createRootResource(snapshot.url, snapshot.domSnapshot)].map(resource => [resource.url, resource])); // open a new browser page
 
@@ -356,33 +392,15 @@ export async function* discoverSnapshotResources(percy, snapshot, callback) {
   });
 
   try {
-    // set the initial page size
-    yield page.resize({
-      width: widths.shift(),
-      height: snapshot.minHeight
-    }); // navigate to the url
-
-    yield page.goto(snapshot.url);
-
-    if (snapshot.execute) {
-      // when any execute options are provided, inject snapshot options
-
-      /* istanbul ignore next: cannot detect coverage of injected code */
-      yield page.eval((_, s) => window.__PERCY__.snapshot = s, snapshot);
-      yield page.evaluate(snapshot.execute.afterNavigation);
-    } // trigger resize events for other widths
-
+    yield* triggerResourceRequests(page, snapshot); // trigger resource requests for any alternate device pixel ratio
 
-    for (let width of widths) {
-      var _snapshot$execute, _snapshot$execute2;
-
-      yield page.evaluate((_snapshot$execute = snapshot.execute) === null || _snapshot$execute === void 0 ? void 0 : _snapshot$execute.beforeResize);
+    if (snapshot.devicePixelRatio) {
+      // wait for any existing pending resource requests first
       yield waitForDiscoveryNetworkIdle(page, snapshot.discovery);
-      yield page.resize({
-        width,
-        height: snapshot.minHeight
+      yield* triggerResourceRequests(page, snapshot, {
+        deviceScaleFactor: snapshot.devicePixelRatio,
+        mobile: true
       });
-      yield page.evaluate((_snapshot$execute2 = snapshot.execute) === null || _snapshot$execute2 === void 0 ? void 0 : _snapshot$execute2.afterResize);
     }
 
     if (snapshot.domSnapshot) {
@@ -413,12 +431,8 @@ export async function* discoverSnapshotResources(percy, snapshot, callback) {
 
         resources.delete(root.url);
       }
-    } // page clean up
-
-
-    await page.close();
-  } catch (error) {
+    }
+  } finally {
     await page.close();
-    throw error;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/core",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -39,10 +39,10 @@
     "test:types": "tsd"
   },
   "dependencies": {
-    "@percy/client": "1.4.0",
-    "@percy/config": "1.4.0",
-    "@percy/dom": "1.4.0",
-    "@percy/logger": "1.4.0",
+    "@percy/client": "1.6.0",
+    "@percy/config": "1.6.0",
+    "@percy/dom": "1.6.0",
+    "@percy/logger": "1.6.0",
     "content-disposition": "^0.5.4",
     "cross-spawn": "^7.0.3",
     "extract-zip": "^2.0.1",
@@ -53,5 +53,5 @@
     "rimraf": "^3.0.2",
     "ws": "^8.0.0"
   },
-  "gitHead": "341362f3cf526db57412414aa3a9743c1a014fe1"
+  "gitHead": "dd03aec4a68a26425cda3afd10fa142011198b5f"
 }

package/test/helpers/request.js

@@ -7,7 +7,7 @@ export async function request(url, method = 'GET', handle) {
   try {
     return await request(url, options, cb);
   } catch (error) {
-    if (typeof handle !== 'boolean') throw error;
+    if (!error.response || typeof handle !== 'boolean') throw error;
     return handle ? [error.response.body, error.response] : error.response;
   }
 }