量角器和加载器的单击项目

Question

单击按钮时，我在测试加载程序的幻影时遇到了一些问题。

我有以下三个测试：

  it('#exigence1 - display a failing message on button fail ', () => {
    page.navigateTo();
    page.getButtonFail().click();
    expect(page.getErrorMessage()).toBeTruthy();
  });

  it('#exigence2 - display a loader on waiting list ', () => {
    page.navigateTo();
    page.getButtonLoad().click();
    expect(page.getLoader()).toBeTruthy();
  });

  it('#exigence3 - display a list of items on message ', () => {
    page.navigateTo();
    page.getButtonLoad().click();
    expect(page.getPokeList()).toBeTruthy();
  });

当我单击 getButtonLoad 时，我会在远程获取期间显示一个加载程序。我需要测试这个加载器是否出现在页面上，但是我之前的第二个测试没有通过。

这是我的实现：

 buttonClick() {
    this.showError = false;
    this.displayLoader = true;
    this.http.get('http://pokeapi.co/api/v2/pokemon/')
      .map(res => res.json())
      .subscribe(res => {
        this.pokemons = res.results;
        this.displayLoader = false;
      });
  }

用我的页面定义：

export class ProtractorDemonstrationPage {
  navigateTo() {
    return browser.get('/');
  }

  getPokeList() {
    return element(by.css('.poke-list')).getText();
  }

   getButtonLoad() {
    return element(by.css('.btn-primary'));
  }

   getButtonFail() {
    return element(by.css('.btn-warn'));
  }

   getErrorMessage() {
    return element(by.css('.panel-danger')).getText();
  }

    getLoader() {
    return element(by.css('.loader')).getText();
  }
}

我完全不知道如何进行验证这个案例的测试。

编辑：我看到的是，单击时，单击时正在等待函数完成其内容，然后再执行下一条指令。这是我的问题。我需要点击，不要等待异步的东西，直接检查我的加载器在那里。

编辑 2：这是函数的代码：

 load() {
    this.showError = false;
    this.displayLoader = true;
    this.http.get('http://pokeapi.co/api/v2/pokemon/')
      .map(res => res.json())
      .subscribe(res => {
        this.pokemons = res.results;
        this.displayLoader = false;
      });
  }

有

Answer 1

问题在于 page.getLoader() 和您的期望语句。通过 page.getLoader() 调用，您将返回该元素的文本，但在您的期望语句中，您期望此函数返回一个布尔值。

你应该改变你的 page.getLoader() 来返回：

return element(by.css('.loader')).isDisplayed();

或使用 keep using .getText() 但将您的期望语句更改为：

expect(page.getLoader()).toBe('This string');