test: add some missing css classes tests, refactor

Author: xidedix

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/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');
+  });
 });

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

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

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

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

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

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

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

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

projects/coreui-angular/src/lib/carousel/carousel-caption/carousel-caption.component.spec.ts

@@ -22,4 +22,8 @@ describe('CarouselCaptionComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css class"', () => {
+    expect(fixture.nativeElement).toHaveClass('carousel-caption');
+  });
 });

projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.spec.ts

@@ -29,4 +29,8 @@ describe('CarouselControlComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css class="carousel-control-next"', () => {
+    expect(fixture.nativeElement).toHaveClass('carousel-control-next');
+  });
 });

projects/coreui-angular/src/lib/carousel/carousel-inner/carousel-inner.component.spec.ts

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

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

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

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

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