test: updates, cleanups and fixes

Author: xidedix

projects/coreui-angular-chartjs/src/test.ts

@@ -3,14 +3,9 @@
 import 'zone.js';
 import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-  { teardown: { destroyAfterEach: true }},
-);
+getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
+  teardown: { destroyAfterEach: true }
+});

projects/coreui-angular/src/lib/card/card-img.directive.spec.ts

@@ -1,14 +1,14 @@
-import { Component, DebugElement } from '@angular/core';
+import { Component, DebugElement, input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { CardImgDirective } from './card-img.directive';
 import { By } from '@angular/platform-browser';
 
 @Component({
   imports: [CardImgDirective],
-  template: ` <div [cCardImg]="orientation"></div> `
+  template: ` <div [cCardImg]="orientation()"></div> `
 })
 export class TestComponent {
-  orientation: 'top' | 'bottom' | 'start' | 'end' | undefined = undefined;
+  readonly orientation = input<'top' | 'bottom' | 'start' | 'end' | undefined>(undefined);
 }
 
 describe('CardImgDirective', () => {
@@ -34,16 +34,16 @@ describe('CardImgDirective', () => {
   });
 
   it('should have css classes', () => {
-    component.orientation = 'start';
+    fixture.componentRef.setInput('orientation', 'start');
     fixture.detectChanges();
     expect(debugElement.nativeElement).toHaveClass('rounded-start');
-    component.orientation = 'end';
+    fixture.componentRef.setInput('orientation', 'end');
     fixture.detectChanges();
     expect(debugElement.nativeElement).toHaveClass('rounded-end');
-    component.orientation = 'top';
+    fixture.componentRef.setInput('orientation', 'top');
     fixture.detectChanges();
     expect(debugElement.nativeElement).toHaveClass('card-img-top');
-    component.orientation = 'bottom';
+    fixture.componentRef.setInput('orientation', 'bottom');
     fixture.detectChanges();
     expect(debugElement.nativeElement).toHaveClass('card-img-bottom');
   });

projects/coreui-angular/src/lib/collapse/collapse.directive.spec.ts

@@ -1,18 +1,18 @@
 import { CollapseDirective } from './collapse.directive';
-import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
+import { Component, DebugElement, ElementRef, Renderer2, signal } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
 
 class MockElementRef extends ElementRef {}
 
 @Component({
-  template: '<div cCollapse [horizontal]="horizontal" [(visible)]="visible" [animate]="false">Test</div>',
+  template: '<div cCollapse [horizontal]="horizontal()" [(visible)]="visible" [animate]="false">Test</div>',
   imports: [CollapseDirective]
 })
 class TestComponent {
-  horizontal = false;
-  visible = false;
+  readonly horizontal = signal(false);
+  readonly visible = signal(false);
 }
 
 describe('CollapseDirective', () => {
@@ -29,7 +29,7 @@ describe('CollapseDirective', () => {
     fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
     elementRef = fixture.debugElement.query(By.directive(CollapseDirective));
-    component.visible = false;
+    component.visible.set(false);
     fixture.detectChanges(); // initial binding
   });
 
@@ -43,13 +43,13 @@ describe('CollapseDirective', () => {
   it('should have css classes', fakeAsync(() => {
     expect(elementRef.nativeElement.style.display).toContain('none');
     expect(elementRef.nativeElement).not.toHaveClass('collapse-horizontal');
-    component.horizontal = true;
-    component.visible = true;
+    component.horizontal.set(true);
+    component.visible.set(true);
     fixture.detectChanges();
     expect(elementRef.nativeElement).toHaveClass('collapse-horizontal');
     expect(elementRef.nativeElement.style.display).toBe('');
-    component.horizontal = false;
-    component.visible = false;
+    component.horizontal.set(false);
+    component.visible.set(false);
     fixture.detectChanges();
     expect(elementRef.nativeElement).not.toHaveClass('collapse-horizontal');
   }));

projects/coreui-angular/src/lib/dropdown/dropdown-close/dropdown-close.directive.spec.ts

@@ -1,4 +1,4 @@
-import { Component, DebugElement, ElementRef, Renderer2, viewChild } from '@angular/core';
+import { Component, DebugElement, ElementRef, Renderer2, signal, viewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DropdownService } from '../dropdown.service';
@@ -13,14 +13,20 @@ class MockElementRef extends ElementRef {}
   template: `
     <c-dropdown #dropdown="cDropdown" visible>
       <div cDropdownMenu>
-        <button cButtonClose cDropdownClose [disabled]="disabled" [dropdownComponent]="dropdown" tabIndex="0"></button>
+        <button
+          cButtonClose
+          cDropdownClose
+          [disabled]="disabled()"
+          [dropdownComponent]="dropdown"
+          tabIndex="0"
+        ></button>
       </div>
     </c-dropdown>
   `,
   imports: [ButtonCloseDirective, DropdownComponent, DropdownMenuDirective, DropdownCloseDirective]
 })
 class TestComponent {
-  disabled = false;
+  readonly disabled = signal(false);
   readonly dropdown = viewChild(DropdownComponent);
 }
 
@@ -38,7 +44,7 @@ describe('DropdownCloseDirective', () => {
     fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
     elementRef = fixture.debugElement.query(By.directive(DropdownCloseDirective));
-    component.disabled = false;
+    component.disabled.set(false);
     fixture.detectChanges(); // initial binding
   });
 
@@ -53,7 +59,7 @@ describe('DropdownCloseDirective', () => {
     expect(elementRef.nativeElement).not.toHaveClass('disabled');
     expect(elementRef.nativeElement.getAttribute('aria-disabled')).toBeNull();
     expect(elementRef.nativeElement.getAttribute('tabindex')).toBe('0');
-    component.disabled = true;
+    component.disabled.set(true);
     fixture.detectChanges();
     expect(elementRef.nativeElement).toHaveClass('disabled');
     expect(elementRef.nativeElement.getAttribute('aria-disabled')).toBe('true');

projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.spec.ts

@@ -1,4 +1,4 @@
-import { Component, DebugElement, DOCUMENT, ElementRef, Renderer2, viewChild } from '@angular/core';
+import { Component, DebugElement, DOCUMENT, ElementRef, Renderer2, signal, viewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
@@ -14,7 +14,7 @@ class MockElementRef extends ElementRef {}
     <c-dropdown #dropdown="cDropdown" visible>
       <ul cDropdownMenu>
         <li>
-          <button cDropdownItem [active]="active" [disabled]="disabled" tabIndex="0" #item="cDropdownItem">
+          <button cDropdownItem [active]="active()" [disabled]="disabled()" tabIndex="0" #item="cDropdownItem">
             Action
           </button>
         </li>
@@ -24,8 +24,8 @@ class MockElementRef extends ElementRef {}
   imports: [DropdownComponent, DropdownMenuDirective, DropdownItemDirective]
 })
 class TestComponent {
-  disabled = false;
-  active = false;
+  readonly disabled = signal(false);
+  readonly active = signal(false);
   readonly dropdown = viewChild(DropdownComponent);
   readonly item = viewChild(DropdownItemDirective);
 }
@@ -46,7 +46,7 @@ describe('DropdownItemDirective', () => {
     fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
     elementRef = fixture.debugElement.query(By.directive(DropdownItemDirective));
-    component.disabled = false;
+    component.disabled.set(false);
     fixture.detectChanges(); // initial binding
   });
 
@@ -62,8 +62,8 @@ describe('DropdownItemDirective', () => {
     expect(elementRef.nativeElement.getAttribute('aria-disabled')).toBeNull();
     expect(elementRef.nativeElement.getAttribute('aria-current')).toBeNull();
     expect(elementRef.nativeElement.getAttribute('tabindex')).toBe('0');
-    component.disabled = true;
-    component.active = true;
+    component.disabled.set(true);
+    component.active.set(true);
     fixture.detectChanges();
     expect(elementRef.nativeElement).toHaveClass('disabled');
     expect(elementRef.nativeElement.getAttribute('aria-disabled')).toBe('true');

projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.spec.ts

@@ -1,4 +1,4 @@
-import { Component, DebugElement, DOCUMENT, ElementRef, Renderer2, viewChild } from '@angular/core';
+import { Component, DebugElement, DOCUMENT, ElementRef, Renderer2, signal, viewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DropdownService } from '../dropdown.service';
@@ -13,7 +13,7 @@ class MockElementRef extends ElementRef {}
   template: `
     <c-dropdown #dropdown="cDropdown" [(visible)]="visible">
       <button cButton cDropdownToggle color="secondary">Dropdown button</button>
-      <ul cDropdownMenu [alignment]="alignment">
+      <ul cDropdownMenu [alignment]="alignment()">
         <li>
           <button cDropdownItem [active]="true" tabIndex="0" #item="cDropdownItem">Action</button>
         </li>
@@ -23,8 +23,8 @@ class MockElementRef extends ElementRef {}
   imports: [DropdownComponent, DropdownMenuDirective, DropdownItemDirective, ButtonDirective, DropdownToggleDirective]
 })
 class TestComponent {
-  visible = true;
-  alignment?: string;
+  readonly visible = signal(true);
+  readonly alignment = signal<string>('');
   readonly dropdown = viewChild(DropdownComponent);
   readonly menu = viewChild(DropdownMenuDirective);
   readonly item = viewChild(DropdownItemDirective);
@@ -49,7 +49,7 @@ describe('DropdownMenuDirective', () => {
     dropdownRef = fixture.debugElement.query(By.directive(DropdownComponent));
     elementRef = fixture.debugElement.query(By.directive(DropdownMenuDirective));
     itemRef = fixture.debugElement.query(By.directive(DropdownItemDirective));
-    component.visible = true;
+    component.visible.set(true);
     fixture.detectChanges(); // initial binding
   });
 
@@ -61,25 +61,25 @@ describe('DropdownMenuDirective', () => {
   });
 
   it('should have css classes', fakeAsync(() => {
-    component.visible = false;
+    component.visible.set(false);
     fixture.detectChanges();
     expect(dropdownRef.nativeElement).not.toHaveClass('show');
     expect(elementRef.nativeElement).toHaveClass('dropdown-menu');
     expect(elementRef.nativeElement).not.toHaveClass('dropdown-menu-end');
     expect(elementRef.nativeElement).not.toHaveClass('dropdown-menu-start');
     expect(elementRef.nativeElement).not.toHaveClass('show');
-    component.visible = true;
-    component.alignment = 'end';
+    component.visible.set(true);
+    component.alignment.set('end');
     fixture.detectChanges();
     expect(dropdownRef.nativeElement).toHaveClass('show');
     expect(elementRef.nativeElement).toHaveClass('dropdown-menu-end');
     expect(elementRef.nativeElement).not.toHaveClass('dropdown-menu-start');
     expect(elementRef.nativeElement).toHaveClass('show');
-    component.alignment = 'start';
+    component.alignment.set('start');
     fixture.detectChanges();
     expect(elementRef.nativeElement).not.toHaveClass('dropdown-menu-end');
     expect(elementRef.nativeElement).toHaveClass('dropdown-menu-start');
-    component.alignment = undefined;
+    component.alignment.set('');
     fixture.detectChanges();
     expect(elementRef.nativeElement).not.toHaveClass('dropdown-menu-end');
     expect(elementRef.nativeElement).not.toHaveClass('dropdown-menu-start');
@@ -89,7 +89,7 @@ describe('DropdownMenuDirective', () => {
     expect(document.activeElement).not.toEqual(elementRef.nativeElement);
     elementRef.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Space' }));
     elementRef.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));
-    component.visible = true;
+    component.visible.set(true);
     fixture.detectChanges();
     elementRef.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Space' }));
     elementRef.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));

projects/coreui-angular/src/lib/dropdown/dropdown/dropdown.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 
 import { DropdownComponent, DropdownToggleDirective } from './dropdown.component';
-import { Component, DebugElement, DOCUMENT, ElementRef } from '@angular/core';
+import { Component, DebugElement, DOCUMENT, ElementRef, signal } from '@angular/core';
 import { DropdownService } from '../dropdown.service';
 import { By } from '@angular/platform-browser';
 import { DropdownMenuDirective } from '../dropdown-menu/dropdown-menu.directive';
@@ -36,7 +36,7 @@ class MockElementRef extends ElementRef {}
 
 @Component({
   template: `
-    <c-dropdown #dropdown="cDropdown" [(visible)]="visible" direction="dropup" [variant]="variant">
+    <c-dropdown #dropdown="cDropdown" [(visible)]="visible" direction="dropup" [variant]="variant()">
       <div cDropdownToggle [caret]="caret" [split]="split" [disabled]="disabled" [dropdownComponent]="dropdown"></div>
       <ul cDropdownMenu>
         <li><a cDropdownItem>Action</a></li>
@@ -49,8 +49,8 @@ class MockElementRef extends ElementRef {}
   imports: [DropdownToggleDirective, DropdownComponent, DropdownMenuDirective, DropdownItemDirective]
 })
 class TestComponent {
-  variant: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item' | undefined = 'nav-item';
-  visible = false;
+  readonly variant = signal<'btn-group' | 'dropdown' | 'input-group' | 'nav-item' | undefined>('nav-item');
+  readonly visible = signal(false);
   disabled = false;
   caret = true;
   split = false;
@@ -96,7 +96,7 @@ describe('DropdownToggleDirective', () => {
     expect(elementRef.nativeElement).not.toHaveClass('disabled');
     expect(elementRef.nativeElement).toHaveClass('dropdown-toggle');
     expect(elementRef.nativeElement).not.toHaveClass('dropdown-toggle-split');
-    component.variant = 'input-group';
+    component.variant.set('input-group');
     component.disabled = true;
     component.split = true;
     component.caret = false;
@@ -105,30 +105,30 @@ describe('DropdownToggleDirective', () => {
     expect(elementRef.nativeElement).not.toHaveClass('dropdown-toggle');
     expect(elementRef.nativeElement).toHaveClass('dropdown-toggle-split');
     expect(elementRef.nativeElement.getAttribute('aria-expanded')).toBe('false');
-    component.variant = 'nav-item';
-    component.visible = true;
+    component.variant.set('nav-item');
+    component.visible.set(true);
     fixture.detectChanges();
     expect(elementRef.nativeElement.getAttribute('aria-expanded')).toBe('true');
   }));
 
   it('should call event handling functions', fakeAsync(() => {
-    expect(component.visible).toBeFalse();
+    expect(component.visible()).toBeFalse();
     elementRef.nativeElement.dispatchEvent(new MouseEvent('click'));
     fixture.detectChanges();
-    expect(component.visible).toBeTrue();
+    expect(component.visible()).toBeTrue();
     elementRef.nativeElement.dispatchEvent(new MouseEvent('click'));
     fixture.detectChanges();
-    expect(component.visible).toBeFalse();
+    expect(component.visible()).toBeFalse();
     elementRef.nativeElement.dispatchEvent(new MouseEvent('click'));
     fixture.detectChanges();
-    expect(component.visible).toBeTrue();
+    expect(component.visible()).toBeTrue();
     dropdownRef.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
     fixture.detectChanges();
-    expect(component.visible).toBeFalse();
-    component.visible = true;
+    expect(component.visible()).toBeFalse();
+    component.visible.set(true);
     fixture.detectChanges();
     document.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));
     fixture.detectChanges();
-    expect(component.visible).toBeFalse();
+    expect(component.visible()).toBeFalse();
   }));
 });

projects/coreui-angular/src/lib/form/form-check/form-check-input.directive.spec.ts

@@ -1,16 +1,16 @@
-import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
+import { Component, DebugElement, ElementRef, Renderer2, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { FormCheckInputDirective } from './form-check-input.directive';
 
 class MockElementRef extends ElementRef {}
 
 @Component({
-  template: '<input cFormCheckInput [indeterminate]="indeterminate" [checked]="true">',
+  template: '<input cFormCheckInput [indeterminate]="indeterminate()" [checked]="true">',
   imports: [FormCheckInputDirective]
 })
 class TestComponent {
-  indeterminate = false;
+  readonly indeterminate = signal(false);
 }
 
 describe('FormCheckInputDirective', () => {
@@ -42,7 +42,7 @@ describe('FormCheckInputDirective', () => {
   });
 
   it('should have indeterminate state', () => {
-    component.indeterminate = true;
+    component.indeterminate.set(true);
     fixture.detectChanges();
     expect(inputEl.nativeElement.checked).toBeFalse();
     expect(inputEl.nativeElement.indeterminate).toBeTrue();