diff --git a/README.md b/README.md index 18c9dc7..3ada428 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,127 @@ # vitest-browser-angular -Render Angular components in VItest Browser Mode. +This community package renders Angular components in [Vitest Browser Mode](https://vitest.dev/guide/browser). -## Installation +```ts +import { Component, input } from '@angular/core' +import { expect, test } from 'vitest' +import { render } from 'vitest-browser-angular' + +@Component({ + selector: 'app-hello-world', + template: '

Hello, {{ name() }}!

', +}) +export class HelloWorld { + name = input.required() +} + +test('renders name', async () => { + const { locator } = await render(HelloWorld, { + inputs: { + name: 'World', + }, + }) + + await expect.element(locator).toHaveTextContent('Hello, World!') +}) +``` + +## Setup + +There are currently two ways to set up Vitest for Angular: +- Analog's [`vitest-angular` plugin](https://analogjs.org/docs/features/testing/vitest) *(community)*. +- Angular CLI's [`unit-test` builder](https://angular.dev/guide/testing#configuration) *(official)*. + + +While Angular CLI's `unit-test` builder is the official way to set up Vitest for Angular, it has some [limitations](https://analogjs.org/docs/features/testing/overview#angular-support-for-vitest). Analog's `vitest-angular` plugin provides more Vitest features and greater flexibility. + +### Setup with Analog Plugin + +1. Set up Vitest ```sh -pnpm add -D vitest-browser-angular +npm add -D @analogjs/platform vitest-browser-angular + +ng g @analogjs/platform:setup-vitest ``` -## Setup Test Environment +2. Activate browser mode in the generated Vitest configuration by following the [browser mode configuration instructions](https://vitest.dev/guide/browser/#configuration). + +### Setup with Angular CLI + +1. Configure your Angular project to use the `@angular/build:unit-test` builder, and add the browsers of your choice. + +```json +{ + ..., + "projects": { + "my-app": { + ..., + "architect": { + "test": { + "builder": "@angular/build:unit-test", + "options": { + "browsers": ["Chromium", "Firefox", "Webkit"] + } + } + } + } + } +} +``` + +*Since Angular v21, Vitest is the default runner so you don't need to set the `runner` option.* -To set up your test environment (with Zone.js or Zoneless), use `@analogjs/vitest-angular`'s `setupTestBed()` function. +2. Install the browser provider of your choice using `ng add` -**Important:** Make sure to use `{ browserMode: true }` when calling `setupTestBed()` to enable Vitest browser mode's visual test preview functionality. +```sh +# With Playwright +ng add @vitest/browser-playwright + +# or with WebdriverIO +ng add @vitest/browser-webdriverio +``` + +3. Add the `vitest-browser-angular` package to your project. + +```sh +npm add -D vitest-browser-angular +``` + + +## Zone.js VS Zoneless Setup + +Angular CLI will automatically set up the test environment for you depending on the presence of `zone.js` in your project's polyfills. + +When using the Analog plugin, you can control the behavior using the `zoneless` option of `setupTestBed()` in `test-setup.ts`: + +```ts +import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed'; + +setupTestBed({ + zoneless: true, +}); +``` 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). + +## Component Preview + +To preview, debug and interact with a component in the browser after the test, you can prevent Angular from destroying it. + +In Angular CLI, enable this using the `--debug` option. + +With the Analog plugin, enable this using the `browserMode` option of `setupTestBed()` in `test-setup.ts`: + +```ts +import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed'; + +setupTestBed({ + browserMode: true, +}); +``` + ## Usage ### Basic Example