✨ Introduce new config option enableLayout for enabling layout testin…

…g. (#1378)

* ✨ Introduce new config option enableLayout for enabling layout testing

* lint fix

* test fix

* addressing comments

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

@@ -302,6 +302,7 @@ export class PercyClient {
     scope,
     minHeight,
     enableJavaScript,
+    enableLayout,
     clientInfo,
     environmentInfo,
     resources = []
@@ -329,7 +330,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

@@ -580,6 +580,7 @@ describe('PercyClient', () => {
         scope: '#main',
         minHeight: 1000,
         enableJavaScript: true,
+        enableLayout: true,
         clientInfo: 'sdk/info',
         environmentInfo: 'sdk/env',
         resources: [{
@@ -611,7 +612,8 @@ describe('PercyClient', () => {
             widths: [1000],
             scope: '#main',
             'minimum-height': 1000,
-            'enable-javascript': true
+            'enable-javascript': true,
+            'enable-layout': true
           },
           relationships: {
             resources: {
@@ -653,7 +655,8 @@ describe('PercyClient', () => {
             widths: null,
             scope: null,
             'minimum-height': null,
-            'enable-javascript': null
+            'enable-javascript': null,
+            'enable-layout': false
           },
           relationships: {
             resources: {
@@ -717,7 +720,8 @@ describe('PercyClient', () => {
             scope: null,
             'enable-javascript': null,
             'minimum-height': null,
-            widths: null
+            widths: null,
+            'enable-layout': false
           },
           relationships: {
             resources: {
@@ -1213,7 +1217,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

@@ -47,6 +47,9 @@ export const configSchema = {
         type: 'boolean',
         default: false
       },
+      enableLayout: {
+        type: 'boolean'
+      },
       domTransformation: {
         type: 'string'
       },
@@ -232,6 +235,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,44 @@ describe('Discovery', () => {
       });
     });
   });
+
+  describe('Enable Layout =>', () => {
+    describe('cli-snapshot =>', () => {
+      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('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/types/index.d.ts

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