fengketrade/doc/ccblife-frontend-testing-guide.md

# 建行生活前端测试指南

## 测试环境准备

### 1. 前端项目结构确认

确认以下文件已正确创建：

```
frontend/
├── sheep/platform/
│   ├── provider/ccblife/
│   │   ├── index.js          ✅ 已创建
│   │   └── api.js             ✅ 已创建
│   ├── index.js               ✅ 已修改（添加建行支持）
│   └── pay.js                 ✅ 已修改（添加建行支付）
├── pages/ccblife/
│   └── index.vue              ✅ 已创建
├── static/
│   └── ccb-test.html          ✅ 已创建（测试页面）
└── pages.json                 ✅ 已修改（添加路由配置）
```

### 2. 检查文件完整性

```bash
cd /Users/billy/Code/fengketrade.com/frontend

# 检查建行模块文件
ls -l sheep/platform/provider/ccblife/

# 检查建行页面
ls -l pages/ccblife/

# 检查测试页面
ls -l static/ccb-test.html
```

## 测试方法

### 方法一：使用 HBuilderX（推荐）

这是 uni-app 项目的标准开发方式。

#### 步骤 1: 打开项目

1. 启动 HBuilderX
2. 文件 → 打开目录 → 选择 `frontend` 目录
3. 等待项目加载完成

#### 步骤 2: 运行到浏览器

1. 点击工具栏的"运行"按钮
2. 选择"运行到浏览器" → "Chrome"（或其他浏览器）
3. 等待编译完成，会自动打开浏览器

#### 步骤 3: 访问测试页面

在浏览器中访问：
```
http://localhost:8080/static/ccb-test.html
```

或访问建行专属页面：
```
http://localhost:8080/#/pages/ccblife/index
```

#### 步骤 4: 模拟建行环境

在 URL 后添加参数模拟建行环境：
```
http://localhost:8080/#/pages/index/index?from=ccblife&ccbParamSJ=test123
```

### 方法二：使用 Vite 开发服务器

如果项目配置了 Vite，可以使用命令行运行。

#### 步骤 1: 安装依赖

```bash
cd frontend
npm install
```

#### 步骤 2: 启动开发服务器

```bash
# 如果有 dev:h5 脚本
npm run dev:h5

# 或者直接使用 vite
npx vite
```

#### 步骤 3: 访问测试页面

默认地址：`http://localhost:3000`（端口以实际为准）

### 方法三：使用测试服务器

将前端代码部署到测试服务器。

#### 步骤 1: 访问后端静态测试页面

```
http://fengketrade.test/ccblife-demo.html
```

这个页面已经在后端 public 目录创建，可以直接访问。

#### 步骤 2: 访问测试接口

```
http://fengketrade.test/addons/shopro/ccbtest
```

## 测试项目清单

### 1. 模块加载测试

#### 测试目标
验证建行模块是否正确导入和初始化。

#### 测试步骤
1. 打开浏览器开发者工具（F12）
2. 访问测试页面
3. 在 Console 中输入：

```javascript
// 检查 sheep 对象
console.log(window.$shop || window.sheep);

// 检查平台对象
console.log(sheep.$platform);

// 检查平台名称
console.log(sheep.$platform.name);

// 检查提供商
console.log(sheep.$platform.provider);
```

#### 预期结果
- 在非建行环境：`name` 应该是 `H5` 或 `WechatOfficialAccount`
- 在建行环境：`name` 应该是 `CcbLife`，`provider` 应该是 `ccb`

### 2. 环境检测测试

#### 测试目标
验证系统能否正确识别建行生活 App 环境。

#### 测试步骤

**情况 1：普通浏览器**
```
访问: http://localhost:3000/
预期: 识别为 H5 或 WechatOfficialAccount 环境
```

**情况 2：模拟建行环境（URL 参数）**
```
访问: http://localhost:3000/?from=ccblife
预期: 识别为 CcbLife 环境
```

