#705 fix angular tests and add more

frontend/src/app/components/keyresult-detail/keyresult-detail.component.spec.ts

@@ -9,28 +9,45 @@ import { keyResult, keyResultWriteableFalse } from '../../shared/testData';
 import { By } from '@angular/platform-browser';
 import { KeyresultService } from '../../services/keyresult.service';
 import { MatIconModule } from '@angular/material/icon';
+import { ActivatedRoute } from '@angular/router';
+import { ScoringComponent } from '../../shared/custom/scoring/scoring.component';
+import { ConfidenceComponent } from '../confidence/confidence.component';
 
 const keyResultServiceMock = {
   getFullKeyResult: jest.fn(),
 };
 
+const activatedRouteMock = {
+  snapshot: {
+    paramMap: {
+      get: jest.fn(),
+    },
+  },
+};
+
 describe('KeyresultDetailComponent', () => {
   let component: KeyresultDetailComponent;
   let fixture: ComponentFixture<KeyresultDetailComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, MatDialogModule, MatIconModule, TranslateModule.forRoot()],
-      declarations: [KeyresultDetailComponent],
+      declarations: [KeyresultDetailComponent, ScoringComponent, ConfidenceComponent],
       providers: [
         {
           provide: KeyresultService,
           useValue: keyResultServiceMock,
         },
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRouteMock,
+        },
       ],
     }).compileComponents();
 
     jest.spyOn(keyResultServiceMock, 'getFullKeyResult').mockReturnValue(of(keyResult));
