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 { Component, ViewChild, 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,33 @@ class ToLowerAsyncDirective extends AsyncDirective {
     protected override disconnected(): void {
         directiveLog.push('disconnected');
     }
-  }
-  export const toLowerAsync = directive(ToLowerAsyncDirective);
+}
+export const toLowerAsync = directive(ToLowerAsyncDirective);
+
+@Component({
+    template: `<igx-template-wrapper></igx-template-wrapper>`,
+    imports: [TemplateWrapperComponent]
+})
+class TestTemplateWrapperComponent {
+    @ViewChild(TemplateWrapperComponent)
+    public templateWrapper;
+
+    constructor(public viewContainerRef: ViewContainerRef) { }
+}
 
 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();
   });
@@ -39,8 +51,9 @@ describe('WrapperComponent', () => {
 
   it('should render template', () => {
     const context = { text: "Oh hi" };
-    const templateRef = component.addTemplate((ctx) => html`<span id="template1">${ctx.text}</span>`);
+    const templateRef = component.templateWrapper.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");
@@ -51,8 +64,9 @@ describe('WrapperComponent', () => {
 
   it('should update connectivity on template with AsyncDirective', () => {
     const context = { text: "OH HI" };
-    const templateRef = component.addTemplate((ctx) => html`<span id="template1">${toLowerAsync(ctx.text)}</span>`);
+    const templateRef = component.templateWrapper.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": [