angular - 角度单元测试异步与同步问题
问题描述
我对角度和茉莉花的单元测试非常陌生,所以我一直在努力让它正确。我正在尝试为登录页面编写一个简单的单元测试。以下是我的代码
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginComponent } from './login.component';
import {BrowserModule, By} from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {Component, DebugElement, Input} from '@angular/core';
import {RouterTestingModule} from '@angular/router/testing';
import {LoaderService} from '@shared/services/loader.service';
import {AuthenticationService} from '@shared/services/authentication.service';
import {HttpClientModule} from '@angular/common/http';
import {CommonService} from '@shared/services/common.service';
import {ExploreService} from '@shared/services/explore.service';
import {TitleService} from '@shared/services/title.service';
import {AppConfig} from '../../app-config.service';
import {ThemeService} from '@shared/services/theme.service';
import {MatDialog, MatFormFieldModule, MatIconModule} from '@angular/material';
import {throwError} from 'rxjs';
@Component({
selector: 'show-errors',
template: '<p>Mock Product Settings Component</p>'
})
class MockShowErrorsComponent {
@Input() public control;
}
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
let authService: any;
let common: any;
let explore: any;
let title: any;
let config: any;
let theme: any;
let dialog: any;
let debugElement: DebugElement;
let element: HTMLElement;
let submitSpy: any;
beforeEach(async(() => {
authService = jasmine.createSpyObj('AuthenticationService', [
'login',
'logout'
]);
common = jasmine.createSpyObj('commonService', [
'updateCurrentUrl',
'isMobile',
]);
explore = jasmine.createSpyObj('exploreService', [
'slowCalcMessage',
'cancelSlowMessage',
'getInventoryTotalSummary',
'handleError',
'getMarketData'
]);
title = jasmine.createSpyObj('titleService', [
'getTitle',
'setTitle',
'updateTitle',
'updateSiteName'
]);
config = jasmine.createSpyObj('AppConfigService', [
'load',
'API_ENDPOINT'
]);
theme = jasmine.createSpyObj('ThemeService', [
'getThemeSettings',
'generateColorTheme',
]);
dialog = jasmine.createSpyObj('dialog', [
'open'
]);
TestBed.configureTestingModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
RouterTestingModule.withRoutes([]),
HttpClientModule,
MatIconModule,
MatFormFieldModule,
],
declarations: [
LoginComponent,
MockShowErrorsComponent
],
providers: [
LoaderService,
{provide: AuthenticationService, useValue: authService},
{provide: CommonService, useValue: common},
{provide: ExploreService, useValue: explore},
{provide: TitleService, useValue: title},
{provide: AppConfig, useValue: config},
{provide: ThemeService, useValue: theme},
{provide: MatDialog, useValue: dialog},
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
debugElement = fixture.debugElement;
element = debugElement.nativeElement;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should fail on wrong credentials', () => {
const email = element.querySelector('#defaultForm-email') as HTMLInputElement;
email.value = 'vigneshm@intermx.com';
email.dispatchEvent(new Event('input'));
const password = element.querySelector('#defaultForm-pass') as HTMLInputElement;
password.value = 'agira123';
password.dispatchEvent(new Event('input'));
fixture.detectChanges();
const service = debugElement.injector.get(AuthenticationService);
submitSpy = spyOn(service, 'logout');
debugElement.query(By.css('button.login-btn'))
.triggerEventHandler('click', null);
fixture.detectChanges();
expect(submitSpy).toHaveBeenCalled();
});
});
上面的代码是我对登录屏幕的规范和模拟,我意识到登录页面有太多的依赖项,在开始模拟它们时需要简化它们。
真正的问题是,每当我运行它时,第二个测试都会失败,并显示TypeError: Cannot set property 'value' of null
.
我不确定为什么 DOM 在测试时不可用,我应该等待 DOM 或 Angular 准备好?或者是别的什么?
解决方案
使用 vsc 并安装 simon 测试插件。现在右键单击要为其编写单元测试的组件。选择选项生成测试。它将生成一个包含所有依赖项的规范文件。现在你复制粘贴你上面文件的测试用例。
推荐阅读
- exception - 在控制台应用程序中解析 ILogger 时出错
- python - 创建一个包含字典的列表,其值是从不同的列表中顺序选择的
- c++ - osstringstream 抛出表达式必须是左值或函数指示符错误
- cron - 为什么我的 GKE cronjob 在运行 `echo` 后没有退出?
- c# - HttpContext.Current.GetOwinContext().Authentication.Challenge() 不打开 adfs 页面
- c++ - 所有按钮都应该包含对 MVC 代码 (C++) 中控制器的引用吗?
- javascript - 将类名添加到数据表的 td(列)
- javascript - 如何修复 Google Chrome 浏览器以从服务器获取所有文件?
- r - 如果在多个其他数据框中找到公共变量,如何将新列添加到数据框中
- model-view-controller - 具有很多节点的 Highcharts 组织结构图看起来不太好