Skip to content

Commit 66b8192

Browse files
itsjwalasamarsault
itsjwala
and
samarsault
authored
✨ Shadow DOM serialisation support (#1165)
* use declarative dom for serializing * Remove getInnerHTML polyfill * 📝 update documentation for testing cli packages * 🐛 return document instead of fragment we require document interface to in further steps, and originally document.cloneNode returned document object instead of fragment * 🐛 missed let : ( * firefox use default html without declarative * add basic tests * Serialized element tests * rename clone node file name * mark dom elements in shadow dom, next steps - serialize them * serialize inputs, cssom, video, canvas, frames * add comments * add warning log for video serialization * remove line and add comment * add extra comments * added declarative shadow dom polyfill for non chromium infra browsers * serialize frame test * serialize cssom inside shadow * shadowDom global in other tests * update id update polyfill for browsers where we run scripts later fix polyfill * karma separate shadow dom config * Use shadow mode in karma * refactor dom test to platform * serialize cssom createElement fix * domTransformation shadow dom unsupported * frames tests add polyfill * withExample: Remove test-shadow for plain to avoid flakes * fix frame test side effect in input * refactor helper with options * firefox tests limit platforms * revert test script changes * add tests for inject polyfill * 🔖 v1.19.0-alpha.0 * 📝 update readme for dom package * use declarative dom for serializing * Remove getInnerHTML polyfill * 🐛 return document instead of fragment we require document interface to in further steps, and originally document.cloneNode returned document object instead of fragment * 🐛 missed let : ( * firefox use default html without declarative * add basic tests * Serialized element tests * rename clone node file name * mark dom elements in shadow dom, next steps - serialize them * serialize inputs, cssom, video, canvas, frames * add comments * add warning log for video serialization * remove line and add comment * add extra comments * serialize frame test * serialize cssom inside shadow * shadowDom global in other tests * karma separate shadow dom config * Use shadow mode in karma * added declarative shadow dom polyfill for non chromium infra browsers * refactor dom test to platform * domTransformation shadow dom unsupported * frames tests add polyfill * withExample: Remove test-shadow for plain to avoid flakes * fix frame test side effect in input * refactor helper with options * firefox tests limit platforms * revert test script changes * frame test more specific * many nested many flat shadow dom * failing domTransformation for shadow * adoptedStylesheet test * fix frames test * 🐛 return if style id is not found * 🔖 v1.19.1-alpha.0 * disableShadowDom option * allow disableShadowDom in storybook + cil-snapshot * disable shadow dom snake case * cloneNode pass ctx * Add comment * adoptedStylesheet serialize dom * Add comment * run polyfill as first thing * custom element test case * frame in head * disable shadow dom naming * use getTestBrowser * increase nesting levels * remove comment * rename argument * inject polyfill only when not disabled * fix linter * fix polyfill * lint fix * refactor * fix disableShadowDOM option * update readme * fix core test * serialize adopted styles as link * text resource as base64 * use dataj-percy-serialized * fix tests * 🔖 v1.19.2-alpha.0 * lerna update * refactor recursive serialize * invalid marking test * adoptedStylesheet document test * fiix custom element test * fix recursive serialization of special elements * refactor serialize dom * increase test coverage --------- Co-authored-by: Samarjeet <[email protected]>
1 parent 8aeb759 commit 66b8192

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1125
-372
lines changed

‎lerna.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "1.18.0",
2+
"version": "1.19.2-alpha.0",
33
"packages": [
44
"packages/*"
55
],

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@
2020
"postinstall": "lerna run --stream postinstall",
2121
"test": "lerna run --stream --concurrency=1 test",
2222
"test:coverage": "lerna run --stream --concurrency=1 --no-bail test:coverage",
23-
"test:types": "lerna run --parallel test:types"
23+
"test:types": "lerna run --parallel test:types",
24+
"global:link": "lerna exec -- yarn link",
25+
"global:unlink": "lerna exec -- yarn unlink"
2426
},
2527
"devDependencies": {
2628
"@babel/cli": "^7.11.6",

‎packages/cli-app/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@percy/cli-app",
3-
"version": "1.18.0",
3+
"version": "1.19.2-alpha.0",
44
"license": "MIT",
55
"repository": {
66
"type": "git",
@@ -32,7 +32,7 @@
3232
]
3333
},
3434
"dependencies": {
35-
"@percy/cli-command": "1.18.0",
36-
"@percy/cli-exec": "1.18.0"
35+
"@percy/cli-command": "1.19.2-alpha.0",
36+
"@percy/cli-exec": "1.19.2-alpha.0"
3737
}
3838
}

‎packages/cli-build/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@percy/cli-build",
3-
"version": "1.18.0",
3+
"version": "1.19.2-alpha.0",
44
"license": "MIT",
55
"repository": {
66
"type": "git",
@@ -32,6 +32,6 @@
3232
]
3333
},
3434
"dependencies": {
35-
"@percy/cli-command": "1.18.0"
35+
"@percy/cli-command": "1.19.2-alpha.0"
3636
}
3737
}

