Merge pull request #340 from BellumGens/test-coverage

test(*): more test coverage work

package.json

@@ -33,61 +33,61 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "17.2.3",
-    "@angular/common": "17.2.3",
-    "@angular/compiler": "17.2.3",
-    "@angular/core": "17.2.3",
-    "@angular/forms": "17.2.3",
-    "@angular/platform-browser": "17.2.3",
-    "@angular/platform-browser-dynamic": "17.2.3",
-    "@angular/platform-server": "17.2.3",
-    "@angular/router": "17.2.3",
-    "@angular/service-worker": "17.2.3",
-    "@angular/ssr": "^17.2.2",
+    "@angular/animations": "17.3.0",
+    "@angular/common": "17.3.0",
+    "@angular/compiler": "17.3.0",
+    "@angular/core": "17.3.0",
+    "@angular/forms": "17.3.0",
+    "@angular/platform-browser": "17.3.0",
+    "@angular/platform-browser-dynamic": "17.3.0",
+    "@angular/platform-server": "17.3.0",
+    "@angular/router": "17.3.0",
+    "@angular/service-worker": "17.3.0",
+    "@angular/ssr": "^17.3.0",
     "@igniteui/material-icons-extended": "^3.0.2",
-    "@infragistics/igniteui-angular": "^17.1.1",
+    "@infragistics/igniteui-angular": "^17.1.4",
     "@types/express": "^4.17.17",
     "compression": "^1.7.4",
     "express": "^4.18.1",
-    "igniteui-angular-i18n": "^17.1.1",
+    "igniteui-angular-i18n": "^17.1.4",
     "minireset.css": "0.0.4",
     "rxjs": "^7.8.0",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.2.2",
-    "@angular-eslint/builder": "^17.2.1",
-    "@angular-eslint/eslint-plugin": "^17.2.1",
-    "@angular-eslint/eslint-plugin-template": "^17.2.1",
-    "@angular-eslint/schematics": "^17.2.1",
-    "@angular-eslint/template-parser": "^17.2.1",
-    "@angular/cli": "^17.2.2",
-    "@angular/compiler-cli": "^17.2.3",
-    "@angular/language-service": "^17.2.3",
-    "@angular/localize": "^17.2.3",
+    "@angular-devkit/build-angular": "^17.3.0",
+    "@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.0",
+    "@angular/compiler-cli": "^17.3.0",
+    "@angular/language-service": "^17.3.0",
+    "@angular/localize": "^17.3.0",
     "@cypress/schematic": "^2.5.0",
     "@types/jasmine": "^5.1.4",
     "@types/jasminewd2": "^2.0.9",
     "@types/node": "^20.11.17",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "browser-sync": "^3.0.0",
     "concurrently": "^8.2.1",
     "cypress": "^13.6.4",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "2.25.2",
     "eslint-plugin-jsdoc": "46.2.6",
     "eslint-plugin-prefer-arrow": "1.2.2",
-    "igniteui-cli": "~13.1.8",
+    "igniteui-cli": "~13.1.10",
     "jasmine-core": "~5.1.2",
     "karma": "^6.4.3",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "^2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-spec-reporter": "^0.0.36",
-    "ng-packagr": "^17.2.0",
+    "ng-packagr": "^17.2.1",
     "typescript": "5.3.3"
   }
-}
+}

projects/bellumgens/src/app/app.routes.ts

