fix test infra

packages/angular-table/package.json

@@ -53,12 +53,15 @@
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@analogjs/vite-plugin-angular": "^1.3.1",
+    "@analogjs/vite-plugin-angular": "^1.11.0",
+    "@analogjs/vitest-angular": "^1.11.0",
     "@angular/core": "^17.3.9",
     "@angular/platform-browser": "^17.3.9",
     "@angular/platform-browser-dynamic": "^17.3.9",
+    "ng-packagr": "^17.3.0",
+    "reflect-metadata": "^0.2.2",
     "typescript": "5.4.5",
-    "ng-packagr": "^17.3.0"
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
     "@angular/core": ">=17"

packages/angular-table/src/flex-render.ts

@@ -59,7 +59,7 @@ export class FlexRenderDirective<TProps extends NonNullable<unknown>>
   ref?: FlexRenderComponentRef<any> | EmbeddedViewRef<unknown> | null = null
 
   #isFirstRender = true
-  #lastContentChecked: FlexRenderContent<TProps> | null = null
+  lastContentChecked: FlexRenderContent<TProps> | null = null
 
   readonly #flexRenderComponentFactory = inject(FlexRenderComponentFactory)
 
@@ -75,13 +75,19 @@ export class FlexRenderDirective<TProps extends NonNullable<unknown>>
       this.#isFirstRender = false
       return
     }
-    this.#checkChanges()
+    this.#checkChanges({ propsReferenceChanged: false })
   }
 
   ngOnChanges(changes: SimpleChanges) {
     if (!changes['content']) {
+      if (changes['props'] && this.lastContentChecked) {
+        this.#checkChanges({ propsReferenceChanged: true })
+        this.#isFirstRender = true
+        return
+      }
       return
     }
+
     this.render()
   }
 
@@ -90,33 +96,40 @@ export class FlexRenderDirective<TProps extends NonNullable<unknown>>
     const { content, props } = this
     if (content === null || content === undefined) {
       this.ref = null
-      this.#lastContentChecked = null
+      this.lastContentChecked = null
       return
     }
 
     const resolvedContent = this.#getContentValue(props)
     this.ref = this.renderContent(resolvedContent)
-    this.#lastContentChecked = resolvedContent
+    this.lastContentChecked = resolvedContent
   }
 
-  #checkChanges(): void {
+  #checkChanges(options: { propsReferenceChanged: boolean }): void {
     const currentContent = this.#getContentValue(this.props)
-    if (Object.is(this.#lastContentChecked, currentContent)) {
-      this.#lastContentChecked = currentContent
+    const { propsReferenceChanged } = options
+
+    if (Object.is(this.lastContentChecked, currentContent)) {
+      this.lastContentChecked = currentContent
+
       // NOTE: currently this is like having a component with ChangeDetectionStrategy.Default.
       // In this case updating input values is just a noop since the instance of the context properties (table, cell, etc...) doesn't change,
       // but marking the view as dirty allows to re-evaluate all function invocation on the component template.
       if (this.ref instanceof FlexRenderComponentRef) {
+        if (propsReferenceChanged) {
+          this.ref.setInputs(this.props)
+        }
         this.ref.markAsDirty()
       }
+      return
     }
 
     // When the content reference (or value, for primitive values) differs, we need to detect the `type` of the
     // new content in order to apply a specific update strategy.
     const contentInfo = this.#getContentInfo(currentContent)
-    const previousContentInfo = this.#getContentInfo(this.#lastContentChecked)
+    const previousContentInfo = this.#getContentInfo(this.lastContentChecked)
     if (contentInfo.kind !== previousContentInfo.kind) {
-      this.#lastContentChecked = currentContent
+      this.lastContentChecked = currentContent
       this.render()
       return
     }
@@ -151,7 +164,7 @@ export class FlexRenderDirective<TProps extends NonNullable<unknown>>
       }
     }
 
-    this.#lastContentChecked = currentContent
+    this.lastContentChecked = currentContent
   }
 
   private renderContent(content: FlexRenderContent<TProps>) {

packages/angular-table/tests/flex-render.test.ts

@@ -1,4 +1,10 @@
-import { Component, ViewChild, input, type TemplateRef } from '@angular/core'
+import {
+  Component,
+  ViewChild,
+  input,
+  type TemplateRef,
+  effect,
+} from '@angular/core'
 import { TestBed, type ComponentFixture } from '@angular/core/testing'
 import { createColumnHelper } from '@tanstack/table-core'
 import { describe, expect, test } from 'vitest'
@@ -124,13 +130,19 @@ describe('FlexRenderDirective', () => {
 
   // Skip for now, test framework (using ComponentRef.setInput) cannot recognize signal inputs
   // as component inputs
-  test.skip('should render custom components', () => {
+  test('should render custom components', () => {
     @Component({
       template: `{{ row().property }}`,
       standalone: true,
     })
     class FakeComponent {
       row = input.required<{ property: string }>()
+
+      constructor() {
+        effect(() => {
+          console.log('row', this.row())
+        })
+      }
     }
 
     const fixture = TestBed.createComponent(TestRenderComponent)

packages/angular-table/tests/test-setup.ts

@@ -1,4 +1,4 @@
-import '@analogjs/vite-plugin-angular/setup-vitest'
+import '@analogjs/vitest-angular/setup-zone'
 import '@testing-library/jest-dom/vitest'
 
 import {

packages/angular-table/tsconfig.test.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2015",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": ["ES2022", "dom"],
+    "types": ["vitest/globals"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "include": ["src", "tests"]
+}

packages/angular-table/vitest.config.ts

@@ -1,13 +1,25 @@
 import { defineConfig } from 'vitest/config'
 import packageJson from './package.json'
+import angular from '@analogjs/vite-plugin-angular'
+import path from 'node:path'
+
+const tsconfig = path.join(import.meta.dirname, 'tsconfig.test.json')
+
+const angularPlugin = angular({ tsconfig, jit: true })
 
 export default defineConfig({
+  plugins: [
+    // @ts-expect-error Fix types
+    angularPlugin,
+  ],
   test: {
     name: packageJson.name,
-    dir: './tests',
     watch: false,
+    pool: 'threads',
     environment: 'jsdom',
     setupFiles: ['./tests/test-setup.ts'],
     globals: true,
+    reporters: 'default',
+    disableConsoleIntercept: true,
   },
 })