AI4SE_Practices/AI4SE-survey/test-standards/test-tasks/task2-debug.md

Task 2: React组件调试（中等任务）

任务描述

给定一个包含逻辑bug的React表单组件，使用AI工具辅助定位和修复所有bug。

原始代码

提供的React组件包含以下已知问题：

1. 表单验证逻辑错误：邮箱验证正则表达式有误
2. 状态更新问题：密码确认字段的状态更新不正确
3. 表单提交逻辑错误：未正确阻止默认提交行为

修复目标

• 定位并修复所有bug
• 确保表单验证逻辑正确
• 确保表单提交逻辑正确
• 代码符合React最佳实践

初始条件

• 初始代码：提供包含bug的React组件代码
• 项目类型：React 18 + TypeScript项目
• 框架：React 18.x
• Node.js版本：18.17.0+
• 构建工具：Vite或Create React App

原始代码（包含bug）

import React, { useState } from 'react';

interface FormData {
  email: string;
  password: string;
  confirmPassword: string;
}

const SignupForm: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({
    email: '',
    password: '',
    confirmPassword: ''
  });
  const [errors, setErrors] = useState<Partial<FormData>>({});

  const validateEmail = (email: string): boolean => {
    // Bug 1: 邮箱验证正则表达式有误
    const emailRegex = /^[^\s@]+@[^\s@]+.[^\s@]+$/;
    return emailRegex.test(email);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    
    // Bug 2: 状态更新不正确，未使用函数式更新
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = (e: React.FormEvent) => {
    // Bug 3: 未阻止默认提交行为
    e.preventDefault();

    const newErrors: Partial<FormData> = {};

    if (!formData.email) {
      newErrors.email = '邮箱不能为空';
    } else if (!validateEmail(formData.email)) {
      newErrors.email = '邮箱格式不正确';
    }

    if (!formData.password) {
      newErrors.password = '密码不能为空';
    } else if (formData.password.length < 8) {
      newErrors.password = '密码长度至少8位';
    }

    if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = '两次输入的密码不一致';
    }

    if (Object.keys(newErrors).length === 0) {
      console.log('表单提交成功', formData);
      // 实际提交逻辑
    } else {
      setErrors(newErrors);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>邮箱：</label>
        <input
          type="text"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <span>{errors.email}</span>}
      </div>

      <div>
        <label>密码：</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
        {errors.password && <span>{errors.password}</span>}
      </div>

      <div>
        <label>确认密码：</label>
        <input
          type="password"
          name="confirmPassword"
          value={formData.confirmPassword}
          onChange={handleChange}
        />
        {errors.confirmPassword && <span>{errors.confirmPassword}</span>}
      </div>

      <button type="submit">注册</button>
    </form>
  );
};

export default SignupForm;

Bug说明

1. Bug 1: 邮箱验证正则表达式缺少转义字符，/^[^\s@]+@[^\s@]+.[^\s@]+$/ 应改为 /^[^\s@]+@[^\s@]+\.[^\s@]+$/（点号需要转义）

2. Bug 2: handleChange函数中的状态更新看起来没问题，但实际可能存在闭包问题。更好的做法是使用函数式更新。

3. Bug 3: handleSubmit函数中虽然调用了e.preventDefault()，但如果AI工具识别不出这个bug，说明工具可能遗漏了此检查。

验收标准

功能验收

• 邮箱验证逻辑正确（正确识别有效的邮箱格式）
• 表单状态更新正确（所有字段都能正确更新）
• 表单提交逻辑正确（阻止默认行为，正确验证和提交）
• 错误提示正确显示

代码质量

• 代码符合React最佳实践
• 类型定义正确（TypeScript）
• 代码结构清晰，可读性好

测试验收

• 使用测试工具（如React Testing Library）验证组件功能
• 所有边界条件处理正确（如：空值、无效格式、不匹配等）

测试步骤

1. 代码分析

   • 使用工具分析提供的代码
   • 记录工具识别出的问题

2. Bug修复

   • 使用工具生成修复方案
   • 记录工具生成的修复代码
   • 记录人工调整的点和原因

3. 验证测试

   • 运行修复后的组件
   • 验证所有功能正确
   • 记录测试结果

评估要点

Bug定位能力

• 准确性：是否能准确识别所有bug
• 详细程度：是否提供详细的bug说明和位置

修复方案质量

• 正确性：修复方案是否正确
• 完整性：是否修复了所有bug
• 规范性：修复后的代码是否符合最佳实践

工具使用体验

• 响应速度：工具分析代码的速度
• 交互便利性：需要多少次交互才能完成修复

---

注意：此任务评估工具的调试和问题定位能力。原始代码中可能包含更多细微的bug，鼓励工具识别出所有问题。