From 0972f1469acc7f9ac0b21f023eed4c4378462d7f Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Fri, 26 Aug 2022 20:51:36 +0200
Subject: [PATCH] feat(ct): solid unmount (#16838)

---
 packages/playwright-ct-solid/index.d.ts       |  4 +++-
 .../playwright-ct-solid/registerSource.mjs    | 13 ++++++++++++-
 .../ct-solid/src/components/MultiRoot.tsx     |  6 ++++++
 tests/components/ct-solid/src/tests.spec.tsx  | 19 ++++++++++++++++++-
 4 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 tests/components/ct-solid/src/components/MultiRoot.tsx

diff --git a/packages/playwright-ct-solid/index.d.ts b/packages/playwright-ct-solid/index.d.ts
index 4e52d19c0d..b19433094f 100644
--- a/packages/playwright-ct-solid/index.d.ts
+++ b/packages/playwright-ct-solid/index.d.ts
@@ -38,7 +38,9 @@ export interface MountOptions {
   hooksConfig?: any;
 }
 
-interface MountResult extends Locator {}
+interface MountResult extends Locator {
+  unmount(): Promise<void>;
+}
 
 export interface ComponentFixtures {
   mount(component: JSX.Element, options?: MountOptions): Promise<MountResult>;
diff --git a/packages/playwright-ct-solid/registerSource.mjs b/packages/playwright-ct-solid/registerSource.mjs
index 88a40b363f..1711b6b35f 100644
--- a/packages/playwright-ct-solid/registerSource.mjs
+++ b/packages/playwright-ct-solid/registerSource.mjs
@@ -57,12 +57,23 @@ function render(component) {
   return createComponent(componentFunc, component.props);
 }
 
+const unmountKey = Symbol('disposeKey');
+
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
   for (const hook of /** @type {any} */(window).__pw_hooks_before_mount || [])
     await hook({ hooksConfig });
 
-  solidRender(() => render(component), rootElement);
+  const unmount = solidRender(() => render(component), rootElement);
+  rootElement[unmountKey] = unmount;
 
   for (const hook of /** @type {any} */(window).__pw_hooks_after_mount || [])
     await hook({ hooksConfig });
 };
+
+window.playwrightUnmount = async rootElement => {
+  const unmount = rootElement[unmountKey];
+  if (!unmount)
+    throw new Error('Component was not mounted');
+
+  unmount();
+};
diff --git a/tests/components/ct-solid/src/components/MultiRoot.tsx b/tests/components/ct-solid/src/components/MultiRoot.tsx
new file mode 100644
index 0000000000..f29e397c0f
--- /dev/null
+++ b/tests/components/ct-solid/src/components/MultiRoot.tsx
@@ -0,0 +1,6 @@
+export default function MultiRoot() {
+  return <>
+    <div>root 1</div>
+    <div>root 2</div>
+  </>
+}
diff --git a/tests/components/ct-solid/src/tests.spec.tsx b/tests/components/ct-solid/src/tests.spec.tsx
index f8a2769799..a660541477 100644
--- a/tests/components/ct-solid/src/tests.spec.tsx
+++ b/tests/components/ct-solid/src/tests.spec.tsx
@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/experimental-ct-solid'
 import Button from './components/Button';
+import MultiRoot from './components/MultiRoot';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
@@ -15,4 +16,20 @@ test('callback should work', async ({ mount }) => {
   }}></Button>)
   await component.click()
   expect(messages).toEqual(['hello'])
-})
+});
+
+test('should unmount', async ({ page, mount }) => {
+  const component = await mount(<Button title="Submit" />)
+  await expect(page.locator('#root')).toContainText('Submit')
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('Submit');
+});
+
+test('unmount a multi root component should work', async ({ mount, page }) => {
+  const component = await mount(<MultiRoot />)
+  await expect(page.locator('#root')).toContainText('root 1')
+  await expect(page.locator('#root')).toContainText('root 2')
+  await component.unmount()
+  await expect(page.locator('#root')).not.toContainText('root 1')
+  await expect(page.locator('#root')).not.toContainText('root 2')
+});