feat(ct): solid unmount (#16838)

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>;

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();
+};

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>
+  </>
+}

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')
+});