Files
msh-system/.cursor/plans/tool_module_test_plan_4894ed78.plan.md

16 KiB
Raw Blame History

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/.
id content status
test-hub 测试 Tool 首页 (tool_main/index.vue): 数据加载、四宫格导航、推荐内容、登录态 completed
id content status
test-calculator 测试食谱计算器流程: calculator.vue 表单校验提交 -> calculator-result.vue 结果展示与采纳 completed
id content status
test-ai 测试 AI 营养师: 文字对话、语音输入(ASR)、图片发送、Coze API 集成 completed
id content status
test-checkin 测试打卡流程: checkin.vue 积分/连续打卡 -> checkin-publish.vue 发布 -> checkin-detail.vue 详情 -> dietary-records.vue 列表 -> checkin-copy.vue 借鉴 completed
id content status
test-food 测试食物百科: food-encyclopedia.vue 搜索/分类/列表 -> food-detail.vue 详情 completed
id content status
test-knowledge 测试营养知识: nutrition-knowledge.vue Tab切换/列表 -> nutrient-detail.vue 详情 completed
id content status
test-community 测试社区帖子: post-detail.vue 展示/点赞/收藏/评论/关注 completed
id content status
test-profile 测试用户与积分: my-profile.vue / points-rules.vue / invite-rewards.vue / welcome-gift.vue completed
id content status
test-common 通用测试: 登录态、网络异常、UI多机型适配、性能、页面标题与返回 completed
false

Tool 模块前端功能测试计划

一、测试范围

本测试计划覆盖微信小程序 Tool 模块的全部 19 个页面:

页面与路由清单

页面文件 路由路径 页面标题 分类

注意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) + 断网
  • 账号准备:已登录账号 / 未登录访客
  • 后端接口:已部署测试环境 APItool/* 全部接口可用)
  • 测试数据:至少 1 条已有计算结果、1 条打卡记录、1 条社区帖子

三、功能测试用例

3.1 Tool 首页 (tool_main/index.vue)

页面加载

  • 页面打开后,并发调用 getRecommendedRecipesgetRecommendedKnowledgegetUserHealthStatus 三个接口,数据正常展示
  • 接口返回失败时(单个/全部),页面不白屏,其他模块正常展示
  • 弱网环境下 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 视频生成开关切换
  • 开启后提交时调用 createImageToVideoTaskcreateTextToVideoTask

提交

  • 点击"发布"调用 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/recipes
  • GET tool/home/knowledge
  • GET tool/home/health-status

食谱计算器

  • POST tool/calculator/calculate
  • GET tool/calculator/result/{id}
  • POST tool/calculator/adopt

AI 营养师 (通过 models-api.js)

  • Coze 系列接口 (cozeChat / cozeRetrieveChat / cozeMessageList)
  • ASR 接口 (createAsrTask / queryAsrStatus)
  • 文件上传 (uploadFile)

打卡

  • POST tool/checkin/submit
  • GET tool/checkin/list
  • GET tool/checkin/detail/{id}
  • GET tool/checkin/streak
  • GET tool/checkin/tasks
  • POST tool/checkin/copy
  • POST tool/checkin/learn

食物百科

  • GET tool/food/search
  • GET tool/food/list
  • GET tool/food/detail/{id}
  • GET tool/food/similar/{id}

营养知识

  • GET tool/knowledge/list
  • GET tool/knowledge/detail/{id}
  • GET tool/knowledge/nutrient/{name}

社区

  • GET tool/community/detail/{id}
  • GET tool/community/list
  • POST tool/community/like
  • POST tool/community/collect
  • POST tool/community/follow
  • POST tool/community/comment
  • GET tool/community/comment/list/{postId}

积分

  • GET tool/points/info
  • GET tool/points/rules

文件上传

  • POST tool/upload/image
  • POST 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: 邀请统计为静态占位数据