angular 在 html 中调用方法时使用 jasmine 测试组件

Question

我必须测试这种奇怪的情况。在我的 html 中，我有：

    <div id="date">
      <h5>
        {{ showFormattedDate(myDate) }}
      </h5>
    </div>

函数showFormattedDate()在.ts中定义如下：

  showFormattedDate(dateToFormat: string): string {
    return moment(dateToFormat).format('HH:mm DD/M/YYYY');
  }

现在我正在尝试对此进行测试，但我一直收到此错误：

Expected ' Created at Invalid date ' to be '12:23 29/5/2020'.

无效日期部分也是我在页面加载时在屏幕上看到的一秒钟，但我认为这是因为函数调用。

我试过用这两种方式测试它：

  it('should display the date correctly', async () => {
    fixture.detectChanges();
    // await fixture.whenStable();
    // await fixture.isStable();
    // await fixture.whenRenderingDone();

    expect(el.query(By.css('#date')).nativeElement.textContent).toContain(
      getTestData().date);
  });

  it('should display the date correctly (async)', async(() => {
    fixture.detectChanges();

    fixture.whenStable().then(() => {
      // wait for async getQuote
      fixture.detectChanges(); // update view with quote
      expect(el.query(By.css('#date')).nativeElement.textContent).toContain(getTestData().date);
    });
  }));

但都return上述错误。我该如何解决这个问题？

Answer 1

在模板表达式中调用方法在 angular.So 中被认为是不好的做法，您可能希望首先避免这种做法。

阅读 this 了解更多详情。

您可以在这里使用 Angular 管道，它将您的日期转换为您想要的格式，您可以测试管道的转换方法。

有关 Angular 管道用法的更多详细信息，请单击 here and to know how to test your angular pipe here is a good article。