fix(elements): Add test component and make sure templates are rendered for tests.

Author: skrustev

projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.spec.ts

@@ -1,3 +1,4 @@
+import { ChangeDetectorRef, Component, ViewContainerRef } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { html } from 'lit-html';
 import { AsyncDirective, directive } from 'lit/async-directive.js';
@@ -13,22 +14,34 @@ class ToLowerAsyncDirective extends AsyncDirective {
     protected override disconnected(): void {
         directiveLog.push('disconnected');
     }
-  }
-  export const toLowerAsync = directive(ToLowerAsyncDirective);
+}
+export const toLowerAsync = directive(ToLowerAsyncDirective);
+
+@Component({
+    selector: 'igx-test-template-wrapper',
+    templateUrl: './wrapper.component.html',
+    styleUrls: ['./wrapper.component.scss'],
+    imports: []
+})
+class TestTemplateWrapperComponent extends TemplateWrapperComponent {
+    constructor(public viewContainerRef: ViewContainerRef, public _cdr: ChangeDetectorRef) {
+        super(_cdr);
+    }
+}
 
 describe('WrapperComponent', () => {
-  let component: TemplateWrapperComponent;
-  let fixture: ComponentFixture<TemplateWrapperComponent>;
+  let component: TestTemplateWrapperComponent;
+  let fixture: ComponentFixture<TestTemplateWrapperComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-    imports: [TemplateWrapperComponent]
+    imports: [TestTemplateWrapperComponent]
 })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TemplateWrapperComponent);
+    fixture = TestBed.createComponent(TestTemplateWrapperComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -41,6 +54,7 @@ describe('WrapperComponent', () => {
     const context = { text: "Oh hi" };
     const templateRef = component.addTemplate((ctx) => html`<span id="template1">${ctx.text}</span>`);
     const embeddedView = templateRef.createEmbeddedView(context);
+    component.viewContainerRef.insert(embeddedView);
     embeddedView.detectChanges();
 
     const span = embeddedView.rootNodes[0].querySelector("#template1");
@@ -53,6 +67,7 @@ describe('WrapperComponent', () => {
     const context = { text: "OH HI" };
     const templateRef = component.addTemplate((ctx) => html`<span id="template1">${toLowerAsync(ctx.text)}</span>`);
     const embeddedView = templateRef.createEmbeddedView(context);
+    component.viewContainerRef.insert(embeddedView);
     embeddedView.detectChanges();
 
     const span = embeddedView.rootNodes[0].querySelector("#template1");

projects/igniteui-angular-elements/tsconfig.spec.json

@@ -5,7 +5,8 @@
     "allowJs": true,
     "outDir": "../../out-tsc/spec",
     "types": [
-      "jasmine"
+      "jasmine",
+      "node"
     ]
   },
   "files": [