typescript 测试个人Angular 库,创建组件或模块时出错

t2a7ltrp  于 2023-08-07  发布在  TypeScript
关注(0)|答案(2)|浏览(124)

我试图生成一个需要测试组件.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”的参数|符号,符号|未定义'
这个错误似乎只有在我将模块添加到主模块时才能解决,但我不想导入它,因为它只用于测试。如何避免该错误?

wwtsj6pe

wwtsj6pe1#

使用与您拥有它相同的方式执行此操作,但不要导出它,可能会将其移动到describe内部。
就像这样:

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';


describe("InputShowComponent", () => {
  let component: InputShowComponent;
  let fixture: ComponentFixture<InputShowComponent>;

  @Component({
    selector: "lib-test-input",
    template: "<div></div>"
  })
  class TestInputShowComponent {

  }

  beforeEach(() => {
    ...

字符串
请确保您摆脱export关键字,这将导致问题。不需要export,因为从这个文件外部不需要它。

lrpiutwd

lrpiutwd2#

我解决了这个问题,错误发生时,我添加在tsconfig.json的包含

/* To learn more about this file see: https://angular.io/config/tsconfig. */
    {
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitOverride": true,
        "noPropertyAccessFromIndexSignature": true,
        "paths": {
          "incas-lib": [
            "dist/incas-lib"
          ]
        },
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "ES2022",
        "module": "ES2022",
        "useDefineForClassFields": false,
        "lib": [
          "ES2022",
          "dom"
        ]
      },
      "include": [
        "./projects/incas-lib/src/public-api.ts"
      ],
      "angularCompilerOptions": {
        "enableI18nLegacyMessageIdFormat": false,
        "strictInjectionParameters": true,
        "strictInputAccessModifiers": true,
        "strictTemplates": true
      }
    }

字符串
错误就在那一行:

"include": [
     "./projects/incas-lib/src/public-api.ts"
],


删除这些行,错误将被修复。有谁能解释一下原因吗?

相关问题