Skip to content

Commit e5e296a

Browse files
Fix all specs
1 parent ca719ba commit e5e296a

11 files changed

+185
-179
lines changed

client/app/about/about.component.spec.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
2-
import { By } from '@angular/platform-browser';
32

43
import { AboutComponent } from './about.component';
54

65
describe('Component: About', () => {
76
let component: AboutComponent;
87
let fixture: ComponentFixture<AboutComponent>;
8+
let compiled: HTMLElement;
99

1010
beforeEach(waitForAsync(() => {
1111
TestBed.configureTestingModule({
@@ -18,15 +18,16 @@ describe('Component: About', () => {
1818
fixture = TestBed.createComponent(AboutComponent);
1919
component = fixture.componentInstance;
2020
fixture.detectChanges();
21+
compiled = fixture.nativeElement as HTMLElement;
2122
});
2223

2324
it('should create', () => {
2425
expect(component).toBeTruthy();
2526
});
2627

2728
it('should display the page header text', () => {
28-
const el = fixture.debugElement.query(By.css('h4')).nativeElement;
29-
expect(el.textContent).toContain('About');
29+
const header = compiled.querySelector('.card-header');
30+
expect(header?.textContent).toContain('About');
3031
});
3132

3233
});

client/app/account/account.component.spec.ts

+13-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { NO_ERRORS_SCHEMA } from '@angular/core';
12
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
2-
import { By } from '@angular/platform-browser';
33
import { FormsModule } from '@angular/forms';
44

55
import { ToastComponent } from '../shared/toast/toast.component';
@@ -24,6 +24,7 @@ class UserServiceMock {
2424
describe('Component: Account', () => {
2525
let component: AccountComponent;
2626
let fixture: ComponentFixture<AccountComponent>;
27+
let compiled: HTMLElement;
2728

2829
beforeEach(waitForAsync(() => {
2930
TestBed.configureTestingModule({
@@ -33,7 +34,8 @@ describe('Component: Account', () => {
3334
ToastComponent,
3435
{ provide: AuthService, useClass: AuthServiceMock },
3536
{ provide: UserService, useClass: UserServiceMock },
36-
]
37+
],
38+
schemas: [NO_ERRORS_SCHEMA]
3739
})
3840
.compileComponents();
3941
}));
@@ -47,28 +49,29 @@ describe('Component: Account', () => {
4749
4850
};
4951
fixture.detectChanges();
52+
compiled = fixture.nativeElement as HTMLElement;
5053
});
5154

5255
it('should create', () => {
5356
expect(component).toBeTruthy();
5457
});
5558

5659
it('should display the page header text', () => {
57-
const el = fixture.debugElement.query(By.css('h4')).nativeElement;
58-
expect(el.textContent).toContain('Account settings');
60+
const header = compiled.querySelector('.card-header');
61+
expect(header?.textContent).toContain('Account settings');
5962
});
6063

6164
it('should display the username and email inputs filled', async () => {
6265
await fixture.whenStable();
63-
const [usernameInput, emailInput] = fixture.debugElement.queryAll(By.css('input'));
64-
expect(usernameInput.nativeElement.value).toContain('Test user');
65-
expect(emailInput.nativeElement.value).toContain('[email protected]');
66+
const inputs = compiled.querySelectorAll('input');
67+
expect(inputs[0].value).toContain('Test user');
68+
expect(inputs[1].value).toContain('[email protected]');
6669
});
6770

6871
it('should display the save button enabled', () => {
69-
const saveBtn = fixture.debugElement.query(By.css('button')).nativeElement;
70-
expect(saveBtn).toBeTruthy();
71-
expect(saveBtn.disabled).toBeFalsy();
72+
const button = compiled.querySelector('button');
73+
expect(button).toBeTruthy();
74+
expect(button?.disabled).toBeFalsy();
7275
});
7376

7477
});
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
2-
import { By } from '@angular/platform-browser';
32
import { FormsModule, ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
43

54
import { ToastComponent } from '../shared/toast/toast.component';
@@ -11,6 +10,7 @@ class CatServiceMock { }
1110
describe('Component: AddCatForm', () => {
1211
let component: AddCatFormComponent;
1312
let fixture: ComponentFixture<AddCatFormComponent>;
13+
let compiled: HTMLElement;
1414

1515
beforeEach(waitForAsync(() => {
1616
TestBed.configureTestingModule({
@@ -28,29 +28,30 @@ describe('Component: AddCatForm', () => {
2828
fixture = TestBed.createComponent(AddCatFormComponent);
2929
component = fixture.componentInstance;
3030
fixture.detectChanges();
31+
compiled = fixture.nativeElement as HTMLElement;
3132
});
3233

3334
it('should create', () => {
3435
expect(component).toBeTruthy();
3536
});
3637

3738
it('should display header text', () => {
38-
const el = fixture.debugElement.query(By.css('h4')).nativeElement;
39-
expect(el.textContent).toContain('Add new cat');
39+
const header = compiled.querySelector('.card-header');
40+
expect(header?.textContent).toContain('Add new cat');
4041
});
4142

4243
it('should display the add form', () => {
43-
const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
44-
expect(formEl).toBeTruthy();
45-
const [inputName, inputAge, inputWeight] = fixture.debugElement.queryAll(By.css('input'));
46-
expect(inputName.nativeElement).toBeTruthy();
47-
expect(inputAge.nativeElement).toBeTruthy();
48-
expect(inputWeight.nativeElement).toBeTruthy();
49-
expect(inputName.nativeElement.value).toBeFalsy();
50-
expect(inputAge.nativeElement.value).toBeFalsy();
51-
expect(inputWeight.nativeElement.value).toBeFalsy();
52-
const btnAdd = fixture.debugElement.query(By.css('button')).nativeElement;
53-
expect(btnAdd).toBeTruthy();
44+
const form = compiled.querySelector('form');
45+
expect(form).toBeTruthy();
46+
const inputs = compiled.querySelectorAll('input');
47+
expect(inputs[0]).toBeTruthy();
48+
expect(inputs[1]).toBeTruthy();
49+
expect(inputs[2]).toBeTruthy();
50+
expect(inputs[0].value).toBeFalsy();
51+
expect(inputs[1].value).toBeFalsy();
52+
expect(inputs[2].value).toBeFalsy();
53+
const button = compiled.querySelector('button');
54+
expect(button).toBeTruthy();
5455
});
5556

5657
});
+23-20
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { NO_ERRORS_SCHEMA } from '@angular/core';
12
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
2-
import { By } from '@angular/platform-browser';
33

44
import { ToastComponent } from '../shared/toast/toast.component';
55
import { AuthService } from '../services/auth.service';
@@ -24,6 +24,7 @@ class UserServiceMock {
2424
describe('Component: Admin', () => {
2525
let component: AdminComponent;
2626
let fixture: ComponentFixture<AdminComponent>;
27+
let compiled: HTMLElement;
2728

2829
beforeEach(waitForAsync(() => {
2930
TestBed.configureTestingModule({
@@ -32,7 +33,8 @@ describe('Component: Admin', () => {
3233
ToastComponent,
3334
{ provide: AuthService, useClass: AuthServiceMock },
3435
{ provide: UserService, useClass: UserServiceMock },
35-
]
36+
],
37+
schemas: [NO_ERRORS_SCHEMA]
3638
})
3739
.compileComponents();
3840
}));
@@ -41,42 +43,43 @@ describe('Component: Admin', () => {
4143
fixture = TestBed.createComponent(AdminComponent);
4244
component = fixture.componentInstance;
4345
fixture.detectChanges();
46+
compiled = fixture.nativeElement as HTMLElement;
4447
});
4548

4649
it('should create', () => {
4750
expect(component).toBeTruthy();
4851
});
4952

5053
it('should display the page header text', () => {
51-
const el = fixture.debugElement.query(By.css('h4')).nativeElement;
52-
expect(el.textContent).toContain('Registered users (2)');
54+
const header = compiled.querySelector('.card-header');
55+
expect(header?.textContent).toContain('Registered users (2)');
5356
});
5457

5558
it('should display the text for no users', () => {
5659
component.users = [];
5760
fixture.detectChanges();
58-
const headerEl = fixture.debugElement.query(By.css('h4')).nativeElement;
59-
expect(headerEl.textContent).toContain('Registered users (0)');
60-
const tdEl = fixture.debugElement.query(By.css('td')).nativeElement;
61-
expect(tdEl.textContent).toContain('There are no registered users');
61+
const header = compiled.querySelector('h4');
62+
expect(header?.textContent).toContain('Registered users (0)');
63+
const td = compiled.querySelector('td');
64+
expect(td?.textContent).toContain('There are no registered users');
6265
});
6366

6467
it('should display registered users', () => {
65-
const tds = fixture.debugElement.queryAll(By.css('td'));
66-
expect(tds[0].nativeElement.textContent).toContain('Test 1');
67-
expect(tds[1].nativeElement.textContent).toContain('[email protected]');
68-
expect(tds[2].nativeElement.textContent).toContain('admin');
69-
expect(tds[4].nativeElement.textContent).toContain('Test 2');
70-
expect(tds[5].nativeElement.textContent).toContain('[email protected]');
71-
expect(tds[6].nativeElement.textContent).toContain('user');
68+
const tds = compiled.querySelectorAll('td');
69+
expect(tds[0].textContent).toContain('Test 1');
70+
expect(tds[1].textContent).toContain('[email protected]');
71+
expect(tds[2].textContent).toContain('admin');
72+
expect(tds[4].textContent).toContain('Test 2');
73+
expect(tds[5].textContent).toContain('[email protected]');
74+
expect(tds[6].textContent).toContain('user');
7275
});
7376

7477
it('should display the delete buttons', () => {
75-
const [btnDelete1, btnDelete2] = fixture.debugElement.queryAll(By.css('button'));
76-
expect(btnDelete1.nativeElement.disabled).toBeTruthy();
77-
expect(btnDelete1.nativeElement.textContent).toContain('Delete');
78-
expect(btnDelete2.nativeElement.disabled).toBeFalsy();
79-
expect(btnDelete2.nativeElement.textContent).toContain('Delete');
78+
const buttons = compiled.querySelectorAll('button');
79+
expect(buttons[0].disabled).toBeTruthy();
80+
expect(buttons[0].textContent).toContain('Delete');
81+
expect(buttons[1].disabled).toBeFalsy();
82+
expect(buttons[1].textContent).toContain('Delete');
8083
});
8184

8285
});

client/app/app.component.spec.ts

+33-44
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { NO_ERRORS_SCHEMA } from '@angular/core';
21
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
3-
import { By } from '@angular/platform-browser';
2+
import { RouterTestingModule } from '@angular/router/testing';
43

54
import { AuthService } from './services/auth.service';
65
import { AppComponent } from './app.component';
@@ -11,71 +10,61 @@ describe('Component: App', () => {
1110
let component: AppComponent;
1211
let fixture: ComponentFixture<AppComponent>;
1312
let authService: AuthService;
13+
let compiled: HTMLElement;
1414

1515
beforeEach(waitForAsync(() => {
1616
TestBed.configureTestingModule({
17+
imports: [ RouterTestingModule ],
1718
declarations: [ AppComponent ],
1819
providers: [ { provide: AuthService, useClass: AuthServiceMock } ],
19-
schemas: [ NO_ERRORS_SCHEMA ]
20-
})
21-
.compileComponents().then(() => {
22-
fixture = TestBed.createComponent(AppComponent);
23-
component = fixture.componentInstance;
24-
authService = fixture.debugElement.injector.get(AuthService);
25-
fixture.detectChanges();
26-
});
20+
}).compileComponents();
2721
}));
2822

23+
beforeEach(() => {
24+
fixture = TestBed.createComponent(AppComponent);
25+
component = fixture.componentInstance;
26+
authService = fixture.debugElement.injector.get(AuthService);
27+
fixture.detectChanges();
28+
compiled = fixture.nativeElement as HTMLElement;
29+
});
30+
2931
it('should create the app', waitForAsync(() => {
3032
expect(component).toBeTruthy();
3133
}));
3234

3335
it('should display the navigation bar correctly for guests', () => {
34-
const de = fixture.debugElement.queryAll(By.css('a'));
35-
expect(de.length).toBe(4);
36-
expect(de[0].nativeElement.textContent).toContain('Home');
37-
expect(de[1].nativeElement.textContent).toContain('Cats');
38-
expect(de[2].nativeElement.textContent).toContain('Login');
39-
expect(de[3].nativeElement.textContent).toContain('Register');
40-
expect(de[0].attributes.routerLink).toBe('/');
41-
expect(de[1].attributes.routerLink).toBe('/cats');
42-
expect(de[2].attributes.routerLink).toBe('/login');
43-
expect(de[3].attributes.routerLink).toBe('/register');
36+
const elems = compiled.querySelectorAll('.nav-link');
37+
expect(elems.length).toBe(4);
38+
expect(elems[0].textContent).toContain('Home');
39+
expect(elems[1].textContent).toContain('Cats');
40+
expect(elems[2].textContent).toContain('Login');
41+
expect(elems[3].textContent).toContain('Register');
4442
});
4543

4644
it('should display the navigation bar correctly for logged users', () => {
4745
authService.loggedIn = true;
48-
authService.currentUser = { username: 'Tester' };
46+
authService.currentUser = { _id: '123', username: 'Tester', role: 'user' };
4947
fixture.detectChanges();
50-
const de = fixture.debugElement.queryAll(By.css('a'));
51-
expect(de.length).toBe(4);
52-
expect(de[0].nativeElement.textContent).toContain('Home');
53-
expect(de[1].nativeElement.textContent).toContain('Cats');
54-
expect(de[2].nativeElement.textContent).toContain('Account (Tester)');
55-
expect(de[3].nativeElement.textContent).toContain('Logout');
56-
expect(de[0].attributes.routerLink).toBe('/');
57-
expect(de[1].attributes.routerLink).toBe('/cats');
58-
expect(de[2].attributes.routerLink).toBe('/account');
59-
expect(de[3].attributes.routerLink).toBe('/logout');
48+
const elems = compiled.querySelectorAll('.nav-link');
49+
expect(elems.length).toBe(4);
50+
expect(elems[0].textContent).toContain('Home');
51+
expect(elems[1].textContent).toContain('Cats');
52+
expect(elems[2].textContent).toContain('Account (Tester)');
53+
expect(elems[3].textContent).toContain('Logout');
6054
});
6155

6256
it('should display the navigation bar correctly for admin users', () => {
6357
authService.loggedIn = true;
6458
authService.isAdmin = true;
65-
authService.currentUser = { username: 'Tester' };
59+
authService.currentUser = { _id: '123', username: 'Tester', role: 'admin' };
6660
fixture.detectChanges();
67-
const de = fixture.debugElement.queryAll(By.css('a'));
68-
expect(de.length).toBe(5);
69-
expect(de[0].nativeElement.textContent).toContain('Home');
70-
expect(de[1].nativeElement.textContent).toContain('Cats');
71-
expect(de[2].nativeElement.textContent).toContain('Account (Tester)');
72-
expect(de[3].nativeElement.textContent).toContain('Admin');
73-
expect(de[4].nativeElement.textContent).toContain('Logout');
74-
expect(de[0].attributes.routerLink).toBe('/');
75-
expect(de[1].attributes.routerLink).toBe('/cats');
76-
expect(de[2].attributes.routerLink).toBe('/account');
77-
expect(de[3].attributes.routerLink).toBe('/admin');
78-
expect(de[4].attributes.routerLink).toBe('/logout');
61+
const elems = compiled.querySelectorAll('.nav-link');
62+
expect(elems.length).toBe(5);
63+
expect(elems[0].textContent).toContain('Home');
64+
expect(elems[1].textContent).toContain('Cats');
65+
expect(elems[2].textContent).toContain('Account (Tester)');
66+
expect(elems[3].textContent).toContain('Admin');
67+
expect(elems[4].textContent).toContain('Logout');
7968
});
8069

8170
});

0 commit comments

Comments
 (0)