21、测试驱动GraphQL及构建Logo解释器的开发探索

测试驱动GraphQL及构建Logo解释器的开发探索

一、测试驱动GraphQL整合

1.1 完善CustomerHistory组件

在 CustomerHistory 组件中，为了处理不同状态，需要添加一些代码逻辑。在现有 return 语句之前添加如下代码：

if (status === 'SUBMITTING')
  return <div id='loading'>Loading</div>;

同时，为了测试错误发生时的情况，添加如下测试代码：

describe('failed', () => {
  it('displays an error message', () => {
    renderWithStore(<CustomerHistory />);
    store.dispatch({ type: 'QUERY_CUSTOMER_FAILED' });
    expect(container.firstChild.id).toEqual('error');
    expect(container.textContent).toEqual(
      'Sorry, an error occurred while pulling data from the server.'
    );
  });
});