unit-testing - 如何使用茉莉花对具有基类的组件进行单元测试(How to unit test a component with a base class using jasmine)

Question

Can anybody advise on how I unit test a component in Angular 7 which extends from a base class?

(有人可以建议我如何对Angular 7中从基类扩展的组件进行单元测试吗？)

The component is a empty shell component with a single PageTitleCompont which simply displays the title of the page.

(该组件是一个空的Shell组件，只有一个PageTitleCompont，它仅显示页面标题。)

I have the following base and component class:

(我有以下基类和组件类：)

// PageTitle Component used in the UserShellComponent
export class PageTitleComponent {
  @Input() pageTitle: TitleHeader;
  @Input() $pageTitle: Observable<TitleHeader>;

  constructor(private translate: TranslateService) {}

}

// Base Class
export class BaseComponent {
  pageTitle = new PageTitle('', '');

  constructor(private translate: TranslateService) {}

  getTranslation(itemToTranslate: string): string {
    // Does some translation work
  }
}

// Component Class
export class UserShellComponent extends BaseComponent implements OnInit {
  constructor(translate: TranslateService) {
    super(translate);
  }

  ngOnInit() {
    this.pageTitle = new TitleHeader(this.getTranslation('PageTitle'));
  }
}

I created a simple jasmine test but keep getting the error saying Can't bind to 'pageTitle' since it isn't a known property of 'app-page-title'.

(我创建了一个简单的茉莉花测试，但始终收到错误消息“无法绑定到'pageTitle'，因为它不是'app-page-title'的已知属性。)

describe('UserShellComponent', () => {
  let component: UserShellComponent;
  let fixture: ComponentFixture<UserShellComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [UserShellComponent],
      imports: [],
      providers: [{ provide: TranslateService, useValue: jasmine.createSpy('translateService') }]
    }).compileComponents();
  }));

  beforeEach(() => {
    BaseShellComponent.prototype.getTranslation = jasmine.createSpy('getTranslation');
    BaseShellComponent.prototype.titleHeader = jasmine.createSpyObj('pageTitle', ['title', 'secondaryText']);

    fixture = TestBed.createComponent(UserShellComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Any help on this would be very much appreciated.

(任何帮助，将不胜感激。)

  ask by Cragly translate from so

Answer 1

等待大神答复