@@ -7,7 +7,12 @@ import { RegistrationComponent, UnauthorizedComponent } from '../../../common/sr
 
 export const routes: Routes = [
   { path: '', component: HomeComponent },
-  { path: 'bellumgenselite', loadComponent: () => import('./events/events.component').then(m => m.EventsComponent) },
+  { path: 'bellumgenselite', loadComponent: () => import('./events/events.component').then(m => m.EventsComponent), data: {
+    title: 'Bellum Gens Elite Stara Zagora: The home of esports in Bulgaria',
+    twitterTitle: 'Bellum Gens Elite Stara Zagora: The home of esports in Bulgaria',
+    description: 'Bellum Gens Elite Stara Zagora is the home of esports in Bulgaria. We host the best gaming events in the country.',
+    twitterDescription: 'Bellum Gens Elite Stara Zagora is the home of esports in Bulgaria. We host the best gaming events in the country.'
+  } },
   { path: 'register', component: RegistrationComponent },
   { path: 'unauthorized', redirectTo: 'unauthorized/', pathMatch: 'full' },
   { path: 'unauthorized/:message', component: UnauthorizedComponent },

projects/bellumgens/src/app/base/base.component.spec.ts

@@ -1,29 +1,49 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import { BaseComponent } from './base.component';
+import { BaseDirective } from './base.component';
 import { RouterTestingModule } from '@angular/router/testing';
+import { Component } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
 
 describe('BaseComponent', () => {
-  let component: BaseComponent;
-  let fixture: ComponentFixture<BaseComponent>;
+  let component: BaseDirective;
+  let fixture: ComponentFixture<BaseDirective>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-    imports: [
+      imports: [
         RouterTestingModule,
-        BaseComponent
-    ]
-})
+        TestComponent
+      ]
+    })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BaseComponent);
+    fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
+    expect(component['_title']).toBe('Bellum Gens: Premier Gaming and Esports Events Organizer');
+    expect(component['_twitterTitle']).toBe('Bellum Gens: Premier Gaming and Esports Events Organizer');
+    expect(component['_description']).toBe('Bellum Gens is a premier gaming and esports events organizer in Bulgaria and the Balkans region. If you want to tap into esports we can help!');
+    expect(component['_twitterDescription']).toBe('Bellum Gens is a premier gaming and esports events organizer in Bulgaria and the Balkans region.');
+    expect(component['_image']).toBe('/assets/avatar_BG_blood.png');
   });
 });
+
+@Component({
+  selector: 'app-test',
+  standalone: true,
+  template: '<div>Test component</div>',
+  imports: [BaseDirective]
+})
+export class TestComponent extends BaseDirective {
+  constructor(title: Title, meta: Meta, activeRoute: ActivatedRoute) {
+    super(title, meta, activeRoute);
+  }
+}

projects/bellumgens/src/app/base/base.component.ts

@@ -1,33 +1,30 @@
-import { Component } from '@angular/core';
+import { Directive } from '@angular/core';
 import { Title, Meta } from '@angular/platform-browser';
