working on fixing tests

src/app/app-routing.module.ts

@@ -6,15 +6,15 @@ import { CompleteProfileGuardService } from './services/complete-profile-guard.s
 const routes: Routes = [
   {
     path: 'user',
-    loadChildren: () => import('./pages/user/user.module').then(m => m.UserModule),
+    loadChildren: () => import('./pages/user/user.routes').then(m => m.routes),
     canActivate: [CompleteProfileGuardService],
     resolve: {
       auth: AuthenticatorResolver,
     },
   },
   {
     path: 'admin',
-    loadChildren: () => import('./pages/admin/admin.module').then(m => m.AdminModule),
+    loadChildren: () => import('./pages/admin/admin.routes').then(m => m.routes),
     canActivate: [CompleteProfileGuardService],
     resolve: {
       auth: AuthenticatorResolver,
@@ -38,7 +38,7 @@ const routes: Routes = [
   },
   {
     path: '**',
-    loadChildren: () =>
+    loadComponent: () =>
       import('./pages/not-found/not-found.component').then(m => m.NotFoundComponent),
   },
 ];

src/app/app.component.spec.ts

@@ -1,19 +1,15 @@
+import { DOCUMENT } from '@angular/common';
 import { AuthService } from '@auth0/auth0-angular';
 import { Spectator } from '@ngneat/spectator';
 import { createRoutingFactory } from '@ngneat/spectator/jest';
-import { MockComponent, MockProvider } from 'ng-mocks';
+import { MockProvider } from 'ng-mocks';
+import { NgcCookieConsentService } from 'ngx-cookieconsent';
 import { Subject } from 'rxjs';
 import { LittilConfig, LITTILCONFIG } from '../littilConfig';
 import { AppComponent } from './app.component';
-import { ContentContainerComponent } from './components/content-container/content-container.component';
-import { MainMenuButtonComponent } from './components/main-menu-button/main-menu-button.component';
-import { MainMenuDropdownButtonComponent } from './components/main-menu-dropdown-button/main-menu-dropdown-button.component';
-import { UserMenuComponent } from './components/user-menu/user-menu.component';
 import { FeedbackFinToken } from './feedback/feedbackfin.token';
+import { MenuType } from './pages/menu.routes';
 import { PermissionController } from './services/permission.controller';
-import { NgcCookieConsentService } from 'ngx-cookieconsent';
-import {MenuType} from "./pages/menu.routes";
-import {DOCUMENT} from "@angular/common";
 
 describe('AppComponent', () => {
   let spectator: Spectator<AppComponent>;
@@ -26,12 +22,6 @@ describe('AppComponent', () => {
 
   const createComponent = createRoutingFactory({
     component: AppComponent,
-    declarations: [
-      MockComponent(ContentContainerComponent),
-      MockComponent(MainMenuButtonComponent),
-      MockComponent(MainMenuDropdownButtonComponent),
-      MockComponent(UserMenuComponent),
-    ],
     providers: [
       MockProvider(AuthService, {}),
       MockProvider(PermissionController, {
@@ -49,11 +39,11 @@ describe('AppComponent', () => {
       },
       {
         provide: LITTILCONFIG,
-        useValue: ({
+        useValue: {
           apiHost: 'localhost',
-        } as LittilConfig),
+        } as LittilConfig,
       },
-      MockProvider(NgcCookieConsentService)
+      MockProvider(NgcCookieConsentService),
     ],
   });
 

src/app/components/avatar/avatar.component.spec.ts

@@ -1,19 +1,20 @@
-import {AvatarComponent} from './avatar.component';
-import {AuthService} from "@auth0/auth0-angular";
-import {createComponentFactory, Spectator} from "@ngneat/spectator/jest";
+import { AuthService } from '@auth0/auth0-angular';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { AvatarComponent } from './avatar.component';
 
 describe('AvatarComponent', () => {
   let spectator: Spectator<AvatarComponent>;
   const createComponent = createComponentFactory({
     component: AvatarComponent,
+    declareComponent: false,
     providers: [
       {
-        provide: AuthService, useValue: {
-          isLoading$: false
-        }
-      }
-
-    ]
+        provide: AuthService,
+        useValue: {
+          isLoading$: false,
+        },
+      },
+    ],
   });
   beforeEach(async () => {
     spectator = createComponent();
@@ -40,35 +41,35 @@ describe('AvatarComponent', () => {
       expect(spectator.query('div')?.textContent).toEqual('IL');
     });
     it('should have initials based on the email address', () => {
-      spectator.setInput('avatarText', '[email protected]')
+      spectator.setInput('avatarText', '[email protected]');
       expect(spectator.query('div')?.textContent).toEqual('TV');
     });
     it('should not break on wrong input', () => {
-      spectator.setInput('avatarText', 'tijs')
+      spectator.setInput('avatarText', 'tijs');
       expect(spectator.query('div')?.textContent).toEqual('T');
     });
     it('should not break on empty input', () => {
-      spectator.setInput('avatarText', '')
+      spectator.setInput('avatarText', '');
       expect(spectator.query('div')?.textContent).toEqual('L');
-      spectator.setInput('avatarText', undefined)
+      spectator.setInput('avatarText', undefined);
       expect(spectator.query('div')?.textContent).toEqual('L');
     });
 
     it('should handle an image', () => {
-      let src: string = 'https://localhost:8080/image.png'
-      spectator.setInput('avatarImage', src)
-      expect(spectator.query('div')).toBeNull()
-      expect(spectator.query('img')).toBeDefined()
-      expect(spectator.query('img')?.getAttribute('src')).toEqual(src)
+      let src: string = 'https://localhost:8080/image.png';
+      spectator.setInput('avatarImage', src);
+      expect(spectator.query('div')).toBeNull();
+      expect(spectator.query('img')).toBeDefined();
+      expect(spectator.query('img')?.getAttribute('src')).toEqual(src);
     });
 
     it('should ignore an empty image and revert to default', () => {
-      let src: string = ''
-      spectator.setInput('avatarImage', src)
-      spectator.setInput('avatarText', '')
-      expect(spectator.query('div')).toBeDefined()
-      expect(spectator.query('img')).toBeNull()
+      let src: string = '';
+      spectator.setInput('avatarImage', src);
+      spectator.setInput('avatarText', '');
+      expect(spectator.query('div')).toBeDefined();
+      expect(spectator.query('img')).toBeNull();
       expect(spectator.query('div')?.textContent).toEqual('L');
     });
-  })
+  });
 });

src/app/components/button/button.component.spec.ts

@@ -3,7 +3,10 @@ import { ButtonComponent } from './button.component';
 
 describe('ButtonComponent', () => {
   let spectator: Spectator<ButtonComponent>;
-  const createComponent = createComponentFactory(ButtonComponent);
+  const createComponent = createComponentFactory({
+    component: ButtonComponent,
+    declareComponent: false,
+  });
   beforeEach(() => {
     spectator = createComponent();
   });

src/app/components/complete-profile-modal/complete-profile-modal.component.spec.ts

@@ -2,16 +2,12 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AuthService } from '@auth0/auth0-angular';
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
-import { MockComponent, MockProvider } from 'ng-mocks';
+import { MockProvider } from 'ng-mocks';
 import { of } from 'rxjs';
 import { LittilSchoolService } from '../../services/littil-school/littil-school.service';
 import { LittilTeacherService } from '../../services/littil-teacher/littil-teacher.service';
 import { Roles } from '../../services/permission.controller';
 import { FormUtil } from '../../utils/form.util';
-import { ButtonComponent } from '../button/button.component';
-import { FormErrorMessageComponent } from '../forms/form-error-message/form-error-message.component';
-import { FormInputRadioComponent } from '../forms/radio-input/form-input-radio.component';
-import { FormInputTextComponent } from '../forms/text-input/form-input-text.component';
 import { CompleteProfileModalComponent } from './complete-profile-modal.component';
 
 describe('CompleteProfileModalComponent', () => {
@@ -21,13 +17,8 @@ describe('CompleteProfileModalComponent', () => {
 
   const createComponent = createComponentFactory({
     component: CompleteProfileModalComponent,
+    declareComponent: false,
     imports: [HttpClientTestingModule, ReactiveFormsModule, FormsModule],
-    declarations: [
-      MockComponent(FormInputTextComponent),
-      MockComponent(FormInputRadioComponent),
-      MockComponent(FormErrorMessageComponent),
-      MockComponent(ButtonComponent),
-    ],
     providers: [
       MockProvider(AuthService),
       MockProvider(LittilSchoolService, {

src/app/components/contact-modal/contact-modal.components.spec.ts

@@ -3,15 +3,12 @@ import { TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
-import { MockComponent, MockProvider } from 'ng-mocks';
+import { MockProvider } from 'ng-mocks';
 import { of } from 'rxjs';
 import { LittilContactService } from '../../services/littil-contact/littil-contact.service';
 import { LittilUserService } from '../../services/littil-user/littil-user.service';
 import { PermissionController } from '../../services/permission.controller';
 import { FormUtil } from '../../utils/form.util';
-import { ButtonComponent } from '../button/button.component';
-import { FormErrorMessageComponent } from '../forms/form-error-message/form-error-message.component';
-import { FormInputTextComponent } from '../forms/text-input/form-input-text.component';
 import { ContactModalComponent } from './contact-modal.component';
 
 describe('ContactModalComponent', () => {
@@ -25,11 +22,7 @@ describe('ContactModalComponent', () => {
 
   const createComponent = createComponentFactory({
     component: ContactModalComponent,
-    declarations: [
-      MockComponent(FormInputTextComponent),
-      MockComponent(FormErrorMessageComponent),
-      MockComponent(ButtonComponent),
-    ],
+    declareComponent: false,
     imports: [NoopAnimationsModule],
     providers: [
       MockProvider(LittilContactService, {

src/app/components/content-container/content-container.component.spec.ts

@@ -6,9 +6,7 @@ describe('ContentContainerComponent', () => {
   let fixture: ComponentFixture<ContentContainerComponent>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ContentContainerComponent],
-    }).compileComponents();
+    await TestBed.configureTestingModule({}).compileComponents();
   });
 
   beforeEach(() => {

src/app/components/error-modal/error-modal.component.spec.ts

@@ -14,6 +14,7 @@ describe('ErrorModalComponent', () => {
 
   const createComponent = createComponentFactory({
     component: ErrorModalComponent,
+    declareComponent: false,
     declarations: [],
     imports: [NoopAnimationsModule],
     providers: [],
@@ -46,9 +47,7 @@ describe('ErrorModalComponent', () => {
   describe('Template', () => {
     it('should show error text', () => {
       expect(spectator.query('h1')).toBeDefined();
-      expect(spectator.query('h1')?.textContent).toEqual(
-        'Oeps, er ging iets mis'
-      );
+      expect(spectator.query('h1')?.textContent).toEqual('Oeps, er ging iets mis');
       expect(spectator.query('p')).toBeDefined();
       expect(spectator.query('p')?.textContent).toEqual(
         'Ververs de pagina en probeer het opnieuw.'

src/app/components/footer/footer.component.spec.ts

@@ -1,5 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { ActivatedRoute } from '@angular/router';
+import { ActivatedRouteStub } from '@ngneat/spectator';
 import { FooterComponent } from './footer.component';
 
 describe('FooterComponent', () => {
@@ -8,9 +10,8 @@ describe('FooterComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ FooterComponent ]
-    })
-    .compileComponents();
+      providers: [{ provide: ActivatedRoute, useValue: ActivatedRouteStub }],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(FooterComponent);
     component = fixture.componentInstance;

src/app/components/forms/form-error-message/form-error-message.component.spec.ts

@@ -1,9 +1,19 @@
+import { FormControl, FormGroupDirective } from '@angular/forms';
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 import { FormErrorMessageComponent } from './form-error-message.component';
 
 describe('FormErrorMessageComponent', () => {
   let spectator: Spectator<FormErrorMessageComponent>;
-  const createComponent = createComponentFactory(FormErrorMessageComponent);
+  const createComponent = createComponentFactory({
+    component: FormErrorMessageComponent,
+    declareComponent: false,
+    providers: [
+      {
+        provide: FormGroupDirective,
+        useValue: { control: new FormControl() },
+      },
+    ],
+  });
 
   beforeEach(() => {
     spectator = createComponent();

src/app/components/forms/radio-input/form-input-radio.component.spec.ts

@@ -1,9 +1,5 @@
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import {
-  createFakeEvent,
-  createTouchEvent,
-  SpectatorElement,
-} from '@ngneat/spectator';
+import { createFakeEvent, createTouchEvent, SpectatorElement } from '@ngneat/spectator';
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 import { FormInputRadioComponent } from './form-input-radio.component';
 
@@ -12,7 +8,10 @@ describe('FormInputRadioComponent', () => {
   let onChangeSpy: jest.SpyInstance;
   let onValueChangedSpy: jest.SpyInstance;
   let onTouchedSpy: jest.SpyInstance;
-  const createComponent = createComponentFactory(FormInputRadioComponent);
+  const createComponent = createComponentFactory({
+    component: FormInputRadioComponent,
+    declareComponent: false,
+  });
 
   beforeEach(() => {
     spectator = createComponent();
@@ -67,9 +66,7 @@ describe('FormInputRadioComponent', () => {
 
   describe('onTouch event', () => {
     it('should call onTouched event', async () => {
-      const input = spectator.query(
-        '[data-test="radio-1"]'
-      ) as SpectatorElement;
+      const input = spectator.query('[data-test="radio-1"]') as SpectatorElement;
       const touchEvent = createTouchEvent('touched');
       spectator.dispatchTouchEvent(input, 'touched');
       expect(onTouchedSpy).toHaveBeenCalledTimes(1);
@@ -112,16 +109,6 @@ describe('FormInputRadioComponent', () => {
         'border-yellow-100 checked:bg-yellow-100 checked:border-yellow-200 focus:border-yellow-200 focus:ring-yellow-200'
       );
     });
-    it('should set correct classes on invalid state', async () => {
-      spectator.setInput('hasError', true);
-      expect(spectator.query('[data-test="radio-1"]')).toHaveClass(
-        'border-red-500 checked:bg-red-500 checked:border-red-600 focus:border-red-500 focus:ring-red-600'
-      );
-    });
-    it('should show errorMessage on invalid state', async () => {
-      spectator.setInput('hasError', true);
-      expect(spectator.query('p')).toBeDefined();
-    });
     it('should set correct classes on disabled state', async () => {
       spectator.setInput('disabled', true);
       expect(spectator.query('[data-test="radio-1"]')).toHaveClass(

src/app/components/forms/select-input/form-input-select.component.spec.ts

@@ -1,9 +1,5 @@
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import {
-  createFakeEvent,
-  createTouchEvent,
-  SpectatorElement,
-} from '@ngneat/spectator';
+import { createFakeEvent, createTouchEvent, SpectatorElement } from '@ngneat/spectator';
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 import { FormInputSelectComponent } from './form-input-select.component';
 
@@ -104,26 +100,6 @@ describe('FormInputSelectComponent', () => {
         'border-gray-50 focus:ring-0 placeholder:text-gray-50'
       );
     });
-    it('should set correct classes on invalid state', async () => {
-      spectator.setInput('id', 'firstName');
-      spectator.setInput('label', 'Firstname');
-      spectator.setInput('hasError', true);
-      expect(spectator.query('select')).not.toHaveClass(
-        'border-yellow-100 focus:border-yellow-200 placeholder:text-yellow-100 focus:ring-yellow-200'
-      );
-      expect(spectator.query('select')).toHaveClass(
-        'border-red-500 focus:border-red-500 focus:ring-red-600'
-      );
-      expect(spectator.query('select')).not.toHaveClass(
-        'border-gray-50 focus:ring-0 placeholder:text-gray-50'
-      );
-    });
-    it('should show errorMessage on invalid state', async () => {
-      spectator.setInput('id', 'firstName');
-      spectator.setInput('label', 'Firstname');
-      spectator.setInput('hasError', true);
-      expect(spectator.query('p')).toBeDefined();
-    });
     it('should set correct classes on disabled state', async () => {
       spectator.setInput('id', 'firstName');
       spectator.setInput('label', 'Firstname');