Ttl 919 improve testing in UI

src/app/modules/activities-management/pages/activities-management.component.spec.ts

@@ -1,15 +1,29 @@
 import { waitForAsync, TestBed, ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { StoreModule } from '@ngrx/store';
+import { ReactiveFormsModule } from '@angular/forms';
+import { provideMockStore } from '@ngrx/store/testing';
+
 import { ActivitiesManagementComponent } from './activities-management.component';
+import { ActivityListComponent } from '../components/activity-list/activity-list.component';
+import { CreateActivityComponent } from '../components/create-activity/create-activity.component';
+
+
+const state = {};
 
 describe('ActivitiesManagementComponent', () => {
   let component: ActivitiesManagementComponent;
   let fixture: ComponentFixture<ActivitiesManagementComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [],
-      declarations: [ActivitiesManagementComponent]
+      imports: [ StoreModule.forRoot({}), ReactiveFormsModule ],
+      providers: [ provideMockStore({ initialState: state }) ],
+      declarations: [
+        ActivitiesManagementComponent,
+        CreateActivityComponent,
+        ActivityListComponent,
+      ]
     }).compileComponents();
   }));
 
@@ -27,7 +41,7 @@ describe('ActivitiesManagementComponent', () => {
     expect(component.showOptionInDevelopment).toBe(true);
   });
 
-  it('should check if add new entry button is render', () => {
+  it('should check if add new entry button is rendered', () => {
     const addItemDebugElement = fixture.debugElement.query(By.css('div.col-12.px-0')).childNodes.length;
     expect(addItemDebugElement).toBe(3);
   });

src/app/modules/activities-management/store/activity-management.selectors.spec.ts

@@ -1,7 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
 import * as selectors from './activity-management.selectors';
+import { SpinnerOverlayComponent } from '../../shared/components/spinner-overlay/spinner-overlay.component';
+
 
 describe('ActivityManagement Selectors', () => {
 
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ MatProgressSpinnerModule ],
+      declarations: [ SpinnerOverlayComponent ],
+    }).compileComponents();
+  });
+
   it('reads activityIdtoEdit from state', () => {
     const activityId = 'id';
     const activityIdFound = selectors.activityIdToEdit.projector({ activityIdToEdit: activityId });

src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.spec.ts

@@ -1,9 +1,17 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ManagementCustomerProjectsComponent } from './management-customer-projects.component';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
-import { CustomerState } from '../../store';
 import { of } from 'rxjs';
+import { MatNativeDateModule } from '@angular/material/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { CustomerState } from '../../store';
+import { CreateCustomerComponent } from '../customer-info/components/create-customer/create-customer';
+import { CreateProjectComponent } from '../projects/components/create-project/create-project.component';
+import { CreateProjectTypeComponent } from '../projects-type/components/create-project-type/create-project-type.component';
+import { ProjectListComponent } from '../projects/components/project-list/project-list.component';
+import { ProjectTypeListComponent } from '../projects-type/components/project-type-list/project-type-list.component';
+import { ManagementCustomerProjectsComponent } from './management-customer-projects.component';
+
 
 describe('ManagmentCustomerProjectsComponent', () => {
   let component: ManagementCustomerProjectsComponent;
@@ -20,9 +28,17 @@ describe('ManagmentCustomerProjectsComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ManagementCustomerProjectsComponent],
+      imports: [ MatNativeDateModule, ReactiveFormsModule],
+      declarations: [
+        ManagementCustomerProjectsComponent,
+        CreateCustomerComponent,
+        CreateProjectComponent,
+        CreateProjectTypeComponent,
+        ProjectListComponent,
+        ProjectTypeListComponent,
+      ],
       providers: [
-        provideMockStore({ initialState: state })
+        provideMockStore({ initialState: state }),
       ],
     }).compileComponents();
   }));

src/app/modules/customer-management/store/customer-management.actions.spec.ts

@@ -1,6 +1,19 @@
+import { TestBed, waitForAsync } from '@angular/core/testing';
+
 import * as actions from './customer-management.actions';