-import { ActivatedRoute, Data } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 
-@Component({
-    template: ``,
-    styleUrls: ['./base.component.css'],
-    standalone: true
+@Directive({
+  selector: 'app-base',
+  standalone: true
 })
-export class BaseComponent {
+export class BaseDirective {
 
   private _title = 'Bellum Gens: Premier Gaming and Esports Events Organizer';
   private _twitterTitle = 'Bellum Gens: Premier Gaming and Esports Events Organizer';
   // eslint-disable-next-line max-len
   private _description = 'Bellum Gens is a premier gaming and esports events organizer in Bulgaria and the Balkans region. If you want to tap into esports we can help!';
   private _twitterDescription = 'Bellum Gens is a premier gaming and esports events organizer in Bulgaria and the Balkans region.';
   private _image = '/assets/avatar_BG_blood.png';
-  private data: Data;
 
   constructor(protected titleService: Title,
               protected meta: Meta,
               protected activeRoute: ActivatedRoute) {
     this.activeRoute.data.subscribe(data => {
-      this.data = data;
-      this.titleService.setTitle(this.data.title || this._title);
-      this.meta.updateTag({ name: 'description', content: this.data.description || this._description});
-      this.meta.updateTag({ name: 'twitter:title', content: this.data.twitterTitle || this._twitterTitle});
-      this.meta.updateTag({ name: 'twitter:description', content: this.data.twitterDescription || this._twitterDescription});
-      this.meta.updateTag({ name: 'og:image', content: this.data.image || this._image });
-      this.meta.updateTag({ name: 'twitter:image', content: this.data.image || this._image });
+      this.titleService.setTitle(data.title || this._title);
+      this.meta.updateTag({ name: 'description', content: data.description || this._description});
+      this.meta.updateTag({ name: 'twitter:title', content: data.twitterTitle || this._twitterTitle});
+      this.meta.updateTag({ name: 'twitter:description', content: data.twitterDescription || this._twitterDescription});
+      this.meta.updateTag({ name: 'og:image', content: data.image || this._image });
+      this.meta.updateTag({ name: 'twitter:image', content: data.image || this._image });
     });
   }
 

projects/bellumgens/src/app/events/events.component.spec.ts

@@ -1,14 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { EventsComponent } from './events.component';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('EventsComponent', () => {
   let component: EventsComponent;
   let fixture: ComponentFixture<EventsComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [EventsComponent]
+      imports: [
+        RouterTestingModule,
+        EventsComponent
+      ]
     });
     fixture = TestBed.createComponent(EventsComponent);
     component = fixture.componentInstance;

projects/bellumgens/src/app/events/events.component.ts

@@ -1,6 +1,9 @@
 import { NgOptimizedImage } from '@angular/common';
 import { Component } from '@angular/core';
 import { IgxDividerDirective } from '@infragistics/igniteui-angular';
+import { BaseDirective } from '../base/base.component';
+import { Meta, Title } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-events',
@@ -9,6 +12,12 @@ import { IgxDividerDirective } from '@infragistics/igniteui-angular';
   templateUrl: './events.component.html',
   styleUrls: ['./events.component.scss']
 })
-export class EventsComponent {
-
+export class EventsComponent extends BaseDirective {
+  constructor(
+    protected titleService: Title,
+    protected meta: Meta,
+    protected activeRoute: ActivatedRoute
+  ) {
+    super(titleService, meta, activeRoute);
+  }
 }

projects/bellumgens/src/app/home/home.component.spec.ts

@@ -1,41 +1,27 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { HomeComponent } from './home.component';
-import { IgxInputGroupModule,
-  IgxIconModule,
-  IgxAvatarModule,
-  IgxProgressBarModule,
-  IgxDividerModule,
-  IgxButtonModule,
-  IgxDialogModule,
-  IgxCarouselModule} from '@infragistics/igniteui-angular';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxCarouselComponent } from '@infragistics/igniteui-angular';
+import { By } from '@angular/platform-browser';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
   let fixture: ComponentFixture<HomeComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-    imports: [
+      imports: [
         HttpClientTestingModule,
         NoopAnimationsModule,
         RouterTestingModule,
         ServiceWorkerModule.register('', { enabled: false }),
-        IgxInputGroupModule,
-        IgxIconModule,
-        IgxAvatarModule,
-        IgxDividerModule,
-        IgxProgressBarModule,
-        IgxButtonModule,
-        IgxCarouselModule,
-        IgxDialogModule,
         HomeComponent
-    ]
-})
+      ]
+    })
     .compileComponents();
   }));
 
@@ -48,4 +34,43 @@ describe('HomeComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have a carousel component', () => {
+    const carousel = fixture.debugElement.query(By.directive(IgxCarouselComponent));
+    expect(carousel).toBeTruthy();
+  });
+
+  it('should have navigation set to true by default', () => {
+    expect(component.navigation).toBeTrue();
+  });
+
+  it('should have userEmail set to null by default', () => {
+    expect(component.userEmail).toBeNull();
+  });
+
+  it('should call resize method on window resize', () => {
+    spyOn(component, 'resize');
+    window.dispatchEvent(new Event('resize'));
+    expect(component.resize).toHaveBeenCalled();
+  });
+
+  it('should call subscribe method when subscribe is called', () => {
+    spyOn(component, 'subscribe');
+    component.subscribe();
+    expect(component.subscribe).toHaveBeenCalled();
+  });
+
+  it('should call tweet method when tweet is called', () => {
+    spyOn(component, 'tweet');
+    component.tweet();
+    expect(component.tweet).toHaveBeenCalled();
+  });
+
+  it('should call openLogin method when openLogin is called', () => {
+    spyOn(component, 'openLogin');
+    component.openLogin();
+    expect(component.openLogin).toHaveBeenCalled();
+  });
+
+  // TODO: Add more test cases with UI interactions
 });