‎packages/cli-command/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@percy/cli-command",
3-
"version": "1.18.0",
3+
"version": "1.19.2-alpha.0",
44
"license": "MIT",
55
"repository": {
66
"type": "git",
@@ -35,8 +35,8 @@
3535
"test:coverage": "yarn test --coverage"
3636
},
3737
"dependencies": {
38-
"@percy/config": "1.18.0",
39-
"@percy/core": "1.18.0",
40-
"@percy/logger": "1.18.0"
38+
"@percy/config": "1.19.2-alpha.0",
39+
"@percy/core": "1.19.2-alpha.0",
40+
"@percy/logger": "1.19.2-alpha.0"
4141
}
4242
}

‎packages/cli-config/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@percy/cli-config",
3-
"version": "1.18.0",
3+
"version": "1.19.2-alpha.0",
44
"license": "MIT",
55
"repository": {
66
"type": "git",
@@ -32,6 +32,6 @@
3232
]
3333
},
3434
"dependencies": {
35-
"@percy/cli-command": "1.18.0"
35+
"@percy/cli-command": "1.19.2-alpha.0"
3636
}
3737
}

‎packages/cli-exec/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@percy/cli-exec",
3-
"version": "1.18.0",
3+
"version": "1.19.2-alpha.0",
44
"license": "MIT",
55
"repository": {
66
"type": "git",
@@ -32,7 +32,7 @@
3232
]
3333
},
3434
"dependencies": {
35-
"@percy/cli-command": "1.18.0",
35+
"@percy/cli-command": "1.19.2-alpha.0",
3636
"cross-spawn": "^7.0.3",
3737
"which": "^2.0.2"
3838
}

‎packages/cli-snapshot/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@percy/cli-snapshot",
3-
"version": "1.18.0",
3+
"version": "1.19.2-alpha.0",
44
"license": "MIT",
55
"repository": {
66
"type": "git",
@@ -32,7 +32,7 @@
3232
]
3333
},
3434
"dependencies": {
35-
"@percy/cli-command": "1.18.0",
35+
"@percy/cli-command": "1.19.2-alpha.0",
3636
"yaml": "^2.0.0"
3737
}
3838
}

‎packages/cli-upload/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@percy/cli-upload",
3-
"version": "1.18.0",
3+
"version": "1.19.2-alpha.0",
44
"license": "MIT",
55
"repository": {
66
"type": "git",
@@ -32,7 +32,7 @@
3232
]
3333
},
3434
"dependencies": {
35-
"@percy/cli-command": "1.18.0",
35+
"@percy/cli-command": "1.19.2-alpha.0",
3636
"fast-glob": "^3.2.11",
3737
"image-size": "^1.0.0"
3838
}

‎packages/cli/README.md

+35
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,45 @@ use the following scripts for various development tasks:
6060
- `yarn readme` - generate cli commands readme usage
6161
- `yarn test` - run all tests, one package after another
6262
- `yarn test:coverage` - run all tests with coverage, one package after another
63+
- `yarn global:link` - links all packages being developed as global.
64+
- requires `yarn build` to be run before
65+
- we can then consume this package using
66+
`[npm|yarn] link @percy/[core|cli..]`
67+
- **Note**: linking is only required once, subsequent changes for development requires running build command.
68+
69+
- `yarn global:unlink` - unlinks all packages globally
6370

