adds and fix tests

percy · Oct 30, 2023 · acff601 · acff601
1 parent 5036d52
commit acff601
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/packages/dom/test/helpers.js b/packages/dom/test/helpers.js
@@ -3,7 +3,7 @@ export const chromeBrowser = 'CHROME';
 export const firefoxBrowser = 'FIREFOX';
 
 // create and cleanup testing DOM
-export function withExample(html, options = { withShadow: true }) {
+export function withExample(html, options = { withShadow: true, invalidTagsOutsideBody: false }) {
   let $test = document.getElementById('test');
   if ($test) $test.remove();
 
@@ -16,14 +16,23 @@ export function withExample(html, options = { withShadow: true }) {
 
   document.body.appendChild($test);
 
-  if (options?.withShadow) {
+  if (options.withShadow) {
     $testShadow = document.createElement('div');
     $testShadow.id = 'test-shadow';
     let $shadow = $testShadow.attachShadow({ mode: 'open' });
     $shadow.innerHTML = `<h1>Hello DOM testing</h1>${html}`;
 
     document.body.appendChild($testShadow);
   }
+
+  if (options.invalidTagsOutsideBody) {
+    let p = document.getElementById('invalid-p');
+    p?.remove();
+    p = document.createElement('p');
+    p.id = 'invalid-p';
+    p.innerText = 'P tag outside body';
+    document.documentElement.append(p);
+  }
   return document;
 }
 

diff --git a/packages/dom/test/serialize-dom.test.js b/packages/dom/test/serialize-dom.test.js
@@ -6,7 +6,8 @@ describe('serializeDOM', () => {
     expect(serializeDOM()).toEqual({
       html: jasmine.any(String),
       warnings: jasmine.any(Array),
-      resources: jasmine.any(Array)
+      resources: jasmine.any(Array),
+      hints: jasmine.any(Array)
     });
   });
 
@@ -27,7 +28,7 @@ describe('serializeDOM', () => {
 
   it('optionally returns a stringified response', () => {
     expect(serializeDOM({ stringifyResponse: true }))
-      .toMatch('{"html":".*","warnings":\\[\\],"resources":\\[\\]}');
+      .toMatch('{"html":".*","warnings":\\[\\],"resources":\\[\\],"hints":\\[\\]}');
   });
 
   it('always has a doctype', () => {
@@ -68,7 +69,7 @@ describe('serializeDOM', () => {
     expect($('h2.callback').length).toEqual(1);
   });
 
-  it('applies dom transformations', () => {
+  it('applies default dom transformations', () => {
     withExample('<img loading="lazy" src="http://some-url"/><iframe loading="lazy" src="">');
 
     const result = serializeDOM();
@@ -318,4 +319,22 @@ describe('serializeDOM', () => {
       expect(warnings).toEqual(['Could not transform the dom: test error']);
     });
   });
+
+  describe('with `reshuffleInvalidTags`', () => {
+    beforeEach(() => {
+      withExample('', { withShadow: false, invalidTagsOutsideBody: true });
+    });
+
+    it('does not reshuffle tags outside </body>', () => {
+      const result = serializeDOM();
+      expect(result.html).toContain('P tag outside body');
+      expect(result.hints).toEqual(['DOM elements found outside </body>']);
+    });
+
+    it('reshuffles tags outside </body>', () => {
+      const result = serializeDOM({ reshuffleInvalidTags: true });
+      expect(result.html).toContain('P tag outside body');
+      expect(result.hints).toEqual([]);
+    });
+  });
 });