Merge pull request #2042 from analogjs/beta

chore: release 2.2.2

Author: brandonroberts

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [2.2.2-beta.1](https://github.com/analogjs/analog/compare/v2.2.1...v2.2.2-beta.1) (2026-01-08)
+
+### Bug Fixes
+
+- **storybook-angular:** use vite config root when angularBuilderContext unavailable ([#2033](https://github.com/analogjs/analog/issues/2033)) ([76cfb94](https://github.com/analogjs/analog/commit/76cfb948c2571bf21522d185d4dc43fa4e4c121e))
+
 ## [2.2.1](https://github.com/analogjs/analog/compare/v2.2.0...v2.2.1) (2026-01-05)
 
 ### Bug Fixes

apps/docs-app/docs/integrations/storybook/index.md

@@ -317,3 +317,147 @@ Adding the replacement files to `files` array in the `tsconfig.app.json` may als
   "files": ["src/main.ts", "src/main.server.ts", "src/two.ts"]
 }
 ```
+
+## Setting up Vitest for Interaction Testing
+
+Storybook also supports using Vitest for testing component interactions.
+
+### Installing Packages
+
+Install the Vitest addon and dependencies:
+
+```sh
+npm install @analogjs/vitest-angular @storybook/addon-vitest vitest @vitest/browser-playwright --save-dev
+```
+
+### Add Vitest Add-on
+
+Add the addon to your `.storybook/main.ts`:
+
+```ts
+import { StorybookConfig } from '@analogjs/storybook-angular';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-vitest',
+  ],
+  framework: {
+    name: '@analogjs/storybook-angular',
+    options: {},
+  },
+};
+
+export default config;
+```
+
+### Setup Vitest Configuration
+
+Create a `.storybook/vitest.setup.ts` file:
+
+```ts
+import '@angular/compiler';
+import { setProjectAnnotations } from '@analogjs/storybook-angular/testing';
+import { beforeAll } from 'vitest';
+import * as projectAnnotations from './preview';
+
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);
+```
+
+Update `.storybook/tsconfig.json` to include the setup file:
+
+```json
+{
+  "extends": "../tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
+  "include": ["../src/**/*.stories.*", "./preview.ts", "./vitest.setup.ts"],
+  "files": ["./typings.d.ts"]
+}
+```
+
+Create a `vitest.config.ts` file in your project root, or add a `storybook` project to your existing `vite.config.ts`:
+
+```ts
+/// <reference types="vitest/config" />
+import { defineConfig } from 'vite';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+
+const dirname =
+  typeof __dirname !== 'undefined'
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          storybookTest({
+            configDir: path.join(dirname, '.storybook'),
+          }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright(),
+            instances: [{ browser: 'chromium' }],
+          },
+          setupFiles: ['.storybook/vitest.setup.ts'],
+        },
+      },
+    ],
+  },
+});
+```
+
+### Installing Playwright
+
+Install Playwright browser binaries:
+
+```sh
+npx playwright install chromium
+```
+
+### Running Component Tests
+
+Add the `test-storybook` target to your `angular.json`:
+
+```json
+"test-storybook": {
+  "builder": "@analogjs/vitest-angular:test",
+  "options": {
+    "configFile": "vitest.config.ts"
+  }
+}
+```
+
+Add a test script to your `package.json`:
+
+```json
+"scripts": {
+  "test-storybook": "ng run your-app:test-storybook"
+}
+```
+
+Run your interaction tests with:
+
+```sh
+npm run test-storybook
+```
+
+You can also run tests directly in the Storybook UI. Start Storybook and use the "Run Tests" button in the sidebar, or navigate to a story to see interaction tests run automatically in the Interactions panel.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "analogjs-platform",
-  "version": "2.2.1",
+  "version": "2.2.2-beta.1",
   "license": "MIT",
   "type": "module",
   "scripts": {

packages/astro-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/astro-angular",
-  "version": "2.2.1",
+  "version": "2.2.2-beta.1",
   "description": "Use Angular components within Astro",
   "type": "module",
   "author": "Brandon Roberts <[email protected]>",
@@ -32,7 +32,7 @@
     "url": "https://github.com/sponsors/brandonroberts"
   },
   "dependencies": {
-    "@analogjs/vite-plugin-angular": "^2.2.1"
+    "@analogjs/vite-plugin-angular": "^2.2.2-beta.1"
   },
   "peerDependencies": {
     "@angular/build": ">=20.0.0",

packages/content/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/content",
-  "version": "2.2.1",
+  "version": "2.2.2-beta.1",
   "description": "Content Rendering for Analog",
   "type": "module",
   "author": "Brandon Roberts <[email protected]>",

packages/create-analog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-analog",
-  "version": "2.2.1",
+  "version": "2.2.2-beta.1",
   "type": "module",
   "license": "MIT",
   "author": "Brandon Roberts",

packages/create-analog/template-angular-v17/package.json

@@ -15,8 +15,8 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@analogjs/content": "^2.2.1",
-    "@analogjs/router": "^2.2.1",
+    "@analogjs/content": "^2.2.2-beta.1",
+    "@analogjs/router": "^2.2.2-beta.1",
     "@angular/animations": "^17.2.0",
     "@angular/common": "^17.2.0",
     "@angular/compiler": "^17.2.0",
@@ -38,9 +38,9 @@
     "zone.js": "~0.14.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^2.2.1",
-    "@analogjs/vite-plugin-angular": "^2.2.1",
-    "@analogjs/vitest-angular": "^2.2.1",
+    "@analogjs/platform": "^2.2.2-beta.1",
+    "@analogjs/vite-plugin-angular": "^2.2.2-beta.1",
+    "@analogjs/vitest-angular": "^2.2.2-beta.1",
     "@angular-devkit/build-angular": "^17.2.0",
     "@angular/cli": "^17.2.0",
     "@angular/compiler-cli": "^17.2.0",

packages/create-analog/template-angular-v18/package.json

@@ -15,8 +15,8 @@
   },
   "private": true,
   "dependencies": {
-    "@analogjs/content": "^2.2.1",
-    "@analogjs/router": "^2.2.1",
+    "@analogjs/content": "^2.2.2-beta.1",
+    "@analogjs/router": "^2.2.2-beta.1",
     "@angular/animations": "^18.0.0",
     "@angular/build": "^18.0.0",
     "@angular/common": "^18.0.0",
@@ -38,9 +38,9 @@
     "zone.js": "~0.14.3"
   },
   "devDependencies": {
-    "@analogjs/platform": "^2.2.1",
-    "@analogjs/vite-plugin-angular": "^2.2.1",
-    "@analogjs/vitest-angular": "^2.2.1",
+    "@analogjs/platform": "^2.2.2-beta.1",
+    "@analogjs/vite-plugin-angular": "^2.2.2-beta.1",
+    "@analogjs/vitest-angular": "^2.2.2-beta.1",
     "@angular/cli": "^18.0.0",
     "@angular/compiler-cli": "^18.0.0",
     "jsdom": "^22.0.0",

packages/create-analog/template-angular-v19/package.json

@@ -15,8 +15,8 @@
   },
   "private": true,
   "dependencies": {
-    "@analogjs/content": "^2.2.1",
-    "@analogjs/router": "^2.2.1",
+    "@analogjs/content": "^2.2.2-beta.1",
+    "@analogjs/router": "^2.2.2-beta.1",
     "@angular/animations": "^19.0.0",
     "@angular/common": "^19.0.0",
     "@angular/compiler": "^19.0.0",
@@ -37,9 +37,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^2.2.1",
-    "@analogjs/vite-plugin-angular": "^2.2.1",
-    "@analogjs/vitest-angular": "^2.2.1",
+    "@analogjs/platform": "^2.2.2-beta.1",
+    "@analogjs/vite-plugin-angular": "^2.2.2-beta.1",
+    "@analogjs/vitest-angular": "^2.2.2-beta.1",
     "@angular-devkit/build-angular": "^19.0.0",
     "@angular/build": "^19.0.0",
     "@angular/cli": "^19.0.0",

packages/create-analog/template-angular-v20/package.json

@@ -16,8 +16,8 @@
   },
   "private": true,
   "dependencies": {
-    "@analogjs/content": "^2.2.1",
-    "@analogjs/router": "^2.2.1",
+    "@analogjs/content": "^2.2.2-beta.1",
+    "@analogjs/router": "^2.2.2-beta.1",
     "@angular/animations": "^20.0.0",
     "@angular/common": "^20.0.0",
     "@angular/compiler": "^20.0.0",
@@ -37,9 +37,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^2.2.1",
-    "@analogjs/vite-plugin-angular": "^2.2.1",
-    "@analogjs/vitest-angular": "^2.2.1",
+    "@analogjs/platform": "^2.2.2-beta.1",
+    "@analogjs/vite-plugin-angular": "^2.2.2-beta.1",
+    "@analogjs/vitest-angular": "^2.2.2-beta.1",
     "@angular-devkit/build-angular": "^20.0.0",
     "@angular/build": "^20.0.0",
     "@angular/cli": "^20.0.0",