**情况 3：模拟建行参数**
```
访问: http://localhost:3000/?ccbParamSJ=test123
预期: 识别为 CcbLife 环境
```

#### 验证方法

在 Console 中执行：
```javascript
// 方法1：通过平台对象
console.log(sheep.$platform.provider === 'ccb' ? '建行环境' : '非建行环境');

// 方法2：直接导入模块（在实际项目中）
// import CcbLifePlatform from '@/sheep/platform/provider/ccblife/index';
// console.log(CcbLifePlatform.isInCcbApp);
```

### 3. 页面路由测试

#### 测试目标
验证建行专属页面是否可以正常访问。

#### 测试步骤

1. **访问首页**
```
http://localhost:3000/#/pages/index/index
```

2. **访问建行专属页面**
```
http://localhost:3000/#/pages/ccblife/index
```

3. **使用路由跳转**

在任意页面的 Console 中执行：
```javascript
uni.navigateTo({
    url: '/pages/ccblife/index'
});
```

#### 预期结果
- 页面能正常加载
- 显示"建行生活"标题
- 导航栏背景色为建行红（#F51C13）

### 4. API 接口测试

#### 测试目标
验证前端能否正确调用后端建行接口。

#### 测试步骤

在 Console 中执行：

```javascript
// 测试1：URL跳转登录接口
fetch('/addons/shopro/ccblife/login?ccbParamSJ=test')
    .then(res => res.json())
    .then(data => console.log('登录接口:', data))
    .catch(err => console.error('登录接口错误:', err));

// 测试2：环境检查
fetch('/addons/shopro/ccbtest/checkConfig')
    .then(res => res.json())
    .then(data => console.log('配置检查:', data))
    .catch(err => console.error('配置检查错误:', err));

// 测试3：数据库检查
fetch('/addons/shopro/ccbtest/checkDatabase')
    .then(res => res.json())
    .then(data => console.log('数据库检查:', data))
    .catch(err => console.error('数据库检查错误:', err));
```

#### 预期结果
- 接口返回 JSON 格式数据
- 不应该出现 404 或 500 错误

### 5. 支付功能测试

#### 测试目标
验证建行支付流程是否正常。

#### 前置条件
- 已登录用户
- 有可支付的订单

#### 测试步骤

1. **创建测试订单**（可选）
```
访问: http://fengketrade.test/#/pages/goods/index?id=1
添加商品到购物车 → 去结算 → 提交订单
```

2. **选择建行支付**

在支付页面，如果在建行环境中，应该看到"建行支付"选项。

3. **模拟支付调用**

在 Console 中执行：
```javascript
// 注意：这需要有实际的订单
sheep.$platform.pay('ccb', 'goods', 'ORDER202501170001');
```

#### 预期结果
- 非建行环境：提示"请在建行生活App内使用建行支付"
- 建行环境（模拟）：尝试调用 JSBridge

### 6. 日志和错误测试

#### 测试目标
验证错误处理和日志记录是否正常。

#### 测试步骤

1. **查看 Console 日志**

启动应用后，在 Console 中应该看到：
```
[CcbLife] 初始化完成, 是否在建行App内: false
```

2. **触发错误**

在非建行环境调用建行功能：
```javascript
// 应该输出友好的错误提示
sheep.$platform.useProvider('ccb').getUserInfo()
    .catch(err => console.log('预期的错误:', err));
```

#### 预期结果
- 有清晰的日志输出
- 错误信息友好可读

## 使用静态测试页面

访问 `http://fengketrade.test/static/ccb-test.html`（或前端开发服务器对应地址）

### 测试页面功能

1. **环境信息显示**
   - 自动检测当前平台
   - 显示是否在建行App内
   - 显示 User-Agent 和 URL 参数

2. **模块加载测试**
   - 点击"测试模块导入"按钮
   - 检查建行模块文件是否存在

3. **环境检测测试**
   - 点击"测试环境检测"按钮
   - 查看多种检测方式的结果

