@analogjs/vitest-angular 1.4.0-beta.6

package/README.md

@@ -0,0 +1,218 @@
+# @analogjs/vitest-angular
+
+A standalone builder for running tests with Vitest and Angular.
+
+## Installation
+
+Use your package manager of choice to install the necessary packages.
+
+With ng add:
+
+```sh
+ng add @analogjs/vitest-angular
+```
+
+With npm:
+
+```sh
+npm install @analogjs/vitest-angular vitest --save-dev
+```
+
+With pnpm:
+
+```sh
+pnpm install -w @analogjs/vitest-angular vitest --dev
+```
+
+With Yarn:
+
+```sh
+yarn install @analogjs/vitest-angular vitest --dev
+```
+
+## Setup for Running Tests in Node
+
+To setup Vitest, create a `vite.config.ts` at the root of your project:
+
+```ts
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+
+import angular from '@analogjs/vite-plugin-angular';
+
+export default defineConfig(({ mode }) => ({
+  plugins: [angular()],
+  test: {
+    globals: true,
+    setupFiles: ['src/test-setup.ts'],
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+  },
+  define: {
+    'import.meta.vitest': mode !== 'production',
+  },
+}));
+```
+
+Next, define a `src/test-setup.ts` file to setup the `TestBed`:
+
+```ts
+import '@analogjs/vitest-angular/setup';
+
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+import { getTestBed } from '@angular/core/testing';
+
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+```
+
+Next, update the `test` target in the `angular.json` to use the `@analogjs/vitest-angular:test` builder:
+
+```json
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "your-project": {
+      "projectType": "application",
+      "architect": {
+        "test": {
+          "builder": "@analogjs/vitest-angular:test"
+        }
+      }
+    }
+  }
+}
+```
+
+Lastly, add the `src/test-setup.ts` to `files` array in the `tsconfig.spec.json` in the root of your project, set the `target` to `es2016`, and update the `types`.
+
+```json
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "target": "es2016",
+    "types": ["vitest/globals", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}
+```
+
+## Running Tests
+
+To run unit tests, use the `test` command:
+
+```shell
+npm run test
+```
+
+```shell
+yarn test
+```
+
+```shell
+pnpm test
+```
+
+> The `npx vitest` command can also be used directly.
+
+## Snapshot Testing
+
+For snapshot testing you can use `toMatchSnapshot` from `expect` API.
+
+Below is a small example of how to write a snapshot test:
+
+```ts
+// card.component.spec.ts
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let fixture: ComponentFixture<CardComponent>;
+  let component: CardComponent;
+
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      imports: [CardComponent],
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create the app', () => {
+    expect(fixture).toMatchSnapshot();
+  });
+});
+```
+
+After you run the test, a `card.component.spec.ts.snap` file is created in the`__snapshots__` folder with the below content:
+
+```ts
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CardComponent > should create the app 1`] = `
+  <component-code>
+`;
+```
+
+The snapshots generated should be reviewed and added to version control.
+
+## Using TypeScript Config Path Aliases
+
+If you are using `paths` in your `tsconfig.json`, support for those aliases can be added to the `vite.config.ts`.
+
+First, install the `vite-tsconfig-paths` package.
+
+With npm:
+
+```shell
+npm install vite-tsconfig-paths --save-dev
+```
+
+With pnpm:
+
+```shell
+pnpm install -w vite-tsconfig-paths --dev
+```
+
+With Yarn:
+
+```shell
+yarn add vite-tsconfig-paths --dev
+```
+
+Next, add the plugin to the `plugins` array in the `vite.config.ts`.
+
+```ts
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+
+import angular from '@analogjs/vite-plugin-angular';
+import viteTsConfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig(({ mode }) => ({
+  // ...other config
+  plugins: [angular(), viteTsConfigPaths()],
+}));
+```
+
+## Supporting Analog
+
+- Star the [GitHub Repo](https://github.com/analogjs/analog)
+- Join the [Discord](https://chat.analogjs.org)
+- Follow us on [Twitter](https://twitter.com/analogjs)
+- Become a [Sponsor](https://analogjs.org/docs/sponsoring)

package/builders.json

@@ -0,0 +1,9 @@
+{
+  "builders": {
+    "test": {
+      "implementation": "./src/lib/vitest.impl",
+      "schema": "./src/lib/schema.json",
+      "description": "Test with Vitest"
+    }
+  }
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@analogjs/vitest-angular",
+  "version": "1.4.0-beta.6",
+  "description": "Vitest Builder for Angular",
+  "type": "commonjs",
+  "author": "Brandon Roberts <robertsbt@gmail.com>",
+  "exports": {
+    ".": "./src/index.js",
+    "./package.json": "./package.json",
+    "./setup": "./setup.js"
+  },
+  "keywords": [
+    "angular",
+    "vite",
+    "vitest",
+    "meta-framework"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/analogjs/analog/issues"
+  },
+  "homepage": "https://analogjs.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/analogjs/analog.git"
+  },
+  "builders": "./builders.json",
+  "ng-add": {
+    "save": "devDependencies"
+  },
+  "peerDependencies": {
+    "@analogjs/vite-plugin-angular": "^1.3.0",
+    "@angular-devkit/architect": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+    "vitest": "^1.3.1"
+  },
+  "ng-update": {
+    "packageGroup": [
+      "@analogjs/platform",
+      "@analogjs/content",
+      "@analogjs/router",
+      "@analogjs/trpc",
+      "@analogjs/vite-plugin-angular",
+      "@analogjs/vite-plugin-nitro",
+      "@analogjs/vitest-angular"
+    ]
+  },
+  "main": "./src/index.js"
+}

package/src/index.d.ts

@@ -0,0 +1,2 @@
+import vitestBuilder from './lib/vitest.impl';
+export { vitestBuilder };

package/src/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vitestBuilder = void 0;
+const vitest_impl_1 = require("./lib/vitest.impl");
+exports.vitestBuilder = vitest_impl_1.default;
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/vitest-angular/src/index.ts"],"names":[],"mappings":";;;AAAA,mDAA8C;AAErC,wBAFF,qBAAa,CAEE"}

package/src/lib/schema.json

@@ -0,0 +1,34 @@
+{
+    "version": 2,
+    "cli": "nx",
+    "title": "Vitest Builder for Angular",
+    "description": "Run unit tests using Vitest.",
+    "type": "object",
+    "properties": {
+        "configFile": {
+            "type": "string",
+            "description": "The path to the local vitest config",
+            "x-completion-type": "file",
+            "x-completion-glob": "@(vitest|vite).config@(.js|.ts)",
+            "aliases": ["config"]
+        },
+        "reportsDirectory": {
+            "type": "string",
+            "description": "Directory to write coverage report to."
+        },
+        "mode": {
+            "type": "string",
+            "description": "Mode for Vite."
+        },
+        "testFiles": {
+            "aliases": ["testFile"],
+            "type": "array",
+            "items": { "type": "string" }
+        },
+        "watch": {
+            "description": "Watch files for changes and rerun tests related to changed files.",
+            "type": "boolean"
+        }
+    },
+    "required": []
+}

package/src/lib/vitest.impl.d.ts

@@ -0,0 +1,4 @@
+import { VitestSchema } from './schema';
+export declare function getExtraArgs(options: VitestSchema): Promise<Record<string, any>>;
+declare const _default: any;
+export default _default;

package/src/lib/vitest.impl.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getExtraArgs = void 0;
+const architect_1 = require("@angular-devkit/architect");
+async function vitestBuilder(options, context) {
+    process.env['TEST'] = 'true';
+    process.env['VITEST'] = 'true';
+    const { startVitest } = await Function('return import("vitest/node")')();
+    const projectConfig = await context.getProjectMetadata(context.target);
+    const extraArgs = await getExtraArgs(options);
+    const config = {
+        root: `${projectConfig['root'] || '.'}`,
+        watch: options.watch === true,
+        ...extraArgs,
+    };
+    const server = await startVitest('test', options.testFiles ?? [], config);
+    let hasErrors = false;
+    const processExit = () => {
+        server?.exit();
+        if (hasErrors) {
+            process.exit(1);
+        }
+        else {
+            process.exit(0);
+        }
+    };
+    if (options.watch) {
+        process.on('SIGINT', processExit);
+        process.on('SIGTERM', processExit);
+        process.on('exit', processExit);
+    }
+    // vitest sets the exitCode = 1 when code coverage isn't met
+    hasErrors = (process.exitCode && process.exitCode !== 0);
+    return {
+        success: !hasErrors,
+    };
+}
+async function getExtraArgs(options) {
+    // support passing extra args to Vitest CLI
+    const schema = await Promise.resolve().then(() => require('./schema.json'));
+    const extraArgs = {};
+    for (const key of Object.keys(options)) {
+        if (!schema.properties[key]) {
+            extraArgs[key] = options[key];
+        }
+    }
+    return extraArgs;
+}
+exports.getExtraArgs = getExtraArgs;
+exports.default = (0, architect_1.createBuilder)(vitestBuilder);
+//# sourceMappingURL=vitest.impl.js.map

package/src/lib/vitest.impl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitest.impl.js","sourceRoot":"","sources":["../../../../../packages/vitest-angular/src/lib/vitest.impl.ts"],"names":[],"mappings":";;;AAAA,yDAImC;AAInC,KAAK,UAAU,aAAa,CAC1B,OAAqB,EACrB,OAAuB;IAEvB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAC7B,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;IAE/B,MAAM,EAAE,WAAW,EAAE,GAAG,MAAO,QAAQ,CACrC,8BAA8B,CAC/B,EAA4C,CAAC;IAE9C,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,kBAAkB,CACpD,OAAO,CAAC,MAA2B,CACpC,CAAC;IACF,MAAM,SAAS,GAAG,MAAM,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG;QACb,IAAI,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE;QACvC,KAAK,EAAE,OAAO,CAAC,KAAK,KAAK,IAAI;QAC7B,GAAG,SAAS;KACb,CAAC;IAEF,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,IAAI,EAAE,EAAE,MAAM,CAAC,CAAC;IAE1E,IAAI,SAAS,GAAG,KAAK,CAAC;IAEtB,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,EAAE,IAAI,EAAE,CAAC;QACf,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAClC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;QACnC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAClC,CAAC;IAED,4DAA4D;IAC5D,SAAS,GAAG,CAAC,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,KAAK,CAAC,CAAY,CAAC;IAEpE,OAAO;QACL,OAAO,EAAE,CAAC,SAAS;KACpB,CAAC;AACJ,CAAC;AAEM,KAAK,UAAU,YAAY,CAChC,OAAqB;IAErB,2CAA2C;IAC3C,MAAM,MAAM,GAAG,2CAAa,eAAe,EAAC,CAAC;IAC7C,MAAM,SAAS,GAAwB,EAAE,CAAC;IAC1C,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;QACvC,IAAI,CAAE,MAAc,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YACrC,SAAS,CAAC,GAAG,CAAC,GAAI,OAAe,CAAC,GAAG,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAbD,oCAaC;AAED,kBAAe,IAAA,yBAAa,EAAC,aAAa,CAAQ,CAAC"}