From d8b037c559cbed2ea540f97f19208a3106ad8ea2 Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Thu, 20 Oct 2022 04:39:50 +0200
Subject: [PATCH] feat(ct): solid update (#18074)

closes: https://github.com/microsoft/playwright/issues/15057
closes: https://github.com/microsoft/playwright/issues/15919

Signed-off-by: sand4rt <info@mesander.com>
---
 packages/playwright-ct-solid/index.d.ts       |  1 +
 .../playwright-ct-solid/registerSource.mjs    |  5 ++
 .../ct-solid/src/components/Counter.tsx       | 19 +++++++
 tests/components/ct-solid/src/tests.spec.tsx  | 50 ++++++++++++++++++-
 4 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 tests/components/ct-solid/src/components/Counter.tsx

diff --git a/packages/playwright-ct-solid/index.d.ts b/packages/playwright-ct-solid/index.d.ts
index 2b21976334..8f06efc53e 100644
--- a/packages/playwright-ct-solid/index.d.ts
+++ b/packages/playwright-ct-solid/index.d.ts
@@ -45,6 +45,7 @@ export interface MountOptions<HooksConfig extends JsonObject> {
 
 interface MountResult extends Locator {
   unmount(): Promise<void>;
+  update(component: JSX.Element): Promise<void>;
 }
 
 export interface ComponentFixtures {
diff --git a/packages/playwright-ct-solid/registerSource.mjs b/packages/playwright-ct-solid/registerSource.mjs
index 0e9741830a..4b9c44869f 100644
--- a/packages/playwright-ct-solid/registerSource.mjs
+++ b/packages/playwright-ct-solid/registerSource.mjs
@@ -95,3 +95,8 @@ window.playwrightUnmount = async rootElement => {
 
   unmount();
 };
+
+window.playwrightUpdate = async (rootElement, component) => {
+  window.playwrightUnmount(rootElement);
+  window.playwrightMount(component, rootElement, {});
+};
diff --git a/tests/components/ct-solid/src/components/Counter.tsx b/tests/components/ct-solid/src/components/Counter.tsx
new file mode 100644
index 0000000000..6b35eddcec
--- /dev/null
+++ b/tests/components/ct-solid/src/components/Counter.tsx
@@ -0,0 +1,19 @@
+import { createSignal } from "solid-js";
+
+ type CounterProps = {
+   count?: number;
+   onClick?(props: string): void;
+   children?: any;
+ }
+
+ let _remountCount = 1;
+
+ export default function Counter(props: CounterProps) {
+  const [remountCount, setRemountCount] = createSignal(_remountCount++);
+  return <div onClick={() => props.onClick?.('hello')}>
+     <div data-testid="props">{ props.count }</div>
+     <div data-testid="remount-count">{ remountCount }</div>
+     { props.children }
+   </div>
+ }
+ 
\ No newline at end of file
diff --git a/tests/components/ct-solid/src/tests.spec.tsx b/tests/components/ct-solid/src/tests.spec.tsx
index fda162d46b..a939580e31 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 Counter from './components/Counter';
 import DefaultChildren from './components/DefaultChildren';
 import MultipleChildren from './components/MultipleChildren';
 import MultiRoot from './components/MultiRoot';
@@ -16,7 +17,54 @@ test('render props', async ({ mount }) => {
 test('render attributes', async ({ mount }) => {
   const component = await mount(<Button className="primary" title="Submit" />)
   await expect(component).toHaveClass('primary');
-})
+});
+
+test('renderer updates props without remounting', async ({ mount }) => {
+  const component = await mount(<Counter count={9001} />)
+  await expect(component.getByTestId('props')).toContainText('9001')
+
+  await component.update(<Counter count={1337} />)
+  await expect(component).not.toContainText('9001')
+  await expect(component.getByTestId('props')).toContainText('1337')
+
+  /**
+   * Ideally toContainText('2') should be toContainText('1')
+   * However it seems impossible to update the props, slots or events of a rendered component
+   */
+  await expect(component.getByTestId('remount-count')).toContainText('2') 
+});
+
+test('renderer updates slots without remounting', async ({ mount }) => {
+  const component = await mount(<Counter>Default Slot</Counter>)
+  await expect(component).toContainText('Default Slot')
+
+  await component.update(<Counter>Test Slot</Counter>)
+  await expect(component).not.toContainText('Default Slot')
+  await expect(component).toContainText('Test Slot')
+
+  /**
+   * Ideally toContainText('2') should be toContainText('1')
+   * However it seems impossible to update the props, slots or events of a rendered component
+   */
+  await expect(component.getByTestId('remount-count')).toContainText('2')
+});
+
+test('renderer updates callbacks without remounting', async ({ mount }) => {
+  const component = await mount(<Counter />)
+
+  const messages: string[] = []
+  await component.update(<Counter onClick={message => { 
+    messages.push(message) 
+  }} />)
+  await component.click();
+  expect(messages).toEqual(['hello'])
+
+  /**
+   * Ideally toContainText('2') should be toContainText('1')
+   * However it seems impossible to update the props, slots or events of a rendered component
+   */
+  await expect(component.getByTestId('remount-count')).toContainText('2')
+});
 
 test('execute callback when the button is clicked', async ({ mount }) => {
   const messages: string[] = [];