Skip to content

Commit bb805a7

Browse files
akirasosaakirasosa
committed
refactor header.component.spec
1 parent 3488eeb commit bb805a7

File tree

2 files changed

+27
-38
lines changed

2 files changed

+27
-38
lines changed

‎src/app/components/header/header.component.html

+9-9
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,35 @@
77
[hidden]="isMenuHidden">
88
<a class="navbar-brand" [routerLink]="['/']">SAMPLE APP</a>
99
<ul class="nav navbar-nav">
10-
<li class="nav-item home" routerLinkActive="active" *ngIf="isSignedIn">
10+
<li class="nav-item" routerLinkActive="active" *ngIf="isSignedIn">
1111
<a class="nav-link" [routerLink]="['/home']">Home</a>
1212
</li>
13-
<li class="nav-item top" routerLinkActive="active"
13+
<li class="nav-item" routerLinkActive="active"
1414
[routerLinkActiveOptions]="{exact: true}" *ngIf="!isSignedIn">
1515
<a class="nav-link" [routerLink]="['/']">Home</a>
1616
</li>
17-
<li class="nav-item users" routerLinkActive="active"
17+
<li class="nav-item" routerLinkActive="active"
1818
[routerLinkActiveOptions]="{exact: true}" *ngIf="isSignedIn">
1919
<a class="nav-link" [routerLink]="['/users']">Users</a>
2020
</li>
21-
<li class="nav-item help" routerLinkActive="active">
21+
<li class="nav-item" routerLinkActive="active">
2222
<a class="nav-link" [routerLink]="['/help']">Help</a>
2323
</li>
24-
<li class="nav-item login" routerLinkActive="active" *ngIf="!isSignedIn">
24+
<li class="nav-item" routerLinkActive="active" *ngIf="!isSignedIn">
2525
<a class="nav-link" [routerLink]="['/login']">Sign in</a>
2626
</li>
2727
</ul>
2828
<ul class="nav navbar-nav float-sm-right" *ngIf="isSignedIn">
29-
<li class="nav-item profile" routerLinkActive="active"
29+
<li class="nav-item" routerLinkActive="active"
3030
[routerLinkActiveOptions]="{exact: true}">
3131
<a class="nav-link" [routerLink]="['/users/me']">Profile</a>
3232
</li>
33-
<li class="nav-item settings" routerLinkActive="active"
33+
<li class="nav-item" routerLinkActive="active"
3434
[routerLinkActiveOptions]="{exact: true}">
3535
<a class="nav-link" [routerLink]="['/users/me/edit']">Settings</a>
3636
</li>
37-
<li class="nav-item logout">
38-
<a class="nav-link" href="#"
37+
<li class="nav-item">
38+
<a class="nav-link logout" href="#"
3939
(click)="logout(); $event.preventDefault()">Logout</a>
4040
</li>
4141
</ul>

‎src/app/components/header/header.component.spec.ts

+18-29
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ describe('HeaderComponent', () => {
3333
}
3434

3535
let cmpDebugElement: DebugElement;
36+
let el: Element;
3637

3738
let router: Router;
3839
let location: Location;
@@ -73,6 +74,7 @@ describe('HeaderComponent', () => {
7374
fixture = TestBed.createComponent(TestComponent);
7475
fixture.detectChanges();
7576
cmpDebugElement = fixture.debugElement.query(By.directive(HeaderComponent));
77+
el = cmpDebugElement.nativeElement;
7678
});
7779
});
7880
};
@@ -89,117 +91,104 @@ describe('HeaderComponent', () => {
8991
});
9092

9193
it('shows a nav link to home', fakeAsync(() => {
92-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.home>a');
94+
const link = getDOM().querySelector(el, 'a[href="/home"]');
9395
expect(link).toBeTruthy();
9496
link.click();
9597
advance(fixture);
96-
expect(location.path()).toEqual('/home');
9798
expect(link.parentElement.classList).toContain('active');
9899
}));
99100

100101
it('does not show a nav link to top', () => {
101-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.top>a');
102+
const link = getDOM().querySelector(el, 'a[href="/"].nav-link');
102103
expect(link).toBeNull();
103104
});
104105