+    activatedRouteMock.snapshot.paramMap.get.mockReturnValue(of(1));
+
     fixture = TestBed.createComponent(KeyresultDetailComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -40,6 +57,11 @@ describe('KeyresultDetailComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should throw error when id is undefined', () => {
+    activatedRouteMock.snapshot.paramMap.get.mockReturnValue(undefined);
+    expect(() => component.ngOnInit()).toThrowError('keyresult id is undefined');
+  });
+
   it('should display edit keyresult button if writeable is true', async () => {
     const button = fixture.debugElement.query(By.css('[data-testId="edit-keyResult"]'));
     expect(button).toBeTruthy();

frontend/src/app/components/objective-detail/objective-detail.component.spec.ts

@@ -7,25 +7,38 @@ import { ObjectiveService } from '../../services/objective.service';
 import { objective, objectiveWriteableFalse } from '../../shared/testData';
 import { of } from 'rxjs';
 import { MatDialogModule } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
 
 let objectiveService = {
   getFullObjective: jest.fn(),
 };
 
+const activatedRouteMock = {
+  snapshot: {
+    paramMap: {
+      get: jest.fn(),
+    },
+  },
+};
+
 describe('ObjectiveDetailComponent', () => {
   let component: ObjectiveDetailComponent;
   let fixture: ComponentFixture<ObjectiveDetailComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, MatDialogModule],
-      providers: [{ provide: ObjectiveService, useValue: objectiveService }],
+      providers: [
+        { provide: ObjectiveService, useValue: objectiveService },
+        { provide: ActivatedRoute, useValue: activatedRouteMock },
+      ],
       declarations: [ObjectiveDetailComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ObjectiveDetailComponent);
     component = fixture.componentInstance;
     objectiveService.getFullObjective.mockReturnValue(of(objective));
+    activatedRouteMock.snapshot.paramMap.get.mockReturnValue(of(1));
   });
 
   it('should create', () => {

frontend/src/app/services/user.service.spec.ts

@@ -27,12 +27,15 @@ describe('UserService', () => {
     expect(service).toBeTruthy();
   });
 
-  test('getUsers should only reload users when they are not loaded yet', () => {
+  test('getUsers should only reload users when they are not loaded yet', (done) => {
+    const spy = jest.spyOn(service, 'reloadUsers');
     service.getUsers().subscribe((users) => {
-      expect(service.reloadUsers).toBeCalledTimes(1);
-      service.getUsers().subscribe(() => {
-        expect(service.reloadUsers).toBeCalledTimes(0);
-        expect(service.getUsers()).toBe([{ test }]);
+      expect(spy).toBeCalledTimes(1);
+      httpMock.expectOne(URL);
+      service.getUsers().subscribe((users) => {
+        expect(spy).toBeCalledTimes(1);
+        expect(users).toStrictEqual([]);
+        done();
       });
     });
   });
@@ -41,10 +44,13 @@ describe('UserService', () => {
     expect(() => service.getCurrentUser()).toThrowError('user should not be undefined here');
   });
 
-  test('init current user should load user', () => {
+  test('init current user should load user', (done) => {
     expect(() => service.getCurrentUser()).toThrowError('user should not be undefined here');
     service.initCurrentUser().subscribe(() => {
-      expect(service.getCurrentUser()).toBe({ test });
+      expect(service.getCurrentUser()).toBe(users[0]);
+      done();
     });
+    const req = httpMock.expectOne('api/v1/users/current');
+    req.flush(users[0]);
   });
 });

frontend/src/app/shared/dialog/objective-dialog/objective-form.component.spec.ts

@@ -46,8 +46,8 @@ const quarterService = {
 const teamService = {
   getAllTeams(): Observable<Team[]> {
     return of([
-      { id: 1, version: 2, name: teamMin1.name, writeable: true, organisations: [], filterIsActive: true },
-      { id: 4, version: 5, name: 'team2', writeable: true, organisations: [], filterIsActive: true },
+      { id: 1, version: 2, name: teamMin1.name, isWriteable: true, organisations: [], filterIsActive: true },
+      { id: 4, version: 5, name: 'team2', isWriteable: true, organisations: [], filterIsActive: true },
     ]);
   },
 };

frontend/src/app/team-management/add-member-to-team-dialog/add-member-to-team-dialog.component.spec.ts

@@ -5,7 +5,7 @@ import { AddMemberToTeamDialogComponent } from './add-member-to-team-dialog.comp
 import { SharedModule } from '../../shared/shared.module';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { team1, users } from '../../shared/testData';
-import { of, takeLast } from 'rxjs';
+import { BehaviorSubject, of, skip } from 'rxjs';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { User } from '../../shared/types/model/User';
@@ -14,8 +14,6 @@ import { MatTable } from '@angular/material/table';
 describe('AddMemberToTeamDialogComponent', () => {
   let component: AddMemberToTeamDialogComponent;
   let fixture: ComponentFixture<AddMemberToTeamDialogComponent>;
-  let userService: UserService;
-  let teamService: TeamService;
 
   const userServiceMock = {
     getUsers: jest.fn(),
@@ -50,12 +48,12 @@ describe('AddMemberToTeamDialogComponent', () => {
 
     fixture = TestBed.createComponent(AddMemberToTeamDialogComponent);
     component = fixture.componentInstance;
-    userService = TestBed.inject(UserService);
-    teamService = TestBed.inject(TeamService);
 
     component.table = {
       renderRows: () => undefined,
     } as MatTable<User[]>;
+
+    component.selectedUsers$ = new BehaviorSubject<User[]>([]);
   });
 
   it('should create', () => {
@@ -64,17 +62,20 @@ describe('AddMemberToTeamDialogComponent', () => {
 
   it('should set allPossibleUsers correctly', () => {
     component.ngOnInit();
-    expect(component.allPossibleUsers.length).toBe(users.length - 1);
-    expect(component.allPossibleUsers).not.toContain(users[0]);
+    component.usersForSelection$!.subscribe((filteredUsers) => {
+      expect(filteredUsers.length).toBe(users.length - 1);
+      expect(filteredUsers).not.toContain(users[0]);
+    });
   });
 
   it('should set filteredUsers correctly: search by PaCo', (done) => {
     component.search = {
       valueChanges: of('PaCo'),
     } as any;
+
     component.ngOnInit();
 
-    component.usersForSelection$!.pipe(takeLast(1)).subscribe((filteredUsers) => {
+    component.usersForSelection$!.subscribe((filteredUsers) => {
       expect(filteredUsers.length).toBe(1);
       expect(filteredUsers[0].email).toBe('[email protected]');
       done();
@@ -85,18 +86,20 @@ describe('AddMemberToTeamDialogComponent', () => {
     component.search = {
       valueChanges: of('puzzle.ch'),
     } as any;
-    component.selectedUsers = [users[1]];
+
+    component.selectedUsers$.next([users[1]]);
+
     component.ngOnInit();
 
-    component.usersForSelection$!.pipe(takeLast(1)).subscribe((filteredUsers) => {
-      expect(filteredUsers.length).toBe(component.allPossibleUsers.length - 1);
+    component.usersForSelection$!.pipe(skip(1)).subscribe((filteredUsers) => {
+      expect(filteredUsers.length).toBe(users.length - 2);
       expect(filteredUsers.map((u) => u.id)).not.toContain(users[1].id);
       done();
     });
   });
 
   it('should set teamname correctly', () => {
-    expect(component.getDialogTitle()).toBe(`Members für Team ${team1.name} einladen`);
+    expect(component.getDialogTitle()).toBe(`Members zu Team ${team1.name} hinzufügen`);
   });
 
   it('should return correct display value', () => {
@@ -105,17 +108,17 @@ describe('AddMemberToTeamDialogComponent', () => {
 
   it('should add user to selected users and restore search value', () => {
     component.search.setValue('test');
-    component.selectedUsers = [users[1], users[2]];
+    component.selectedUsers$.next([users[1], users[2]]);
     component.selectUser(users[3]);
     expect(component.search.value).toBe('');
-    expect(component.selectedUsers.length).toBe(3);
-    expect(component.selectedUsers.map((u) => u.id)).toStrictEqual([users[1].id, users[2].id, users[3].id]);
+    expect(component.selectedUsers$.getValue().length).toBe(3);
+    expect(component.selectedUsers$.getValue().map((u) => u.id)).toStrictEqual([users[1].id, users[2].id, users[3].id]);
   });
 
   it('should remove user from selected users', () => {
-    component.selectedUsers = [...users];
+    component.selectedUsers$.next([...users]);
     component.remove(users[0]);
-    expect(component.selectedUsers.length).toBe(users.length - 1);
-    expect(component.selectedUsers.map((u) => u.id)).not.toContain(users[0].id);
+    expect(component.selectedUsers$.getValue().length).toBe(users.length - 1);
+    expect(component.selectedUsers$.getValue().map((u) => u.id)).not.toContain(users[0].id);
   });
 });

frontend/src/app/team-management/add-member-to-team-dialog/add-member-to-team-dialog.component.ts

@@ -52,7 +52,6 @@ export class AddMemberToTeamDialogComponent implements OnInit, OnDestroy {
         return this.filter(allPossibleUsers, filterValue || '', selectedUsers);
       }),
     );
-    this.usersForSelection$.subscribe((u) => console.log(u));
   }
 
   public ngOnDestroy() {

frontend/src/app/team-management/add-user-team/add-user-team.component.spec.ts

@@ -0,0 +1,70 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {AddUserTeamComponent} from './add-user-team.component';
+import {TeamService} from '../../services/team.service';
+import {team1, team2, team3, testUser} from '../../shared/testData';
+import {of} from 'rxjs';
+
+describe('AddUserTeamComponent', () => {
+  let component: AddUserTeamComponent;
+  let fixture: ComponentFixture<AddUserTeamComponent>;
+  let teamService: TeamService;
+
+  const teamServiceMock = {
+    getAllTeams: jest.fn(),
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AddUserTeamComponent],
+      providers: [{ provide: TeamService, useValue: teamServiceMock }],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddUserTeamComponent);
+    component = fixture.componentInstance;
+    teamService = TestBed.inject(TeamService);
+
+    teamServiceMock.getAllTeams.mockReturnValue(of([team1, team2, team3]));
+    component.currentTeams$ = of(testUser.userTeamList);
+
+    fixture.detectChanges();
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should filter adminTeams correctly', done => {
+    team1.isWriteable = true;
+    team2.isWriteable = true;
+    team3.isWriteable = false;
+    component.ngOnInit();
+    component.adminTeams$!.subscribe(teams => {
+      expect(teams.length).toBe(1);
+      expect(teams[0].id).toBe(team2.id);
+      done();
+    })
+  })
+
+  it('createUserTeam should create the userTeam', () => {
+    component.createUserTeam(team1);
+    expect(component.userTeam).toStrictEqual({
+      team: team1,
+      isTeamAdmin: false,
+    });
+  });
+
+  it('save should throw exception if userTeam is undefined', () => {
+    expect(() => component.save()).toThrowError('UserTeam should be defined here');
+  })
+
+  it('save should emit addUserTeam event and set userTeam to undefined', done => {
+    component.userTeam = testUser.userTeamList[0];
+    component.addUserTeam.subscribe(() => {
+      done();
+    })
+    component.save();
+    expect(component.userTeam).toBe(undefined);
+  });
+});

frontend/src/app/team-management/add-user-team/add-user-team.component.ts

@@ -40,9 +40,9 @@ export class AddUserTeamComponent implements OnInit, OnDestroy {
     this.unsubscribe$.complete();
   }
 
-  createUserTeam(initialTeam: Team) {
+  createUserTeam(team: Team) {
     this.userTeam = {
-      team: initialTeam,
+      team,
       isTeamAdmin: false,
     };
   }