更改Angular中每个单元测试的组件html模板

Question

是否有方法更改每个测试的组件html模板？

我在单元测试中创建了一个组件，我希望该组件的html模板在其他测试中有所不同。

我试图使用TestBed.overrideComponent(如代码所示(，但我得到了错误：

"；当测试模块已经实例化时，无法重写组件元数据"；

@Component({
template: `<div> <span *directive="let letter from ['x','y','z']"> </span> </div>`
})

class TestComponent {
isEnabled: any;
}

describe('Directive', () => {

let fixture: ComponentFixture<TestComponent>;
let element: DebugElement;
let component: TestComponent;

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestComponent, Directive],
});
});

it('should do something with the initial component template', () =>{ ... });

it('should do something with another template', () => {
fixture = TestBed.overrideComponent(TestComponent, {
set: {
template: `<div> <span *directive="let letter from ['a','b','c'] enabled:isEnabled "> </span> </div>`
}
})
.createComponent(TestComponent);
component = fixture.componentInstance;
component.isEnabled = true;
fixture.detectChanges();
...
});

});

Answer 1

您可以创建一个单独的组件来使用新的HTML模板进行测试，然后在单元测试期间创建并使用该组件。使用TestBed.createComponent((.

但是，如果您在测试期间更改组件的HTML模板，我觉得您可能会以错误的方式处理此问题。相反，您希望在HTML模板中使用变量，您希望使用组件字段，然后在单元测试开始时设置该字段的值。

你可以查看我在Udemy上的课程，了解更多关于Angular中的单元测试，包括测试HTML模板！