test: cleanups and fixes

xidedix · xidedix · commit d16cae1381b7 · 2025-06-12T18:30:09.000+02:00
diff --git a/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.spec.ts b/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.spec.ts
@@ -11,7 +11,7 @@ class MockElementRef extends ElementRef {}
   imports: [NavbarTogglerDirective, CollapseDirective],
   template: `
     <button [cNavbarToggler]="collapseRef"></button>
-    <div #collapseRef="cCollapse" navbar cCollapse></div>
+    <div #collapseRef="cCollapse" navbar cCollapse>test</div>
   `
 })
 class TestComponent {}
diff --git a/projects/coreui-angular/src/lib/shared/template-id.directive.spec.ts b/projects/coreui-angular/src/lib/shared/template-id.directive.spec.ts
@@ -1,8 +1,8 @@
+import { NgTemplateOutlet } from '@angular/common';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TemplateIdDirective } from './template-id.directive';
 import { Component, computed, DebugElement, TemplateRef, viewChild } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { NgTemplateOutlet } from '@angular/common';
+import { TemplateIdDirective } from './template-id.directive';
 
 @Component({
   imports: [TemplateIdDirective, NgTemplateOutlet],
@@ -16,7 +16,7 @@ import { NgTemplateOutlet } from '@angular/common';
 class TestComponent {
   readonly templateId = viewChild(TemplateIdDirective);
 
-  readonly id = computed(() => this.templateId()?.templateRef);
+  readonly id = computed(() => this.templateId()?.templateRef ?? null);
 }
 
 describe('TemplateIdDirective', () => {
@@ -26,8 +26,7 @@ describe('TemplateIdDirective', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [TestComponent],
-      providers: [TemplateRef]
+      imports: [TestComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(TestComponent);
@@ -36,19 +35,25 @@ describe('TemplateIdDirective', () => {
 
     fixture.detectChanges();
   });
-  it('should create an instance', () => {
-    TestBed.runInInjectionContext(() => {
-      const directive = new TemplateIdDirective();
-      expect(directive).toBeTruthy();
-    });
-  });
 
   it('should create a template with innerText', () => {
     expect(debugElement.nativeElement.innerText).toBe('Inner Text');
   });
 
-  it('should get the template id', () => {
+  it('should return the correct id when cTemplateId is set', () => {
+    expect(component.templateId()?.id).toBe('test');
+  });
+
+  it('should correctly bind the templateRef to the directive', () => {
+    expect(component.templateId()?.templateRef).toBeInstanceOf(TemplateRef);
+  });
+
+  it('should handle multiple instances of the directive with unique ids', () => {
+    const secondFixture = TestBed.createComponent(TestComponent);
+    const secondComponent = secondFixture.componentInstance;
+    secondFixture.detectChanges();
+
     expect(component.templateId()?.id).toBe('test');
-    expect(component.templateId()?.templateRef).toEqual(jasmine.any(TemplateRef));
+    expect(secondComponent.templateId()?.id).toBe('test');
   });
 });
diff --git a/projects/coreui-angular/src/lib/utilities/shadow-on-scroll.directive.spec.ts b/projects/coreui-angular/src/lib/utilities/shadow-on-scroll.directive.spec.ts
@@ -5,7 +5,7 @@ import { By } from '@angular/platform-browser';
 
 @Component({
   imports: [ShadowOnScrollDirective],
-  template: '<div cShadowOnScroll></div>'
+  template: '<div [cShadowOnScroll]="true"></div>'
 })
 class TestComponent {}
 
diff --git a/projects/coreui-angular/src/lib/utilities/visible.directive.spec.ts b/projects/coreui-angular/src/lib/utilities/visible.directive.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, DebugElement, input, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Component, DebugElement, signal } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { VisibleDirective } from './visible.directive';
 
@@ -8,7 +8,7 @@ import { VisibleDirective } from './visible.directive';
   template: '<ng-template [cVisible]="visible()">Test Node</ng-template>'
 })
 class TestComponent {
-  readonly visible = input(true);
+  readonly visible = signal(true);
 }
 
 describe('VisibleDirective', () => {
@@ -18,8 +18,7 @@ describe('VisibleDirective', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [TestComponent],
-      providers: [TemplateRef, ViewContainerRef]
+      imports: [TestComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(TestComponent);
@@ -28,10 +27,37 @@ describe('VisibleDirective', () => {
     fixture.detectChanges();
   });
 
-  it('should create an instance', () => {
-    TestBed.runInInjectionContext(() => {
-      const directive = new VisibleDirective();
-      expect(directive).toBeTruthy();
-    });
+  it('should display the content when cVisible is true', () => {
+    component.visible.set(true);
+    fixture.detectChanges();
+    const content = fixture.nativeElement.textContent.trim();
+    expect(content).toBe('Test Node');
+  });
+
+  it('should not display the content when cVisible is false', () => {
+    component.visible.set(false);
+    fixture.detectChanges();
+    const content = fixture.nativeElement.textContent.trim();
+    expect(content).toBe('');
+  });
+
+  it('should toggle visibility when cVisible changes from true to false', () => {
+    component.visible.set(true);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent.trim()).toBe('Test Node');
+
+    component.visible.set(false);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent.trim()).toBe('');
+  });
+
+  it('should toggle visibility when cVisible changes from false to true', () => {
+    component.visible.set(false);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent.trim()).toBe('');
+
+    component.visible.set(true);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent.trim()).toBe('Test Node');
   });
 });
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.spec.ts b/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.spec.ts
@@ -10,9 +10,7 @@ describe('WidgetStatBComponent', () => {
     await TestBed.configureTestingModule({
       imports: [WidgetStatBComponent]
     }).compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(WidgetStatBComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ class MockElementRef extends ElementRef {}`
`11`	`11`	`imports: [NavbarTogglerDirective, CollapseDirective],`
`12`	`12`	template: `
`13`	`13`	`<button [cNavbarToggler]="collapseRef"></button>`
`14`		`- <div #collapseRef="cCollapse" navbar cCollapse></div>`
	`14`	`+ <div #collapseRef="cCollapse" navbar cCollapse>test</div>`
`15`	`15`	`
`16`	`16`	`})`
`17`	`17`	`class TestComponent {}`