From 62da2c260be6a6a0e9a3793061e71c97e2a8be68 Mon Sep 17 00:00:00 2001 From: Charissa Miller <48832936+clemiller@users.noreply.github.com> Date: Fri, 2 Feb 2024 20:56:24 -0500 Subject: [PATCH] refactor app component tests --- nav-app/src/app/app.component.spec.ts | 70 ++++++++++++--------------- 1 file changed, 31 insertions(+), 39 deletions(-) diff --git a/nav-app/src/app/app.component.spec.ts b/nav-app/src/app/app.component.spec.ts index 5296a4e16..0d868609e 100755 --- a/nav-app/src/app/app.component.spec.ts +++ b/nav-app/src/app/app.component.spec.ts @@ -1,4 +1,4 @@ -import { TestBed, waitForAsync } from '@angular/core/testing'; +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { AppComponent } from './app.component'; import { HttpClientTestingModule } from '@angular/common/http/testing'; import { deleteCookie, getCookie, hasCookie, setCookie } from './utils/cookies'; @@ -7,6 +7,9 @@ import { MatDialogModule } from '@angular/material/dialog'; import { MatSnackBarModule } from '@angular/material/snack-bar'; describe('AppComponent', () => { + let fixture: ComponentFixture; + let app: any; + beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ @@ -19,93 +22,82 @@ describe('AppComponent', () => { TabsComponent, ], }).compileComponents(); + fixture = TestBed.createComponent(AppComponent); + app = fixture.debugElement.componentInstance; })); it('should create the app', waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); it('should intialize title', waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const appComponent = fixture.componentInstance; - appComponent.ngOnInit(); - let result = appComponent.titleService.getTitle(); - expect(result).toEqual(appComponent.title); + app.ngOnInit(); + let result = app.titleService.getTitle(); + expect(result).toEqual(app.title); })); it(`should have title 'ATT&CK® Navigator'`, waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; expect(app.title).toEqual('ATT&CK® Navigator'); })); it('should set user theme to theme-override-dark', waitForAsync(() => { setCookie('is_user_theme_dark', 'true', 1); - const fixture = TestBed.createComponent(AppComponent); - const appComponent = fixture.componentInstance; - expect(appComponent.user_theme).toEqual('theme-override-dark'); + // recreate component + fixture = TestBed.createComponent(AppComponent); + app = fixture.componentInstance; + expect(app.user_theme).toEqual('theme-override-dark'); })); it('should set user theme to theme-override-light', waitForAsync(() => { setCookie('is_user_theme_dark', 'false', 1); - const fixture = TestBed.createComponent(AppComponent); - const appComponent = fixture.componentInstance; - expect(appComponent.user_theme).toEqual('theme-override-light'); + // recreate component + fixture = TestBed.createComponent(AppComponent); + app = fixture.componentInstance; + expect(app.user_theme).toEqual('theme-override-light'); })); it('should set user theme to theme-use-system', waitForAsync(() => { deleteCookie('is_user_theme_dark'); - const fixture = TestBed.createComponent(AppComponent); - const appComponent = fixture.componentInstance; - expect(appComponent.user_theme).toEqual('theme-use-system'); + // recreate component + fixture = TestBed.createComponent(AppComponent); + app = fixture.componentInstance; + expect(app.user_theme).toEqual('theme-use-system'); })); it('should handle dark theme change', waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const appComponent = fixture.componentInstance; - appComponent.themeChangeHandler('dark'); - expect(appComponent.user_theme).toEqual('theme-override-dark'); + app.themeChangeHandler('dark'); + expect(app.user_theme).toEqual('theme-override-dark'); expect(hasCookie('is_user_theme_dark')).toBeTrue(); expect(getCookie('is_user_theme_dark')).toEqual('true'); })); it('should handle light theme change', waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const appComponent = fixture.componentInstance; - appComponent.themeChangeHandler('light'); - expect(appComponent.user_theme).toEqual('theme-override-light'); + app.themeChangeHandler('light'); + expect(app.user_theme).toEqual('theme-override-light'); expect(hasCookie('is_user_theme_dark')).toBeTrue(); expect(getCookie('is_user_theme_dark')).toEqual('false'); })); it('should handle system theme change', waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const appComponent = fixture.componentInstance; setCookie('is_user_theme_dark', 'true', 1); - appComponent.themeChangeHandler('system'); - expect(appComponent.user_theme).toEqual('theme-use-system'); + app.themeChangeHandler('system'); + expect(app.user_theme).toEqual('theme-use-system'); expect(hasCookie('is_user_theme_dark')).toBeFalse(); })); it('should prompt to navigate away', waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const appComponent = fixture.componentInstance; - appComponent.configService.setFeature('leave_site_dialog', true); + app.configService.setFeature('leave_site_dialog', true); let prompt = 'Are you sure you want to navigate away? Your data may be lost!'; let event$ = {returnValue: null}; - appComponent.promptNavAway(event$); + app.promptNavAway(event$); expect(event$.returnValue).toEqual(prompt); })); it('should not prompt to navigate away', waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const appComponent = fixture.componentInstance; - appComponent.configService.setFeature('leave_site_dialog', false); + app.configService.setFeature('leave_site_dialog', false); let event$ = {returnValue: null}; - appComponent.promptNavAway(event$); + app.promptNavAway(event$); expect(event$.returnValue).toEqual(null); })); });