diff --git a/packages/cli-upload/test/upload.test.js b/packages/cli-upload/test/upload.test.js index 17a5f5438..4cdb04eb4 100644 --- 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 index 6452166eb..0d4fe7e77 100644 --- 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 index 00e627bb1..39b827532 100644 --- 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 index 39a8f68ab..43eee4aae 100644 --- 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 index 863fc340d..7f596b961 100644 --- 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 index 4b4aad9c1..32bdc6de9 100644 --- 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 index a52b7ff09..1b8eec50b 100644 --- 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 index 9d7f4b1f8..2cae42d44 100644 --- 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: {