✨ Introduce new config option enableLayout for enabling layout testing.

packages/cli-upload/test/upload.test.js

@@ -87,7 +87,8 @@ describe('percy upload', () => {
           widths: [10],
           scope: null,
           'minimum-height': 10,
-          'enable-javascript': null
+          'enable-javascript': null,
+          'enable-layout': false
         },
         relationships: {
           resources: {

packages/client/src/client.js

@@ -297,6 +297,7 @@ export class PercyClient {
     scope,
     minHeight,
     enableJavaScript,
+    enableLayout,
     clientInfo,
     environmentInfo,
     resources = []
@@ -324,7 +325,8 @@ export class PercyClient {
           widths: widths || null,
           scope: scope || null,
           'minimum-height': minHeight || null,
-          'enable-javascript': enableJavaScript || null
+          'enable-javascript': enableJavaScript || null,
+          'enable-layout': enableLayout || false
         },
         relationships: {
           resources: {

packages/client/test/client.test.js

@@ -584,6 +584,7 @@ describe('PercyClient', () => {
         scope: '#main',
         minHeight: 1000,
         enableJavaScript: true,
+        enableLayout: true,
         clientInfo: 'sdk/info',
         environmentInfo: 'sdk/env',
         resources: [{
@@ -615,7 +616,8 @@ describe('PercyClient', () => {
             widths: [1000],
             scope: '#main',
             'minimum-height': 1000,
-            'enable-javascript': true
+            'enable-javascript': true,
+            'enable-layout': true
           },
           relationships: {
             resources: {
@@ -657,7 +659,8 @@ describe('PercyClient', () => {
             widths: null,
             scope: null,
             'minimum-height': null,
-            'enable-javascript': null
+            'enable-javascript': null,
+            'enable-layout': false
           },
           relationships: {
             resources: {
@@ -721,7 +724,8 @@ describe('PercyClient', () => {
             scope: null,
             'enable-javascript': null,
             'minimum-height': null,
-            widths: null
+            widths: null,
+            'enable-layout': false
           },
           relationships: {
             resources: {
@@ -1217,7 +1221,8 @@ describe('PercyClient', () => {
             scope: null,
             'enable-javascript': null,
             'minimum-height': null,
-            widths: null
+            widths: null,
+            'enable-layout': false
           },
           relationships: {
             resources: {

packages/config/test/index.test.js

@@ -1201,7 +1201,8 @@ describe('PercyConfig', () => {
         'enable-javascript': false,
         'disable-shadow-dom': true,
         'cli-enable-javascript': true,
-        'ignore-region-xpaths': ['']
+        'ignore-region-xpaths': [''],
+        'enable-layout': false
       })).toEqual({
         fooBar: 'baz',
         foo: { barBaz: 'qux' },
@@ -1211,7 +1212,8 @@ describe('PercyConfig', () => {
         enableJavaScript: false,
         disableShadowDOM: true,
         cliEnableJavaScript: true,
-        ignoreRegionXPaths: ['']
+        ignoreRegionXPaths: [''],
+        enableLayout: false
       });
     });
 
@@ -1224,7 +1226,8 @@ describe('PercyConfig', () => {
         enableJavaScript: false,
         disableShadowDOM: true,
         cliEnableJavaScript: true,
-        ignoreRegionXPaths: ['']
+        ignoreRegionXPaths: [''],
+        enableLayout: false
       }, { kebab: true })).toEqual({
         'foo-bar': 'baz',
         foo: { 'bar-baz': 'qux' },
@@ -1233,7 +1236,8 @@ describe('PercyConfig', () => {
         'enable-javascript': false,
         'disable-shadow-dom': true,
         'cli-enable-javascript': true,
-        'ignore-region-xpaths': ['']
+        'ignore-region-xpaths': [''],
+        'enable-layout': false
       });
     });
 
@@ -1246,7 +1250,8 @@ describe('PercyConfig', () => {
         enableJavaScript: false,
         disableShadowDOM: true,
         cliEnableJavaScript: true,
-        ignoreRegionXPaths: ['']
+        ignoreRegionXPaths: [''],
+        enableLayout: false
       }, { snake: true })).toEqual({
         foo_bar: 'baz',
         foo: { bar_baz: 'qux' },
@@ -1255,7 +1260,8 @@ describe('PercyConfig', () => {
         enable_javascript: false,
         disable_shadow_dom: true,
         cli_enable_javascript: true,
-        ignore_region_xpaths: ['']
+        ignore_region_xpaths: [''],
+        enable_layout: false
       });
     });
 

packages/core/src/config.js

@@ -44,6 +44,10 @@ export const configSchema = {
         type: 'boolean',
         default: false
       },
+      enableLayout: {
+        type: 'boolean',
+        default: false
+      },
       domTransformation: {
         type: 'string'
       },
@@ -206,6 +210,7 @@ export const snapshotSchema = {
         cliEnableJavaScript: { $ref: '/config/snapshot#/properties/cliEnableJavaScript' },
         disableShadowDOM: { $ref: '/config/snapshot#/properties/disableShadowDOM' },
         domTransformation: { $ref: '/config/snapshot#/properties/domTransformation' },
+        enableLayout: { $ref: '/config/snapshot#/properties/enableLayout' },
         discovery: {
           type: 'object',
           additionalProperties: false,

packages/core/src/discovery.js

@@ -36,6 +36,7 @@ function debugSnapshotOptions(snapshot) {
   debugProp(snapshot, 'enableJavaScript');
   debugProp(snapshot, 'cliEnableJavaScript');
   debugProp(snapshot, 'disableShadowDOM');
+  debugProp(snapshot, 'enableLayout');
   debugProp(snapshot, 'deviceScaleFactor');
   debugProp(snapshot, 'waitForTimeout');
   debugProp(snapshot, 'waitForSelector');

packages/core/test/discovery.test.js

@@ -1930,4 +1930,81 @@ describe('Discovery', () => {
       });
     });
   });
+
+  describe('Enable Layout =>', () => {
+    beforeEach(() => {
+      // global defaults
+      percy.config.snapshot.enableLayout = false;
+    });
+
+    describe('cli-snapshot =>', () => {
+      it('disabled by default', async () => {
+        percy.loglevel('debug');
+
+        await percy.snapshot({
+          name: 'test snapshot',
+          url: 'http://localhost:8000',
+          domSnapshot: ''
+        });
+
+        await percy.idle();
+
+        expect(logger.stderr).toEqual(jasmine.arrayContaining([
+          '[percy:core:snapshot] - enableLayout: false'
+        ]));
+      });
+
+      it('enable when enableLayout: true', async () => {
+        percy.config.snapshot.enableLayout = true;
+        percy.loglevel('debug');
+
+        await percy.snapshot({
+          name: 'test snapshot',
+          url: 'http://localhost:8000',
+          domSnapshot: ''
+        });
+
+        await percy.idle();
+
+        expect(logger.stderr).toEqual(jasmine.arrayContaining([
+          '[percy:core:snapshot] - enableLayout: true'
+        ]));
+      });
+    });
+
+    describe('percySnapshot with cli-exec =>', () => {
+      it('disabled by default', async () => {
+        percy.loglevel('debug');
+
+        await percy.snapshot({
+          name: 'test snapshot',
+          url: 'http://localhost:8000',
+          domSnapshot: testDOM
+        });
+
+        await percy.idle();
+
+        expect(logger.stderr).toEqual(jasmine.arrayContaining([
+          '[percy:core:snapshot] - enableLayout: false'
+        ]));
+      });
+
+      it('enable when enableLayout: true', async () => {
+        percy.config.snapshot.enableLayout = true;
+        percy.loglevel('debug');
+
+        await percy.snapshot({
+          name: 'test snapshot',
+          url: 'http://localhost:8000',
+          domSnapshot: testDOM
+        });
+
+        await percy.idle();
+
+        expect(logger.stderr).toEqual(jasmine.arrayContaining([
+          '[percy:core:snapshot] - enableLayout: true'
+        ]));
+      });
+    });
+  });
 });

packages/core/test/percy.test.js

@@ -59,7 +59,8 @@ describe('Percy', () => {
       percyCSS: '',
       enableJavaScript: false,
       disableShadowDOM: false,
-      cliEnableJavaScript: true
+      cliEnableJavaScript: true,
+      enableLayout: false
     });
   });
 

packages/core/types/index.d.ts

@@ -39,6 +39,7 @@ interface CommonSnapshotOptions {
   percyCSS?: string;
   enableJavaScript?: boolean;
   disableShadowDOM?: boolean;
+  enableLayout?: boolean;
   devicePixelRatio?: number;
   scope?: string;
 }

packages/dom/README.md

@@ -38,6 +38,7 @@ const domSnapshot = await page.evaluate(() => PercyDOM.serialize(options))
 - `enableJavaScript` — When true, does not serialize some DOM elements
 - `domTransformation` — Function to transform the DOM after serialization
 - `disableShadowDOM` — disable shadow DOM capturing, this option can be passed to `percySnapshot` its part of per-snapshot config.
+- `enableLayout` - When true, It enables layout testing.
 
 ## Serialized Content