105106
it('shows a nav link to users', fakeAsync(() => {
106-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.users>a');
107+
const link = getDOM().querySelector(el, 'a[href="/users"]');
107108
expect(link).toBeTruthy();
108109
link.click();
109110
advance(fixture);
110-
expect(location.path()).toEqual('/users');
111111
expect(link.parentElement.classList).toContain('active');
112112
}));
113113

114114
it('shows a nav link to help', fakeAsync(() => {
115-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.help>a');
115+
const link = getDOM().querySelector(el, 'a[href="/help"]');
116116
expect(link).toBeTruthy();
117117
link.click();
118118
advance(fixture);
119-
expect(location.path()).toEqual('/help');
120119
expect(link.parentElement.classList).toContain('active');
121120
}));
122121

123122
it('shows a nav link to profile', fakeAsync(() => {
124-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.profile>a');
123+
const link = getDOM().querySelector(el, 'a[href="/users/me"]');
125124
expect(link).toBeTruthy();
126-
link.click();
127-
advance(fixture);
128-
expect(location.path()).toEqual('/users/me');
129125
}));
130126

131127
describe('navigate to settings', () => {
132128
beforeEach(inject([UserService], userService => {
133129
spyOn(userService, 'get').and.returnValue(Observable.of({}));
134130
}));
135131
it('shows a nav link to settings', fakeAsync(() => {
136-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.settings>a');
132+
const link = getDOM().querySelector(el, 'a[href="/users/me/edit"]');
137133
expect(link).toBeTruthy();
138-
link.click();
139-
advance(fixture);
140-
expect(location.path()).toEqual('/users/me/edit');
141134
}));
142135
});
143136

144137
it('shows a nav link to logout', fakeAsync(() => {
145-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.logout>a');
138+
const link = getDOM().querySelector(el, 'a.logout');
146139
expect(link).toBeTruthy();
147140
spyOn(authService, 'logout');
148141
link.click();
149142
expect(authService.logout).toHaveBeenCalled();
150143
}));
151144
}); // when signed in
152145

153-
describe('when not signed in', () => {
146+
fdescribe('when not signed in', () => {
154147
beforeEach(initComponent());
155148

156149
it('can be shown', () => {
157150
expect(cmpDebugElement).toBeTruthy();
158151
});
159152

160153
it('does not show a nav link to home', () => {
161-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.home>a');
154+
const link = getDOM().querySelector(el, 'a[href="/home"]');
162155
expect(link).toBeNull();
163156
});
164157

165158
it('shows a nav link to top', fakeAsync(() => {
166-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.top>a');
159+
const link = getDOM().querySelector(el, 'a[href="/"].nav-link');
167160
expect(link).toBeTruthy();
168161
link.click();
169162
advance(fixture);
170-
expect(location.path()).toEqual('/');
163+
expect(link.parentElement.classList).toContain('active');
171164
}));
172165

173166
it('does not show a nav link to users', () => {
174-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.users>a');
167+
const link = getDOM().querySelector(el, 'a[href="/users"]');
175168
expect(link).toBeNull();
176169
});
177170

178171
it('shows a nav link to help', fakeAsync(() => {
179-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.help>a');
172+
const link = getDOM().querySelector(el, 'a[href="/help"]');
180173
expect(link).toBeTruthy();
181174
link.click();
182175
advance(fixture);
183-
expect(location.path()).toEqual('/help');
184176
expect(link.parentElement.classList).toContain('active');
185177
}));
186178

187179
it('does not show a nav link to profile', () => {
188-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.profile>a');
180+
const link = getDOM().querySelector(el, 'a[href="/users/me"]');
189181
expect(link).toBeNull();
190182
});
191183

192184
it('does not show a nav link to settings', () => {
193-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.settings>a');
185+
const link = getDOM().querySelector(el, 'a[href="/users/me/edit"]');
194186
expect(link).toBeNull();
195187
});
196188

197189
it('shows a nav link to sign in', fakeAsync(() => {
198-
const link = getDOM().querySelector(cmpDebugElement.nativeElement, '.nav-item.login>a');
190+
const link = getDOM().querySelector(el, 'a[href="/login"]');
199191
expect(link).toBeTruthy();
200-
link.click();
201-
advance(fixture);
202-
expect(location.path()).toEqual('/login');
203192
}));
204193
}); // when not signed in
205194

0 commit comments

Comments
 (0)