在html中进行方法调用时使用茉莉角测试组件

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

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

预期“在无效日期创建的”为“ 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);
    });
  }));

但是都返回上述错误。我该如何解决？

Answer 1

在模板表达式中调用方法被认为是angular的不良做法。因此，您可能首先要避免这种情况。

您可以在此处使用Angular Pipe，它将把您的日期转换成您想要的格式，并且您可以测试管道的转换方法