6471
Individual package scripts can be invoked using yarn's
6572
[workspace](https://classic.yarnpkg.com/en/docs/cli/workspace/) command. For example:
6673

6774
```sh-session
6875
$ yarn workspace @percy/core test
6976
```
77+
78+
79+
## Publish
80+
81+
Most of the repos have similar setup as CLI, steps as follows
82+
83+
1. bump version
84+
85+
```
86+
yarn bump-version
87+
```
88+
89+
2. commit with following commit message => `:bookmark: vTAG`
90+
91+
3. Draft a new release and publish it
92+
93+
This will run release.yml workflow on github actions, which publishes the NPM packages
94+
95+
### Publish with specific tag
96+
97+
Currently release workflow only support publishing with latest tag.
98+
To publish with alpha/any other TAG.
99+
100+
1. follow till step 2 above and then run
101+
102+
```
103+
yarn lerna publish from-package --dist-tag TAG
104+
```

‎packages/cli/package.json

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@percy/cli",
3-
"version": "1.18.0",
3+
"version": "1.19.2-alpha.0",
44
"license": "MIT",
55
"repository": {
66
"type": "git",
@@ -30,14 +30,14 @@
3030
"test:coverage": "yarn test --coverage"
3131
},
3232
"dependencies": {
33-
"@percy/cli-app": "1.18.0",
34-
"@percy/cli-build": "1.18.0",
35-
"@percy/cli-command": "1.18.0",
36-
"@percy/cli-config": "1.18.0",
37-
"@percy/cli-exec": "1.18.0",
38-
"@percy/cli-snapshot": "1.18.0",
39-
"@percy/cli-upload": "1.18.0",
40-
"@percy/client": "1.18.0",
41-
"@percy/logger": "1.18.0"
33+
"@percy/cli-app": "1.19.2-alpha.0",
34+
"@percy/cli-build": "1.19.2-alpha.0",
35+
"@percy/cli-command": "1.19.2-alpha.0",
36+
"@percy/cli-config": "1.19.2-alpha.0",
37+
"@percy/cli-exec": "1.19.2-alpha.0",
38+
"@percy/cli-snapshot": "1.19.2-alpha.0",
39+
"@percy/cli-upload": "1.19.2-alpha.0",
40+
"@percy/client": "1.19.2-alpha.0",
41+
"@percy/logger": "1.19.2-alpha.0"
4242
}
4343
}

‎packages/client/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@percy/client",
3-
"version": "1.18.0",
3+
"version": "1.19.2-alpha.0",
44
"license": "MIT",
55
"repository": {
66
"type": "git",
@@ -31,7 +31,7 @@
3131
"test:coverage": "yarn test --coverage"
3232
},
3333
"dependencies": {
34-
"@percy/env": "1.18.0",
35-
"@percy/logger": "1.18.0"
34+
"@percy/env": "1.19.2-alpha.0",
35+
"@percy/logger": "1.19.2-alpha.0"
3636
}
3737
}

‎packages/config/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@percy/config",
3-
"version": "1.18.0",
3+
"version": "1.19.2-alpha.0",
44
"license": "MIT",
55
"repository": {
66
"type": "git",
@@ -34,7 +34,7 @@
3434
"test:types": "tsd"
3535
},
3636
"dependencies": {
37-
"@percy/logger": "1.18.0",
37+
"@percy/logger": "1.19.2-alpha.0",
3838
"ajv": "^8.6.2",
3939
"cosmiconfig": "^7.0.0",
4040
"yaml": "^2.0.0"

‎packages/config/src/utils/normalize.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { getSchema } from '../validate.js';
44
// Edge case camelizations
55
const CAMELCASE_MAP = new Map([
66
['css', 'CSS'],
7-
['javascript', 'JavaScript']
7+
['javascript', 'JavaScript'],
8+
['dom', 'DOM']
89
]);
910

1011
// Regular expression that matches words from boundaries or consecutive casing

‎packages/config/test/index.test.js

+12-6
Original file line numberDiff line numberDiff line change
@@ -1100,14 +1100,16 @@ describe('PercyConfig', () => {
11001100
'foo_bar-baz': 'qux',
11011101
'Bar BAZ qux': 'xyzzy',
11021102
'percy-css': '',
1103-
'enable-javascript': false
1103+
'enable-javascript': false,
1104+
'disable-shadow-dom': true
11041105
})).toEqual({
11051106
fooBar: 'baz',
11061107
foo: { barBaz: 'qux' },
11071108
fooBarBaz: 'qux',
11081109
barBazQux: 'xyzzy',
11091110
percyCSS: '',
1110-
enableJavaScript: false
1111+
enableJavaScript: false,
1112+
disableShadowDOM: true
11111113
});
11121114
});
11131115

