Add support for Scrollable single element screenshot (#1458)

* Add support for Scrollable single element screenshot * Fix breaking test * Address comments * Add test for dependency validation * Address comment
percy · Dec 19, 2023 · bb2bfad · bb2bfad
1 parent 264fe03
commit bb2bfad
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 0 deletions.
diff --git a/packages/cli-upload/test/upload.test.js b/packages/cli-upload/test/upload.test.js
@@ -86,6 +86,7 @@ describe('percy upload', () => {
           name: 'test-1.png',
           widths: [10],
           scope: null,
+          'scope-options': {},
           'minimum-height': 10,
           'enable-javascript': null,
           'enable-layout': false

diff --git a/packages/client/src/client.js b/packages/client/src/client.js
@@ -300,6 +300,7 @@ export class PercyClient {
     name,
     widths,
     scope,
+    scopeOptions,
     minHeight,
     enableJavaScript,
     enableLayout,
@@ -329,6 +330,7 @@ export class PercyClient {
           name: name || null,
           widths: widths || null,
           scope: scope || null,
+          'scope-options': scopeOptions || {},
           'minimum-height': minHeight || null,
           'enable-javascript': enableJavaScript || null,
           'enable-layout': enableLayout || false

diff --git a/packages/client/test/client.test.js b/packages/client/test/client.test.js
@@ -578,6 +578,7 @@ describe('PercyClient', () => {
         name: 'snapfoo',
         widths: [1000],
         scope: '#main',
+        scopeOptions: { scroll: true },
         minHeight: 1000,
         enableJavaScript: true,
         enableLayout: true,
@@ -612,6 +613,7 @@ describe('PercyClient', () => {
             widths: [1000],
             scope: '#main',
             'minimum-height': 1000,
+            'scope-options': { scroll: true },
             'enable-javascript': true,
             'enable-layout': true
           },
@@ -654,6 +656,7 @@ describe('PercyClient', () => {
             name: null,
             widths: null,
             scope: null,
+            'scope-options': {},
             'minimum-height': null,
             'enable-javascript': null,
             'enable-layout': false
@@ -718,6 +721,7 @@ describe('PercyClient', () => {
           attributes: {
             name: 'test snapshot name',
             scope: null,
+            'scope-options': {},
             'enable-javascript': null,
             'minimum-height': null,
             widths: null,
@@ -1215,6 +1219,7 @@ describe('PercyClient', () => {
           attributes: {
             name: 'test snapshot name',
             scope: null,
+            'scope-options': {},
             'enable-javascript': null,
             'minimum-height': null,
             widths: null,

diff --git a/packages/core/src/config.js b/packages/core/src/config.js
@@ -59,6 +59,15 @@ export const configSchema = {
       scope: {
         type: 'string'
       },
+      scopeOptions: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          scroll: {
+            type: 'boolean'
+          }
+        }
+      },
       freezeAnimation: { // for backward compatibility
         type: 'boolean',
         onlyAutomate: true
@@ -244,6 +253,7 @@ export const snapshotSchema = {
         domTransformation: { $ref: '/config/snapshot#/properties/domTransformation' },
         enableLayout: { $ref: '/config/snapshot#/properties/enableLayout' },
         reshuffleInvalidTags: { $ref: '/config/snapshot#/properties/reshuffleInvalidTags' },
+        scopeOptions: { $ref: '/config/snapshot#/properties/scopeOptions' },
         discovery: {
           type: 'object',
           additionalProperties: false,
@@ -258,6 +268,9 @@ export const snapshotSchema = {
             devicePixelRatio: { $ref: '/config/discovery#/properties/devicePixelRatio' }
           }
         }
+      },
+      dependencies: {
+        scopeOptions: ['scope']
       }
     },
     exec: {

diff --git a/packages/core/src/discovery.js b/packages/core/src/discovery.js
@@ -42,6 +42,7 @@ function debugSnapshotOptions(snapshot) {
   debugProp(snapshot, 'deviceScaleFactor');
   debugProp(snapshot, 'waitForTimeout');
   debugProp(snapshot, 'waitForSelector');
+  debugProp(snapshot, 'scopeOptions.scroll');
   debugProp(snapshot, 'execute.afterNavigation');
   debugProp(snapshot, 'execute.beforeResize');
   debugProp(snapshot, 'execute.afterResize');

diff --git a/packages/core/test/unit/config.test.js b/packages/core/test/unit/config.test.js
@@ -1,5 +1,7 @@
 import logger from '@percy/logger/test/helpers';
 import { configMigration, snapshotSchema } from '../../src/config.js';
+import * as CoreConfig from '@percy/core/config';
+import PercyConfig from '@percy/config';
 
 describe('Unit / Config Migration', () => {
   let mocked = {
@@ -82,4 +84,36 @@ describe('SnapshotSchema', () => {
   it('should contain domTransformation', () => {
     expect(snapshotSchema.$defs.common.properties).toEqual(jasmine.objectContaining({ domTransformation: jasmine.anything() }));
   });
+
+  it('scopeOptions should work with scope', () => {
+    const comparison = {
+      name: 'snapfoo',
+      url: 'some_url',
+      widths: [1000],
+      scope: '#main',
+      scopeOptions: { scroll: true },
+      enableJavaScript: true
+    };
+
+    PercyConfig.addSchema(CoreConfig.schemas);
+    const errors = PercyConfig.validate(comparison, '/snapshot');
+    expect(errors).toBe(undefined);
+  });
+
+  it('scopeOptions should not work without scope', () => {
+    const comparison = {
+      name: 'snapfoo',
+      url: 'some_url',
+      widths: [1000],
+      scopeOptions: { scroll: true },
+      enableJavaScript: true
+    };
+
+    PercyConfig.addSchema(CoreConfig.schemas);
+    const errors = PercyConfig.validate(comparison, '/snapshot');
+    expect(errors).not.toBe(null);
+    expect(errors.length).toBe(1);
+    expect(errors[0].path).toBe('scope');
+    expect(errors[0].message).toBe('must have property scope when property scopeOptions is present');
+  });
 });
diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts
@@ -21,6 +21,10 @@ interface DiscoveryOptions {
   captureMockedServiceWorker?: boolean;
 }
 
+interface ScopeOptions {
+  scroll?: boolean;
+}
+
 interface DiscoveryLaunchOptions {
   executable?: string;
   args?: string[];
@@ -45,6 +49,7 @@ interface CommonSnapshotOptions {
   reshuffleInvalidTags?: boolean;
   devicePixelRatio?: number;
   scope?: string;
+  scopeOptions?: ScopeOptions;
 }
 
 export interface SnapshotOptions extends CommonSnapshotOptions {

diff --git a/packages/core/types/index.test-d.ts b/packages/core/types/index.test-d.ts
@@ -17,6 +17,7 @@ const percyOptions: PercyOptions = {
     percyCSS: '.percy { color: purple; }',
     enableJavaScript: false,
     scope: '.percy',
+    scopeOptions: { scroll: true },
     devicePixelRatio: 2
   },
   discovery: {