From 8e6a3db655d0758186763349b69160344156ab66 Mon Sep 17 00:00:00 2001 From: nilshah98 Date: Fri, 1 Dec 2023 12:38:51 +0530 Subject: [PATCH 1/7] fix: always set percy-data attributes when serializing --- packages/dom/src/prepare-dom.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/dom/src/prepare-dom.js b/packages/dom/src/prepare-dom.js index 25a093219..52d1a0011 100644 --- a/packages/dom/src/prepare-dom.js +++ b/packages/dom/src/prepare-dom.js @@ -6,18 +6,13 @@ export function uid() { export function markElement(domElement, disableShadowDOM) { // Mark elements that are to be serialized later with a data attribute. if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style'].includes(domElement.tagName?.toLowerCase())) { - if (!domElement.getAttribute('data-percy-element-id')) { - domElement.setAttribute('data-percy-element-id', uid()); - } + domElement.setAttribute('data-percy-element-id', uid()); } // add special marker for shadow host if (!disableShadowDOM && domElement.shadowRoot) { domElement.setAttribute('data-percy-shadow-host', ''); - - if (!domElement.getAttribute('data-percy-element-id')) { - domElement.setAttribute('data-percy-element-id', uid()); - } + domElement.setAttribute('data-percy-element-id', uid()); } } From e41d6dc8087ebd3788aaf39f6df998b40b069d39 Mon Sep 17 00:00:00 2001 From: nilshah98 Date: Sat, 2 Dec 2023 11:45:06 +0530 Subject: [PATCH 2/7] wip: tests passing, but order of shadow, plain fixed --- packages/dom/test/helpers.js | 2 +- packages/dom/test/serialize-inputs.test.js | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/dom/test/helpers.js b/packages/dom/test/helpers.js index 84938e170..60fe5817e 100644 --- a/packages/dom/test/helpers.js +++ b/packages/dom/test/helpers.js @@ -120,7 +120,7 @@ export function getTestBrowser() { export const platforms = (() => { if (getTestBrowser() === chromeBrowser) { - return ['plain', 'shadow']; + return ['shadow', 'plain']; } return ['plain']; })(); diff --git a/packages/dom/test/serialize-inputs.test.js b/packages/dom/test/serialize-inputs.test.js index da37f106a..a5cfb156f 100644 --- a/packages/dom/test/serialize-inputs.test.js +++ b/packages/dom/test/serialize-inputs.test.js @@ -4,8 +4,9 @@ import serializeDOM from '@percy/dom'; describe('serializeInputs', () => { let cache = { shadow: {}, plain: {} }; - beforeEach(async () => { - withExample(` + beforeAll(async () => { + platforms.forEach((platform) => { + withExample(`
@@ -42,8 +43,6 @@ describe('serializeInputs', () => {
`); - - platforms.forEach((platform) => { const dom = platformDOM(platform); dom.querySelector('#name').value = 'Bob Boberson'; dom.querySelector('#valueAttr').value = 'Replacement Value!'; @@ -127,7 +126,7 @@ describe('serializeInputs', () => { expect(dom.querySelectorAll('[data-percy-element-id]')).toHaveSize(platform === 'plain' ? 10 : 9); }); - it(`${platform}: adds matching guids to the orignal DOM and cloned DOM`, () => { + fit(`${platform}: adds matching guids to the orignal DOM and cloned DOM`, () => { let og = dom.querySelector('[data-percy-element-id]').getAttribute('data-percy-element-id'); expect(og).toEqual($('[data-percy-element-id]')[0].getAttribute('data-percy-element-id')); }); From 8ef86794f007ac97aa99e81ffedc91536327ce29 Mon Sep 17 00:00:00 2001 From: nilshah98 Date: Sat, 2 Dec 2023 12:11:22 +0530 Subject: [PATCH 3/7] wip: use cloned nodes for plain, so that we dont check the reserialized dom --- packages/dom/test/helpers.js | 2 +- packages/dom/test/serialize-inputs.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dom/test/helpers.js b/packages/dom/test/helpers.js index 60fe5817e..84938e170 100644 --- a/packages/dom/test/helpers.js +++ b/packages/dom/test/helpers.js @@ -120,7 +120,7 @@ export function getTestBrowser() { export const platforms = (() => { if (getTestBrowser() === chromeBrowser) { - return ['shadow', 'plain']; + return ['plain', 'shadow']; } return ['plain']; })(); diff --git a/packages/dom/test/serialize-inputs.test.js b/packages/dom/test/serialize-inputs.test.js index a5cfb156f..904ead594 100644 --- a/packages/dom/test/serialize-inputs.test.js +++ b/packages/dom/test/serialize-inputs.test.js @@ -61,8 +61,8 @@ describe('serializeInputs', () => { option.selected = false; } }); - cache[platform].dom = dom; cache[platform].$ = parseDOM(serializeDOM(), platform); + cache[platform].dom = platform === 'shadow' ? dom : dom.cloneNode(true) }); // interact with the inputs to update properties (does not update attributes) }); From dbbdb79467038189ecdbc764a47869cff8c713d1 Mon Sep 17 00:00:00 2001 From: nilshah98 Date: Sat, 2 Dec 2023 12:13:41 +0530 Subject: [PATCH 4/7] test: remove test for overriding previous guids --- packages/dom/test/serialize-inputs.test.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/dom/test/serialize-inputs.test.js b/packages/dom/test/serialize-inputs.test.js index 904ead594..c5518a739 100644 --- a/packages/dom/test/serialize-inputs.test.js +++ b/packages/dom/test/serialize-inputs.test.js @@ -126,19 +126,11 @@ describe('serializeInputs', () => { expect(dom.querySelectorAll('[data-percy-element-id]')).toHaveSize(platform === 'plain' ? 10 : 9); }); - fit(`${platform}: adds matching guids to the orignal DOM and cloned DOM`, () => { + it(`${platform}: adds matching guids to the orignal DOM and cloned DOM`, () => { let og = dom.querySelector('[data-percy-element-id]').getAttribute('data-percy-element-id'); expect(og).toEqual($('[data-percy-element-id]')[0].getAttribute('data-percy-element-id')); }); - it(`${platform}: does not override previous guids when reserializing`, () => { - let getUid = () => dom.querySelector('[data-percy-element-id]').getAttribute('data-percy-element-id'); - let first = getUid(); - - serializeDOM(); - expect(getUid()).toEqual(first); - }); - it(`${platform}: does not mutate values in origial DOM`, () => { expect($('#name')[0].getAttribute('value')).toBe('Bob Boberson'); expect(dom.querySelector('#name').getAttribute('value')).toBeNull(); From d1603e3985c7dd59232c4090eef10df964ead484 Mon Sep 17 00:00:00 2001 From: nilshah98 Date: Sat, 2 Dec 2023 12:14:05 +0530 Subject: [PATCH 5/7] chore: lint fix --- packages/dom/test/serialize-inputs.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dom/test/serialize-inputs.test.js b/packages/dom/test/serialize-inputs.test.js index c5518a739..c6fd726cc 100644 --- a/packages/dom/test/serialize-inputs.test.js +++ b/packages/dom/test/serialize-inputs.test.js @@ -62,7 +62,7 @@ describe('serializeInputs', () => { } }); cache[platform].$ = parseDOM(serializeDOM(), platform); - cache[platform].dom = platform === 'shadow' ? dom : dom.cloneNode(true) + cache[platform].dom = platform === 'shadow' ? dom : dom.cloneNode(true); }); // interact with the inputs to update properties (does not update attributes) }); From 4047299f7275b1d5c047e774b7d928e2698d761d Mon Sep 17 00:00:00 2001 From: nilshah98 Date: Sat, 2 Dec 2023 12:16:48 +0530 Subject: [PATCH 6/7] test: undo test setup changes --- packages/dom/test/serialize-inputs.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/dom/test/serialize-inputs.test.js b/packages/dom/test/serialize-inputs.test.js index c6fd726cc..b344c110e 100644 --- a/packages/dom/test/serialize-inputs.test.js +++ b/packages/dom/test/serialize-inputs.test.js @@ -4,9 +4,8 @@ import serializeDOM from '@percy/dom'; describe('serializeInputs', () => { let cache = { shadow: {}, plain: {} }; - beforeAll(async () => { - platforms.forEach((platform) => { - withExample(` + beforeEach(async () => { + withExample(`
@@ -43,6 +42,7 @@ describe('serializeInputs', () => {
`); + platforms.forEach((platform) => { const dom = platformDOM(platform); dom.querySelector('#name').value = 'Bob Boberson'; dom.querySelector('#valueAttr').value = 'Replacement Value!'; From 0c15aaba590aa0dd611546f45341c3514bacab0c Mon Sep 17 00:00:00 2001 From: nilshah98 Date: Sat, 2 Dec 2023 12:19:08 +0530 Subject: [PATCH 7/7] chore: added comments --- packages/dom/test/serialize-inputs.test.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/dom/test/serialize-inputs.test.js b/packages/dom/test/serialize-inputs.test.js index b344c110e..156e0c10d 100644 --- a/packages/dom/test/serialize-inputs.test.js +++ b/packages/dom/test/serialize-inputs.test.js @@ -42,6 +42,7 @@ describe('serializeInputs', () => { `); + platforms.forEach((platform) => { const dom = platformDOM(platform); dom.querySelector('#name').value = 'Bob Boberson'; @@ -62,6 +63,8 @@ describe('serializeInputs', () => { } }); cache[platform].$ = parseDOM(serializeDOM(), platform); + // save DOM, only after serializing it + // clone DOM, so that during next platform iteration, serializeDOM doesn't change current original DOM cache[platform].dom = platform === 'shadow' ? dom : dom.cloneNode(true); }); // interact with the inputs to update properties (does not update attributes)