chore: sync with branch v5.0

CHANGELOG.md

@@ -1,5 +1,13 @@
 ### [@coreui/angular](https://coreui.io/angular/) changelog
 
+
+---
+
+#### `5.0.3`
+
+- chore(dependencies): update
+- test: add missing tests, refactor
+
 ---
 
 #### `5.0.2`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coreui-angular-dev",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "CoreUI Components Library for Angular",
   "copyright": "Copyright 2024 creativeLabs Łukasz Holeczek",
   "license": "MIT",
@@ -36,16 +36,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.4",
-    "@angular/cdk": "^17.3.4",
-    "@angular/common": "^17.3.4",
-    "@angular/compiler": "^17.3.4",
-    "@angular/core": "^17.3.4",
-    "@angular/forms": "^17.3.4",
-    "@angular/localize": "^17.3.4",
-    "@angular/platform-browser": "^17.3.4",
-    "@angular/platform-browser-dynamic": "^17.3.4",
-    "@angular/router": "^17.3.4",
+    "@angular/animations": "^17.3.5",
+    "@angular/cdk": "^17.3.5",
+    "@angular/common": "^17.3.5",
+    "@angular/compiler": "^17.3.5",
+    "@angular/core": "^17.3.5",
+    "@angular/forms": "^17.3.5",
+    "@angular/localize": "^17.3.5",
+    "@angular/platform-browser": "^17.3.5",
+    "@angular/platform-browser-dynamic": "^17.3.5",
+    "@angular/router": "^17.3.5",
     "@coreui/chartjs": "^4.0.0",
     "@coreui/icons": "^3.0.1",
     "@popperjs/core": "~2.11.8",
@@ -56,20 +56,20 @@
     "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.4",
+    "@angular-devkit/build-angular": "^17.3.5",
     "@angular-eslint/builder": "^17.3.0",
     "@angular-eslint/eslint-plugin": "^17.3.0",
     "@angular-eslint/eslint-plugin-template": "^17.3.0",
     "@angular-eslint/schematics": "^17.3.0",
     "@angular-eslint/template-parser": "^17.3.0",
-    "@angular/cli": "^17.3.4",
-    "@angular/compiler-cli": "^17.3.4",
-    "@angular/language-service": "^17.3.4",
+    "@angular/cli": "^17.3.5",
+    "@angular/compiler-cli": "^17.3.5",
+    "@angular/language-service": "^17.3.5",
     "@types/jasmine": "^5.1.4",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.12.7",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "eslint": "^8.57.0",
     "jasmine-core": "^5.1.2",
     "karma": "^6.4.3",
@@ -79,7 +79,7 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "ng-packagr": "^17.3.0",
     "prettier": "^3.2.5",
-    "typescript": "~5.3.3"
+    "typescript": "~5.4.2"
   },
   "keywords": [
     "angular",

projects/coreui-angular-chartjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/angular-chartjs",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "Angular wrapper component for Chart.js",
   "copyright": "Copyright 2024 creativeLabs Łukasz Holeczek",
   "license": "MIT",

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

@@ -40,6 +40,7 @@ describe('ChartjsComponent', () => {
     component = fixture.componentInstance;
     component.data = undefined;
     component.type = 'line';
+    component.wrapper = true;
   });
 
   it('chart should create', fakeAsync(() => {
@@ -83,4 +84,9 @@ describe('ChartjsComponent', () => {
     expect(component.chart?.config?.data.labels?.length).toBe(5);
     expect(component.chart?.config?.data.datasets[1]?.data.length).toBe(5);
   }));
+
+  it('should have css classes', () => {
+    fixture.detectChanges();
+    expect(fixture.nativeElement).toHaveClass('chart-wrapper');
+  });
 });

projects/coreui-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/angular",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "CoreUI Components Library for Angular",
   "copyright": "Copyright 2024 creativeLabs Łukasz Holeczek",
   "license": "MIT",

projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.spec.ts

@@ -25,4 +25,8 @@ describe('AccordionItemComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('accordion-item');
+  });
 });

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

@@ -22,4 +22,8 @@ describe('AccordionComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('accordion');
+  });
 });

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

@@ -23,4 +23,8 @@ describe('AlertComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('alert');
+  });
 });

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

@@ -22,4 +22,8 @@ describe('AvatarComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('avatar');
+  });
 });

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

@@ -8,9 +8,9 @@ describe('BadgeComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ BadgeComponent ]
+      imports: [BadgeComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {
@@ -22,4 +22,8 @@ describe('BadgeComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('badge');
+  });
 });

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.spec.ts

@@ -22,4 +22,8 @@ describe('BreadcrumbItemComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('breadcrumb-item');
+  });
 });

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.spec.ts

@@ -1,6 +1,5 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { Router } from '@angular/router';
+import { provideRouter, Router } from '@angular/router';
 
 import { BreadcrumbRouterComponent } from './breadcrumb-router.component';
 import { BreadcrumbRouterService } from './breadcrumb-router.service';