@@ -1117,13 +1119,15 @@ describe('PercyConfig', () => {
11171119
foo: { bar_baz: 'qux' },
11181120
fooBar_baz: ['qux'],
11191121
percyCSS: '',
1120-
enableJavaScript: false
1122+
enableJavaScript: false,
1123+
disableShadowDOM: true
11211124
}, { kebab: true })).toEqual({
11221125
'foo-bar': 'baz',
11231126
foo: { 'bar-baz': 'qux' },
11241127
'foo-bar-baz': ['qux'],
11251128
'percy-css': '',
1126-
'enable-javascript': false
1129+
'enable-javascript': false,
1130+
'disable-shadow-dom': true
11271131
});
11281132
});
11291133

@@ -1133,13 +1137,15 @@ describe('PercyConfig', () => {
11331137
foo: { bar_baz: 'qux' },
11341138
fooBar_baz: ['qux'],
11351139
percyCSS: '',
1136-
enableJavaScript: false
1140+
enableJavaScript: false,
1141+
disableShadowDOM: true
11371142
}, { snake: true })).toEqual({
11381143
foo_bar: 'baz',
11391144
foo: { bar_baz: 'qux' },
11401145
foo_bar_baz: ['qux'],
11411146
percy_css: '',
1142-
enable_javascript: false
1147+
enable_javascript: false,
1148+
disable_shadow_dom: true
11431149
});
11441150
});
11451151

‎packages/core/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@percy/core",
3-
"version": "1.18.0",
3+
"version": "1.19.2-alpha.0",
44
"license": "MIT",
55
"repository": {
66
"type": "git",
@@ -39,10 +39,10 @@
3939
"test:types": "tsd"
4040
},
4141
"dependencies": {
42-
"@percy/client": "1.18.0",
43-
"@percy/config": "1.18.0",
44-
"@percy/dom": "1.18.0",
45-
"@percy/logger": "1.18.0",
42+
"@percy/client": "1.19.2-alpha.0",
43+
"@percy/config": "1.19.2-alpha.0",
44+
"@percy/dom": "1.19.2-alpha.0",
45+
"@percy/logger": "1.19.2-alpha.0",
4646
"content-disposition": "^0.5.4",
4747
"cross-spawn": "^7.0.3",
4848
"extract-zip": "^2.0.1",

‎packages/core/src/config.js

+5
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ export const configSchema = {
3535
enableJavaScript: {
3636
type: 'boolean'
3737
},
38+
disableShadowDOM: {
39+
type: 'boolean',
40+
default: false
41+
},
3842
scope: {
3943
type: 'string'
4044
}
@@ -149,6 +153,7 @@ export const snapshotSchema = {
149153
minHeight: { $ref: '/config/snapshot#/properties/minHeight' },
150154
percyCSS: { $ref: '/config/snapshot#/properties/percyCSS' },
151155
enableJavaScript: { $ref: '/config/snapshot#/properties/enableJavaScript' },
156+
disableShadowDOM: { $ref: '/config/snapshot#/properties/disableShadowDOM' },
152157
discovery: {
153158
type: 'object',
154159
additionalProperties: false,

‎packages/core/src/discovery.js

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ function debugSnapshotOptions(snapshot) {
3434
debugProp(snapshot, 'widths', v => `${v}px`);
3535
debugProp(snapshot, 'minHeight', v => `${v}px`);
3636
debugProp(snapshot, 'enableJavaScript');
37+
debugProp(snapshot, 'disableShadowDOM');
3738
debugProp(snapshot, 'deviceScaleFactor');
3839
debugProp(snapshot, 'waitForTimeout');
3940
debugProp(snapshot, 'waitForSelector');

‎packages/core/src/page.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export class Page {
140140
execute,
141141
...snapshot
142142
}) {
143-
let { name, width, enableJavaScript } = snapshot;
143+
let { name, width, enableJavaScript, disableShadowDOM } = snapshot;
144144
this.log.debug(`Taking snapshot: ${name}${width ? ` @${width}px` : ''}`, this.meta);
145145

146146
// wait for any specified timeout
@@ -181,7 +181,7 @@ export class Page {
181181
/* eslint-disable-next-line no-undef */
182182
domSnapshot: PercyDOM.serialize(options),
183183
url: document.URL
184-
}), { enableJavaScript });
184+
}), { enableJavaScript, disableShadowDOM });
185185

186186
return { ...snapshot, ...capture };
187187
}

‎packages/core/test/discovery.test.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,8 @@ describe('Discovery', () => {
305305
await percy.snapshot({
306306
name: 'test event snapshot',
307307
url: 'http://localhost:8000/events',
308-
enableJavaScript: true
308+
enableJavaScript: true,
309+
disableShadowDOM: true
309310
});
310311

311312
await percy.idle();

0 commit comments

Comments
 (0)