bug-fix

🐛 Bug Fix Workflow - Bug修复工作流

从问题创建到拉取请求的完整Bug修复工作流程。

🚀 Commands - 命令

• /bug-fix - 启动Bug修复工作流
• /reproduce-bug - 重现Bug
• /root-cause - 根因分析
• /fix-verify - 修复验证

📋 Process - 修复流程

🔍 Before Starting - 开始前准备

1. GitHub Issue Creation - 创建GitHub问题

**Bug标题**: [组件/模块] 简短描述性标题

**环境信息**:
- 操作系统: Windows 11 / macOS 13 / Ubuntu 22.04
- 浏览器: Chrome 120 / Firefox 121 / Safari 17
- 应用版本: v2.1.0
- Node.js版本: v18.19.0

**重现步骤**:
1. 打开应用
2. 点击登录按钮
3. 输入有效凭据
4. 点击提交

**预期行为**: 用户应该成功登录并跳转到仪表板

**实际行为**: 显示"网络错误"，用户停留在登录页面

**错误信息**:

TypeError: Cannot read property 'token' of undefined at LoginComponent.handleLogin (login.component.ts:45)

**截图/录屏**: [附加相关截图或录屏]

**优先级**: High / Medium / Low
**标签**: bug, frontend, authentication

2. Git Branch Creation - 创建Git分支

# 创建并切换到功能分支
git checkout -b fix/login-token-error

# 或者使用更具描述性的分支名
git checkout -b fix/issue-123-login-authentication-error

🔧 Fix the Bug - 修复Bug

Step 1: Reproduce the Issue - 重现问题

# 1. 切换到问题分支
git checkout main
git pull origin main

# 2. 尝试重现Bug
npm start
# 按照问题描述的步骤操作

# 3. 确认问题存在
# 记录重现步骤和错误信息

Step 2: Write Failing Test - 编写失败测试

// 示例：为Bug编写测试用例
describe('LoginComponent', () => {
  it('should handle login with valid credentials', async () => {
    // 这个测试应该失败，因为Bug存在
    const mockUser = { username: 'test', password: 'password' };
    const result = await loginComponent.handleLogin(mockUser);
    
    expect(result.success).toBe(true);
    expect(result.token).toBeDefined();
    expect(result.user).toEqual(expect.objectContaining({
      username: 'test'
    }));
  });

  it('should handle undefined response gracefully', async () => {
    // 测试边界条件
    mockApiService.login.mockResolvedValue(undefined);
    
    const result = await loginComponent.handleLogin(mockUser);
    expect(result.success).toBe(false);
    expect(result.error).toBeDefined();
  });
});

Step 3: Implement the Fix - 实现修复

// 修复前的代码
async handleLogin(credentials: LoginCredentials) {
  try {
    const response = await this.authService.login(credentials);
    // Bug: 没有检查response是否存在
    localStorage.setItem('token', response.token);
    this.router.navigate(['/dashboard']);
  } catch (error) {
    this.showError('登录失败');
  }
}

// 修复后的代码
async handleLogin(credentials: LoginCredentials) {
  try {
    const response = await this.authService.login(credentials);
    
    // 修复: 添加响应验证
    if (!response || !response.token) {
      throw new Error('Invalid response from server');
    }
    
    localStorage.setItem('token', response.token);
    this.router.navigate(['/dashboard']);
    return { success: true, token: response.token, user: response.user };
  } catch (error) {
    console.error('Login error:', error);
    this.showError('登录失败: ' + error.message);
    return { success: false, error: error.message };
  }
}