@jscutlery/playwright-ct-angular 0.2.2 → 0.4.0

package/README.md

@@ -1,13 +1,14 @@
 # Playwright Component Testing for Angular _(experimental)_
 
-This library brings **Angular support** to [Playwright's **experimental** Component Testing](https://playwright.dev/docs/test-components).
+This library brings **Angular support** to [Playwright's **experimental
+** Component Testing](https://playwright.dev/docs/test-components).
 
 This will allow us to test our Angular components with Playwright without building the whole app and with more control.
 
 `@jscutlery/playwright-ct-angular` currently supports:
 
 - ✅ **Testing [Versatile Angular Components](https://marmicode.io/blog/versatile-angular)**
-- 🎛 **Passing type-safe inputs to the tested components** 
+- 🎛 **Passing type-safe inputs to the tested components**
 - 🎭 **Spying on component outputs in a type-safe fashion**
 
 https://user-images.githubusercontent.com/2674658/206226065-ba856329-dda7-43b1-9c28-4416b190f4d4.mp4
@@ -39,37 +40,19 @@ import { expect, test } from '@jscutlery/playwright-ct-angular';
 import { GreetingsComponent } from './greetings.component';
 
 test('<jc-greetings> should be polite', async ({ mount }) => {
-  const locator = await mount(GreetingsComponent, {inputs: {name: 'Edouard'}});
+  const locator = await mount(GreetingsComponent, { props: { name: 'Edouard' } });
   expect(locator).toHaveText('👋 Hello Edouard!');
 });
 ```
 
-## 🎭 Spying on outputs
-
-`mount()` will automatically create a `jest-mock`'s spy, subscribe to the outputs given through the `spyOutputs`
-option and return them in the `spies` property, in a type-safe way showing only the outputs that are spied on.
-
-Note that the `spyOutputs` is type-safe and will only allow properties that exist on the component.
-
-```ts
-import { expect, test } from '@jscutlery/playwright-ct-angular';
-import { NameEditorComponent } from './name-editor.component';
-
-test('<jc-name-editor> should be polite', async ({ mount }) => {
-  const locator = await mount(NameEditorComponent, {spyOutputs: ['nameChange']});
-
-  await locator.getByLabel('Name').type('Edouard');
-
-  expect(locator.spies.nameChange).lastCalledWith('Edouard');
-});
-```
-
 ### Passing output callbacks
 
-We can also pass custom output callback functions for some extreme cases or if we want to use a custom spy implementation for example or just debug.
+We can also pass custom output callback functions for some extreme cases or if we want to use a custom spy
+implementation for example or just debug.
+
 ```ts
 await mount(NameEditorComponent, {
-  outputs: {
+  on: {
     nameChange(name) {
       console.log(name);
     }
@@ -89,7 +72,7 @@ import { RecipeSearchTestContainer } from './recipe-search.test-container';
 
 test('...', async ({ mount }) => {
   await mount(RecipeSearchTestContainer, {
-    inputs: {
+    props: {
       recipes: [
         beer,
         burger
@@ -140,24 +123,30 @@ We can also customize the shared `playwright/index.html` nearby.
 ### Specific Styles
 
 If we want to load some specific styles for a single test, we might prefer using a test container component:
+
 ```ts
 import styles from './some-styles.css';
+
 @Component({
   template: '<jc-greetings></jc-greetings>',
   encapsulation: ViewEncapsulation.None,
   styles: [styles]
 })
-class GreetingsTestContainer {}
+class GreetingsTestContainer {
+}
 ```
 
 ### Angular Material & Angular Libraries with styles
 
 As mentioned in [Versatile Angular Style Blog Post](https://marmicode.io/blog/versatile-angular),
-Angular Material and other Angular libraries might use a [Conditional "style" Export](https://nodejs.org/api/packages.html#conditional-exports)
+Angular Material and other Angular libraries might use
+a [Conditional "style" Export](https://nodejs.org/api/packages.html#conditional-exports)
 that allows us to import prebuilt styles
-_(Cf. [Angular Package Format](https://angular.io/guide/angular-package-format) [managing assets in a library](https://angular.io/guide/creating-libraries#managing-assets-in-a-library))_.
+_(
+Cf. [Angular Package Format](https://angular.io/guide/angular-package-format) [managing assets in a library](https://angular.io/guide/creating-libraries#managing-assets-in-a-library))_.
 
 In that case, we can add the following configuration to our `playwright-ct.config.ts`:
+
 ```ts
 const config: PlaywrightTestConfig = {
   // ...
@@ -174,11 +163,13 @@ const config: PlaywrightTestConfig = {
 ```
 
 ## More examples
+
 Cf. [/tests/playwright-ct-angular-wide/src](https://github.com/jscutlery/devkit/tree/main/tests/playwright-ct-angular-wide/src)
 
 # ⚠️ Known Limitations
 
-The way Playwright Component Testing works is different from the way things work with Karma, Jest, Vitest, Cypress etc...
+The way Playwright Component Testing works is different from the way things work with Karma, Jest, Vitest, Cypress
+etc...
 Playwright Component Testing tests run in a Node.js environment while the component is rendered in a browser.
 
 This causes a couple of limitations as we can't directly access the `TestBed's` or the component's internals,
@@ -187,13 +178,15 @@ and we can only exchange serializable data with the component.
 ## 🪄 The Magic Behind the Scenes
 
 The magical workaround behind the scenes is that at build time:
+
 1. Playwright analyses all the calls to `mount()`,
 2. it grabs the first parameter (the component class),
 3. replaces the component class with a unique string (constructed from the component class name and es-module),
 4. adds the component's es-module to Vite entrypoints,
 5. and finally creates a map matching each unique string to the right es-module.
 
-This way, when calling `mount()`, Playwright with communicate the unique string to the browser who will know which es-module to load.
+This way, when calling `mount()`, Playwright with communicate the unique string to the browser who will know which
+es-module to load.
 
 Cf. https://youtu.be/y3YxX4sFJbM
 Cf. https://github.com/microsoft/playwright/blob/cac67fb94f2c8a0ee82878054c39790e660f17ca/packages/playwright-test/src/tsxTransform.ts#L153
@@ -212,15 +205,17 @@ await mount(cmp);
 
 ```ts
 // 🛑 this won't work
-test(MyComponent.name, async ({ mount }) => {});
+test(MyComponent.name, async ({ mount }) => {
+});
 ```
 
 ### ...declare components in the same file.
 
 ```ts
 // 🛑 this won't work
-@Component({...})
-class GreetingsComponent {}
+@Component({ ... })
+class GreetingsComponent {
+}
 
 test('<jc-greetings>', async ({ mount }) => {
   await mount(GreetingsComponent);
@@ -228,20 +223,25 @@ test('<jc-greetings>', async ({ mount }) => {
 ```
 
 ### ...pass any symbol other than a component class
+
 This makes the following impossible:
+
 - passing providers to the `mount()` function
 - passing modules to the `mount()` function (this is what currently makes the usage of mounting templates impossible)
 - use non-standalone components
 
 ### ...use non-[Versatile Angular Style](https://marmicode.io/blog/versatile-angular)
+
 We'll need a vite plugin to support traditional DI, external templates and stylesheets etc...
 
 ## 🔮 Future workarounds
 
 If you really can't make it to [Versatile Angular Style](https://marmicode.io/blog/versatile-angular),
-we can think of a couple of workarounds like using a vite plugin like **Brandon Roberts' [vite-plugin-angular](https://github.com/analogjs/analog/tree/main/packages/vite-plugin-angular)**
+we can think of a couple of workarounds like using a vite plugin like **Brandon
+Roberts' [vite-plugin-angular](https://github.com/analogjs/analog/tree/main/packages/vite-plugin-angular)**
 
-We could also implement some custom transform that registers the providers and import modules, like Playwright does for the component class.
+We could also implement some custom transform that registers the providers and import modules, like Playwright does for
+the component class.
 
 # Setup
 
@@ -265,6 +265,7 @@ yarn add -D @jscutlery/playwright-ct-angular @playwright/test # or npm install -
 ## 🛠 Configure
 
 Update `playwright-ct-config.ts` and replace:
+
 ```ts
 import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
 import { devices } from '@playwright/experimental-ct-react';

package/hooks.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/hooks";

package/index.cjs.js

@@ -2,11 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var mount = require('@playwright/experimental-ct-core/lib/mount');
-var playwright = require('@playwright/test');
-var jestMock = require('jest-mock');
-var experimentalCtCore = require('@playwright/experimental-ct-core');
-var path = require('path');
+var path = require('node:path');
+var playwrightCtCore = require('@playwright/experimental-ct-core');
+var test$1 = require('@playwright/test');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -26,87 +24,44 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var playwright__namespace = /*#__PURE__*/_interopNamespace(playwright);
 var path__namespace = /*#__PURE__*/_interopNamespace(path);
+var playwrightCtCore__namespace = /*#__PURE__*/_interopNamespace(playwrightCtCore);
 
-const mountTest = playwright__namespace.test.extend(mount.fixtures);
-const test = mountTest.extend({
-    /**
-     * Override mount to return output spies and enjoy type inference.
-     * This allows this:
-     *
-     * const { spies } = mount(..., {outputs: {citySelect: jest.fn()}})
-     *
-     * instead of this:
-     *
-     * const citySelectSpy: jest.MockedFunction<(city: string) => void> = jest.fn();
-     * mount(..., {outputs: {citySelect: citySelectSpy}});
-     *
-     * @hack we are willingly not using `async mount(...)` syntax here
-     * because it would be transpiled to `_async(function mount() { ... }`
-     * by Nx's default rollout config.
-     * Playwright dynamically parses the given function so converting
-     * async / await to a wrapped function would simply break the library causing
-     * a `TypeError: mount is not a function` error.
-     */
-    mount({ mount, page }, use) {
-        return use(async (component, options = {}) => {
-            /* 1. Create a spy for each output in `spyOutputs`... */
-            const spies = options.spyOutputs?.reduce((acc, key) => {
-                return {
-                    ...acc,
-                    [key]: jestMock.fn(),
-                };
-            }, {}) ?? {};
-            /* 2. ...then use it as an output... */
-            await mount(component, {
-                ...options,
-                outputs: {
-                    ...options.outputs,
-                    ...spies,
-                },
-            });
-            /* Grab a locator to the TestBed's root element.
-             * We are loading a fresh new page for each test
-             * so the id should always be "root0".
-             * Otherwise, we'd have to hack our way and somehow grab all
-             * the `#root*`, sort them and grab the last one.
-             * As a matter of fact, we can't grab a reference to the fixture. */
-            const locator = page.locator('#root0');
-            /* Add spies to the returned locator. */
-            return Object.assign(locator, { spies });
-        });
-    },
-});
-const expect = playwright__namespace.expect;
-const devices = playwright__namespace.devices;
-
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-function plugin() {
-    /* Only fetch upon request to avoid resolution in workers. */
-    const { createPlugin,
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-     } = require('@playwright/experimental-ct-core/lib/vitePlugin');
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return createPlugin(path__namespace.join(__dirname, 'register-source.mjs'), () => { });
-}
-const defineConfig = (config) => experimentalCtCore.defineConfig({ ...config, _plugins: [plugin] });
+/* @hack `test` is not exported in the type definition of `@playwright/experimental-ct-core`. */
+// @eslint-disable-next-line @typescript-eslint/no-explicit-any
+const test = playwrightCtCore__namespace.test;
+const defineConfig = (config, ...configs) => {
+    const original = playwrightCtCore__namespace.defineConfig({
+        ...config,
+        '@playwright/test': {
+            packageJSON: require.resolve('./package.json'),
+        },
+        '@playwright/experimental-ct-core': {
+            registerSourceFile: path__namespace.join(__dirname, 'register-source.mjs'),
+        },
+    }, ...configs);
+    /* @hack for some weird reason, if we do not require the babel plugin here,
+     * babel loads an empty object instead of the default exported function. */
+    require('@jscutlery/playwright-ct-angular/transform-angular');
+    return {
+        ...original,
+        '@playwright/test': {
+            ...original['@playwright/test'],
+            babelPlugins: [
+                ...original['@playwright/test'].babelPlugins,
+                [require.resolve('@jscutlery/playwright-ct-angular/transform-angular')],
+            ],
+        },
+    };
+};
 
+Object.defineProperty(exports, 'devices', {
+  enumerable: true,
+  get: function () { return test$1.devices; }
+});
+Object.defineProperty(exports, 'expect', {
+  enumerable: true,
+  get: function () { return test$1.expect; }
+});
 exports.defineConfig = defineConfig;
-exports.devices = devices;
-exports.expect = expect;
 exports.test = test;

package/index.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";

package/index.esm.js

@@ -1,84 +1,33 @@
-import { fixtures } from '@playwright/experimental-ct-core/lib/mount';
-import * as playwright from '@playwright/test';
-import { fn } from 'jest-mock';
-import { defineConfig as defineConfig$1 } from '@playwright/experimental-ct-core';
-import * as path from 'path';
+import * as path from 'node:path';
+import * as playwrightCtCore from '@playwright/experimental-ct-core';
+export { devices, expect } from '@playwright/test';
 
-const mountTest = playwright.test.extend(fixtures);
-const test = mountTest.extend({
-    /**
-     * Override mount to return output spies and enjoy type inference.
-     * This allows this:
-     *
-     * const { spies } = mount(..., {outputs: {citySelect: jest.fn()}})
-     *
-     * instead of this:
-     *
-     * const citySelectSpy: jest.MockedFunction<(city: string) => void> = jest.fn();
-     * mount(..., {outputs: {citySelect: citySelectSpy}});
-     *
-     * @hack we are willingly not using `async mount(...)` syntax here
-     * because it would be transpiled to `_async(function mount() { ... }`
-     * by Nx's default rollout config.
-     * Playwright dynamically parses the given function so converting
-     * async / await to a wrapped function would simply break the library causing
-     * a `TypeError: mount is not a function` error.
-     */
-    mount({ mount, page }, use) {
-        return use(async (component, options = {}) => {
-            /* 1. Create a spy for each output in `spyOutputs`... */
-            const spies = options.spyOutputs?.reduce((acc, key) => {
-                return {
-                    ...acc,
-                    [key]: fn(),
-                };
-            }, {}) ?? {};
-            /* 2. ...then use it as an output... */
-            await mount(component, {
-                ...options,
-                outputs: {
-                    ...options.outputs,
-                    ...spies,
-                },
-            });
-            /* Grab a locator to the TestBed's root element.
-             * We are loading a fresh new page for each test
-             * so the id should always be "root0".
-             * Otherwise, we'd have to hack our way and somehow grab all
-             * the `#root*`, sort them and grab the last one.
-             * As a matter of fact, we can't grab a reference to the fixture. */
-            const locator = page.locator('#root0');
-            /* Add spies to the returned locator. */
-            return Object.assign(locator, { spies });
-        });
-    },
-});
-const expect = playwright.expect;
-const devices = playwright.devices;
+/* @hack `test` is not exported in the type definition of `@playwright/experimental-ct-core`. */
+// @eslint-disable-next-line @typescript-eslint/no-explicit-any
+const test = playwrightCtCore.test;
+const defineConfig = (config, ...configs) => {
+    const original = playwrightCtCore.defineConfig({
+        ...config,
+        '@playwright/test': {
+            packageJSON: require.resolve('./package.json'),
+        },
+        '@playwright/experimental-ct-core': {
+            registerSourceFile: path.join(__dirname, 'register-source.mjs'),
+        },
+    }, ...configs);
+    /* @hack for some weird reason, if we do not require the babel plugin here,
+     * babel loads an empty object instead of the default exported function. */
+    require('@jscutlery/playwright-ct-angular/transform-angular');
+    return {
+        ...original,
+        '@playwright/test': {
+            ...original['@playwright/test'],
+            babelPlugins: [
+                ...original['@playwright/test'].babelPlugins,
+                [require.resolve('@jscutlery/playwright-ct-angular/transform-angular')],
+            ],
+        },
+    };
+};
 
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-function plugin() {
-    /* Only fetch upon request to avoid resolution in workers. */
-    const { createPlugin,
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-     } = require('@playwright/experimental-ct-core/lib/vitePlugin');
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return createPlugin(path.join(__dirname, 'register-source.mjs'), () => { });
-}
-const defineConfig = (config) => defineConfig$1({ ...config, _plugins: [plugin] });
-
-export { defineConfig, devices, expect, test };
+export { defineConfig, test };

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@jscutlery/playwright-ct-angular",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "dependencies": {
+    "@babel/core": "~7.23.0",
     "jest-mock": "^28.1.3",
     "rxjs": "^7.5.7",
     "vite": "^3.2.1"
@@ -33,6 +34,11 @@
       "module": "./register.esm.js",
       "import": "./register.cjs.mjs",
       "default": "./register.cjs.js"
+    },
+    "./transform-angular": {
+      "module": "./transform-angular.esm.js",
+      "import": "./transform-angular.cjs.mjs",
+      "default": "./transform-angular.cjs.js"
     }
   },
   "module": "./index.esm.js",

package/register-source.mjs

@@ -3,7 +3,7 @@ import 'zone.js';
 import { getTestBed, TestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
+  platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Subscription } from 'rxjs';
@@ -32,29 +32,30 @@ export function pwRegister(components) {
 let subscription;
 
 globalThis.playwrightMount = async (component, rootElement, hooksConfig) => {
-  const loader = _componentLoaderMap.get(component.type);
-  const cmpType = await loader();
+  const cmpType = component.type;
 
   subscription = new Subscription();
 
   TestBed.configureTestingModule({
-    imports: [BrowserAnimationsModule],
+    imports: [BrowserAnimationsModule]
   });
   const fixture = TestBed.createComponent(cmpType);
+  fixture.nativeElement.id = 'root';
 
   /* Set inputs. */
-  for (const [name, value] of Object.entries(component.options.inputs ?? {})) {
+  for (const [name, value] of Object.entries(component.props ?? {})) {
     fixture.componentInstance[name] = value;
   }
 
   /* Subscribe to outputs. */
   for (const [name, callback] of Object.entries(
-    component.options.outputs ?? {}
+    component.on ?? {}
   )) {
     subscription.add(fixture.componentInstance[name].subscribe(callback));
   }
 
   fixture.autoDetectChanges();
+  await fixture.whenStable();
 };
 
 globalThis.playwrightUnmount = async (rootElement) => {

package/register.cjs.js

@@ -31,29 +31,30 @@ function pwRegister(components) {
 let subscription;
 
 globalThis.playwrightMount = async (component, rootElement, hooksConfig) => {
-  const loader = _componentLoaderMap.get(component.type);
-  const cmpType = await loader();
+  const cmpType = component.type;
 
   subscription = new rxjs.Subscription();
 
   testing.TestBed.configureTestingModule({
-    imports: [animations.BrowserAnimationsModule],
+    imports: [animations.BrowserAnimationsModule]
   });
   const fixture = testing.TestBed.createComponent(cmpType);
+  fixture.nativeElement.id = 'root';
 
   /* Set inputs. */
-  for (const [name, value] of Object.entries(component.options.inputs ?? {})) {
+  for (const [name, value] of Object.entries(component.props ?? {})) {
     fixture.componentInstance[name] = value;
   }
 
   /* Subscribe to outputs. */
   for (const [name, callback] of Object.entries(
-    component.options.outputs ?? {}
+    component.on ?? {}
   )) {
     subscription.add(fixture.componentInstance[name].subscribe(callback));
   }
 
   fixture.autoDetectChanges();
+  await fixture.whenStable();
 };
 
 globalThis.playwrightUnmount = async (rootElement) => {

package/register.esm.d.ts

@@ -0,0 +1,2 @@
+export * from "./src/register";
+export { default } from "./src/register";

package/register.esm.js

@@ -29,29 +29,30 @@ function pwRegister(components) {
 let subscription;
 
 globalThis.playwrightMount = async (component, rootElement, hooksConfig) => {
-  const loader = _componentLoaderMap.get(component.type);
-  const cmpType = await loader();
+  const cmpType = component.type;
 
   subscription = new Subscription();
 
   TestBed.configureTestingModule({
-    imports: [BrowserAnimationsModule],
+    imports: [BrowserAnimationsModule]
   });
   const fixture = TestBed.createComponent(cmpType);
+  fixture.nativeElement.id = 'root';
 
   /* Set inputs. */
-  for (const [name, value] of Object.entries(component.options.inputs ?? {})) {
+  for (const [name, value] of Object.entries(component.props ?? {})) {
     fixture.componentInstance[name] = value;
   }
 
   /* Subscribe to outputs. */
   for (const [name, callback] of Object.entries(
-    component.options.outputs ?? {}
+    component.on ?? {}
   )) {
     subscription.add(fixture.componentInstance[name].subscribe(callback));
   }
 
   fixture.autoDetectChanges();
+  await fixture.whenStable();
 };
 
 globalThis.playwrightUnmount = async (rootElement) => {

package/src/index.d.ts

@@ -1,19 +1,26 @@
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { devices, expect, test } from './lib/playwright-ct-angular';
-export type { ComponentFixtures } from './lib/playwright-ct-angular';
-import { defineConfig as originalDefineConfig } from '@playwright/experimental-ct-core';
-export declare const defineConfig: typeof originalDefineConfig;
+import { Type } from '@angular/core';
+import type { PlaywrightTestConfig, TestType } from '@playwright/experimental-ct-core';
+import * as playwright from '@playwright/test';
+import type { Observable } from 'rxjs';
+export type { PlaywrightTestConfig };
+export { expect, devices } from '@playwright/test';
+export interface ComponentFixtures {
+    mount<COMPONENT>(component: Type<COMPONENT>, options?: MountOptions<COMPONENT>): Promise<MountResult<COMPONENT>>;
+}
+export interface MountOptions<COMPONENT> {
+    props?: Partial<COMPONENT>;
+    on?: Outputs<COMPONENT>;
+}
+export type Outputs<COMPONENT> = Partial<{
+    [K in keyof COMPONENT]: COMPONENT[K] extends Observable<unknown> ? (value: Emitted<COMPONENT[K]>) => void : COMPONENT[K];
+}>;
+export interface MountResult<COMPONENT> extends playwright.Locator {
+    unmount(): Promise<void>;
+    update(options: {
+        props?: Partial<COMPONENT>;
+        on?: Outputs<COMPONENT>;
+    }): Promise<void>;
+}
+type Emitted<OBSERVABLE> = OBSERVABLE extends Observable<infer EMITTED> ? EMITTED : OBSERVABLE;
+export declare const test: TestType<ComponentFixtures>;
+export declare const defineConfig: (config: any, ...configs: any[]) => PlaywrightTestConfig;