Question

我正在尝试测试我的一个功能模块，但我正在努力。我的上一次测试失败，因为间谍不认为该方法被调用。即使我在订阅块之外移动this.translate.use(this.currentLanguage.i18n)调用也不行。

这是功能组件：

export class LanguagesComponent implements OnDestroy, OnInit {

  public languages = [
    {
      id: '0',
      name: this.translate.stream('LANGUAGES.SWEDISH'),
      i18n: 'sv',
      flag: {
        src: './assets/img/sv.svg'
      }
    },
    {
      id: '1',
      name: this.translate.stream('LANGUAGES.ENGLISH'),
      i18n: 'en',
      flag: {
        src: './assets/img/en.svg'
      }
    }
  ];

  public currentLanguage: any;

  private storageSubscription: Subscription;

  constructor(
    private cs: ClientStorage,
    private notifications: NotificationsApi,
    private router: Router,
    private translate: TranslateService
  ) {}

  ngOnInit() {

    const storedLanguage: any = this.cs.getItem(AppConstants.currentLanguage);

    this.currentLanguage = FindObjectByQuery(this.languages, 'i18n', storedLanguage);

    // Listen for when the language changes from other places than this component
    this.storageSubscription = this.cs.logger$
      .filter(data => data && data.key === AppConstants.currentLanguage)
      .subscribe((currentLanguage: any) => {

        if (currentLanguage) {

          this.currentLanguage = FindObjectByQuery(this.languages, 'i18n', currentLanguage.value);

          // Set the current language to use
          this.translate.use(this.currentLanguage.i18n);
        }
      }
    );
  }

  ngOnDestroy() {
    this.storageSubscription.unsubscribe();
  }

  selectLanguage(language: any): void {

    this.cs.setItem(AppConstants.currentLanguage, language.i18n);

    this.router.navigate(['dashboard']);

    this.notifications.newNotification({message: this.translate.instant('NOTIFICATIONS.LANGUAGES.CHANGED'), theme: 'success'});
  }
}

到目前为止，这些是我的测试：

describe('[UNIT] LanguagesComponent', () => {

  let component: LanguagesComponent;
  let fixture: ComponentFixture<LanguagesComponent>;
  let translate: Location;

  beforeEach(() => {

    TestBed.configureTestingModule({
      imports: [
        ModuleImports
      ],
      providers: [
        TranslateService
      ],
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [LanguagesComponent, DummyComponent]
    });

    fixture = TestBed.createComponent(LanguagesComponent);
    component = fixture.componentInstance;
    translate = TestBed.get(TranslateService);

    // Make sure ngOnInit runs
    fixture.detectChanges();
  });

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

  it('should have a current language when the component has loaded', () => {
    expect(component.currentLanguage).toBeTruthy();
  });

  it('should have the needed properties in the current language', () => {

    const currentLanguage = component.currentLanguage;

    expect(currentLanguage.id).toBeTruthy();
    expect(currentLanguage.name).toBeTruthy();
    expect(currentLanguage.i18n).toBeTruthy();
    expect(currentLanguage.flag.src).toBeTruthy();
  });

  it('should call the use method of TranslateService with the current language i18n property', () => {

    const spy = spyOn(translate, 'use').and.callThrough();

    expect(spy).toHaveBeenCalledWith(component.currentLanguage.i18n);
  });
});

Answer 1

在你的测试中你创建了一个间谍，然后你不情愿地试图验证这个电话。没有电话。

这可能有两种可能的解决方案。 1）在fixture.detect在beforeEach中更改之前移动你的spyOn 2）创建间谍后，调用/触发适当的方法，这将触发预期的呼叫。在这种情况下，需要调用fixture.detectChanges。

注意 - 我没有针对任何其他问题运行测试，但基本问题是间谍创建和间谍使用之间缺少调用。

Angular - 间谍不识别被调用的函数

1 个答案: