feat: add angular example

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+.DS_Store

examples/angular/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@vitest-examples/angular",
+  "type": "module",
+  "scripts": {
+    "test": "vitest"
+  },
+  "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^1.21.0",
+    "@angular/build": "^20.3.1",
+    "@angular/compiler": "^20.3.0",
+    "@angular/compiler-cli": "^20.3.0",
+    "@angular/platform-browser": "^20.3.0",
+    "@testing-library/angular": "^18.0.0",
+    "@testing-library/dom": "^10.4.1",
+    "@vitest/browser": "^3.2.4",
+    "playwright": "^1.55.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.2",
+    "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "@angular/common": "^20.3.0",
+    "@angular/core": "^20.3.0"
+  }
+}

examples/angular/src/hello-world.ts

@@ -0,0 +1,11 @@
+import { Component, input } from "@angular/core";
+
+@Component({
+  selector: "hello-world",
+  template: `<div>
+    <h1>Hello, {{ name() }}!</h1>
+  </div>`,
+})
+export class HelloWorld {
+  name = input<string>();
+}

examples/angular/test-setup.ts

@@ -0,0 +1,18 @@
+import "@angular/compiler";
+
+import { NgModule, provideZonelessChangeDetection } from "@angular/core";
+import { getTestBed } from "@angular/core/testing";
+import {
+  BrowserTestingModule,
+  platformBrowserTesting,
+} from "@angular/platform-browser/testing";
+
+@NgModule({
+  providers: [provideZonelessChangeDetection()],
+})
+export class ZonelessTestModule {}
+
+getTestBed().initTestEnvironment(
+  [BrowserTestingModule, ZonelessTestModule],
+  platformBrowserTesting(),
+);

examples/angular/tests/hello-world.spec.ts

@@ -0,0 +1,13 @@
+import { expect, test } from "vitest";
+import { HelloWorld } from "../src/hello-world";
+import { render, screen } from "@testing-library/angular";
+test("renders name", async () => {
+  await render(HelloWorld, {
+    inputs: {
+      name: "Vitest",
+    },
+  });
+  expect(await screen.findByRole("heading")).toHaveTextContent(
+    "Hello, Vitest!",
+  );
+});

examples/angular/tsconfig.json

@@ -0,0 +1,32 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve",
+    "types": ["@vitest/browser/providers/playwright"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "typeCheckHostBindings": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

examples/angular/tsconfig.spec.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec"
+  },
+  "files": ["test-setup.ts"],
+  "include": ["tests/**/*.ts"]
+}

examples/angular/vitest.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vitest/config";
+import angular from "@analogjs/vite-plugin-angular";
+
+export default defineConfig({
+  plugins: [angular()],
+  test: {
+    setupFiles: ["test-setup.ts"],
+    include: ["./tests/hello-world.spec.ts"],
+    browser: {
+      enabled: true,
+      provider: "playwright",
+      instances: [{ browser: "chromium" }],
+    },
+  },
+});