From 053e1518fb4bb123a8d81249a5aca53056b33abd Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nlawson@salesforce.com>
Date: Tue, 9 Jul 2024 11:17:16 -0700
Subject: [PATCH] chore: trim framework-supplied attributes in CSR (#281)

---
 .../jest-serializer/src/clean-element-attrs.js |  1 +
 .../__snapshots__/frameworkAttrs.spec.js.snap  |  9 +++++++++
 .../__tests__/frameworkAttrs.spec.js           | 15 +++++++++++++++
 .../frameworkAttrs/frameworkAttrs.css          |  3 +++
 .../frameworkAttrs/frameworkAttrs.html         |  3 +++
 .../frameworkAttrs/frameworkAttrs.js           | 18 ++++++++++++++++++
 6 files changed, 49 insertions(+)
 create mode 100644 test/src/modules/serializer/frameworkAttrs/__tests__/__snapshots__/frameworkAttrs.spec.js.snap
 create mode 100644 test/src/modules/serializer/frameworkAttrs/__tests__/frameworkAttrs.spec.js
 create mode 100644 test/src/modules/serializer/frameworkAttrs/frameworkAttrs.css
 create mode 100644 test/src/modules/serializer/frameworkAttrs/frameworkAttrs.html
 create mode 100644 test/src/modules/serializer/frameworkAttrs/frameworkAttrs.js

diff --git a/packages/@lwc/jest-serializer/src/clean-element-attrs.js b/packages/@lwc/jest-serializer/src/clean-element-attrs.js
index b7b3c416..1cb2ec21 100644
--- a/packages/@lwc/jest-serializer/src/clean-element-attrs.js
+++ b/packages/@lwc/jest-serializer/src/clean-element-attrs.js
@@ -8,6 +8,7 @@ const { isKnownScopeToken } = require('@lwc/jest-shared');
 
 const ATTRS_TO_REMOVE = [
     'lwc:host', // https://github.com/salesforce/lwc/pull/1600
+    'data-lwc-host-mutated', // https://github.com/salesforce/lwc/pull/4358
 ];
 
 function cleanElementAttributes(elm) {
diff --git a/test/src/modules/serializer/frameworkAttrs/__tests__/__snapshots__/frameworkAttrs.spec.js.snap b/test/src/modules/serializer/frameworkAttrs/__tests__/__snapshots__/frameworkAttrs.spec.js.snap
new file mode 100644
index 00000000..f19cdf3d
--- /dev/null
+++ b/test/src/modules/serializer/frameworkAttrs/__tests__/__snapshots__/frameworkAttrs.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/frameworkAttrs/__tests__/frameworkAttrs.spec.js b/test/src/modules/serializer/frameworkAttrs/__tests__/frameworkAttrs.spec.js
new file mode 100644
index 00000000..744a82ee
--- /dev/null
+++ b/test/src/modules/serializer/frameworkAttrs/__tests__/frameworkAttrs.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 FrameworkAttrs from '../frameworkAttrs';
+
+it('serializes a component containing framework-supplied attributes', () => {
+    const elm = createElement('serializer-component', { is: FrameworkAttrs });
+    document.body.appendChild(elm);
+
+    expect(elm).toMatchSnapshot();
+});
diff --git a/test/src/modules/serializer/frameworkAttrs/frameworkAttrs.css b/test/src/modules/serializer/frameworkAttrs/frameworkAttrs.css
new file mode 100644
index 00000000..03d0aca0
--- /dev/null
+++ b/test/src/modules/serializer/frameworkAttrs/frameworkAttrs.css
@@ -0,0 +1,3 @@
+h1 {
+    color: blue;
+}
diff --git a/test/src/modules/serializer/frameworkAttrs/frameworkAttrs.html b/test/src/modules/serializer/frameworkAttrs/frameworkAttrs.html
new file mode 100644
index 00000000..77dc69f8
--- /dev/null
+++ b/test/src/modules/serializer/frameworkAttrs/frameworkAttrs.html
@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+  <h1>Hello world</h1>
+</template>
diff --git a/test/src/modules/serializer/frameworkAttrs/frameworkAttrs.js b/test/src/modules/serializer/frameworkAttrs/frameworkAttrs.js
new file mode 100644
index 00000000..bcdc70c3
--- /dev/null
+++ b/test/src/modules/serializer/frameworkAttrs/frameworkAttrs.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 FrameworkAttrs 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', '');
+    }
+}