@@ -13,10 +12,9 @@ describe('BreadcrumbComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule.withRoutes([]),
         BreadcrumbRouterComponent
       ],
-      providers: [BreadcrumbRouterService]
+      providers: [BreadcrumbRouterService, provideRouter([])]
     }).compileComponents();
   }));
 

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.service.spec.ts

@@ -1,14 +1,14 @@
 import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 
 import { BreadcrumbRouterService } from './breadcrumb-router.service';
+import { provideRouter } from '@angular/router';
 
 describe('AppBreadcrumbService', () => {
   let service: BreadcrumbRouterService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule.withRoutes([])]
+      providers: [provideRouter([])]
     });
     service = TestBed.inject(BreadcrumbRouterService);
   });

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

@@ -22,4 +22,8 @@ describe('BreadcrumbComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('breadcrumb');
+  });
 });

projects/coreui-angular/src/lib/button-group/button-group/button-group.component.spec.ts

@@ -22,4 +22,8 @@ describe('ButtonGroupComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('btn-group');
+  });
 });

projects/coreui-angular/src/lib/button-group/button-toolbar/button-toolbar.component.spec.ts

@@ -22,4 +22,8 @@ describe('ButtonToolbarComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('btn-toolbar');
+  });
 });

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

@@ -6,26 +6,27 @@ import { By } from '@angular/platform-browser';
 class MockElementRef extends ElementRef {}
 
 @Component({
-  template: '<button cButtonClose></button>'
+  template: '<button cButtonClose></button>',
+  standalone: true,
+  imports: [ButtonCloseDirective]
 })
 class TestComponent {}
 
 describe('ButtonCloseDirective', () => {
 
   let component: TestComponent;
   let fixture: ComponentFixture<TestComponent>;
-  let buttonEl: DebugElement;
+  let elementRef: DebugElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TestComponent],
-      imports: [ButtonCloseDirective],
+      imports: [TestComponent, ButtonCloseDirective],
       providers: [{ provide: ElementRef, useClass: MockElementRef }]
     });
 
     fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
-    buttonEl = fixture.debugElement.query(By.css('button'));
+    elementRef = fixture.debugElement.query(By.directive(ButtonCloseDirective));
 
     fixture.detectChanges(); // initial binding
   });
@@ -34,4 +35,9 @@ describe('ButtonCloseDirective', () => {
     const directive = new ButtonCloseDirective();
     expect(directive).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(elementRef.nativeElement).toHaveClass('btn');
+    expect(elementRef.nativeElement).toHaveClass('btn-close');
+  });
 });

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

@@ -1,33 +1,32 @@
 import { ButtonDirective } from './button.directive';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ButtonCloseDirective } from './button-close.directive';
 import { Component, DebugElement, ElementRef } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
 class MockElementRef extends ElementRef {}
 
 @Component({
-  template: `
-    <button cButton></button>`
+  template: '<button cButton color="info" size="lg"></button>',
+  standalone: true,
+  imports: [ButtonDirective]
 })
 class TestComponent {}
 
 describe('ButtonDirective', () => {
 
   let component: TestComponent;
   let fixture: ComponentFixture<TestComponent>;
-  let buttonEl: DebugElement;
+  let elementRef: DebugElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TestComponent],
-      imports: [ButtonCloseDirective],
+      imports: [TestComponent, ButtonDirective],
       providers: [{ provide: ElementRef, useClass: MockElementRef }]
     });
 
     fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
-    buttonEl = fixture.debugElement.query(By.css('button'));
+    elementRef = fixture.debugElement.query(By.directive(ButtonDirective));
 
     fixture.detectChanges(); // initial binding
   });
@@ -36,4 +35,11 @@ describe('ButtonDirective', () => {
     const directive = new ButtonDirective();
     expect(directive).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(elementRef.nativeElement).toHaveClass('btn');
+    expect(elementRef.nativeElement).toHaveClass('btn-lg');
+    expect(elementRef.nativeElement).toHaveClass('btn-info');
+  });
+
 });

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

@@ -22,4 +22,8 @@ describe('CalloutComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('callout');
+  });
 });

projects/coreui-angular/src/lib/card/card-body.component.spec.ts

@@ -8,9 +8,9 @@ describe('CardBodyComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [ CardBodyComponent ]
+      imports: [CardBodyComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -22,4 +22,8 @@ describe('CardBodyComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('card-body');
+  });
 });

projects/coreui-angular/src/lib/card/card-footer.component.spec.ts

@@ -22,4 +22,8 @@ describe('CardFooterComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('card-footer');
+  });
 });

projects/coreui-angular/src/lib/card/card-group.component.spec.ts

@@ -22,4 +22,8 @@ describe('CardGroupComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('card-group');
+  });
 });