projects/bellumgens/src/app/home/home.component.ts

@@ -2,7 +2,7 @@ import { Component, HostListener, Inject, PLATFORM_ID, ViewChild } from '@angula
 import { isPlatformBrowser, NgIf, NgOptimizedImage } from '@angular/common';
 import { LoginService, ApplicationUser, SocialMediaService } from '../../../../common/src/public_api';
 import { environment } from '../../../../common/src/environments/environment';
-import { BaseComponent } from '../base/base.component';
+import { BaseDirective } from '../base/base.component';
 import { Title, Meta } from '@angular/platform-browser';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { IgxCarouselComponent, IgxCarouselModule, IgxIconModule, IgxButtonModule, IgxDividerModule, IgxInputGroupModule } from '@infragistics/igniteui-angular';
@@ -25,7 +25,7 @@ import { FormsModule } from '@angular/forms';
       IgxButtonModule
     ]
 })
-export class HomeComponent extends BaseComponent {
+export class HomeComponent extends BaseDirective {
   @ViewChild(IgxCarouselComponent, { static: true }) public carousel: IgxCarouselComponent;
 
   public authUser: ApplicationUser;

projects/bellumgens/src/app/player-section/player.component.ts

@@ -29,7 +29,7 @@ import {
   ALL_ROLES
 } from '../../../../common/src/public_api';
 
-import { BaseComponent } from '../base/base.component';
+import { BaseDirective } from '../base/base.component';
 import { Observable } from 'rxjs';
 import { SortWeaponsPipe } from '../pipes/sort-weapons.pipe';
 import { TopWeaponAltPipe } from '../pipes/top-weapon-alt.pipe';
@@ -72,7 +72,7 @@ import { NgIf, NgFor, AsyncPipe } from '@angular/common';
       TopWeaponAltPipe
     ]
 })
-export class PlayerComponent extends BaseComponent {
+export class PlayerComponent extends BaseDirective {
   public authUser: ApplicationUser;
   public teamsAdmin: CSGOTeam [];
   public userTeams: Observable<CSGOTeam []>;

projects/bellumgens/src/app/search/search-results/player-results/player-results.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { ALL_ROLES, CSGOPlayer, ApiSearchService } from '../../../../../../common/src/public_api';
-import { BaseComponent } from '../../../base/base.component';
+import { BaseDirective } from '../../../base/base.component';
 import { IgxIconService, IgxCardModule, IgxAvatarModule, IgxProgressBarModule, IgxIconModule, IgxChipsModule } from '@infragistics/igniteui-angular';
 import { Title, Meta } from '@angular/platform-browser';
 import { QueryParsedPipe } from '../../../pipes/query-parsed.pipe';
@@ -15,7 +15,7 @@ import { NgIf, NgFor, DecimalPipe } from '@angular/common';
     standalone: true,
     imports: [NgIf, LoadingComponent, NgFor, IgxCardModule, RouterLink, IgxAvatarModule, IgxProgressBarModule, IgxIconModule, IgxChipsModule, DecimalPipe, QueryParsedPipe]
 })
-export class PlayerResultsComponent extends BaseComponent {
+export class PlayerResultsComponent extends BaseDirective {
   public players: CSGOPlayer [];
   public loading = false;
   public roles = ALL_ROLES;