+import { TimeRangeFormComponent } from '../../reports/components/time-range-form/time-range-form.component';
+import { TechnologyReportTableComponent } from '../../technology-report/components/technology-report-table/technology-report-table.component';
+
 
 describe('CustomerManagmentActions', () => {
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [TimeRangeFormComponent, TechnologyReportTableComponent],
+      imports: [],
+    }).compileComponents();
+  }));
+
   it('CreateCustomer type is CustomerManagementActionTypes.CREATE_CUSTOMER', () => {
     const createActivity = new actions.CreateCustomer({
       name: 'aa',

src/app/modules/login/services/azure.ad.b2c.service.spec.ts

@@ -1,7 +1,10 @@
 import { inject, TestBed } from '@angular/core/testing';
+import { CookieService } from 'ngx-cookie-service';
 import { Account, UserAgentApplication } from 'msal';
 import { AzureAdB2CService } from './azure.ad.b2c.service';
-import { CookieService } from 'ngx-cookie-service';
+
+import { ActivitiesManagementComponent } from '../../activities-management/pages/activities-management.component';
+import { ActivityListComponent, CreateActivityComponent } from '../../activities-management/components';
 
 describe('AzureAdB2CService', () => {
   let service: AzureAdB2CService;
@@ -11,6 +14,11 @@ describe('AzureAdB2CService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [],
+      declarations: [
+        ActivitiesManagementComponent,
+        CreateActivityComponent,
+        ActivityListComponent,
+      ]
     });
     service = TestBed.inject(AzureAdB2CService);
     cookieService = TestBed.inject(CookieService);

src/app/modules/reports/components/time-range-custom/time-range-header/time-range-header.component.spec.ts

@@ -3,7 +3,12 @@ import { MatNativeDateModule } from '@angular/material/core';
 import { MatCalendar, MatDateRangePicker } from '@angular/material/datepicker';
 import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
+import { MatIconModule } from '@angular/material/icon';
+import { IndividualConfig, ToastrService } from 'ngx-toastr';
+import { MatListModule } from '@angular/material/list';
+
 import { TimeRangeHeaderComponent } from './time-range-header.component';
+import { TimeRangeOptionsComponent } from '../time-range-options/time-range-options.component';
 
 
 describe('TimeRangeHeaderComponent', () => {
@@ -18,11 +23,19 @@ describe('TimeRangeHeaderComponent', () => {
     activeDate: new Date()
   };
 
+  const toastrServiceStub = {
+    error: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { }
+  };
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatNativeDateModule],
-      declarations: [ TimeRangeHeaderComponent ],
-      providers: [{ provide: MatCalendar, useValue: value }, { provide: MatDateRangePicker, useValue: {} }] ,
+      imports: [MatNativeDateModule, MatIconModule, MatListModule],
+      declarations: [ TimeRangeHeaderComponent, TimeRangeOptionsComponent ],
+      providers: [
+        { provide: MatCalendar, useValue: value },
+        { provide: MatDateRangePicker, useValue: {} },
+        { provide: ToastrService, useValue: toastrServiceStub },
+      ],
     })
     .compileComponents();
   });
@@ -83,7 +96,6 @@ describe('TimeRangeHeaderComponent', () => {
     expect(component.calendar.activeDate.toDateString()).toEqual(makeDateYear.toDateString());
   });
 
-
   it('should change the year with nextClicked method', () => {
     component.calendar.activeDate = new Date();
     fixture.detectChanges();

src/app/modules/shared/components/details-fields/details-fields.component.spec.ts

@@ -6,6 +6,13 @@ import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
 import * as moment from 'moment';
 import { IndividualConfig, ToastrService } from 'ngx-toastr';
+import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { MatNativeDateModule } from '@angular/material/core';
+import { NgSelectModule } from '@ng-select/ng-select';
+
 import { getCreateError, getUpdateError } from 'src/app/modules/time-clock/store/entry.selectors';
 import { ProjectState } from '../../../customer-management/components/projects/components/store/project.reducer';
 import { getCustomerProjects } from '../../../customer-management/components/projects/components/store/project.selectors';
@@ -18,12 +25,11 @@ import { TechnologiesComponent } from './../technologies/technologies.component'
 import { DetailsFieldsComponent } from './details-fields.component';
 import { ProjectSelectedEvent } from './project-selected-event';
 import { SaveEntryEvent } from './save-entry-event';
-import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
-
 import { DATE_FORMAT } from 'src/environments/environment';
 import { DATE_FORMAT_YEAR } from 'src/environments/environment';
 import { Project } from '../../models';
 
+
 describe('DetailsFieldsComponent', () => {
   type Merged = TechnologyState & ProjectState & EntryState;
   let component: DetailsFieldsComponent;
@@ -125,8 +131,21 @@ describe('DetailsFieldsComponent', () => {
           provideMockStore({ initialState: state }),
           { provide: ActionsSubject, useValue: actionSub },
           { provide: ToastrService, useValue: toastrServiceStub },
+          MatDatepickerModule
+        ],
+        imports: [
+          FormsModule,
+          ReactiveFormsModule,
+          AutocompleteLibModule,
+          NgxMaterialTimepickerModule,
+          NgSelectModule,
+          MatDatepickerModule,
+          MatNativeDateModule,
+          CalendarModule.forRoot({
+            provide: DateAdapter,
+            useFactory: adapterFactory,
+          }),
         ],
-        imports: [FormsModule, ReactiveFormsModule, AutocompleteLibModule, NgxMaterialTimepickerModule],
       }).compileComponents();
       store = TestBed.inject(MockStore);
       mockTechnologySelector = store.overrideSelector(allTechnologies, state.technologies);

src/app/modules/shared/components/search/search.component.spec.ts

@@ -1,4 +1,5 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 
 import { SearchComponent } from './search.component';
 
@@ -8,7 +9,8 @@ describe('SearchComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [SearchComponent],
+      imports: [ FormsModule ],
+      declarations: [ SearchComponent ],
     }).compileComponents();
   }));
 

src/app/modules/shared/components/technologies/technologies.component.spec.ts

@@ -1,12 +1,16 @@
 import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
 import {MockStore, provideMockStore} from '@ngrx/store/testing';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatIconModule } from '@angular/material/icon';
 
 import {TechnologyState} from '../../store/technology.reducers';
 import {allTechnologies} from '../../store/technology.selectors';
 import {TechnologiesComponent} from './technologies.component';
 import * as actions from '../../store/technology.actions';
 
+
 describe('Technologies component', () => {
   let component: TechnologiesComponent;
   let fixture: ComponentFixture<TechnologiesComponent>;
@@ -24,7 +28,7 @@ describe('Technologies component', () => {
     TestBed.configureTestingModule({
       declarations: [TechnologiesComponent],
       providers: [provideMockStore({initialState: state})],
-      imports: [FormsModule, ReactiveFormsModule],
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, MatDatepickerModule, MatIconModule],
     }).compileComponents();
     store = TestBed.inject(MockStore);
     mockTechnologySelector = store.overrideSelector(allTechnologies, state.technologies);

src/app/modules/shared/formatters/number.formatter.spec.ts

@@ -1,6 +1,28 @@
+import { TestBed, waitForAsync } from '@angular/core/testing';
+
 import { NumberFormatter } from './number.formatter';
+import { CreateCustomerComponent } from '../../customer-management/components/customer-info/components/create-customer/create-customer';
+import { CreateProjectComponent } from '../../customer-management/components/projects/components/create-project/create-project.component';
+import { CreateProjectTypeComponent } from '../../customer-management/components/projects-type/components/create-project-type/create-project-type.component';
+import { ProjectListComponent } from '../../customer-management/components/projects/components/project-list/project-list.component';
+import { ProjectTypeListComponent } from '../../customer-management/components/projects-type/components/project-type-list/project-type-list.component';
+
+
 describe('NumberFormatter', () => {
 
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        NumberFormatter,
+        CreateCustomerComponent,
+        CreateProjectComponent,
+        CreateProjectTypeComponent,
+        ProjectListComponent,
+        ProjectTypeListComponent,
+      ],
+    }).compileComponents();
+  }));
+
   it('adds a 0 if value < 10', () => {
     const numberFormatter = new NumberFormatter(9);
 

src/app/modules/shared/store/technology.actions.spec.ts

@@ -1,7 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+
 import * as actions from './technology.actions';
 import { Technology } from '../models';
 
+
 describe('Actions for Technology', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ FormsModule ],
+      declarations: [  ],
+    }).compileComponents();
+  });
+
   it('FindTechnologySuccess type is TechnologyActionTypes.FIND_TECHNOLOGIES_SUCESS', () => {
     const technologyList: Technology = { items: [{ name: 'java' }, { name: 'javascript' }] };
     const findTechnologySuccess = new actions.FindTechnologySuccess(technologyList);

src/app/modules/time-clock/pages/time-clock.component.spec.ts

@@ -1,19 +1,26 @@
 import { of } from 'rxjs';
-import { FormBuilder } from '@angular/forms';
-import { StopTimeEntryRunning, EntryActionTypes, LoadEntriesSummary } from './../store/entry.actions';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
+import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { ToastrService } from 'ngx-toastr';
+import { ActionsSubject } from '@ngrx/store';
+import { SocialAuthService } from 'angularx-social-login';
+
+import { StopTimeEntryRunning, EntryActionTypes, LoadEntriesSummary } from './../store/entry.actions';
 import { TimeClockComponent } from './time-clock.component';
 import { ProjectState } from '../../customer-management/components/projects/components/store/project.reducer';
 import { ProjectListHoverComponent } from '../components';
 import { FilterProjectPipe } from '../../shared/pipes';
 import { AzureAdB2CService } from '../../login/services/azure.ad.b2c.service';
-import { ActionsSubject } from '@ngrx/store';
 import { EntryFieldsComponent } from '../components/entry-fields/entry-fields.component';
-import { ToastrService } from 'ngx-toastr';
 import { LoginService } from '../../login/services/login.service';
-import { SocialAuthService } from 'angularx-social-login';
+import { TechnologiesComponent } from '../../shared/components/technologies/technologies.component';
+import { TimeEntriesSummaryComponent } from '../components/time-entries-summary/time-entries-summary.component';
+import { TimeDetailsPipe } from '../pipes/time-details.pipe';
+
 
 describe('TimeClockComponent', () => {
   let component: TimeClockComponent;
@@ -55,8 +62,16 @@ describe('TimeClockComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule],
-        declarations: [TimeClockComponent, ProjectListHoverComponent, FilterProjectPipe, EntryFieldsComponent],
+        imports: [HttpClientTestingModule, NgSelectModule, NgxMaterialTimepickerModule, FormsModule, ReactiveFormsModule],
+        declarations: [
+          TimeClockComponent,
+          ProjectListHoverComponent,
+          FilterProjectPipe,
+          EntryFieldsComponent,
+          TechnologiesComponent,
+          TimeEntriesSummaryComponent,
+          TimeDetailsPipe
+        ],
         providers: [
           FormBuilder,
           AzureAdB2CService,
@@ -152,12 +167,11 @@ describe('TimeClockComponent', () => {
     expect(store.dispatch).toHaveBeenCalledWith(new StopTimeEntryRunning('id'));
   });
 
-  it('clockOut set error Activity is required', () => {
+  it('do not dispatch if Activity is missing', () => {
     spyOn(store, 'dispatch');
-    spyOn(injectedToastrService, 'error');
     spyOn(component.entryFieldsComponent, 'entryFormIsValidate').and.returnValue(false);
     component.clockOut();
 
-    expect(injectedToastrService.error).toHaveBeenCalled();
+    expect(store.dispatch).not.toHaveBeenCalled();
   });
 });