vitest-browser-angular 0.0.2 → 0.0.4

package/README.md

@@ -1,6 +1,6 @@
 # vitest-browser-angular
 
-Mount Angular components in VItest Browser Mode. 
+Render Angular components in VItest Browser Mode.
 
 ## Installation
 
@@ -13,6 +13,8 @@ pnpm add -D vitest-browser-angular
 ```ts
 // vitest.config.ts
 
+import { playwright } from '@vitest/browser-playwright';
+
 export default defineConfig({
   test: {
     globals: true,
@@ -22,7 +24,7 @@ export default defineConfig({
 
     browser: {
       enabled: true,
-      provider: 'playwright',
+      provider: playwright(),
       instances: [{ browser: 'chromium' }],
     },
   },
@@ -36,8 +38,8 @@ TBD
 ## Usage
 
 ```ts
-
 import { test, expect } from 'vitest-browser-angular';
+import { render } from 'vitest-browser-angular';
 
 @Component({
   template: '<h1>{{ title }}</h1>',
@@ -46,34 +48,102 @@ export class HelloWorldComponent {
   title = 'Hello World';
 }
 
-
-test('mount', async ({ mount }) => {
-  const { component } = await mount(HelloWorldComponent);
+test('render', async () => {
+  const { component } = await render(HelloWorldComponent);
   await expect.element(component).toHaveTextContent('Hello World');
 });
 ```
 
-## Extending Vitest Context
+## Routing
+
+### Simple Routing
 
-If you want to extend the library's test context (fixtures) like this:
+Enable routing with `withRouting: true` for components that use routing features but don't require specific route configuration:
 
 ```ts
-import { test as testBase } from 'vitest-browser-angular'
+import { test, expect } from 'vitest';
+import { render } from 'vitest-browser-angular';
+import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+
+@Component({
+  template: `
+    <nav>
+      <a routerLink="/home">Home</a>
+      <a routerLink="/about">About</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `,
+  imports: [RouterLink, RouterOutlet],
+})
+export class RoutedComponent {}
 
-export const test = testBase.extend(...)
+test('render with simple routing', async () => {
+  const { component } = await render(RoutedComponent, {
+    withRouting: true,
+  });
+
+  await expect.element(component).toHaveTextContent('Home');
+  await expect.element(component).toHaveTextContent('About');
+});
 ```
 
-Make sure you add `vitest-browser-angular` to the `types` array in your `tsconfig.json`
+### Routing with Configuration
+
+Configure specific routes and optionally set an initial route:
 
-If it doesn't work, you probably forgot to add `@vitest/browser` to the `types` array as well.
+```ts
+import { test, expect } from 'vitest';
+import { render } from 'vitest-browser-angular';
+import { Component, inject } from '@angular/core';
+import { Router, RouterLink, RouterOutlet, Routes } from '@angular/router';
 
-**Example:**
-```json
+@Component({
+  template: '<h1>Home Page</h1>',
+})
+export class HomeComponent {}
 
-"types": [
-  "@vitest/browser",
-  "vitest-browser-angular"
-]
+@Component({
+  template: '<h1>About Page</h1>',
+  standalone: true,
+})
+export class AboutComponent {}
+
+@Component({
+  template: `
+    <nav>
+      <a routerLink="/home">Home</a>
+      <a routerLink="/about">About</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `,
+  imports: [RouterLink, RouterOutlet],
+  standalone: true,
+})
+export class AppComponent {
+  router = inject(Router);
+}
+
+const routes: Routes = [
+  { path: 'home', component: HomeComponent },
+  { path: 'about', component: AboutComponent },
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+];
+
+test('render with route configuration', async () => {
+  const { component, router } = await render(AppComponent, {
+    withRouting: {
+      routes,
+      initialRoute: '/home',
+    },
+  });
+
+  await expect.element(component).toHaveTextContent('Home Page');
+
+  // Navigate programmatically
+  await router.navigate(['/about']);
+  await expect.element(component).toHaveTextContent('About Page');
+});
 ```
 
 ## Contributing
@@ -92,7 +162,6 @@ Be kind to each other and please read our [code of conduct](CODE_OF_CONDUCT.md).
 
 <br/>
 
-
 ## Credits
 
 This project is inspired by the following projects:

package/dist/index.d.mts

@@ -0,0 +1,10 @@
+import { i as render, n as RenderResult, r as cleanup, t as RenderFn } from "./pure-DuuxgQMT.mjs";
+
+//#region src/index.d.ts
+declare module "vitest/browser" {
+  interface BrowserPage {
+    render: typeof render;
+  }
+}
+//#endregion
+export { type RenderFn, type RenderResult, cleanup, render };

package/dist/index.mjs

@@ -0,0 +1,15 @@
+import { n as render, t as cleanup } from "./pure-J6VXh4xd.mjs";
+import { beforeEach } from "vitest";
+import { page } from "vitest/browser";
+
+//#region src/index.ts
+page.extend({
+	render,
+	[Symbol.for("vitest:component-cleanup")]: cleanup
+});
+beforeEach(async () => {
+	await cleanup(true);
+});
+
+//#endregion
+export { cleanup, render };

package/dist/{index.d.ts → pure-DuuxgQMT.d.mts}

@@ -1,32 +1,34 @@
+import { Locator } from "vitest/browser";
 import { ComponentFixture } from "@angular/core/testing";
 import { Router, Routes } from "@angular/router";
 import { RouterTestingHarness } from "@angular/router/testing";
-import { BrowserPage, Locator } from "@vitest/browser/context";
-import * as vitest0 from "vitest";
 import { EnvironmentProviders, Provider, Type } from "@angular/core";
-export * from "vitest";
 
-//#region src/index.d.ts
+//#region src/pure.d.ts
 interface RoutingConfig {
   routes: Routes;
   initialRoute?: string;
 }
-interface MountConfig {
+interface RenderConfig {
   withRouting?: RoutingConfig | boolean;
   providers?: Array<Provider | EnvironmentProviders>;
   imports?: unknown[];
 }
-interface MountResult<T> {
+interface RenderResult<T> {
   fixture: ComponentFixture<T>;
   component: Locator;
   componentClassInstance: T;
   routerHarness?: RouterTestingHarness;
   router?: Router;
 }
-type MountFn = <T>(component: Type<T>, config?: MountConfig) => Promise<MountResult<T>>;
-declare const test: vitest0.TestAPI<{
-  page: BrowserPage;
-  mount: MountFn;
+type RenderFn = <T>(component: Type<T>, config?: RenderConfig) => Promise<RenderResult<T>>;
+declare function render<T>(componentClass: Type<T>, config?: RenderConfig): Promise<{
+  fixture: ComponentFixture<T>;
+  componentClassInstance: T;
+  component: Locator;
+  routerHarness?: RouterTestingHarness | undefined;
+  router?: Router | undefined;
 }>;
+declare function cleanup(shouldTearndown?: boolean): void;
 //#endregion
-export { MountFn, MountResult, test };
+export { render as i, RenderResult as n, cleanup as r, RenderFn as t };

package/dist/pure-J6VXh4xd.mjs

@@ -0,0 +1,39 @@
+import { page } from "vitest/browser";
+import { TestBed, ɵgetCleanupHook } from "@angular/core/testing";
+import { Router, provideRouter } from "@angular/router";
+import { RouterTestingHarness } from "@angular/router/testing";
+
+//#region src/pure.ts
+async function render(componentClass, config) {
+	const imports = [componentClass, ...config?.imports || []];
+	const providers = [...config?.providers || []];
+	const renderResult = {};
+	if (config?.withRouting) {
+		const routes = typeof config.withRouting === "boolean" ? [] : config.withRouting.routes;
+		providers.push(provideRouter(routes));
+	}
+	TestBed.configureTestingModule({
+		imports,
+		providers
+	});
+	if (config?.withRouting) {
+		renderResult.routerHarness = await RouterTestingHarness.create(typeof config.withRouting === "boolean" ? void 0 : config.withRouting.initialRoute);
+		renderResult.router = TestBed.inject(Router);
+	}
+	const fixture = TestBed.createComponent(componentClass);
+	fixture.autoDetectChanges();
+	await fixture.whenStable();
+	const component = page.elementLocator(fixture.nativeElement);
+	return {
+		...renderResult,
+		fixture,
+		componentClassInstance: fixture.componentInstance,
+		component
+	};
+}
+function cleanup(shouldTearndown = false) {
+	return ɵgetCleanupHook(shouldTearndown)();
+}
+
+//#endregion
+export { render as n, cleanup as t };

package/dist/pure.d.mts

@@ -0,0 +1,2 @@
+import { i as render, n as RenderResult, r as cleanup, t as RenderFn } from "./pure-DuuxgQMT.mjs";
+export { RenderFn, RenderResult, cleanup, render };

package/dist/pure.mjs

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

package/dist/{setup-RnZmQ_2I.js → setup-CcdUOv69.mjs}

@@ -7,4 +7,4 @@ function setupAngularTestEnvironment() {
 }
 
 //#endregion
-export { setupAngularTestEnvironment };
+export { setupAngularTestEnvironment as t };

package/dist/setup-zones.d.mts

@@ -0,0 +1,2 @@
+import "@angular/compiler";
+import "@analogjs/vitest-angular/setup-zone";

package/dist/{setup-zones.js → setup-zones.mjs}

@@ -1,4 +1,4 @@
-import { setupAngularTestEnvironment } from "./setup-RnZmQ_2I.js";
+import { t as setupAngularTestEnvironment } from "./setup-CcdUOv69.mjs";
 import "@angular/compiler";
 import "@analogjs/vitest-angular/setup-zone";
 

package/dist/setup.mjs

@@ -0,0 +1,3 @@
+import { t as setupAngularTestEnvironment } from "./setup-CcdUOv69.mjs";
+
+export { setupAngularTestEnvironment };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitest-browser-angular",
-  "version": "0.0.2",
-  "description": "Mount Angular components in VItest Browser Mode",
+  "version": "0.0.4",
+  "description": "Render Angular components in VItest Browser Mode",
   "author": "Shai Reznik (HiRez.io)",
   "license": "MIT",
   "homepage": "https://github.com/hirezio/vitest-browser-angular#readme",
@@ -21,17 +21,17 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     },
     "./setup-zones": {
-      "types": "./dist/setup-zones.d.ts",
-      "default": "./dist/setup-zones.js"
+      "types": "./dist/setup-zones.d.mts",
+      "default": "./dist/setup-zones.mjs"
     }
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "files": [
     "*.d.ts",
     "*.mjs",
@@ -47,7 +47,7 @@
     "@angular/platform-browser": "^20.0.0",
     "@angular/router": "^20.0.0",
     "@vitest/browser": "^2.1.0 || ^3.0.0 || ^4.0.0-0",
-    "vitest": "^2.1.0 || ^3.0.0 || ^4.0.0-0"
+    "vitest": "^2.1.0 || ^3.0.0 || ^4.0.0"
   },
   "devDependencies": {
     "@analogjs/vitest-angular": "^1.20.2",
@@ -60,6 +60,7 @@
     "@changesets/types": "^6.1.0",
     "@eslint/js": "^9.35.0",
     "@vitest/browser": "^3.2.0",
+    "@vitest/browser-playwright": "^4.0.0",
     "bumpp": "^9.4.2",
     "changelogithub": "^0.13.9",
     "dotenv": "^17.2.2",
@@ -70,12 +71,11 @@
     "prettier": "^3.6.2",
     "pretty-quick": "^4.2.2",
     "simple-git-hooks": "^2.13.1",
-    "tsdown": "^0.14.2",
-    "tsup": "^8.2.4",
+    "tsdown": "^0.16.2",
     "tsx": "^4.17.0",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.42.0",
-    "vitest": "^3.2.0",
+    "vitest": "^4.0.0",
     "zone.js": "^0.15.1",
     "zx": "^8.1.4"
   },

package/dist/index.js

@@ -1,48 +0,0 @@
-import { TestBed, ɵgetCleanupHook } from "@angular/core/testing";
-import { Router, provideRouter } from "@angular/router";
-import { RouterTestingHarness } from "@angular/router/testing";
-import { page } from "@vitest/browser/context";
-import { test as test$1 } from "vitest";
-
-export * from "vitest"
-
-//#region src/index.ts
-page.extend({ [Symbol.for("vitest:component-cleanup")]: ɵgetCleanupHook(false) });
-const test = test$1.extend({
-	page: async ({}, use) => {
-		await use(page);
-	},
-	mount: async ({ page: page$1 }, use) => {
-		await use(async (componentClass, config) => {
-			const imports = [componentClass, ...config?.imports || []];
-			const providers = [...config?.providers || []];
-			const mountResult = {};
-			if (config?.withRouting) {
-				const routes = typeof config.withRouting === "boolean" ? [] : config.withRouting.routes;
-				providers.push(provideRouter(routes));
-			}
-			TestBed.configureTestingModule({
-				imports,
-				providers
-			});
-			if (config?.withRouting) {
-				const routerHarness = await RouterTestingHarness.create(typeof config.withRouting === "boolean" ? void 0 : config.withRouting.initialRoute);
-				mountResult.routerHarness = routerHarness;
-				mountResult.router = TestBed.inject(Router);
-			}
-			const fixture = TestBed.createComponent(componentClass);
-			fixture.autoDetectChanges();
-			await fixture.whenStable();
-			const component = page$1.elementLocator(fixture.nativeElement);
-			return {
-				...mountResult,
-				fixture,
-				componentClassInstance: fixture.componentInstance,
-				component
-			};
-		});
-	}
-});
-
-//#endregion
-export { test };

package/dist/setup-zones.d.ts

@@ -1,3 +0,0 @@
-import "@angular/compiler";
-import "@analogjs/vitest-angular/setup-zone";
-export {};

package/dist/setup.js

@@ -1,3 +0,0 @@
-import { setupAngularTestEnvironment } from "./setup-RnZmQ_2I.js";
-
-export { setupAngularTestEnvironment };