AI-TDD

项目介绍：AI + TDD

AI + TDD 是一个结合人工智能（AI）和测试驱动开发（TDD）的方法。这个项目通过一个命令行工具（CLI）与开源的 GPT 模型结合，使开发者可以通过编写测试，让系统自动生成满足测试的代码。

项目的基本理念

AI-TDD 的核心理念是由开发者编写测试，随后 GPT 会生成代码，直到这些代码能够通过测试。这种方式通过向 GPT 提供测试套件的提示，使其能够精准地生成代码，从而提升开发效率。

项目设置

要开始使用 AITDD，用户需要按照以下步骤进行设置：

安装工具环境：AITDD 依赖于 Bun 运行环境，用户需要确保首先安装最新版本的 Bun。

可以通过以下命令安装 AITDD：
```
curl -sSL https://raw.githubusercontent.com/di-sukharev/AI-TDD/master/install.sh | bash
```
获取并设置 API 密钥：用户需要从 OpenAI 获取 API 密钥，并确保其账户中添加了支付信息以便于 API 的使用。密钥设置命令如下：
```
aitdd config set OPENAI_API_KEY <your_api_key>
```
配置测试命令：用户需要设置运行测试的指令，例如：
```
aitdd config set RUN_TESTS "npm run test"
```

值得注意的是，API 密钥安全地存储在用户本地的 ~/.aitdd/config 文件中。

示例展示

以下是一个使用 Jest 和 Testing Library 编写的前端测试套件示例，AITDD 可以轻松地通过这些测试：

import React from "react";
import { rest } from "msw";
import { setupServer } from "msw/node";
import { render, fireEvent, waitFor, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import Fetch from "../fetch";

// 设置 mock 服务器
const server = setupServer(
  rest.get("/greeting", (req, res, ctx) => {
    return res(ctx.json({ greeting: "hello there" }));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

// 测试用例：加载并显示问候语
test("loads and displays greeting", async () => {
  render(<Fetch url="/greeting" />);

  fireEvent.click(screen.getByText("Load Greeting"));

  await waitFor(() => screen.getByRole("heading"));

  expect(screen.getByRole("heading")).toHaveTextContent("hello there");
  expect(screen.getByRole("button")).toBeDisabled();
});

// 测试用例：服务器错误处理
test("handles server error", async () => {
  server.use(
    rest.get("/greeting", (req, res, ctx) => {
      return res(ctx.status(500));
    })
  );

  render(<Fetch url="/greeting" />);

  fireEvent.click(screen.getByText("Load Greeting"));

  await waitFor(() => screen.getByRole("alert"));

  expect(screen.getByRole("alert")).toHaveTextContent("Oops, failed to fetch!");
  expect(screen.getByRole("button")).not.toBeDisabled();
});

AITDD 使用 GPT-4（最新模型）生成的代码能够通过上面的测试用例，如下所示：

import React, { useState } from "react";

function Fetch({ url }) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  async function fetchData() {
    setLoading(true);
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error("Failed to fetch");
      const data = await response.json();
      setData(data.greeting);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div>
      {data && <h1 role="heading">{data}</h1>}
      {error && <div role="alert">{error}</div>}
      <button onClick={fetchData} disabled={loading}>
        Load Greeting
      </button>
    </div>
  );
}

export default Fetch;