From 4f97aeb3c54d21db9de51d42825411f09dfdb280 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 4 Aug 2022 11:18:03 -0700
Subject: [PATCH] test: add test to confirm observedAttributes behavior (#2973)

---
 .../observed-attributes/index.spec.js         | 37 +++++++++++++++++++
 .../x/observes/observes.js                    | 11 ++++++
 2 files changed, 48 insertions(+)
 create mode 100644 packages/@lwc/integration-karma/test/component/observed-attributes/index.spec.js
 create mode 100644 packages/@lwc/integration-karma/test/component/observed-attributes/x/observes/observes.js

diff --git a/packages/@lwc/integration-karma/test/component/observed-attributes/index.spec.js b/packages/@lwc/integration-karma/test/component/observed-attributes/index.spec.js
new file mode 100644
index 0000000000..f72f8feacc
--- /dev/null
+++ b/packages/@lwc/integration-karma/test/component/observed-attributes/index.spec.js
@@ -0,0 +1,37 @@
+import { createElement } from 'lwc';
+import Observes from 'x/observes';
+
+const SUPPORTS_CUSTOM_ELEMENTS = !process.env.COMPAT && 'customElements' in window;
+
+if (SUPPORTS_CUSTOM_ELEMENTS) {
+    describe('observed attributes', () => {
+        const constructorMethods = {
+            CustomElementConstructor: () => {
+                customElements.define(
+                    'x-observes-as-custom-element',
+                    Observes.CustomElementConstructor
+                );
+                const elm = document.createElement('x-observes-as-custom-element');
+                document.body.appendChild(elm);
+                return elm;
+            },
+            createElement: () => {
+                const elm = createElement('x-observes', { is: Observes });
+                document.body.appendChild(elm);
+                return elm;
+            },
+        };
+
+        Object.entries(constructorMethods).forEach(([name, makeElement]) => {
+            // TODO [#2972]: LWC components do not respect observedAttributes/attributeChangedCallback
+            it(`${name} - should not observe attributes`, () => {
+                const elm = makeElement();
+
+                elm.setAttribute('foo', 'bar');
+                elm.removeAttribute('foo');
+
+                expect(elm.changes).toEqual([]);
+            });
+        });
+    });
+}
diff --git a/packages/@lwc/integration-karma/test/component/observed-attributes/x/observes/observes.js b/packages/@lwc/integration-karma/test/component/observed-attributes/x/observes/observes.js
new file mode 100644
index 0000000000..9f26c36556
--- /dev/null
+++ b/packages/@lwc/integration-karma/test/component/observed-attributes/x/observes/observes.js
@@ -0,0 +1,11 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    static observedAttributes = ['foo'];
+
+    @api changes = [];
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        this.changes.push({ name, oldValue, newValue });
+    }
+}