16 KiB
16 KiB
name, overview, todos, isProject
| name | overview | todos | isProject | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Tool Module Test Plan | Create a comprehensive frontend functional test plan for the WeChat mini-program tool module, covering the hub page (tool_main/index.vue) and all 18 sub-pages under pages/tool/. |
|
false |
Tool 模块前端功能测试计划
一、测试范围
本测试计划覆盖微信小程序 Tool 模块的全部 19 个页面:
- 入口首页: pages/tool_main/index.vue
- 子页面 (18个): pages/tool/ 目录下全部
.vue文件
页面与路由清单
| 页面文件 | 路由路径 | 页面标题 | 分类 |
|---|
注意:Markdown 表格不便渲染,以列表替代:
食谱计算器
calculator.vue->/pages/tool/calculator(食谱计算器)calculator-result.vue->/pages/tool/calculator-result(营养计算结果)
AI 营养师
ai-nutritionist.vue->/pages/tool/ai-nutritionist(AI营养师)
食物百科
food-encyclopedia.vue->/pages/tool/food-encyclopedia(食物百科)food-detail.vue->/pages/tool/food-detail(食物详情)
营养知识
nutrition-knowledge.vue->/pages/tool/nutrition-knowledge(营养知识)nutrient-detail.vue->/pages/tool/nutrient-detail(营养素详情)
饮食打卡
checkin.vue->/pages/tool/checkin(打卡)checkin-publish.vue->/pages/tool/checkin-publish(饮食打卡)checkin-detail.vue->/pages/tool/checkin-detail(打卡详情)checkin-copy.vue->/pages/tool/checkin-copy(一键借鉴打卡)dietary-records.vue->/pages/tool/dietary-records(饮食记录)
社区帖子
post-detail.vue->/pages/tool/post-detail(帖子详情)
食谱
recipe-detail.vue->/pages/tool/recipe-detail(食谱详情)
用户与积分
my-profile.vue->/pages/tool/my-profile(我的)points-rules.vue->/pages/tool/points-rules(积分规则)invite-rewards.vue->/pages/tool/invite-rewards(邀请有礼)welcome-gift.vue->/pages/tool/welcome-gift(会员福利)
二、测试环境与前置条件
- 测试平台:微信开发者工具 + 真机(iOS / Android)
- 网络环境:WiFi 正常网络 + 弱网 (3G) + 断网
- 账号准备:已登录账号 / 未登录访客
- 后端接口:已部署测试环境 API(
tool/*全部接口可用) - 测试数据:至少 1 条已有计算结果、1 条打卡记录、1 条社区帖子
三、功能测试用例
3.1 Tool 首页 (tool_main/index.vue)
页面加载
- 页面打开后,并发调用
getRecommendedRecipes、getRecommendedKnowledge、getUserHealthStatus三个接口,数据正常展示 - 接口返回失败时(单个/全部),页面不白屏,其他模块正常展示
- 弱网环境下 loading 状态正常
用户信息区域
- 已登录:显示用户头像、昵称、健康档案状态
- 未登录:显示"请点击登录",点击触发登录弹窗
- 点击头像跳转到
/pages/tool/my-profile - 点击"打卡"按钮跳转到
/pages/tool/checkin
四宫格工具入口
- "食谱计算器" 跳转到
/pages/tool/calculator - "AI营养师" 跳转到
/pages/tool/ai-nutritionist - "食物百科" 跳转到
/pages/tool/food-encyclopedia - "营养知识" 跳转到
/pages/tool/nutrition-knowledge
推荐食谱区域
- 展示 2 条推荐食谱(封面图、标题)
- 点击食谱卡片跳转
/pages/tool/recipe-detail?id=xxx - 点击"更多"显示 toast "食谱列表功能开发中"
- 无数据时不展示该区域 / 展示空态
健康知识区域
- 展示 2 条推荐知识(标题、摘要)
- 点击知识条目跳转
/pages/tool/nutrition-knowledge?id=xxx - 点击"更多"跳转
/pages/tool/nutrition-knowledge
推广卡片
- "慢生活营养专家" 卡片正常展示
- 点击跳转
/pages/tool/welcome-gift
3.2 食谱计算器 (calculator.vue)
表单输入
- 性别选择(男/女)单选正常
- 年龄、身高、干体重、血肌酐输入框:只允许数字,限制合理范围
- 透析状态切换(是/否),选"是"后透析类型选项出现
- 透析类型(血液透析/腹膜透析)单选正常
- 所有必填项为空时,点击"开始计算"给出校验提示
计算提交
- 填写完整后点击"开始计算",调用
calculateNutrition接口(POST tool/calculator/calculate) - 接口返回成功后跳转到
/pages/tool/calculator-result?id=xxx - 接口返回失败时 toast 提示错误信息
- 重复点击防抖(按钮 loading 状态)
3.3 营养计算结果 (calculator-result.vue)
页面加载
- 携带
id参数进入,调用getCalculatorResult(id)获取数据 - Loading 状态展示正常
- 无结果 / id 无效时展示 error 状态
健康概览 Tab
- 展示 eGFR 值、体重、BMI、CKD 分期数据卡片
- 营养目标(蛋白质、热量、钠、钾、磷等)正确展示
- 食物份量列表正确展示
膳食计划 Tab
- Tab 切换正常(健康概览 / 膳食计划)
- 早餐、午餐、晚餐 三餐方案展示正确
- 每餐菜品名称、份量、图片展示
- 菜品图片加载(含 AI 生成图片、OSS 压缩图片)正常
- 温馨提示区域展示
操作按钮
- "采纳方案" 按钮调用
adoptNutritionPlan(resultId)(POST tool/calculator/adopt) - 采纳成功后提示并更新状态
- "联系营养师" 按钮跳转 AI 营养师或显示联系方式
3.4 AI 营养师 (ai-nutritionist.vue)
对话界面
- 页面打开后展示推广 banner
- 快捷问题列表展示,点击快捷问题自动发送
- 消息列表(scroll-view)正常滚动,新消息自动滚到底部
文字对话
- 输入文字后点击发送按钮,消息气泡出现(用户侧)
- AI 回复消息气泡出现(AI 侧),打字指示器展示
- 使用 Coze API 流程:
cozeChat->cozeRetrieveChat->cozeMessageList - 空消息不允许发送
语音输入
- 点击麦克风按钮开始录音
- 录音完成后上传语音 (
uploadFile) 并调用 ASR (createAsrTask->queryAsrStatus) - 语音识别结果转为文字并发送
- 录音授权拒绝时提示用户
图片发送
- 点击相机按钮选择/拍照图片
- 图片上传后通过 Coze 接口发送给 AI
- 图片预览功能正常
异常处理
- 网络断开时发送消息提示网络错误
- AI 回复超时处理
- 会话 ID 管理正常(多次对话保持上下文)
3.5 食物百科 (food-encyclopedia.vue)
- 页面加载调用
getFoodList接口,展示食物列表 - 顶部搜索框输入关键词,调用
searchFood接口 - 搜索防抖正常(不会每个字符触发请求)
- 横向分类滑动切换(全部/谷物/蔬菜/水果/肉类/海鲜)
- 切换分类后列表刷新
- 食物卡片展示:图片、名称、安全标签、营养信息
- 点击食物卡片跳转
/pages/tool/food-detail - 列表分页加载(上拉加载更多)
- 空搜索结果展示空态
3.6 食物详情 (food-detail.vue)
- 页面加载展示食物图片、分类、安全标签
- 关键营养素宫格展示
- 营养成分表完整展示
- "相似食物" 按钮功能
- 分享按钮功能正常
3.7 营养知识 (nutrition-knowledge.vue)
- Tab 切换:营养素 / 饮食指导 / 文章
- 各 Tab 调用
getKnowledgeList接口(type 参数不同) - 营养素列表展示,点击跳转
/pages/tool/nutrient-detail - 饮食指导列表展示
- 文章列表展示
- 列表分页(上拉加载更多)
- 携带
id参数进入时自动定位到对应内容
3.8 营养素详情 (nutrient-detail.vue)
- 页面通过本地营养素数据 map 渲染
- 展示:营养素头部信息、状态卡片、重要性、摄入建议、食物来源、风险提示、建议
- 底部免责声明展示
- 不存在的营养素名称进入时展示空态或提示
3.9 打卡首页 (checkin.vue)
- 积分展示区域,调用
getUserPoints接口 - 7 日连续打卡圈展示,调用
getCheckinStreak接口 - "积分规则"按钮跳转
/pages/tool/points-rules - "立即打卡"按钮跳转
/pages/tool/checkin-publish - 任务列表展示,调用
getCheckinTasks接口 - 兑换列表展示
- 底部提示 banner 展示
3.10 饮食打卡发布 (checkin-publish.vue)
图片上传
- 点击添加照片,打开相册/相机
- 最多上传 6 张图片
- 图片预览和删除功能
- 图片上传调用
uploadFile接口
餐次选择
- 早餐/午餐/晚餐/加餐 选择器正常
语音备注
- 录音功能正常(同 AI 营养师)
- 语音识别结果填入备注
AI 功能开关
- AI 视频生成开关切换
- 开启后提交时调用
createImageToVideoTask或createTextToVideoTask
提交
- 点击"发布"调用
submitCheckin接口(POST tool/checkin/submit) - 提交成功后跳转打卡详情或返回打卡首页
- 无图片时提示必须上传
- 防止重复提交
3.11 打卡详情 (checkin-detail.vue)
- 携带
id参数进入,调用getCheckinDetail(id) - 图片轮播(swiper)正常,底部图片计数器
- 餐次标签展示
- 作者信息、积分徽章展示
- 描述文本展示
- AI 营养分析卡片展示
- "分享到社区"按钮功能
3.12 一键借鉴打卡 (checkin-copy.vue)
- 原始记录卡片展示
- 照片网格选择(可勾选/取消勾选)
- 备注文本编辑
- AI 视频开关
- 取消/确认按钮
- 注意:当前
loadOriginalRecord为 TODO,需确认数据来源是否已接通
3.13 饮食记录 (dietary-records.vue)
- 自定义导航栏展示(
navigationStyle: "custom") - Tab 切换:全部 / 早餐 / 午餐 / 晚餐
- 调用
getCheckinList接口,切换 Tab 传不同mealType - 列表项展示:图片、餐次、备注、积分、AI 分析
- 上拉加载更多
- 空态展示(无记录时)
- 下拉刷新
3.14 社区帖子详情 (post-detail.vue)
内容展示
- 调用
getCommunityDetail(id)获取帖子 - 图片轮播、餐次标签、标题、评分、描述、标签展示
- 作者信息区、关注按钮
- 营养统计数据展示
- AI 评论展示
互动功能
- 点赞:调用
toggleLike,状态切换正常 - 收藏:调用
toggleCollect,状态切换正常 - 关注:调用
toggleFollow,状态切换正常 - "一键借鉴打卡"按钮跳转
/pages/tool/checkin-copy
评论功能
- 调用
getCommentList加载评论列表 - 底部输入框发表评论,调用
addComment - 评论成功后列表刷新
相关帖子
- 调用
getCommunityList展示相关帖子 - 点击相关帖子跳转对应详情
3.15 食谱详情 (recipe-detail.vue)
- 封面图展示
- 食谱信息(名称、难度徽章)展示
- 营养团队卡片展示
- 简介文本展示
- 营养数据宫格展示
- 膳食方案(早/午/晚)展示
- 注意事项列表展示
- 温馨提示展示
- 底部操作栏:点赞、收藏、打卡按钮
- 注意:当前
loadRecipeData为 TODO,需确认数据加载是否已接通
3.16 我的 (my-profile.vue)
- 用户头像、昵称展示
- 统计数据(打卡次数、积分、关注数)展示
- "我的健康" 区域展示
- "我的内容" 区域展示
- "工具与服务" 区域展示
- "设置" 区域展示
- 退出登录按钮功能
- 各导航项跳转正确
3.17 积分规则 (points-rules.vue)
- 页面为纯静态内容,scroll-view 滚动正常
- 展示区域:赚取规则、使用方式、温馨提示、注意事项
- 文字排版在不同机型上无溢出/截断
3.18 邀请有礼 (invite-rewards.vue)
- 邀请卡片展示
- 奖励盒子列表展示
- 邀请按钮功能(触发分享或复制链接)
- 海报按钮功能
- 权益说明列表展示
- 邀请步骤展示
- 注意:当前为静态占位数据,确认是否有接口接通
3.19 会员福利 (welcome-gift.vue)
- 礼品 banner 展示
- 礼品项列表展示
- 二维码展示
- 领取步骤说明
- "添加微信" 按钮功能(复制微信号或打开二维码)
- 免责声明展示
四、通用测试项(每页必测)
4.1 页面基础
- 页面标题正确(与 pages.json 配置一致)
- 返回按钮功能正常
- 页面下拉不出现橡皮筋效果(或符合预期)
4.2 登录态
- 未登录访问需登录页面时,弹出登录引导
- 登录后自动返回原页面并刷新数据
4.3 网络异常
- 断网时接口请求给出友好提示
- 弱网环境下 loading 态不丢失
- 恢复网络后可重试/刷新
4.4 UI 适配
- iPhone SE / iPhone 14 Pro Max / 小屏安卓 / 平板 屏幕适配
- 安全区域(底部 Home Indicator)适配
- 暗色模式适配(如支持)
- 长文本不溢出、不截断
4.5 性能
- 页面首屏加载时间 < 2s
- 列表页滚动流畅,无卡顿
- 图片懒加载正常
五、关键 API 接口清单
以下接口在前端测试中需确认可用:
首页
GET tool/home/recipesGET tool/home/knowledgeGET tool/home/health-status
食谱计算器
POST tool/calculator/calculateGET tool/calculator/result/{id}POST tool/calculator/adopt
AI 营养师 (通过 models-api.js)
- Coze 系列接口 (cozeChat / cozeRetrieveChat / cozeMessageList)
- ASR 接口 (createAsrTask / queryAsrStatus)
- 文件上传 (uploadFile)
打卡
POST tool/checkin/submitGET tool/checkin/listGET tool/checkin/detail/{id}GET tool/checkin/streakGET tool/checkin/tasksPOST tool/checkin/copyPOST tool/checkin/learn
食物百科
GET tool/food/searchGET tool/food/listGET tool/food/detail/{id}GET tool/food/similar/{id}
营养知识
GET tool/knowledge/listGET tool/knowledge/detail/{id}GET tool/knowledge/nutrient/{name}
社区
GET tool/community/detail/{id}GET tool/community/listPOST tool/community/likePOST tool/community/collectPOST tool/community/followPOST tool/community/commentGET tool/community/comment/list/{postId}
积分
GET tool/points/infoGET tool/points/rules
文件上传
POST tool/upload/imagePOST tool/upload/voice
六、已知待完善项
以下页面有 TODO/未接通功能,测试时需标注为"受限测试":
checkin-copy.vue:loadOriginalRecord为 TODO,数据加载待实现food-detail.vue:loadFoodData为空实现,静态数据recipe-detail.vue:loadRecipeData为 TODO,静态数据tool_main/index.vue: "食谱列表" 入口仅 toast 提示开发中invite-rewards.vue: 邀请统计为静态占位数据