angular - 如何在自定义组件的角度测试期间指定 ngModel 和 name 属性
问题描述
我是使用角度的新手。
我创建了一个实现的自定义组件,ControlValueAccessor
以便为将要使用它的开发人员提供价值。以下是它的使用示例
<app-date [label]="'Fecha 2'" name='date1' [(ngModel)]="formulario.date2"
[hidden]="true"></app-date>
我为组件编写了这个测试:
import {async, ComponentFixture, ComponentFixtureAutoDetect, TestBed} from '@angular/core/testing';
import {FormsModule} from '@angular/forms';
import {BsDatepickerConfig, BsLocaleService} from 'ngx-bootstrap';
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {CUSTOM_DATE_CONTROL_VALUE_ACCESSOR, DateComponent} from './date.component';
import {UiOmdModule} from '../ui-omd.module';
const date = new Date();
describe('DateComponent', () => {
let component: DateComponent;
let fixture: ComponentFixture<DateComponent>;
let label;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [],
imports: [
FormsModule,
UiOmdModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA, CUSTOM_DATE_CONTROL_VALUE_ACCESSOR],
providers: [
BsDatepickerConfig,
BsLocaleService,
{provide: ComponentFixtureAutoDetect, useValue: true}
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DateComponent);
component = fixture.componentInstance;
component.value = date;
// fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('test default values', () => {
expect(component.editable).toBe(true);
expect(component.hidden).toBe(false);
expect(component.showWeekNumbers).toBe(false);
expect(component.format).toBe('YYYY-MM-DD');
});
it('test component contains a label DOM element', () => {
label = fixture.nativeElement.querySelector('label');
expect(label).toBeTruthy();
});
});
在上面的代码中,我们可以看到名为 test 的测试'test default values'
,它可以轻松访问自定义组件的属性。
此时的问题是:如何为这个测试提供一个ngModel和名称?
解决方案
为了提供一种允许我测试自定义组件的机制,我在测试中创建了另一个使用测试组件本身的组件。使用@ViewChild
I can access to element in test
@Component( {
selector: 'app-poc-criteria-select',
template: '<app-criteria-select ' +
' [(ngModel)]="listaOtdelc" ' +
' [allElements]="allElementsForTest" ' +
' name="listaOtdelc" ' +
' [elementId]="\'otdelc\'" ' +
' [title]="\'Lista de tabla OTDE de LC\'" ' +
' [brand]="\'LC\'" ' +
' [table]="\'OTDE\'"> ' +
' </app-criteria-select> '
})
class CriteriaSelectSpecComponent implements OnInit {
listaOtdelc;
isHidden = false;
allElementsForTest: boolean;
@ViewChild(CriteriaSelectComponent) componentToTest: CriteriaSelectComponent;
ngOnInit(): void {
}
}
推荐阅读
- swift - 键盘显示时如何以编程方式移动StatView
- javascript - 将数据传递给路由导航 React Native
- typescript - 如何正确模拟 Jest 的一些方法类?
- azure - 如何确定事件中心每秒传入的消息?
- flutter - Flutter 为页面设置背景图片
- blazor - 如何在 Blazor SPA 中动态添加元标记
- ssl - apache nifi 中的 SSL 上下文服务
- c# - 循环收集和连接
- excel - UserForm01.Show 代码中的错误 91“对象变量或未设置块变量”
- sql - 我无法使用外键关系来整理我的数据。截断子数据后被截断