feat(ct): vue set props (#16058)

packages/playwright-ct-vue/index.d.ts

@@ -49,6 +49,7 @@ export interface ComponentFixtures {
     hooksConfig?: any,
   }): Promise<Locator>;
   unmount(locator: Locator): Promise<void>;
+  setProps<Props = { [key: string]: any }>(locator: Locator, props: Props): Promise<void>
 }
 
 export const test: TestType<

packages/playwright-ct-vue/registerSource.mjs

@@ -108,14 +108,14 @@ function render(component) {
 
   if (component.kind === 'object') {
     // Vue test util syntax.
-    for (const [key, value] of Object.entries(component.options.slots || {})) {
+    for (const [key, value] of Object.entries(component.options?.slots || {})) {
       if (key === 'default')
         children.push(value);
       else
         slots[key] = value;
     }
-    props = component.options.props || {};
+    props = component.options?.props || {};
-    for (const [key, value] of Object.entries(component.options.on || {}))
+    for (const [key, value] of Object.entries(component.options?.on || {}))
       listeners[key] = value;
   }
 
@@ -155,9 +155,13 @@ function createDevTools() {
   };
 }
 
+const appKey = Symbol('appKey');
+const componentKey = Symbol('componentKey');
+
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
+  const wrapper = render(component);
   const app = createApp({
-    render: () => render(component)
+    render: () => wrapper
   });
   setDevtoolsHook(createDevTools(), {});
 
@@ -165,6 +169,7 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => {
     await hook({ app, hooksConfig });
   const instance = app.mount(rootElement);
   instance.$el[appKey] = app;
+  instance.$el[componentKey] = wrapper;
   for (const hook of /** @type {any} */(window).__pw_hooks_after_mount || [])
     await hook({ app, hooksConfig, instance });
 };
@@ -176,4 +181,11 @@ window.playwrightUnmount = async element => {
   app.unmount();
 };
 
-const appKey = Symbol('appKey');
+window.playwrightSetProps = async (element, props) => {
+  const component = element[componentKey].component;
+  if (!component)
+    throw new Error('Component was not mounted');
+
+  for (const [key, value] of Object.entries(props))
+    component.props[key] = value;
+};

packages/playwright-test/src/mount.ts

@@ -23,6 +23,7 @@ export const fixtures: Fixtures<
   PlaywrightTestArgs & PlaywrightTestOptions & {
     mount: (component: any, options: any) => Promise<Locator>;
     unmount: (locator: Locator) => Promise<void>;
+    setProps: (locator: Locator, props: { [key: string]: any }) => Promise<void>;
   },
   PlaywrightWorkerArgs & PlaywrightWorkerOptions & { _ctWorker: { context: BrowserContext | undefined, hash: string } },
   { _contextFactory: (options?: BrowserContextOptions) => Promise<BrowserContext>, _contextReuseEnabled: boolean }> = {
@@ -61,6 +62,14 @@ export const fixtures: Fixtures<
         });
       });
     },
+
+    setProps: async ({}, use) => {
+      await use(async (locator: Locator, props: { [key: string]: any }) => {
+        return await locator.evaluate(async (element, props) => {
+          return await window.playwrightSetProps(element, props);
+        }, props);
+      });
+    }
   };
 
 async function innerMount(page: Page, jsxOrType: JsxComponent | string, options: ObjectComponentOptions = {}): Promise<string> {

packages/playwright-test/types/component.d.ts

@@ -40,5 +40,6 @@ declare global {
   interface Window {
     playwrightMount(component: Component, rootElement: Element, hooksConfig: any): Promise<void>;
     playwrightUnmount(element: Element, rootElement: Element): Promise<void>;
+    playwrightSetProps(element: Element, props: { [key: string]: any }): Promise<void>;
   }
 }

tests/components/ct-vue-vite/src/notation-jsx.spec.tsx

@@ -10,6 +10,13 @@ test('props should work', async ({ mount }) => {
   await expect(component).toContainText('Submit')
 })
 
+test('update props should work', async ({ mount, setProps }) => {
+  const component = await mount(<Button title='Submit'></Button>);
+  await expect(component).toContainText('Submit');
+  await setProps(component, { title: 'Loading' });
+  await expect(component).toContainText('Loading');
+})
+
 test('event should work', async ({ mount }) => {
   const messages = []
   const component = await mount(<Button title='Submit' v-on:submit={data => {

tests/components/ct-vue-vite/src/notation-vue.spec.js

@@ -17,6 +17,17 @@ test('props should work', async ({ mount }) => {
   await expect(component).toContainText('Submit')
 })
 
+test('update props should work', async ({ mount, setProps }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit'
+    }
+  });
+  await expect(component).toContainText('Submit');
+  await setProps(component, { title: 'Loading' });
+  await expect(component).toContainText('Loading');
+})
+
 test('event should work', async ({ mount }) => {
   const messages = []
   const component = await mount(Button, {

tests/components/ct-vue-vite/src/notation-vue.spec.ts

@@ -16,6 +16,17 @@ test('props should work', async ({ mount }) => {
   await expect(component).toContainText('Submit')
 })
 
+test('update props should work', async ({ mount, setProps }) => {
+  const component = await mount(Button, {
+    props: { 
+      title: 'Submit'
+    }
+  });
+  await expect(component).toContainText('Submit')
+  await setProps(component, { title: 'Loading' });
+  await expect(component).toContainText('Loading');
+})
+
 test('event should work', async ({ mount }) => {
   const messages = []
   const component = await mount(Button, {