4. **URL参数测试**
   - 点击"测试URL参数解析"按钮
   - 验证参数解析功能

### 模拟建行环境

在测试页面 URL 后添加参数：
```
?from=ccblife&ccbParamSJ=testdata123
```

完整示例：
```
http://localhost:3000/static/ccb-test.html?from=ccblife&ccbParamSJ=testdata123
```

## 常见问题排查

### 问题1：页面打不开

**症状**：访问建行页面显示 404

**排查步骤**：
1. 检查 `pages.json` 是否正确配置
```bash
grep -A 10 "ccblife" pages.json
```

2. 检查页面文件是否存在
```bash
ls -l pages/ccblife/index.vue
```

3. 重新编译项目（在 HBuilderX 中点击"停止" → "运行"）

### 问题2：模块导入失败

**症状**：Console 显示 "Cannot find module" 错误

**排查步骤**：
1. 检查文件路径
```bash
ls -l sheep/platform/provider/ccblife/
```

2. 检查文件内容是否有语法错误
```bash
node --check sheep/platform/provider/ccblife/index.js
```

3. 清除缓存重新编译

### 问题3：平台识别错误

**症状**：在建行环境中仍识别为 H5

**排查步骤**：
1. 检查 URL 参数
```javascript
console.log(window.location.search);
```

2. 检查 User-Agent
```javascript
console.log(navigator.userAgent);
```

3. 手动测试检测函数
```javascript
const urlParams = new URLSearchParams(window.location.search);
console.log('from参数:', urlParams.get('from'));
console.log('ccbParamSJ参数:', urlParams.get('ccbParamSJ'));
```

### 问题4：API 请求失败

**症状**：接口返回 404 或跨域错误

**排查步骤**：
1. 检查后端服务是否运行
```bash
curl http://fengketrade.test/addons/shopro/ccbtest
```

2. 检查 `.env` 配置
```bash
cat .env | grep SHOPRO_BASE_URL
```

3. 检查跨域配置（如果前后端分离）

## 真机测试

### iOS 设备测试

1. **使用 Safari 调试**
   - Mac 上打开 Safari → 开发 → [设备名] → [页面]
   - 可以查看 Console 和调试

2. **HBuilderX 真机运行**
   - 连接 iOS 设备
   - 运行 → 运行到手机或模拟器 → iOS

### Android 设备测试

1. **使用 Chrome 调试**
   - 电脑 Chrome 访问 `chrome://inspect`
   - 查看设备上的页面

2. **HBuilderX 真机运行**
   - 连接 Android 设备（开启 USB 调试）
   - 运行 → 运行到手机或模拟器 → Android

## 性能测试

### 加载时间

在 Console 中查看：
```javascript
// 查看性能数据
console.log(performance.timing);

// 计算加载时间
const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
console.log('页面加载时间:', loadTime + 'ms');
```

### 内存使用

使用 Chrome DevTools：
1. Performance → 录制
2. 操作页面
3. 停止录制
4. 查看内存使用情况

## 测试报告模板

```markdown
## 建行生活前端测试报告

**测试日期**: 2025-01-17
**测试环境**: [开发环境/测试环境]
**测试人员**: [姓名]

### 测试结果

| 测试项 | 状态 | 备注 |
|-------|------|------|
| 模块加载 | ✅ 通过 | 所有模块正常加载 |
| 环境检测 | ✅ 通过 | 正确识别建行环境 |
| 页面路由 | ✅ 通过 | 页面可以正常访问 |
| API接口 | ✅ 通过 | 接口返回正常 |
| 支付功能 | ⏳ 待测试 | 需要建行真机环境 |

### 发现的问题

1. [问题描述]
   - **严重程度**: 高/中/低
   - **复现步骤**: ...
   - **预期行为**: ...
   - **实际行为**: ...

### 建议

1. [建议内容]
```

---

*文档版本：1.0.0*
*最后更新：2025-01-17*
*作者：Billy*