fix: Old templates refs handling when there is a dynamic change

Added unit tests

Author: rkaraivanov

projects/igniteui-angular/src/lib/chat/chat.component.ts

@@ -70,6 +70,7 @@ export class IgxChatComponent implements OnInit, OnDestroy {
 
     private readonly _view = inject(ViewContainerRef);
     private readonly _templateViewRefs = new Map<TemplateRef<any>, Set<ViewRef>>();
+    private _oldTemplates: NgChatTemplates = {};
 
     protected readonly _mergedOptions = signal<IgcChatOptions>({});
     protected readonly _transformedTemplates = signal<ChatRenderers>({});
@@ -100,27 +101,29 @@ export class IgxChatComponent implements OnInit, OnDestroy {
 
     //#endregion
 
+    /** @internal */
     public ngOnInit(): void {
         IgcChatComponent.register();
     }
 
+    /** @internal */
     public ngOnDestroy(): void {
         for (const viewSet of this._templateViewRefs.values()) {
-            for (const viewRef of viewSet) {
-                viewRef.destroy();
-            }
+            viewSet.forEach(viewRef => viewRef.destroy());
         }
         this._templateViewRefs.clear();
     }
 
     constructor() {
+        // Templates changed - update transformed templates and viewRefs and merge with options
         effect(() => {
             const templates = this.templates();
             this._setTemplates(templates);
 
             this._mergeOptions(untracked(() => this.options()));
         });
 
+        // Options changed - merge with current template state
         effect(() => {
             const options = this.options();
             this._mergeOptions(options);
@@ -140,7 +143,7 @@ export class IgxChatComponent implements OnInit, OnDestroy {
         const templateCopies: ChatRenderers = {};
         const newTemplateKeys = Object.keys(newTemplates) as Array<keyof NgChatTemplates>;
 
-        const oldTemplates = this.templates();
+        const oldTemplates = this._oldTemplates;
         const oldTemplateKeys = Object.keys(oldTemplates) as Array<keyof NgChatTemplates>;
 
         for (const key of oldTemplateKeys) {
@@ -157,9 +160,11 @@ export class IgxChatComponent implements OnInit, OnDestroy {
         }
 
         if (newTemplateKeys.length > 0) {
+            this._oldTemplates = {};
             for (const key of newTemplateKeys) {
                 const ref = newTemplates[key];
                 if (ref) {
+                    this._oldTemplates[key] = ref as any;
                     templateCopies[key] = this._createTemplateRenderer(ref);
                 }
             }
@@ -193,10 +198,10 @@ export class IgxChatComponent implements OnInit, OnDestroy {
                 angularContext = { $implicit: { instance: context.instance } };
             }
 
-            const node = this._view.createEmbeddedView(ref, angularContext);
-            viewSet.add(node);
+            const viewRef = this._view.createEmbeddedView(ref, angularContext);
+            viewSet.add(viewRef);
 
-            return node.rootNodes;
+            return viewRef.rootNodes;
         }
     }
 }

projects/igniteui-angular/src/lib/chat/chat.spec.ts

@@ -0,0 +1,112 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
+import { IgxChatComponent } from './chat.component'
+import { Component, signal, TemplateRef, viewChild } from '@angular/core';
+import type { IgcChatMessage } from 'igniteui-webcomponents';
+
+describe('Chat wrapper', () => {
+    function getShadowRoot(element: HTMLElement) {
+        return element.shadowRoot;
+    }
+
+    let chatComponent: IgxChatComponent;
+    let chatElement: HTMLElement;
+    let fixture: ComponentFixture<IgxChatComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [IgxChatComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(IgxChatComponent);
+        chatComponent = fixture.componentInstance;
+        chatElement = (fixture.nativeElement as HTMLElement).querySelector('igc-chat');
+        fixture.detectChanges();
+    })
+
+    it('is created', () => {
+        expect(chatComponent).toBeDefined();
+    });
+
+    it('has correct initial empty state', () => {
+        const draft = chatComponent.draftMessage();
+
+        expect(chatComponent.messages().length).toEqual(0);
+        expect(draft.text).toEqual('');
+        expect(draft.attachments).toBeUndefined();
+    });
+
+    it('correct bindings for messages', async () => {
+        fixture.componentRef.setInput('messages', [{ id: '1', sender: 'user', text: 'Hello' }]);
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const messageElement = getShadowRoot(chatElement).querySelector<HTMLElement>('igc-chat-message');
+        expect(messageElement).toBeDefined();
+        expect(getShadowRoot(messageElement).textContent.trim()).toEqual(chatComponent.messages()[0].text);
+    });
+
+    it('correct bindings for draft message', async () => {
+        fixture.componentRef.setInput('draftMessage', { text: 'Hello world' });
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const textarea = getShadowRoot(getShadowRoot(chatElement).querySelector('igc-chat-input')).querySelector('igc-textarea');
+        expect(textarea.value).toEqual(chatComponent.draftMessage().text);
+    });
+});
+
+describe('Chat templates', () => {
+    function getShadowRoot(element: HTMLElement) {
+        return element.shadowRoot;
+    }
+
+    let fixture: ComponentFixture<ChatTemplatesBed>;
+    let chatElement: HTMLElement;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [IgxChatComponent, ChatTemplatesBed]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ChatTemplatesBed);
+        fixture.detectChanges();
+        chatElement = (fixture.nativeElement as HTMLElement).querySelector('igc-chat');
+    });
+
+    it('has correct initially bound template', async () => {
+        await fixture.whenStable();
+
+        // NOTE: This is invoked since in the test bed there is no app ref so fresh embedded view
+        // has no change detection ran on it. In an application scenario this is not the case.
+        // This is so we don't explicitly invoke `viewRef.detectChanges()` inside the returned closure
+        // from the wrapper's `_createTemplateRenderer` call.
+        fixture.detectChanges();
+        expect(getShadowRoot(getShadowRoot(chatElement).querySelector('igc-chat-message')).textContent.trim())
+            .toEqual(`Your message: ${fixture.componentInstance.messages()[0].text}`);
+    });
+});
+
+
+@Component({
+    template: `
+        <igx-chat [messages]="messages()" [templates]="{messageContent: messageTemplate()}"/>
+        <ng-template #message let-message>
+            <h3>Your message: {{ message.text }}</h3>
+        </ng-template>
+    `,
+    imports: [IgxChatComponent]
+})
+class ChatTemplatesBed {
+    public messages = signal<IgcChatMessage[]>([{
+        id: '1',
+        sender: 'user',
+        text: 'Hello world'
+    }]);
+    public messageTemplate = viewChild.required<TemplateRef<any>>('message');
+}