vitest-browser-angular 0.0.4 → 0.1.0

package/README.md

@@ -8,32 +8,13 @@ Render Angular components in VItest Browser Mode.
 pnpm add -D vitest-browser-angular
 ```
 
-## Setup Test Environment with Zone.js
+## Setup Test Environment
 
-```ts
-// vitest.config.ts
-
-import { playwright } from '@vitest/browser-playwright';
-
-export default defineConfig({
-  test: {
-    globals: true,
-
-    // 👇 This is what you need to add
-    setupFiles: ['vitest-browser-angular/setup-zones'],
-
-    browser: {
-      enabled: true,
-      provider: playwright(),
-      instances: [{ browser: 'chromium' }],
-    },
-  },
-});
-```
+To set up your test environment (with Zone.js or Zoneless), use `@analogjs/vitest-angular`'s `setupTestBed()` function.
 
-## Setup Test Environment with Zoneless
+**Important:** Make sure to use `{ browserMode: true }` when calling `setupTestBed()` to enable Vitest browser mode's visual test preview functionality.
 
-TBD
+For detailed setup instructions for both Zone.js and Zoneless configurations, please refer to the [Analog Vitest documentation](https://analogjs.org/docs/features/testing/vitest).
 
 ## Usage
 
@@ -54,6 +35,37 @@ test('render', async () => {
 });
 ```
 
+## Inputs
+
+Pass input values to components using the `inputs` option:
+
+```ts
+import { Component, input } from '@angular/core';
+
+@Component({
+  template: '<h2>{{ name() }}</h2><p>Price: ${{ price() }}</p>',
+  standalone: true,
+})
+export class ProductComponent {
+  name = input('Unknown Product');
+  price = input(0);
+}
+
+test('render with inputs', async () => {
+  const { component } = await render(ProductComponent, {
+    inputs: {
+      name: 'Laptop',
+      price: 1299.99,
+    },
+  });
+
+  await expect.element(component).toHaveTextContent('Laptop');
+  await expect.element(component).toHaveTextContent('$1299.99');
+});
+```
+
+Works with both signal-based inputs (`input()`) and `@Input()` decorators.
+
 ## Routing
 
 ### Simple Routing

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { i as render, n as RenderResult, r as cleanup, t as RenderFn } from "./pure-DuuxgQMT.mjs";
+import { i as RenderResult, n as RenderConfig, o as cleanup, r as RenderFn, s as render, t as Inputs } from "./pure-HXi6YW9E.mjs";
 
 //#region src/index.d.ts
 declare module "vitest/browser" {
@@ -7,4 +7,4 @@ declare module "vitest/browser" {
   }
 }
 //#endregion
-export { type RenderFn, type RenderResult, cleanup, render };
+export { type Inputs, type RenderConfig, type RenderFn, type RenderResult, cleanup, render };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { n as render, t as cleanup } from "./pure-J6VXh4xd.mjs";
+import { n as render, t as cleanup } from "./pure-C8IyvQ5e.mjs";
 import { beforeEach } from "vitest";
 import { page } from "vitest/browser";
 

package/dist/{pure-J6VXh4xd.mjs → pure-C8IyvQ5e.mjs}

@@ -1,4 +1,5 @@
 import { page } from "vitest/browser";
+import { inputBinding } from "@angular/core";
 import { TestBed, ɵgetCleanupHook } from "@angular/core/testing";
 import { Router, provideRouter } from "@angular/router";
 import { RouterTestingHarness } from "@angular/router/testing";
@@ -20,7 +21,8 @@ async function render(componentClass, config) {
 		renderResult.routerHarness = await RouterTestingHarness.create(typeof config.withRouting === "boolean" ? void 0 : config.withRouting.initialRoute);
 		renderResult.router = TestBed.inject(Router);
 	}
-	const fixture = TestBed.createComponent(componentClass);
+	const bindings = Object.entries(config?.inputs ?? {}).map(([key, value]) => inputBinding(key, () => value));
+	const fixture = TestBed.createComponent(componentClass, { bindings });
 	fixture.autoDetectChanges();
 	await fixture.whenStable();
 	const component = page.elementLocator(fixture.nativeElement);
@@ -31,8 +33,8 @@ async function render(componentClass, config) {
 		component
 	};
 }
-function cleanup(shouldTearndown = false) {
-	return ɵgetCleanupHook(shouldTearndown)();
+function cleanup(shouldTeardown = false) {
+	return ɵgetCleanupHook(shouldTeardown)();
 }
 
 //#endregion

package/dist/pure-HXi6YW9E.d.mts

@@ -0,0 +1,30 @@
+import { Locator } from "vitest/browser";
+import { EnvironmentProviders, InputSignal, Provider, Type } from "@angular/core";
+import { ComponentFixture } from "@angular/core/testing";
+import { Router, Routes } from "@angular/router";
+import { RouterTestingHarness } from "@angular/router/testing";
+
+//#region src/pure.d.ts
+interface RoutingConfig {
+  routes: Routes;
+  initialRoute?: string;
+}
+type Inputs<CMP_TYPE extends Type<unknown>> = Partial<{ [PROP in keyof InstanceType<CMP_TYPE> as InstanceType<CMP_TYPE>[PROP] extends InputSignal<unknown> ? PROP : never]: InstanceType<CMP_TYPE>[PROP] extends InputSignal<infer VALUE> ? VALUE : never }>;
+interface RenderConfig<CMP_TYPE extends Type<unknown> = Type<unknown>> {
+  inputs?: Inputs<CMP_TYPE>;
+  withRouting?: RoutingConfig | boolean;
+  providers?: Array<Provider | EnvironmentProviders>;
+  imports?: unknown[];
+}
+interface RenderResult<T> {
+  fixture: ComponentFixture<T>;
+  component: Locator;
+  componentClassInstance: T;
+  routerHarness?: RouterTestingHarness;
+  router?: Router;
+}
+type RenderFn = <T>(component: Type<T>, config?: RenderConfig<Type<T>>) => Promise<RenderResult<T>>;
+declare function render<T>(componentClass: Type<T>, config?: RenderConfig<Type<T>>): Promise<RenderResult<T>>;
+declare function cleanup(shouldTeardown?: boolean): void;
+//#endregion
+export { RoutingConfig as a, RenderResult as i, RenderConfig as n, cleanup as o, RenderFn as r, render as s, Inputs as t };

package/dist/pure.d.mts

@@ -1,2 +1,2 @@
-import { i as render, n as RenderResult, r as cleanup, t as RenderFn } from "./pure-DuuxgQMT.mjs";
-export { RenderFn, RenderResult, cleanup, render };
+import { a as RoutingConfig, i as RenderResult, n as RenderConfig, o as cleanup, r as RenderFn, s as render, t as Inputs } from "./pure-HXi6YW9E.mjs";
+export { Inputs, RenderConfig, RenderFn, RenderResult, RoutingConfig, cleanup, render };

package/dist/pure.mjs

@@ -1,3 +1,3 @@
-import { n as render, t as cleanup } from "./pure-J6VXh4xd.mjs";
+import { n as render, t as cleanup } from "./pure-C8IyvQ5e.mjs";
 
 export { cleanup, render };