From b3b624b0c96e5d5d9b00a264a699ce605491e0f7 Mon Sep 17 00:00:00 2001
From: Sander <info@mesander.com>
Date: Wed, 19 Apr 2023 16:28:00 +0200
Subject: [PATCH] feat(ct): vue throw when updating a native html element
 (#22392)

Related to: https://github.com/microsoft/playwright/issues/22328.
---
 packages/playwright-ct-vue/registerSource.mjs             | 3 +++
 tests/components/ct-vue-cli/tests/update/update.spec.tsx  | 8 ++++++++
 tests/components/ct-vue-vite/tests/update/update.spec.tsx | 8 ++++++++
 3 files changed, 19 insertions(+)

diff --git a/packages/playwright-ct-vue/registerSource.mjs b/packages/playwright-ct-vue/registerSource.mjs
index 8838800d4b..ae2e00b419 100644
--- a/packages/playwright-ct-vue/registerSource.mjs
+++ b/packages/playwright-ct-vue/registerSource.mjs
@@ -253,6 +253,9 @@ window.playwrightUpdate = async (rootElement, options) => {
   if (!wrapper)
     throw new Error('Component was not mounted');
 
+  if (!wrapper.component)
+    throw new Error('Updating a native HTML element is not supported');
+  
   const { slots, listeners, props } = __pwCreateComponent(options);
 
   wrapper.component.slots = __pwWrapFunctions(slots);
diff --git a/tests/components/ct-vue-cli/tests/update/update.spec.tsx b/tests/components/ct-vue-cli/tests/update/update.spec.tsx
index 72a3815f57..c56f3c82df 100644
--- a/tests/components/ct-vue-cli/tests/update/update.spec.tsx
+++ b/tests/components/ct-vue-cli/tests/update/update.spec.tsx
@@ -13,3 +13,11 @@ test('renderer and keep the component instance intact', async ({ mount }) => {
 
   await expect(component.getByTestId('remount-count')).toContainText('1');
 });
+
+test('throw error when updating a native html element', async ({ mount }) => {
+  const component = await mount(<div id="1337"></div>);
+  
+  await expect(async () => {
+    await component.update(<div id="9001"></div>);
+  }).rejects.toThrowError('Updating a native HTML element is not supported');
+});
diff --git a/tests/components/ct-vue-vite/tests/update/update.spec.tsx b/tests/components/ct-vue-vite/tests/update/update.spec.tsx
index 86a1b68921..d622c5f431 100644
--- a/tests/components/ct-vue-vite/tests/update/update.spec.tsx
+++ b/tests/components/ct-vue-vite/tests/update/update.spec.tsx
@@ -43,3 +43,11 @@ test('update slots without remounting', async ({ mount }) => {
 
   await expect(component.getByTestId('remount-count')).toContainText('1');
 });
+
+test('throw error when updating a native html element', async ({ mount }) => {
+  const component = await mount(<div id="1337"></div>);
+  
+  await expect(async () => {
+    await component.update(<div id="9001"></div>);
+  }).rejects.toThrowError('Updating a native HTML element is not supported');
+});