-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improved test coverage for AccountSettingsComponent
- Loading branch information
1 parent
37303e3
commit d3be42a
Showing
8 changed files
with
187 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
100 changes: 100 additions & 0 deletions
100
src/app/auth/settings/account-settings.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import { mockAccountDetails } from "../../api/mock/auth.mock"; | ||
| import { RouterTestingModule } from "@angular/router/testing"; | ||
| import { ComponentFixture, TestBed } from "@angular/core/testing"; | ||
| import { ActivatedRoute, NavigationEnd, Router, RouterEvent } from "@angular/router"; | ||
| import { ApolloTestingModule } from "apollo-angular/testing"; | ||
| import { AccountSettingsComponent } from "./account-settings.component"; | ||
| import { AngularSvgIconModule } from "angular-svg-icon"; | ||
| import { HttpClientTestingModule } from "@angular/common/http/testing"; | ||
| import { LoggedUserService } from "../logged-user.service"; | ||
| import { findElementByDataTestId, getElementByDataTestId } from "src/app/common/base-test.helpers.spec"; | ||
| import { AuthApi } from "src/app/api/auth.api"; | ||
| import { SettingsTabs } from "./settings.constants"; | ||
| import { Subject, of } from "rxjs"; | ||
| import ProjectLinks from "src/app/project-links"; | ||
|
|
||
| describe("AccountSettingsComponent", () => { | ||
| let component: AccountSettingsComponent; | ||
| let fixture: ComponentFixture<AccountSettingsComponent>; | ||
| let loggedUserService: LoggedUserService; | ||
| let authApi: AuthApi; | ||
| let activatedRoute: ActivatedRoute; | ||
| let router: Router; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [AccountSettingsComponent], | ||
| imports: [ | ||
| ApolloTestingModule, | ||
| RouterTestingModule, | ||
| AngularSvgIconModule.forRoot(), | ||
| HttpClientTestingModule, | ||
| ], | ||
| }).compileComponents(); | ||
|
|
||
| activatedRoute = TestBed.inject(ActivatedRoute); | ||
| router = TestBed.inject(Router); | ||
|
|
||
| authApi = TestBed.inject(AuthApi); | ||
| spyOn(authApi, "accountChanged").and.returnValue(of(mockAccountDetails)); | ||
| loggedUserService = TestBed.inject(LoggedUserService); | ||
|
|
||
| fixture = TestBed.createComponent(AccountSettingsComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| enum Elements { | ||
| UserNameLink = "user-name-link", | ||
| } | ||
|
|
||
| it("should create", () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
|
|
||
| it("should see logged user", () => { | ||
| const userNameLinKElement: HTMLElement = getElementByDataTestId(fixture, Elements.UserNameLink); | ||
| expect(userNameLinKElement.innerText).toEqual(mockAccountDetails.displayName); | ||
| }); | ||
|
|
||
| it("should not show user data for logged off case", () => { | ||
| loggedUserService.logout(); | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(findElementByDataTestId(fixture, Elements.UserNameLink)).toBeFalsy(); | ||
| }); | ||
|
|
||
| it("should open profile tab by default", () => { | ||
| expect(component.activeTab).toEqual(SettingsTabs.PROFILE); | ||
| }); | ||
|
|
||
| [ | ||
| SettingsTabs.ACCESSIBILITY, | ||
| SettingsTabs.ACCOUNT, | ||
| SettingsTabs.APPEARANCE, | ||
| SettingsTabs.BILLING, | ||
| SettingsTabs.EMAILS, | ||
| SettingsTabs.NOTIFICATIONS, | ||
| SettingsTabs.ORGANIZATIONS, | ||
| SettingsTabs.PROFILE, | ||
| SettingsTabs.SECURITY, | ||
| ].forEach((tab: SettingsTabs) => { | ||
| it(`should activate ${tab} tab`, () => { | ||
| activatedRoute.snapshot.params = { | ||
| [ProjectLinks.URL_PARAM_CATEGORY]: tab, | ||
| }; | ||
| (router.events as Subject<RouterEvent>).next(new NavigationEnd(1, "", "")); | ||
|
|
||
| expect(component.activeTab).toEqual(tab); | ||
| }); | ||
| }); | ||
|
|
||
| it("should open profile tab for a wrong tab", () => { | ||
| activatedRoute.snapshot.params = { | ||
| [ProjectLinks.URL_PARAM_CATEGORY]: "wrong", | ||
| }; | ||
| (router.events as Subject<RouterEvent>).next(new NavigationEnd(1, "", "")); | ||
|
|
||
| expect(component.activeTab).toEqual(SettingsTabs.PROFILE); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import ProjectLinks from "src/app/project-links"; | ||
| import { AccountDetailsFragment } from "src/app/api/kamu.graphql.interface"; | ||
| import { SettingsTabs } from "./settings.constants"; | ||
| import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core"; | ||
| import { ActivatedRoute, NavigationEnd, Router } from "@angular/router"; | ||
| import { filter } from "rxjs/operators"; | ||
| import { BaseComponent } from "src/app/common/base.component"; | ||
| import AppValues from "src/app/common/app.values"; | ||
| import { LoggedUserService } from "../logged-user.service"; | ||
| import { MaybeNull, MaybeUndefined } from "src/app/common/app.types"; | ||
| import { Observable } from "rxjs"; | ||
|
|
||
| @Component({ | ||
| selector: "app-settings", | ||
| templateUrl: "./account-settings.component.html", | ||
| styleUrls: ["./account-settings.component.sass"], | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class AccountSettingsComponent extends BaseComponent implements OnInit { | ||
| public readonly DEFAULT_AVATAR_URL = AppValues.DEFAULT_AVATAR_URL; | ||
| public readonly SettingsTabs: typeof SettingsTabs = SettingsTabs; | ||
|
|
||
| public activeTab: SettingsTabs = SettingsTabs.PROFILE; | ||
| public user$: Observable<MaybeNull<AccountDetailsFragment>>; | ||
|
|
||
| constructor(private router: Router, private route: ActivatedRoute, private loggedUserService: LoggedUserService) { | ||
| super(); | ||
| } | ||
|
|
||
| public ngOnInit(): void { | ||
| this.trackSubscription( | ||
| this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => { | ||
| this.extractActiveTabFromRoute(); | ||
| }), | ||
| ); | ||
| this.extractActiveTabFromRoute(); | ||
| this.user$ = this.loggedUserService.onLoggedInUserChanges; | ||
| } | ||
|
|
||
| public getRouteLink(tab: SettingsTabs): string { | ||
| return `/${ProjectLinks.URL_SETTINGS}/${tab}`; | ||
| } | ||
|
|
||
| private extractActiveTabFromRoute(): void { | ||
| const categoryParam: MaybeUndefined<string> = this.route.snapshot.params[ | ||
| ProjectLinks.URL_PARAM_CATEGORY | ||
| ] as MaybeUndefined<string>; | ||
|
|
||
| if (categoryParam) { | ||
| const category = categoryParam as SettingsTabs; | ||
| if (Object.values(SettingsTabs).includes(category)) { | ||
| this.activeTab = category; | ||
| return; | ||
| } | ||
| } | ||
|
|
||
| this.activeTab = SettingsTabs.PROFILE; | ||
| } | ||
| } |
Oops, something went wrong.