|
1 | | -import { ComponentFixture, TestBed } from '@angular/core/testing'; |
| 1 | +import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; |
| 2 | +import { MatDialog } from '@angular/material/dialog'; |
| 3 | +import { MatTableModule } from '@angular/material/table'; |
| 4 | +import { MatPaginatorModule, PageEvent } from '@angular/material/paginator'; |
| 5 | +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; |
| 6 | +import { FormsModule } from '@angular/forms'; |
| 7 | +import { of } from 'rxjs'; |
2 | 8 |
|
3 | 9 | import { AdminTeamsComponent } from './admin-teams.component'; |
| 10 | +import { TeamsService } from '../teams-service'; |
| 11 | +import { Team } from '../team'; |
| 12 | +import { AdminTeamCreateComponent } from '../admin-team-create/admin-team-create.component'; |
4 | 13 |
|
5 | 14 | describe('AdminTeamsComponent', () => { |
6 | 15 | let component: AdminTeamsComponent; |
7 | 16 | let fixture: ComponentFixture<AdminTeamsComponent>; |
| 17 | + let mockTeamsService: jasmine.SpyObj<TeamsService>; |
| 18 | + let mockDialog: jasmine.SpyObj<MatDialog>; |
| 19 | + |
| 20 | + const mockTeams: Team[] = [ |
| 21 | + { id: '1', name: 'Team Alpha', description: 'First team description', teamEventId: '507f1f77bcf86cd799439011' }, |
| 22 | + { id: '2', name: 'Team Beta', description: 'Second team description with much longer text that might wrap', teamEventId: '507f191e810c19729de860ea' }, |
| 23 | + { id: '3', name: 'Team Gamma', description: 'Third team', teamEventId: '507f1f77bcf86cd799439012' } |
| 24 | + ]; |
| 25 | + |
| 26 | + const mockTeamsResponse = [{ |
| 27 | + items: mockTeams, |
| 28 | + totalCount: mockTeams.length |
| 29 | + }]; |
8 | 30 |
|
9 | 31 | beforeEach(async () => { |
| 32 | + const teamsServiceSpy = jasmine.createSpyObj('TeamsService', ['getTeams']); |
| 33 | + const dialogSpy = jasmine.createSpyObj('MatDialog', ['open']); |
| 34 | + |
10 | 35 | await TestBed.configureTestingModule({ |
11 | | - declarations: [ AdminTeamsComponent ] |
12 | | - }) |
13 | | - .compileComponents(); |
| 36 | + declarations: [AdminTeamsComponent], |
| 37 | + imports: [ |
| 38 | + MatTableModule, |
| 39 | + MatPaginatorModule, |
| 40 | + NoopAnimationsModule, |
| 41 | + FormsModule |
| 42 | + ], |
| 43 | + providers: [ |
| 44 | + { provide: TeamsService, useValue: teamsServiceSpy }, |
| 45 | + { provide: MatDialog, useValue: dialogSpy } |
| 46 | + ] |
| 47 | + }).compileComponents(); |
14 | 48 |
|
15 | 49 | fixture = TestBed.createComponent(AdminTeamsComponent); |
16 | 50 | component = fixture.componentInstance; |
17 | | - fixture.detectChanges(); |
| 51 | + mockTeamsService = TestBed.inject(TeamsService) as jasmine.SpyObj<TeamsService>; |
| 52 | + mockDialog = TestBed.inject(MatDialog) as jasmine.SpyObj<MatDialog>; |
| 53 | + |
| 54 | + mockTeamsService.getTeams.and.returnValue(of(mockTeamsResponse)); |
18 | 55 | }); |
19 | 56 |
|
20 | 57 | it('should create', () => { |
21 | 58 | expect(component).toBeTruthy(); |
22 | 59 | }); |
| 60 | + |
| 61 | + it('should initialize with correct default values', () => { |
| 62 | + expect(component.teamSearch).toBe(''); |
| 63 | + expect(component.pageSize).toBe(10); |
| 64 | + expect(component.pageIndex).toBe(0); |
| 65 | + expect(component.displayedColumns).toEqual(['name', 'description']); |
| 66 | + }); |
| 67 | + |
| 68 | + it('should fetch teams on init', () => { |
| 69 | + fixture.detectChanges(); |
| 70 | + |
| 71 | + expect(mockTeamsService.getTeams).toHaveBeenCalledWith({ |
| 72 | + term: '', |
| 73 | + sort: { name: 1 }, |
| 74 | + limit: 10, |
| 75 | + start: '0' |
| 76 | + }); |
| 77 | + expect(component.teams).toEqual(mockTeams); |
| 78 | + expect(component.totalTeams).toBe(mockTeams.length); |
| 79 | + expect(component.dataSource.data).toEqual(mockTeams); |
| 80 | + }); |
| 81 | + |
| 82 | + it('should perform search with debouncing', fakeAsync(() => { |
| 83 | + fixture.detectChanges(); |
| 84 | + mockTeamsService.getTeams.calls.reset(); |
| 85 | + |
| 86 | + component.search('test'); |
| 87 | + tick(100); // Less than debounce time |
| 88 | + expect(mockTeamsService.getTeams).not.toHaveBeenCalled(); |
| 89 | + |
| 90 | + tick(200); // Complete debounce time (250ms total) |
| 91 | + expect(mockTeamsService.getTeams).toHaveBeenCalledWith({ |
| 92 | + term: 'test', |
| 93 | + sort: { name: 1 }, |
| 94 | + limit: 10, |
| 95 | + start: '0' |
| 96 | + }); |
| 97 | + })); |
| 98 | + |
| 99 | + it('should reset page index when searching', fakeAsync(() => { |
| 100 | + fixture.detectChanges(); |
| 101 | + component.pageIndex = 2; |
| 102 | + |
| 103 | + component.search('test'); |
| 104 | + tick(250); |
| 105 | + |
| 106 | + expect(component.pageIndex).toBe(0); |
| 107 | + })); |
| 108 | + |
| 109 | + it('should handle page changes', () => { |
| 110 | + fixture.detectChanges(); |
| 111 | + mockTeamsService.getTeams.calls.reset(); |
| 112 | + |
| 113 | + const pageEvent: PageEvent = { |
| 114 | + pageIndex: 1, |
| 115 | + pageSize: 25, |
| 116 | + length: 100 |
| 117 | + }; |
| 118 | + |
| 119 | + component.onPageChange(pageEvent); |
| 120 | + |
| 121 | + expect(component.pageSize).toBe(25); |
| 122 | + expect(component.pageIndex).toBe(1); |
| 123 | + expect(mockTeamsService.getTeams).toHaveBeenCalledWith({ |
| 124 | + term: '', |
| 125 | + sort: { name: 1 }, |
| 126 | + limit: 25, |
| 127 | + start: '25' |
| 128 | + }); |
| 129 | + }); |
| 130 | + |
| 131 | + it('should reset search and pagination', () => { |
| 132 | + component.teamSearch = 'test'; |
| 133 | + component.pageIndex = 2; |
| 134 | + fixture.detectChanges(); |
| 135 | + mockTeamsService.getTeams.calls.reset(); |
| 136 | + |
| 137 | + component.reset(); |
| 138 | + |
| 139 | + expect(component.teamSearch).toBe(''); |
| 140 | + expect(component.pageIndex).toBe(0); |
| 141 | + expect(mockTeamsService.getTeams).toHaveBeenCalledWith({ |
| 142 | + term: '', |
| 143 | + sort: { name: 1 }, |
| 144 | + limit: 10, |
| 145 | + start: '0' |
| 146 | + }); |
| 147 | + }); |
| 148 | + |
| 149 | + it('should open new team dialog', () => { |
| 150 | + const dialogRefSpy = jasmine.createSpyObj('MatDialogRef', ['afterClosed']); |
| 151 | + dialogRefSpy.afterClosed.and.returnValue(of(null)); |
| 152 | + mockDialog.open.and.returnValue(dialogRefSpy); |
| 153 | + |
| 154 | + component.newTeam(); |
| 155 | + |
| 156 | + expect(mockDialog.open).toHaveBeenCalledWith(AdminTeamCreateComponent, { |
| 157 | + width: '50rem', |
| 158 | + height: '25rem', |
| 159 | + data: { team: {} } |
| 160 | + }); |
| 161 | + }); |
| 162 | + |
| 163 | + it('should refresh teams after creating new team', () => { |
| 164 | + fixture.detectChanges(); |
| 165 | + const newTeam = { id: '4', name: 'New Team', description: 'New team description' }; |
| 166 | + const dialogRefSpy = jasmine.createSpyObj('MatDialogRef', ['afterClosed']); |
| 167 | + dialogRefSpy.afterClosed.and.returnValue(of(newTeam)); |
| 168 | + mockDialog.open.and.returnValue(dialogRefSpy); |
| 169 | + mockTeamsService.getTeams.calls.reset(); |
| 170 | + |
| 171 | + component.newTeam(); |
| 172 | + |
| 173 | + expect(mockTeamsService.getTeams).toHaveBeenCalled(); |
| 174 | + }); |
| 175 | + |
| 176 | + it('should not refresh teams if dialog is cancelled', () => { |
| 177 | + fixture.detectChanges(); |
| 178 | + const dialogRefSpy = jasmine.createSpyObj('MatDialogRef', ['afterClosed']); |
| 179 | + dialogRefSpy.afterClosed.and.returnValue(of(null)); |
| 180 | + mockDialog.open.and.returnValue(dialogRefSpy); |
| 181 | + mockTeamsService.getTeams.calls.reset(); |
| 182 | + |
| 183 | + component.newTeam(); |
| 184 | + |
| 185 | + expect(mockTeamsService.getTeams).not.toHaveBeenCalled(); |
| 186 | + }); |
| 187 | + |
| 188 | + it('should handle empty teams response', () => { |
| 189 | + mockTeamsService.getTeams.and.returnValue(of([])); |
| 190 | + |
| 191 | + fixture.detectChanges(); |
| 192 | + |
| 193 | + expect(component.teams).toEqual([]); |
| 194 | + expect(component.totalTeams).toBe(0); |
| 195 | + expect(component.dataSource.data).toEqual([]); |
| 196 | + }); |
| 197 | + |
| 198 | + it('should display team names and descriptions in table', () => { |
| 199 | + fixture.detectChanges(); |
| 200 | + |
| 201 | + const compiled = fixture.nativeElement; |
| 202 | + const tableRows = compiled.querySelectorAll('tr.mat-row'); |
| 203 | + |
| 204 | + expect(tableRows.length).toBe(mockTeams.length); |
| 205 | + expect(compiled.textContent).toContain('Team Alpha'); |
| 206 | + expect(compiled.textContent).toContain('First team description'); |
| 207 | + }); |
| 208 | + |
| 209 | + it('should show table headers', () => { |
| 210 | + fixture.detectChanges(); |
| 211 | + |
| 212 | + const compiled = fixture.nativeElement; |
| 213 | + const headers = compiled.querySelectorAll('th.mat-header-cell'); |
| 214 | + expect(headers.length).toBe(2); |
| 215 | + expect(headers[0].textContent).toContain('Name'); |
| 216 | + expect(headers[1].textContent).toContain('Description'); |
| 217 | + }); |
| 218 | + |
| 219 | + it('should add title attribute for description tooltips', () => { |
| 220 | + fixture.detectChanges(); |
| 221 | + |
| 222 | + const compiled = fixture.nativeElement; |
| 223 | + const descriptionCells = compiled.querySelectorAll('.description-cell'); |
| 224 | + |
| 225 | + expect(descriptionCells[0].getAttribute('title')).toBe('First team description'); |
| 226 | + expect(descriptionCells[1].getAttribute('title')).toBe('Second team description with much longer text that might wrap'); |
| 227 | + }); |
| 228 | + |
| 229 | + it('should cleanup subscriptions on destroy', () => { |
| 230 | + spyOn(component['destroy$'], 'next'); |
| 231 | + spyOn(component['destroy$'], 'complete'); |
| 232 | + |
| 233 | + component.ngOnDestroy(); |
| 234 | + |
| 235 | + expect(component['destroy$'].next).toHaveBeenCalled(); |
| 236 | + expect(component['destroy$'].complete).toHaveBeenCalled(); |
| 237 | + }); |
23 | 238 | }); |
0 commit comments