15、数据过滤与搜索功能实现指南

数据过滤与搜索功能实现指南

在数据处理与展示的过程中，过滤和搜索功能是提升用户体验和数据处理效率的关键。本文将详细介绍如何实现数据的分页、过滤和搜索功能，以及如何通过测试驱动开发（TDD）的方式确保功能的正确性和稳定性。

1. 多客户数据渲染测试

首先，我们要添加一个测试来验证系统是否能正确渲染多个客户数据。在文件顶部定义两个客户的数据：

const twoCustomers = [
  { id: 1, firstName: 'A', lastName: 'B', phoneNumber: '1' },
  { id: 2, firstName: 'C', lastName: 'D', phoneNumber: '2' }
];

然后编写测试用例：

it('renders multiple customer rows', async () => {
  window.fetch.mockReturnValue(fetchResponseOk(twoCustomers));
  await renderAndWait(<CustomerSearch />);
  const rows = elements('table tbody tr');
  expect(rows[1].childNodes[0].textContent).toEqual('C');
});

为了让测试通过，我们需要修改 JSX 代码，使其能够遍历每个客户数