feat(): add tests

Author: tomalaforge

apps/forms/61-simplest-signal-form/project.json

@@ -62,12 +62,6 @@
     "lint": {
       "executor": "@nx/eslint:lint"
     },
-    "test": {
-      "executor": "@angular/build:unit-test",
-      "options": {
-        "runnerConfig": "apps/forms/61-simplest-signal-form/vitest-base.config.ts"
-      }
-    },
     "serve-static": {
       "continuous": true,
       "executor": "@nx/web:file-server",

apps/forms/61-simplest-signal-form/src/test-setup.ts

@@ -0,0 +1,6 @@
+import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';
+import '@angular/compiler';
+
+setupTestBed({
+  browserMode: true, // Enables visual test preview
+});

apps/forms/61-simplest-signal-form/src/test-setup/no-teardown.ts

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

apps/forms/61-simplest-signal-form/tsconfig.spec.json

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+
+import angular from '@analogjs/vite-plugin-angular';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { playwright } from '@vitest/browser-playwright';
+
+export default defineConfig(({ mode }) => ({
+  plugins: [angular(), nxViteTsPaths()],
+  test: {
+    globals: true,
+    setupFiles: ['src/test-setup.ts'],
+    // environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    // Vitest browser config
+    browser: {
+      enabled: true,
+      headless: false, // set to true in CI
+      provider: playwright(),
+      instances: [{ browser: 'chromium' }],
+    },
+  },
+}));

apps/forms/61-simplest-signal-form/vitest-base.config.ts

@@ -64,15 +64,6 @@
     "lint": {
       "executor": "@nx/eslint:lint"
     },
-    "ng-test": {
-      "executor": "@angular/build:unit-test",
-      "options": {
-        "runnerConfig": "apps/forms/62-crossfield-validation-signal-form/vitest-base.config.ts"
-      }
-    },
-    "test": {
-      "executor": "@analogjs/vitest-angular:test"
-    },
     "serve-static": {
       "continuous": true,
       "executor": "@nx/web:file-server",

apps/forms/61-simplest-signal-form/vitest.config.ts

@@ -8,7 +8,7 @@ describe('AppComponent', () => {
   });
 
   describe('When component is rendered', () => {
-    it.only('Then should display the form title', async () => {
+    it('Then should display the form title', async () => {
       const heading = page.getByRole('heading', {
         name: /registration form/i,
       });

apps/forms/62-crossfield-validation-signal-form/project.json

@@ -1,4 +1,3 @@
-import '@analogjs/vitest-angular/setup-snapshots';
 import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';
 import '@angular/compiler';
 

apps/forms/62-crossfield-validation-signal-form/src/app/app.component.spec.ts

@@ -62,12 +62,6 @@
     "lint": {
       "executor": "@nx/eslint:lint"
     },
-    "test": {
-      "executor": "@angular/build:unit-test",
-      "options": {
-        "runnerConfig": "apps/forms/63-custom-form/vitest-base.config.ts"
-      }
-    },
     "serve-static": {
       "continuous": true,
       "executor": "@nx/web:file-server",