我试图生成一个需要测试组件.spec.ts文件,为此,我需要在spec.ts脚本中创建一个内部组件。
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { InputShowComponent } from './input-show.component';
import { InputsModule } from '../../inputs.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule, By } from '@angular/platform-browser';
import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
@Component({
selector: "lib-test-input",
template: "<div></div>"
})
export class TestInputShowComponent {
}
describe("InputShowComponent", () => {
let component: InputShowComponent;
let fixture: ComponentFixture<InputShowComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
schemas: [ NO_ERRORS_SCHEMA],
imports: [
BrowserModule,
BrowserAnimationsModule
],
declarations: [ InputShowComponent ]
});
TestBed.overrideModule(InputsModule, {
set: {
declarations: [Test]
}
})
.compileComponents();
fixture = TestBed.createComponent(InputShowComponent);
component = fixture.debugElement.componentInstance;
component.ellipsisClass = "";
});
it('should create the component', () => {
expect(component).toBeTruthy();
});
it('should apply ellipsis class when mode is "ellipsis"', () => {
component.mode = 'ellipsis';
fixture.detectChanges();
const scrollingTextContent = fixture.debugElement.query(By.css('.ellipsis'));
expect(scrollingTextContent).toBeTruthy();
});
it('should apply table-td-data class when mode is "scrollable"', () => {
component.mode = 'scrollable';
fixture.detectChanges();
const scrollingTextContent = fixture.debugElement.query(By.css('.table-td-data'));
expect(scrollingTextContent).toBeTruthy();
});
it('should not apply any class by default', () => {
fixture.detectChanges();
const scrollingTextContent = fixture.debugElement.query(By.css('.ellipsis'));
expect(scrollingTextContent).toBeFalsy();
const tableTdDataContent = fixture.debugElement.query(By.css('.table-td-data'));
expect(tableTdDataContent).toBeFalsy();
});
it('should apply animation when content overflows the container', () => {
const offsetWidthSpy = spyOnProperty(component.scrollingTextContainer.nativeElement, 'offsetWidth', 'get').and.returnValue(100);
const textContentWidthSpy = spyOnProperty(component.scrollingTextContent.nativeElement, 'offsetWidth', 'get').and.returnValue(120);
component.ngAfterViewInit();
fixture.detectChanges();
expect(offsetWidthSpy).toHaveBeenCalled();
expect(textContentWidthSpy).toHaveBeenCalled();
// Add further expectations based on the animation behavior if needed
});
/* it('should set tooltip when the tooltip input is provided', () => {
const tooltipText = 'This is a tooltip';
component.tooltip = tooltipText;
fixture.detectChanges();
const tooltipAttribute = fixture.debugElement.query(By.css('[pTooltip]')).nativeElement.getAttribute('pTooltip');
expect(tooltipAttribute).toBe(tooltipText);
});*/
/*
it('should not set tooltip when the tooltip input is not provided', () => {
fixture.detectChanges();
const tooltipAttribute = fixture.debugElement.query(By.css('[pTooltip]')).nativeElement.getAttribute('pTooltip');
expect(tooltipAttribute).toBeFalsy();
});
it('should apply animation when content overflows the container', () => {
const offsetWidthSpy = spyOnProperty(component.scrollingTextContainer.nativeElement, 'offsetWidth', 'get').and.returnValue(100);
const textContentWidthSpy = spyOnProperty(component.scrollingTextContent.nativeElement, 'offsetWidth', 'get').and.returnValue(120);
component.ngAfterViewInit();
fixture.detectChanges();
expect(offsetWidthSpy).toHaveBeenCalled();
expect(textContentWidthSpy).toHaveBeenCalled();
// Add further expectations based on the animation behavior if needed
});
it('should not apply animation when content does not overflow the container', () => {
const offsetWidthSpy = spyOnProperty(component.scrollingTextContainer.nativeElement, 'offsetWidth', 'get').and.returnValue(120);
const textContentWidthSpy = spyOnProperty(component.scrollingTextContent.nativeElement, 'offsetWidth', 'get').and.returnValue(100);
component.ngAfterViewInit();
fixture.detectChanges();
expect(offsetWidthSpy).toHaveBeenCalled();
expect(textContentWidthSpy).toHaveBeenCalled();
// Add further expectations based on the animation behavior if needed
});*/
});
字符串
但对于组件
@Component({
selector: "lib-test-input",
template: "<div></div>"
})
export class TestInputShowComponent {}
型
VisualStudioCode提供错误:
当作为表达式调用时,无法解析类装饰器的签名。类型为“ClassDecoratorContext”的参数不能赋值给类型为“string”的> >参数|符号,符号|未定义“。
我做了一些测试和搜索,似乎是因为组件没有定义到模块,所以
我尝试扩展它并创建aa个新模块,但对于模块e也得到同样的错误:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestInputShowComponentComponent } from './test-input-show-component/test-input-show-component.component';
@NgModule({
declarations: [
TestInputShowComponentComponent
],
imports: [
CommonModule
]
})
export class TestUtilComponentModule { }
型
当作为表达式调用时,无法解析类装饰器的签名。类型为“ClassDecoratorContext”的参数不能分配给类型为“string”的参数|符号,符号|未定义'
这个错误似乎只有在我将模块添加到主模块时才能解决,但我不想导入它,因为它只用于测试。如何避免该错误?
2条答案
按热度按时间wwtsj6pe1#
使用与您拥有它相同的方式执行此操作,但不要导出它,可能会将其移动到
describe
内部。就像这样:
字符串
请确保您摆脱
export
关键字,这将导致问题。不需要export
,因为从这个文件外部不需要它。lrpiutwd2#
我解决了这个问题,错误发生时,我添加在tsconfig.json的包含
字符串
错误就在那一行:
型
删除这些行,错误将被修复。有谁能解释一下原因吗?