happo-e2e - npm Package Compare versions

Comparing version 3.2.2 to 3.3.0

browser.build.js

@@ -1737,2 +1737,3 @@ (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
   handleBase64Image,
+  strategy = 'hoist',
 } = {}) {
@@ -1780,7 +1781,16 @@ const allElements = transformToElementArray(oneOrMoreElements, doc);
 
-    htmlParts.push(element.outerHTML);
+    if (strategy === 'hoist') {
+      htmlParts.push(element.outerHTML);
+    } else if (strategy === 'clip') {
+      element.setAttribute('data-happo-clip', 'true');
+      htmlParts.push(doc.body.outerHTML);
+    } else {
+      throw new Error(`Unknown strategy: ${strategy}`);
+    }
 
-    const svgElementsWithSymbols = findSvgElementsWithSymbols(element);
-    for (const svgElement of svgElementsWithSymbols) {
-      htmlParts.push(`<div style="display: none;">${svgElement.outerHTML}</div>`);
+    if (strategy === 'hoist') {
+      const svgElementsWithSymbols = findSvgElementsWithSymbols(element);
+      for (const svgElement of svgElementsWithSymbols) {
+        htmlParts.push(`<div style="display: none;">${svgElement.outerHTML}</div>`);
+      }
     }
@@ -1797,2 +1807,7 @@ if (canvasCleanup) canvasCleanup();
   doc.querySelectorAll('happo-shadow-content').forEach((e) => e.remove());
+  if (strategy === 'clip') {
+    doc
+      .querySelectorAll('[data-happo-clip]')
+      .forEach((e) => e.removeAttribute('data-happo-clip'));
+  }
 
@@ -1799,0 +1814,0 @@ return {

package.json

 {
   "name": "happo-e2e",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "Helpers for e2e integrations with Happo",
@@ -5,0 +5,0 @@ "main": "index.js",

playwright-tests/takeDOMSnapshot.test.js

@@ -174,2 +174,40 @@ import { test, expect } from '@playwright/test';
 
+test('clip strategy', async ({ page }) => {
+  await setupPage(page);
+
+  await page.goto('/svg-sprites');
+
+  const snapshot = await page.evaluate(() => {
+    return window.happoTakeDOMSnapshot({
+      doc: document,
+      element: document.querySelector('main'),
+      strategy: 'clip',
+    });
+  });
+
+  expect(snapshot.html).toMatch(/<use xlink:href="#my-icon"/s);
+  expect((snapshot.html.match(/<symbol id="my-icon"/g) || []).length).toBe(1);
+  expect(snapshot.html).toMatch(/<body/s);
+  expect(snapshot.html).toMatch(/<\/body>/s);
+  expect(snapshot.html).toMatch(/<main data-happo-clip="true">/s);
+  expect(snapshot.assetUrls).toEqual([]);
+  expect(snapshot.cssBlocks).toEqual([]);
+});
+
+test('unknown strategy', async ({ page }) => {
+  await setupPage(page);
+
+  await page.goto('/svg-sprites');
+
+  await expect(
+    page.evaluate(() => {
+      return window.happoTakeDOMSnapshot({
+        doc: document,
+        element: document.querySelector('main'),
+        strategy: 'foobarbaz',
+      });
+    }),
+  ).rejects.toThrow(/Unknown strategy: foobarbaz/);
+});
+
 test('constructed styles', async ({ page }) => {
@@ -176,0 +214,0 @@ await setupPage(page);

takeDOMSnapshot.js

@@ -299,2 +299,3 @@ const md5 = require('crypto-js/md5');
   handleBase64Image,
+  strategy = 'hoist',
 } = {}) {
@@ -342,7 +343,16 @@ const allElements = transformToElementArray(oneOrMoreElements, doc);
 
-    htmlParts.push(element.outerHTML);
+    if (strategy === 'hoist') {
+      htmlParts.push(element.outerHTML);
+    } else if (strategy === 'clip') {
+      element.setAttribute('data-happo-clip', 'true');
+      htmlParts.push(doc.body.outerHTML);
+    } else {
+      throw new Error(`Unknown strategy: ${strategy}`);
+    }
 
-    const svgElementsWithSymbols = findSvgElementsWithSymbols(element);
-    for (const svgElement of svgElementsWithSymbols) {
-      htmlParts.push(`<div style="display: none;">${svgElement.outerHTML}</div>`);
+    if (strategy === 'hoist') {
+      const svgElementsWithSymbols = findSvgElementsWithSymbols(element);
+      for (const svgElement of svgElementsWithSymbols) {
+        htmlParts.push(`<div style="display: none;">${svgElement.outerHTML}</div>`);
+      }
     }
@@ -359,2 +369,7 @@ if (canvasCleanup) canvasCleanup();
   doc.querySelectorAll('happo-shadow-content').forEach((e) => e.remove());
+  if (strategy === 'clip') {
+    doc
+      .querySelectorAll('[data-happo-clip]')
+      .forEach((e) => e.removeAttribute('data-happo-clip'));
+  }
 
@@ -361,0 +376,0 @@ return {

No alert changes

Improved metrics

Total package byte prevSize

238400

increased by0.82%

Lines of code

3600

increased by1.64%

Worsened metrics

Number of package files

29

decreased by-3.33%

No dependency changes