feat(vitest-angular): introduce application bundle-based Vitest builder

libs/card/src/lib/card/card.component.spec.ts

@@ -11,11 +11,11 @@ describe('CardComponent', () => {
   let fixture: ComponentFixture<CardComponent>;
   let component: CardComponent;
 
-  beforeEach(() =>
+  beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [CardComponent],
-    })
-  );
+    });
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CardComponent);

libs/card/src/lib/card2/__snapshots__/card.component.spec.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CardComponent > should create the app 1`] = `
+<lib-card>
+  card-works
+
+  <button
+    color="primary"
+    mat-button=""
+  >
+    Render card2
+  </button>
+  <!--bindings={
+  "ng-reflect-ng-if": "false"
+}-->
+</lib-card>
+`;

libs/card/src/lib/card2/card.component.html

@@ -0,0 +1,3 @@
+{{ title }}
+<button mat-button color="primary" (click)="render = true">Render card2</button>
+<mat-card *ngIf="render"> Some card </mat-card>

libs/card/src/lib/card2/card.component.spec.ts

@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { MatCardHarness } from '@angular/material/card/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let loader: HarnessLoader;
+  let fixture: ComponentFixture<CardComponent>;
+  let component: CardComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [CardComponent],
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    fixture.detectChanges();
+  });
+
+  it('should show a card once we click on the button', async () => {
+    const button = await loader.getHarness(MatButtonHarness);
+
+    const card = await loader.getHarnessOrNull(MatCardHarness);
+    expect(card).toBeNull();
+
+    await button.click();
+
+    const cardAfterClick = await loader.getHarnessOrNull(MatCardHarness);
+    expect(cardAfterClick).not.toBeNull();
+  });
+
+  it('should create the app', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it(`should have as title 'vitetest'`, () => {
+    expect(component.title).toEqual('card-works');
+  });
+
+  it('should create the app', () => {
+    expect(fixture).toMatchSnapshot();
+  });
+
+  it.skip('should skip this test', () => {
+    expect(false).toBeTruthy();
+  });
+});

libs/card/src/lib/card2/card.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+  selector: 'lib-card',
+  standalone: true,
+  imports: [CommonModule, MatCardModule],
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.css'],
+})
+export class CardComponent {
+  title = 'card-works';
+  render = false;
+}

libs/card/tsconfig.json

@@ -1,13 +1,11 @@
 {
   "compilerOptions": {
-    "target": "es2022",
-    "useDefineForClassFields": false,
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true
   },
   "files": [],
   "include": [],

libs/card/tsconfig.lib.json

@@ -5,7 +5,10 @@
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,
-    "types": []
+    "types": [],
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "moduleResolution": "bundler"
   },
   "exclude": ["src/**/*.spec.ts", "vite.config.ts"],
   "include": ["src/**/*.ts"]

libs/card/tsconfig.spec.json

@@ -2,8 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": ["node", "vitest/globals"],
-    "target": "es2016"
+    "types": ["node", "vitest/globals"]
   },
   "files": ["src/test-setup.ts"],
   "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]

packages/vitest-angular/builders.json

@@ -1,9 +1,14 @@
 {
   "builders": {
     "test": {
-      "implementation": "./src/lib/vitest.impl",
+      "implementation": "./src/lib/builders/test/vitest.impl",
       "schema": "./src/lib/schema.json",
-      "description": "Test with Vitest"
+      "description": "Run tests with Vitest"
+    },
+    "build-test": {
+      "implementation": "./src/lib/builders/build/vitest.impl",
+      "schema": "./src/lib/builders/build/schema.json",
+      "description": "Bundle and run tests with Vitest using the Application Builder"
     }
   }
 }

packages/vitest-angular/src/index.ts

@@ -1,3 +1,4 @@
-import vitestBuilder from './lib/vitest.impl';
+import vitestBuilder from './lib/builders/test/vitest.impl';
+import vitestApplicationBuilder from './lib/builders/build/vitest.impl';
 
-export { vitestBuilder };
+export { vitestBuilder, vitestApplicationBuilder };

packages/vitest-angular/src/lib/builders/build/devkit.ts

@@ -0,0 +1,29 @@
+export async function getBuildApplicationFunction() {
+  const { VERSION } = await (Function(
+    'return import("@angular/compiler-cli")'
+  )() as Promise<{ VERSION: { major: string; minor: string } }>);
+
+  const angularVersion = Number(VERSION.major);
+  const angularMinor = Number(VERSION.minor);
+  let buildApplicationInternal: Function;
+
+  if (angularVersion < 16 || (angularVersion === 16 && angularMinor <= 2)) {
+    throw new Error(
+      'This builder is not supported with versions earlier than Angular v16.2'
+    );
+  } else if (angularVersion >= 16 && angularVersion < 18) {
+    const {
+      buildApplicationInternal: buildApplicationInternalFn,
+    } = require('@angular-devkit/build-angular/src/builders/application');
+
+    buildApplicationInternal = buildApplicationInternalFn;
+  } else {
+    const {
+      buildApplicationInternal: buildApplicationInternalFn,
+    } = require('@angular/build/private');
+
+    buildApplicationInternal = buildApplicationInternalFn;
+  }
+
+  return { buildApplicationInternal, angularVersion };
+}

packages/vitest-angular/src/lib/builders/build/plugins/angular-memory-plugin.ts

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+// import assert from 'node:assert';
+import { dirname, join, relative, resolve } from 'node:path';
+
+import { AngularMemoryOutputFiles } from '../utils';
+
+interface AngularMemoryPluginOptions {
+  workspaceRoot?: string;
+  angularVersion: number;
+  outputFiles: AngularMemoryOutputFiles;
+  external?: string[];
+}
+
+export async function createAngularMemoryPlugin(
+  options: AngularMemoryPluginOptions
+) {
+  const { normalizePath } = await (Function(
+    'return import("vite")'
+  )() as Promise<typeof import('vite')>);
+  const { outputFiles, external } = options;
+  let config;
+  let projectRoot: string;
+  const workspaceRoot = options?.workspaceRoot || process.cwd();
+
+  return {
+    name: 'vite:angular-memory',
+    // Ensures plugin hooks run before built-in Vite hooks
+    enforce: 'pre',
+    config(userConfig: any) {
+      config = userConfig;
+      projectRoot = resolve(workspaceRoot, config.root || '.');
+    },
+    async resolveId(source: string, importer: string) {
+      // Prevent vite from resolving an explicit external dependency (`externalDependencies` option)
+      if (external?.includes(source)) {
+        // This is still not ideal since Vite will still transform the import specifier to
+        // `/@id/${source}` but is currently closer to a raw external than a resolved file path.
+        return source;
+      }
+
+      if (importer) {
+        if (
+          source[0] === '.' &&
+          normalizePath(importer).startsWith(projectRoot)
+        ) {
+          // Remove query if present
+          const [importerFile] = importer.split('?', 1);
+          source =
+            '/' + join(dirname(relative(projectRoot, importerFile)), source);
+        }
+      }
+
+      const [file] = source.split('?', 1);
+      const fileSplits = file.split('/');
+
+      if (outputFiles.has(fileSplits[fileSplits.length - 1])) {
+        return fileSplits[fileSplits.length - 1];
+      }
+
+      if (outputFiles.has(file)) {
+        return join(projectRoot, source);
+      }
+      return;
+    },
+    load(id: string) {
+      const [file] = id.split('?', 1);
+      const relativeFile =
+        options.angularVersion < 19
+          ? normalizePath(relative(projectRoot, file))
+              .replace(/^.*\//, '')
+              .replace('.ts', '.js')
+          : 'spec-' +
+            normalizePath(relative(projectRoot, file))
+              .replace('.ts', '.js')
+              .replace(/^[./]+/, '_')
+              .replace(/\//g, '-');
+
+      const codeContents =
+        outputFiles.get(relativeFile)?.contents ||
+        outputFiles.get(id)?.contents;
+      if (codeContents === undefined) {
+        return undefined;
+      }
+
+      const code = Buffer.from(codeContents).toString('utf-8');
+      const mapContents = outputFiles.get(relativeFile + '.map')?.contents;
+
+      return {
+        // Remove source map URL comments from the code if a sourcemap is present.
+        // Vite will inline and add an additional sourcemap URL for the sourcemap.
+        code: mapContents
+          ? code.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, '')
+          : code,
+        map: mapContents && Buffer.from(mapContents).toString('utf-8'),
+      };
+    },
+  };
+}

packages/vitest-angular/src/lib/builders/build/plugins/esbuild-downlevel-plugin.ts

@@ -0,0 +1,26 @@
+export async function esbuildDownlevelPlugin() {
+  const { transformWithEsbuild } = await (Function(
+    'return import("vite")'
+  )() as Promise<typeof import('vite')>);
+  return {
+    name: 'analogs-vitest-esbuild-downlevel-plugin',
+    async transform(_code: string, id: string) {
+      if (_code.includes('async (')) {
+        const { code, map } = await transformWithEsbuild(_code, id, {
+          loader: 'js',
+          format: 'esm',
+          target: 'es2016',
+          sourcemap: true,
+          sourcefile: id,
+        });
+
+        return {
+          code,
+          map,
+        };
+      }
+
+      return undefined;
+    },
+  };
+}

packages/vitest-angular/src/lib/builders/build/schema.d.ts

@@ -0,0 +1,9 @@
+export interface VitestSchema {
+  mode?: string;
+  setupFile: string;
+  configFile?: string;
+  include: string[];
+  exclude?: string[];
+  watch?: boolean;
+  tsConfig: string;
+}

packages/vitest-angular/src/lib/builders/build/schema.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "title": "Vitest schema for Test Facade.",
+  "description": "Vitest target options",
+  "type": "object",
+  "properties": {
+    "configFile": {
+      "type": "string",
+      "description": "The path to the local vitest config",
+      "x-completion-type": "file",
+      "x-completion-glob": "@vitest.config@(.js|.ts|.mts)",
+      "aliases": ["config"]
+    },
+    "include": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "default": ["src/**/*.spec.ts"],
+      "description": "Globs of files to include, relative to project root."
+    },
+    "exclude": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "default": ["node_modules", "dist", ".idea", ".git", ".cache"],
+      "description": "Globs of files to exclude, relative to the project root."
+    },
+    "setupFile": {
+      "type": "string",
+      "description": "The path to the setup file.",
+      "default": "src/test-setup.ts"
+    },
+    "tsConfig": {
+      "type": "string",
+      "description": "The relative path to the TypeScript configuration file for running tests.",
+      "default": "tsconfig.spec.json"
+    },
+    "watch": {
+      "type": "boolean",
+      "default": false,
+      "description": "Run the tests in watch mode"
+    }
+  },
+  "additionalProperties": true
+}

packages/vitest-angular/src/lib/builders/build/utils.ts

@@ -0,0 +1,4 @@
+export type AngularMemoryOutputFiles = Map<
+  string,
+  { contents: Uint8Array; hash: string; servable: boolean }
+>;