From f75ffc00b93c0e62d5f374e176830f676c5565ce Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nlawson@salesforce.com>
Date: Wed, 17 Jul 2024 08:07:27 -0700
Subject: [PATCH] fix: trim `data-lwc-host-mutated` attr values (#283)

---
 .../jest-preset/src/ssr/html-serializer.js     |  6 ++++--
 .../frameworkAttrsWithValue.spec.js.snap       |  9 +++++++++
 .../__tests__/frameworkAttrsWithValue.spec.js  | 15 +++++++++++++++
 .../frameworkAttrsWithValue.css                |  3 +++
 .../frameworkAttrsWithValue.html               |  3 +++
 .../frameworkAttrsWithValue.js                 | 18 ++++++++++++++++++
 .../frameworkAttrsWithValue.ssr-test.js.snap   | 12 ++++++++++++
 .../frameworkAttrsWithValue.ssr-test.js        | 14 ++++++++++++++
 .../frameworkAttrsWithValue.css                |  3 +++
 .../frameworkAttrsWithValue.html               |  3 +++
 .../frameworkAttrsWithValue.js                 | 18 ++++++++++++++++++
 11 files changed, 102 insertions(+), 2 deletions(-)
 create mode 100644 test/src/modules/serializer/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.spec.js.snap
 create mode 100644 test/src/modules/serializer/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.spec.js
 create mode 100644 test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.css
 create mode 100644 test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.html
 create mode 100644 test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.js
 create mode 100644 test/src/modules/ssr/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.ssr-test.js.snap
 create mode 100644 test/src/modules/ssr/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.ssr-test.js
 create mode 100644 test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.css
 create mode 100644 test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.html
 create mode 100644 test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.js

diff --git a/packages/@lwc/jest-preset/src/ssr/html-serializer.js b/packages/@lwc/jest-preset/src/ssr/html-serializer.js
index 47100161..fbfc79d5 100644
--- a/packages/@lwc/jest-preset/src/ssr/html-serializer.js
+++ b/packages/@lwc/jest-preset/src/ssr/html-serializer.js
@@ -104,8 +104,10 @@ function formatHTML(src) {
         res
             .trim()
             .replace(getKnownScopeTokensRegex(), '__lwc_scope_token__')
-            // These special attributes are reserved by the framework and are meaningless to component authors
-            .replace(/ data-lwc-host-mutated/g, '')
+            // These special attributes are reserved by the framework and are meaningless to component authors.
+            // `data-lwc-host-mutated` may or may not have an attribute value depending on the version of LWC.
+            // See: https://github.com/salesforce/lwc/pull/4385
+            .replace(/ data-lwc-host-mutated(="[^"]*")?/g, '')
             .replace(/ data-rendered-by-lwc/g, '')
     );
 }
diff --git a/test/src/modules/serializer/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.spec.js.snap b/test/src/modules/serializer/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.spec.js.snap
new file mode 100644
index 00000000..f19cdf3d
--- /dev/null
+++ b/test/src/modules/serializer/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`serializes a component containing framework-supplied attributes 1`] = `
+<serializer-component>
+  <h1>
+    Hello world
+  </h1>
+</serializer-component>
+`;
diff --git a/test/src/modules/serializer/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.spec.js b/test/src/modules/serializer/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.spec.js
new file mode 100644
index 00000000..897eb949
--- /dev/null
+++ b/test/src/modules/serializer/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.spec.js
@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { createElement } from 'lwc';
+import FrameworkAttrsWithValue from '../frameworkAttrsWithValue';
+
+it('serializes a component containing framework-supplied attributes', () => {
+    const elm = createElement('serializer-component', { is: FrameworkAttrsWithValue });
+    document.body.appendChild(elm);
+
+    expect(elm).toMatchSnapshot();
+});
diff --git a/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.css b/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.css
new file mode 100644
index 00000000..03d0aca0
--- /dev/null
+++ b/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.css
@@ -0,0 +1,3 @@
+h1 {
+    color: blue;
+}
diff --git a/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.html b/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.html
new file mode 100644
index 00000000..77dc69f8
--- /dev/null
+++ b/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.html
@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+  <h1>Hello world</h1>
+</template>
diff --git a/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.js b/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.js
new file mode 100644
index 00000000..e3b8cc7e
--- /dev/null
+++ b/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.js
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+import { LightningElement } from 'lwc';
+
+export default class FrameworkAttrsWithValue extends LightningElement {
+    static renderMode = 'light';
+
+    connectedCallback() {
+        // Typically this is only added by the framework itself, but here we are explicitly adding it
+        // to make the test simpler
+        this.setAttribute('data-lwc-host-mutated', 'class data-foo');
+    }
+}
diff --git a/test/src/modules/ssr/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.ssr-test.js.snap b/test/src/modules/ssr/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.ssr-test.js.snap
new file mode 100644
index 00000000..396d7793
--- /dev/null
+++ b/test/src/modules/ssr/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.ssr-test.js.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`serializes component with framework-supplied attributes with value 1`] = `
+<x-basic>
+  <style type="text/css">
+    h1 {color: blue;}
+  </style>
+  <h1>
+    Hello world
+  </h1>
+</x-basic>
+`;
diff --git a/test/src/modules/ssr/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.ssr-test.js b/test/src/modules/ssr/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.ssr-test.js
new file mode 100644
index 00000000..79b0cdc2
--- /dev/null
+++ b/test/src/modules/ssr/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.ssr-test.js
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { renderComponent } from 'lwc';
+import FrameworkAttrsWithValue from '../frameworkAttrsWithValue';
+
+it('serializes component with framework-supplied attributes with value', () => {
+    const renderedComponent = renderComponent('x-basic', FrameworkAttrsWithValue, {});
+
+    expect(renderedComponent).toMatchSnapshot();
+});
diff --git a/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.css b/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.css
new file mode 100644
index 00000000..03d0aca0
--- /dev/null
+++ b/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.css
@@ -0,0 +1,3 @@
+h1 {
+    color: blue;
+}
diff --git a/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.html b/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.html
new file mode 100644
index 00000000..77dc69f8
--- /dev/null
+++ b/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.html
@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+  <h1>Hello world</h1>
+</template>
diff --git a/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.js b/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.js
new file mode 100644
index 00000000..e3b8cc7e
--- /dev/null
+++ b/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.js
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+import { LightningElement } from 'lwc';
+
+export default class FrameworkAttrsWithValue extends LightningElement {
+    static renderMode = 'light';
+
+    connectedCallback() {
+        // Typically this is only added by the framework itself, but here we are explicitly adding it
+        // to make the test simpler
+        this.setAttribute('data-lwc-host-mutated', 'class data-foo');
+    }
+}