Notes

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { SimpleChange } from '@angular/core';
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { SchModalComponent } from '@schwab/sch-modal';
import { RpsModalComponent } from 'src/app/rps-shared/components/rps-modal/rps-modal.component';
import { DisableSubmitPipe } from 'src/app/rps-shared/pipes/disable-submit.pipe';
import { RpsAnalyticsService } from 'src/app/rps-shared/rps-services/rps-analytics.service';
import { RpsMenuNavigationService } from '../../rps-services/rps-menu-navigation.service';
import { RpsSecureMessagingManagerService } from '../../rps-services/rps-secure-messaging-manager.service';

import { RpsUpdateEmailAddressComponent } from './rps-update-email-address.component';

describe('RpsUpdateEmailAddressComponent', () => {
let component: RpsUpdateEmailAddressComponent;
let fixture: ComponentFixture<RpsUpdateEmailAddressComponent>;
let navService: RpsMenuNavigationService;
let managerService: RpsSecureMessagingManagerService;
const testEmailAddress = '[email protected]';

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ RpsUpdateEmailAddressComponent, RpsModalComponent, DisableSubmitPipe ],
imports: [ FormsModule, ReactiveFormsModule, RouterTestingModule, HttpClientTestingModule, SchModalComponent],
providers: [ RpsSecureMessagingManagerService, RpsMenuNavigationService, RpsSecureMessagingManagerService, RpsAnalyticsService ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(RpsUpdateEmailAddressComponent);
component = fixture.componentInstance;
fixture.detectChanges();
component.currentEmailAddress = testEmailAddress;
component.showEmailUpdateForm = true;
fixture.detectChanges();
navService = TestBed.inject(RpsMenuNavigationService);
managerService = TestBed.inject(RpsSecureMessagingManagerService);
});

afterEach(() => {
fixture.destroy();
});

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

it('should display form and form title', () => {
const subTItle = document.getElementById('emailUpdateFormSubTitle') as HTMLDivElement;
expect(subTItle).toBeTruthy();
expect(subTItle.innerText).toEqual('Add or update your email address:');
});

it('should display current email address in textbox', () => {
const emailAddress = document.getElementById('emailUpdateFormEmailAddress') as HTMLInputElement;
expect(emailAddress.value).toEqual(testEmailAddress);
});

it('should display cancel and submit button', () => {
const cancelBtn = document.getElementById('btnUpdateEmailCancel') as HTMLButtonElement;
const submitBtn = document.getElementById('btnUpdateEmailAddress') as HTMLButtonElement;
expect(cancelBtn).toBeTruthy();
expect(submitBtn).toBeTruthy();
});

it('should display privacy notice link in footer', () => {
const privateLink = document.getElementById('privacyLink') as HTMLAnchorElement;
expect(privateLink).toBeTruthy();
expect(privateLink.innerText).toEqual('Privacy Policy');
});

it('should enable submit button', () => {
const submitBtn = document.getElementById('btnUpdateEmailAddress') as HTMLButtonElement;
component.emailAddress.setValue('[email protected]');
fixture.detectChanges();
expect(submitBtn.disabled).toEqual(false);
});

it('should set submit button disabled when control value is invalid email address', () => {
const submitBtn = document.getElementById('btnUpdateEmailAddress') as HTMLButtonElement;
component.emailAddress.setValue('[email protected]');
fixture.detectChanges();
expect(submitBtn.disabled).toEqual(true);
});

it('should set submit button disabled when current and control values match', () => {
const submitBtn = document.getElementById('btnUpdateEmailAddress') as HTMLButtonElement;
expect(submitBtn).toBeTruthy();
expect(submitBtn.disabled).toEqual(true);
});

it('should open privacy policy in separate window', () => {
// tslint:disable-next-line: only-arrow-functions
const navSpy = spyOn(navService, 'navigate').and.callFake(function() {
const route = arguments[0];
const url = arguments[1];
const target = arguments[2];
expect(route).toBeFalsy();
expect(url).toEqual('https://www.schwab.com/legal/privacy');
expect(target).toEqual('_blank');
});

const privateLink = document.getElementById('privacyLink') as HTMLAnchorElement;
privateLink.click();

expect(navSpy).toHaveBeenCalled();
});

