test(icons-angular): update

Author: xidedix

projects/coreui-icons-angular/src/lib/icon/icon.component.spec.ts

@@ -8,31 +8,29 @@ import { IconSetService } from '../icon-set';
 import { By } from '@angular/platform-browser';
 
 @Component({
-  template: `
-    <div>
-      <c-icon #icon name="cil-list" size="lg" class="test"></c-icon>
-    </div>`
+  template: '<c-icon #icon name="cil-list" size="lg" class="test" />',
+  standalone: true,
+  imports: [IconComponent],
+  providers: [IconSetService]
 })
 class TestComponent {
-  @ViewChild('icon', {read: IconComponent}) iconRef!: IconComponent;
+  @ViewChild('icon', { read: IconComponent }) iconRef!: IconComponent;
 
   constructor(
     public iconSet: IconSetService
   ) {
-    this.iconSet.icons = {cilList};
+    this.iconSet.icons = { cilList };
   }
 }
 
-
 describe('IconComponent', () => {
   let inputEl: DebugElement;
   let component: TestComponent;
   let fixture: ComponentFixture<TestComponent>;
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [TestComponent],
-      imports: [IconComponent, HtmlAttributesDirective],
+      imports: [TestComponent, IconComponent, HtmlAttributesDirective],
       providers: [IconSetService]
     }).compileComponents();
 

projects/coreui-icons-angular/src/lib/icon/icon.directive.spec.ts

@@ -1,4 +1,4 @@
-import { Component, DebugElement, Renderer2, Type, ViewChild } from '@angular/core';
+import { Component, DebugElement, ElementRef, Renderer2, Type, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By, DomSanitizer } from '@angular/platform-browser';
 
@@ -7,8 +7,10 @@ import { IconSetService } from '../icon-set';
 import { cilList } from '@coreui/icons';
 
 @Component({
-  template: `
-    <svg [cIcon]="this.iconSet.icons.cilList" size="lg" class="test" title="Test"></svg>`
+  template: '<svg [cIcon]="this.iconSet.icons.cilList" size="lg" class="test" title="Test"></svg>',
+  standalone: true,
+  imports: [IconDirective],
+  providers: [IconSetService]
 })
 class TestComponent {
   constructor(
@@ -17,10 +19,13 @@ class TestComponent {
     this.iconSet.icons = { cilList };
   }
 
-  @ViewChild(IconDirective, { read: IconDirective }) iconRef!: IconDirective;
+  @ViewChild(IconDirective, { read: IconDirective }) public iconRef!: IconDirective;
 }
 
+class MockElementRef extends ElementRef {}
+
 describe('IconDirective', () => {
+  let component: TestComponent;
   let fixture: ComponentFixture<TestComponent>;
   let svgEl: DebugElement;
   let renderer: Renderer2;
@@ -29,12 +34,12 @@ describe('IconDirective', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TestComponent],
-      providers: [IconSetService],
-      imports: [IconDirective]
+      providers: [IconSetService, { provide: ElementRef, useClass: MockElementRef }],
+      imports: [IconDirective, TestComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
     fixture.detectChanges();
     svgEl = fixture.debugElement.query(By.css('svg'));
     renderer = fixture.componentRef.injector.get(Renderer2 as Type<Renderer2>);
@@ -43,14 +48,33 @@ describe('IconDirective', () => {
   });
   it('should create an instance', () => {
     TestBed.runInInjectionContext(() => {
-      const directive = new IconDirective(renderer, svgEl, sanitizer, iconSetService);
+      const directive = new IconDirective();
       expect(directive).toBeTruthy();
     });
   });
+
+  it('service should exist', () => {
+    expect(component.iconSet).toBeTruthy();
+  });
+
+  it('icon component should render', () => {
+    expect(component.iconRef).toBeTruthy();
+    expect(component.iconRef.code()).toBe(component.iconSet.icons['cilList']);
+  });
+
   it('icon classes should be applied', () => {
     expect(svgEl.nativeElement).toBeTruthy();
     expect(svgEl.nativeElement).toHaveClass('icon');
     expect(svgEl.nativeElement).toHaveClass('icon-lg');
     expect(svgEl.nativeElement).toHaveClass('test');
   });
+
+  it('icon attributes should be applied', () => {
+    expect(svgEl.nativeElement.getAttribute('aria-hidden')).toBe('true');
+    expect(svgEl.nativeElement.getAttribute('pointer-events')).toBe('none');
+    expect(svgEl.nativeElement.getAttribute('role')).toBe('img');
+    expect(svgEl.nativeElement.getAttribute('title')).toBe('Test');
+    expect(svgEl.nativeElement.getAttribute('viewBox')).toBeDefined();
+    expect(svgEl.nativeElement.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg');
+  });
 });