vitest-browser-angular 0.0.1 → 0.0.3

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,13 +48,104 @@ 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');
 });
 ```
 
+## Routing
+
+### Simple Routing
+
+Enable routing with `withRouting: true` for components that use routing features but don't require specific route configuration:
+
+```ts
+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 {}
+
+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');
+});
+```
+
+### Routing with Configuration
+
+Configure specific routes and optionally set an initial route:
+
+```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';
+
+@Component({
+  template: '<h1>Home Page</h1>',
+})
+export class HomeComponent {}
+
+@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
 
 Want to contribute? Yayy! 🎉
@@ -69,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:
@@ -79,4 +171,4 @@ This project is inspired by the following projects:
 
 ## License
 
-MIT
+MIT

package/dist/index-B6AjE_kw.d.ts

@@ -0,0 +1,10 @@
+import { i as render, n as RenderResult, r as cleanup, t as RenderFn } from "./pure-CheJC9ys.js";
+
+//#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.js

@@ -1,45 +1,15 @@
-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"
+import { n as render, t as cleanup } from "./pure-BCQUoZ4o.js";
+import { beforeEach } from "vitest";
+import { page } from "vitest/browser";
 
 //#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) providers.push(provideRouter(config.withRouting.routes));
-			TestBed.configureTestingModule({
-				imports,
-				providers
-			});
-			if (config?.withRouting) {
-				const routerHarness = await RouterTestingHarness.create(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
-			};
-		});
-	}
+page.extend({
+	render,
+	[Symbol.for("vitest:component-cleanup")]: cleanup
+});
+beforeEach(async () => {
+	await cleanup(true);
 });
 
 //#endregion
-export { test };
+export { cleanup, render };

package/dist/pure-BCQUoZ4o.js

@@ -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-CDpj4kF8.d.ts

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

package/dist/pure-CheJC9ys.d.ts

@@ -0,0 +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 { EnvironmentProviders, Provider, Type } from "@angular/core";
+
+//#region src/pure.d.ts
+interface RoutingConfig {
+  routes: Routes;
+  initialRoute?: string;
+}
+interface RenderConfig {
+  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) => 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 { render as i, RenderResult as n, cleanup as r, RenderFn as t };

package/dist/pure.js

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

package/dist/{setup-RnZmQ_2I.js → setup-DUx6xbqk.js}

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

package/dist/setup-zones.js

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

package/dist/setup.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitest-browser-angular",
-  "version": "0.0.1",
-  "description": "Mount Angular components in VItest Browser Mode",
+  "version": "0.0.3",
+  "description": "Render Angular components in VItest Browser Mode",
   "author": "Shai Reznik (HiRez.io)",
   "license": "MIT",
   "homepage": "https://github.com/hirezio/vitest-browser-angular#readme",
@@ -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",
@@ -71,11 +72,10 @@
     "pretty-quick": "^4.2.2",
     "simple-git-hooks": "^2.13.1",
     "tsdown": "^0.14.2",
-    "tsup": "^8.2.4",
     "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.d.ts

@@ -1,32 +0,0 @@
-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
-interface RoutingConfig {
-  routes: Routes;
-  initialRoute?: string;
-}
-interface MountConfig {
-  withRouting?: RoutingConfig;
-  providers?: Array<Provider | EnvironmentProviders>;
-  imports?: unknown[];
-}
-interface MountResult<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;
-}>;
-//#endregion
-export { MountFn, MountResult, test };