it('should display error message when email address entered is invalid and either/or touched or dirty', () => {
const cancelBtn = document.getElementById('btnUpdateEmailCancel') as HTMLButtonElement;
const emailTextbox = document.getElementById('emailUpdateFormEmailAddress') as HTMLInputElement;
emailTextbox.focus();
fixture.detectChanges();
component.emailAddress.setValue('[email protected]');
fixture.detectChanges();
cancelBtn.focus();
fixture.detectChanges();
const errMsg = document.getElementById('invalidEmailAddress') as HTMLSpanElement;
expect(errMsg).toBeTruthy();
expect(errMsg.innerText).toEqual('Invalid email address');
});

it('should emit close modal event when cancel button clicked', () => {
const emitSpy = spyOn(component.modalClosed, 'emit');
const cancelBtn = document.getElementById('btnUpdateEmailCancel') as HTMLButtonElement;
cancelBtn.click();
expect(emitSpy).toHaveBeenCalled();
});

it('should submit request and show spinner for email update when email changed and submit clicked', () => {
// tslint:disable-next-line: only-arrow-functions
const managerSpy = spyOn(managerService, 'updateEmailAddress').and.callFake(function() {
const emailAddr = arguments[0];
expect(emailAddr).toEqual('[email protected]');
});
const submitBtn = document.getElementById('btnUpdateEmailAddress') as HTMLButtonElement;
component.emailAddress.setValue('[email protected]');
fixture.detectChanges();
submitBtn.click();
fixture.detectChanges();
const spinnerDiv = document.getElementById('updateEmailSpinner');
expect(managerSpy).toHaveBeenCalled();
expect(spinnerDiv).toBeTruthy();
});

it('should reset form when showUpdateEmailForm previous value is true and current value is false', () => {
const updateEmailSpy = spyOn(managerService, 'updateEmailAddress');
component.currentEmailAddress = '[email protected]';
component.showEmailUpdateForm = true;
fixture.detectChanges();
const emailTextBox = document.getElementById('emailUpdateFormEmailAddress') as HTMLInputElement;
emailTextBox.focus();
component.emailAddress.setValue('[email protected]');
fixture.detectChanges();
const submitBtn = document.getElementById('btnUpdateEmailAddress') as HTMLButtonElement;
submitBtn.focus();
fixture.detectChanges();
expect(component.emailAddress.touched).toEqual(true);
submitBtn.click();
fixture.detectChanges();
expect(component.sendingEmailUpdate).toEqual(true);
expect(updateEmailSpy).toHaveBeenCalled();
component.ngOnChanges({
showEmailUpdateForm: new SimpleChange(true, false, false)
});
expect(component.sendingEmailUpdate).toEqual(false);
expect(component.emailAddress.touched).toEqual(false);
});

it('should not display error messages when email is the same', () => {
// initialize email update form
component.currentEmailAddress = testEmailAddress;
component.showEmailUpdateForm = true;
fixture.detectChanges();
let errorMessageSpan = document.getElementById('invalidEmailAddress') as HTMLSpanElement;
expect(errorMessageSpan).toBeFalsy();

// set form with bad address - should display error
const inputEmailBox = document.getElementById('emailUpdateFormEmailAddress') as HTMLInputElement;
inputEmailBox.focus();
component.emailAddress.setValue('[email protected]');
inputEmailBox.blur();
fixture.detectChanges();
errorMessageSpan = document.getElementById('invalidEmailAddress') as HTMLSpanElement;
expect(errorMessageSpan).toBeTruthy();

// set form with iniital email address - should hide error message and disable submit button
component.emailAddress.setValue(testEmailAddress);
fixture.detectChanges();
errorMessageSpan = document.getElementById('invalidEmailAddress') as HTMLSpanElement;
const submitBtn = document.getElementById('btnUpdateEmailAddress') as HTMLButtonElement;
expect(errorMessageSpan).toBeFalsy();
expect(submitBtn.disabled).toEqual(true);
});

it('should keep submit button disabled when all caps are used for same email address', () => {
component.currentEmailAddress = testEmailAddress;
component.showEmailUpdateForm = true;
fixture.detectChanges();
let submitBtn = document.getElementById('btnUpdateEmailAddress') as HTMLButtonElement;
expect(submitBtn.disabled).toBeTruthy();

component.emailAddress.setValue(testEmailAddress.toUpperCase());
fixture.detectChanges();
submitBtn = document.getElementById('btnUpdateEmailAddress') as HTMLButtonElement;
expect(submitBtn.disabled).toBeTruthy();
});
});