From 015a1bcc1c0bdcc17409266ccc448b2def320914 Mon Sep 17 00:00:00 2001
From: Sander <info@mesander.com>
Date: Mon, 26 Feb 2024 20:16:27 +0100
Subject: [PATCH] feat(ct): double unmounting component throws error (#29650)

---
 packages/playwright-ct-solid/registerSource.mjs       |  1 +
 packages/playwright-ct-svelte/registerSource.mjs      |  1 +
 packages/playwright-ct-vue/registerSource.mjs         |  1 +
 packages/playwright-ct-vue2/registerSource.mjs        |  1 +
 tests/components/ct-react-vite/tests/unmount.spec.tsx |  6 ++++++
 tests/components/ct-react17/tests/unmount.spec.tsx    |  6 ++++++
 tests/components/ct-solid/tests/unmount.spec.tsx      |  6 ++++++
 tests/components/ct-svelte-vite/tests/unmount.spec.ts | 10 ++++++++++
 tests/components/ct-svelte/tests/unmount.spec.ts      | 10 ++++++++++
 .../ct-vue-cli/tests/unmount/unmount.spec.ts          | 11 +++++++++++
 .../ct-vue-cli/tests/unmount/unmount.spec.tsx         |  6 ++++++
 .../ct-vue-vite/tests/unmount/unmount.spec.ts         | 10 ++++++++++
 .../ct-vue-vite/tests/unmount/unmount.spec.tsx        |  7 +++++++
 .../ct-vue2-cli/tests/unmount/unmount.spec.ts         | 10 ++++++++++
 .../ct-vue2-cli/tests/unmount/unmount.spec.tsx        |  6 ++++++
 15 files changed, 92 insertions(+)

diff --git a/packages/playwright-ct-solid/registerSource.mjs b/packages/playwright-ct-solid/registerSource.mjs
index c89caa7bd8..d0077dd494 100644
--- a/packages/playwright-ct-solid/registerSource.mjs
+++ b/packages/playwright-ct-solid/registerSource.mjs
@@ -72,6 +72,7 @@ window.playwrightUnmount = async rootElement => {
     throw new Error('Component was not mounted');
 
   unmount();
+  delete rootElement[__pwUnmountKey];
 };
 
 window.playwrightUpdate = async (rootElement, component) => {
diff --git a/packages/playwright-ct-svelte/registerSource.mjs b/packages/playwright-ct-svelte/registerSource.mjs
index b11f8e0369..642548f18a 100644
--- a/packages/playwright-ct-svelte/registerSource.mjs
+++ b/packages/playwright-ct-svelte/registerSource.mjs
@@ -108,6 +108,7 @@ window.playwrightUnmount = async rootElement => {
   if (!svelteComponent)
     throw new Error('Component was not mounted');
   svelteComponent.$destroy();
+  delete rootElement[__pwSvelteComponentKey];
 };
 
 window.playwrightUpdate = async (rootElement, component) => {
diff --git a/packages/playwright-ct-vue/registerSource.mjs b/packages/playwright-ct-vue/registerSource.mjs
index 198372cc38..07ce5298f4 100644
--- a/packages/playwright-ct-vue/registerSource.mjs
+++ b/packages/playwright-ct-vue/registerSource.mjs
@@ -256,6 +256,7 @@ window.playwrightUnmount = async rootElement => {
   if (!app)
     throw new Error('Component was not mounted');
   app.unmount();
+  delete rootElement[__pwAppKey];
 };
 
 window.playwrightUpdate = async (rootElement, component) => {
diff --git a/packages/playwright-ct-vue2/registerSource.mjs b/packages/playwright-ct-vue2/registerSource.mjs
index b0a7ae71dc..19b4d41c08 100644
--- a/packages/playwright-ct-vue2/registerSource.mjs
+++ b/packages/playwright-ct-vue2/registerSource.mjs
@@ -182,6 +182,7 @@ window.playwrightUnmount = async rootElement => {
     throw new Error('Component was not mounted');
   component.$destroy();
   component.$el.remove();
+  delete rootElement[instanceKey];
 };
 
 window.playwrightUpdate = async (element, options) => {
diff --git a/tests/components/ct-react-vite/tests/unmount.spec.tsx b/tests/components/ct-react-vite/tests/unmount.spec.tsx
index acc11c4fdb..20374d8b8e 100644
--- a/tests/components/ct-react-vite/tests/unmount.spec.tsx
+++ b/tests/components/ct-react-vite/tests/unmount.spec.tsx
@@ -17,3 +17,9 @@ test('unmount a multi root component', async ({ mount, page }) => {
   await expect(page.locator('#root')).not.toContainText('root 1');
   await expect(page.locator('#root')).not.toContainText('root 2');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});
diff --git a/tests/components/ct-react17/tests/unmount.spec.tsx b/tests/components/ct-react17/tests/unmount.spec.tsx
index ff9d152b59..8f55829da5 100644
--- a/tests/components/ct-react17/tests/unmount.spec.tsx
+++ b/tests/components/ct-react17/tests/unmount.spec.tsx
@@ -17,3 +17,9 @@ test('unmount a multi root component', async ({ page, mount }) => {
   await expect(page.locator('#root')).not.toContainText('root 1');
   await expect(page.locator('#root')).not.toContainText('root 2');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});
diff --git a/tests/components/ct-solid/tests/unmount.spec.tsx b/tests/components/ct-solid/tests/unmount.spec.tsx
index 45e715cdf6..5bb38c641b 100644
--- a/tests/components/ct-solid/tests/unmount.spec.tsx
+++ b/tests/components/ct-solid/tests/unmount.spec.tsx
@@ -17,3 +17,9 @@ test('unmount a multi root component', async ({ mount, page }) => {
   await expect(page.locator('#root')).not.toContainText('root 1');
   await expect(page.locator('#root')).not.toContainText('root 2');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});
diff --git a/tests/components/ct-svelte-vite/tests/unmount.spec.ts b/tests/components/ct-svelte-vite/tests/unmount.spec.ts
index bf0898804f..23e53b8529 100644
--- a/tests/components/ct-svelte-vite/tests/unmount.spec.ts
+++ b/tests/components/ct-svelte-vite/tests/unmount.spec.ts
@@ -21,3 +21,13 @@ test('unmount a multi root component', async ({ mount, page }) => {
   await expect(page.locator('#root')).not.toContainText('root 1');
   await expect(page.locator('#root')).not.toContainText('root 2');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});
diff --git a/tests/components/ct-svelte/tests/unmount.spec.ts b/tests/components/ct-svelte/tests/unmount.spec.ts
index 9be4d9e7e1..c0ac0f6785 100644
--- a/tests/components/ct-svelte/tests/unmount.spec.ts
+++ b/tests/components/ct-svelte/tests/unmount.spec.ts
@@ -21,3 +21,13 @@ test('unmount a multi root component', async ({ page, mount }) => {
   await expect(page.locator('#root')).not.toContainText('root 1');
   await expect(page.locator('#root')).not.toContainText('root 2');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});
diff --git a/tests/components/ct-vue-cli/tests/unmount/unmount.spec.ts b/tests/components/ct-vue-cli/tests/unmount/unmount.spec.ts
index 0077cdfed5..81e4686173 100644
--- a/tests/components/ct-vue-cli/tests/unmount/unmount.spec.ts
+++ b/tests/components/ct-vue-cli/tests/unmount/unmount.spec.ts
@@ -21,3 +21,14 @@ test('unmount a multi root component', async ({ mount, page }) => {
   await expect(page.locator('#root')).not.toContainText('root 1');
   await expect(page.locator('#root')).not.toContainText('root 2');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});
+
diff --git a/tests/components/ct-vue-cli/tests/unmount/unmount.spec.tsx b/tests/components/ct-vue-cli/tests/unmount/unmount.spec.tsx
index 840b4c5158..614fd784c9 100644
--- a/tests/components/ct-vue-cli/tests/unmount/unmount.spec.tsx
+++ b/tests/components/ct-vue-cli/tests/unmount/unmount.spec.tsx
@@ -17,3 +17,9 @@ test('unmount a multi root component', async ({ mount, page }) => {
   await expect(page.locator('#root')).not.toContainText('root 1');
   await expect(page.locator('#root')).not.toContainText('root 2');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});
diff --git a/tests/components/ct-vue-vite/tests/unmount/unmount.spec.ts b/tests/components/ct-vue-vite/tests/unmount/unmount.spec.ts
index 0077cdfed5..2eb99ccd82 100644
--- a/tests/components/ct-vue-vite/tests/unmount/unmount.spec.ts
+++ b/tests/components/ct-vue-vite/tests/unmount/unmount.spec.ts
@@ -21,3 +21,13 @@ test('unmount a multi root component', async ({ mount, page }) => {
   await expect(page.locator('#root')).not.toContainText('root 1');
   await expect(page.locator('#root')).not.toContainText('root 2');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});
diff --git a/tests/components/ct-vue-vite/tests/unmount/unmount.spec.tsx b/tests/components/ct-vue-vite/tests/unmount/unmount.spec.tsx
index 967ac97e0d..f4a51893f1 100644
--- a/tests/components/ct-vue-vite/tests/unmount/unmount.spec.tsx
+++ b/tests/components/ct-vue-vite/tests/unmount/unmount.spec.tsx
@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
 import MultiRoot from '@/components/MultiRoot.vue';
+import Button from '@/components/Button.vue';
 
 test('unmount a multi root component', async ({ mount, page }) => {
   const component = await mount(<MultiRoot />);
@@ -9,3 +10,9 @@ test('unmount a multi root component', async ({ mount, page }) => {
   await expect(page.locator('#root')).not.toContainText('root 1');
   await expect(page.locator('#root')).not.toContainText('root 2');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});
diff --git a/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.ts b/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.ts
index b4a21341d8..4ed68f6c3f 100644
--- a/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.ts
+++ b/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.ts
@@ -11,3 +11,13 @@ test('unmount', async ({ page, mount }) => {
   await component.unmount();
   await expect(page.locator('#root')).not.toContainText('Submit');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});
diff --git a/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.tsx b/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.tsx
index ece46931fa..224a601183 100644
--- a/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.tsx
+++ b/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.tsx
@@ -7,3 +7,9 @@ test('unmount', async ({ page, mount }) => {
   await component.unmount();
   await expect(page.locator('#root')).not.toContainText('Submit');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});