teaching-design/data/Web/18.md

任务管理系统——系统整合测试与成果展示 教学设计

课题	任务管理系统——系统整合测试与成果展示
课时	1课时（40分钟）
教学目标	知识目标：理解功能测试、边界测试、可用性测试和回归测试的基本含义，掌握前端项目交付检查流程。 技能目标：能够整合任务系统全部功能，依据测试用例发现并修复问题，完成项目归档、演示和技术说明。 素养目标：培养质量责任、协作测试、问题记录和成果表达能力，形成“功能完成不等于项目完成”的职业认识。
教学重难点	重点：功能整合；测试用例；缺陷定位；回归测试；项目展示。 难点：覆盖正常、异常和边界场景，修复问题后验证其他功能未受影响。
教学资源准备	前五课任务管理系统、综合验收表、测试用例卡、缺陷记录单、浏览器开发者工具、项目展示评分表。

教学过程

教学环节	教学内容	教师活动	学生活动	设计意图
1. 验收任务导入 （5分钟）	回顾项目功能链，发布最终整合、测试和展示任务。	功能回顾 串联任务数据、条件循环、函数事件、DOM 添加和本地存储。 标准发布 说明功能正确、界面清楚、数据持久、代码规范、表达完整五项验收标准。	进度盘点 按功能清单标记已完成项和高风险项。 测试分工 两人一组确定开发者与测试员角色。	将分散知识整合为系统能力，以明确标准组织最终项目交付。
2. 测试方法梳理 （8分钟）	学习正常、异常、边界和回归测试，编写简要测试用例。	案例讲解 以添加任务为例设计正常文字、空白、超长和特殊字符输入；说明预期结果和实际结果。 回归说明 演示修复添加功能后重新测试完成、删除和保存。	用例设计 为添加、完成、删除、刷新恢复各写一条测试用例。 结果预判 填写预期结果，明确通过标准。	用结构化用例代替随意点击，建立覆盖风险和回归验证意识。
3. 系统整合测试 （17分钟）	执行双轮测试，记录、定位、修复并复测缺陷。	测试组织 第一轮按用例执行，第二轮交换项目进行探索性测试；要求缺陷包含步骤、现象和截图或控制台信息。 巡回评审 引导按“复现—定位—最小修改—回归”的顺序处理，集中讲解高频问题。	用例执行 测试空白、重复文字、特殊字符、连续删除和刷新恢复，记录结果。 缺陷修复 根据元素、控制台和存储面板定位原因，修复后重跑全部核心用例。	通过真实测试闭环综合运用调试工具，培养可复现、可验证的问题解决能力。
4. 成果展示交付 （6分钟）	完成项目整理并进行一分钟路演。	展示组织 要求演示添加、完成、删除、刷新恢复，并说明数据流程和一个修复案例。 多元评价 教师与同伴依据评分表评价功能、代码和表达。	项目路演 按固定场景操作系统，展示 localStorage 持久化。 成果归档 清理测试代码和无关文件，提交项目、测试表和缺陷记录。	让最终评价同时关注产品表现、技术理解和质量过程，形成完整交付成果。
5. 课程复盘总结 （4分钟）	回顾三项目能力递进，完成个人学习复盘。	体系梳理 总结“HTML 组织内容、CSS 设计表现、JavaScript 管理数据与交互”。 成长评价 引导学生对照首课目标评估结构、样式、编程和调试能力。	个人复盘 记录最有价值的技能、典型错误和下一步改进方向。 成果确认 提交完整学习成果并完成自评。	将18课时知识整合为前端开发基本流程，帮助学生形成可迁移的项目经验。

板书设计

任务管理系统交付闭环

需求 → 数据 → 逻辑 → DOM → 存储
                   ↓
测试用例 → 复现 → 定位 → 修复 → 回归

前端三层：
HTML        CSS          JavaScript
内容结构    视觉布局      数据交互

项目完成 = 功能 + 质量 + 文档 + 表达

教学成效与反思

教学成效	学生能够依据测试用例完成系统验收，使用控制台、元素面板和存储面板定位问题。多数项目实现添加、完成、删除和刷新恢复，学生能说明数据流程与修复依据。
教学反思	自由测试容易遗漏边界情况，测试用例卡显著提升了覆盖度。部分学生修复后未做回归，教学中应把核心用例全量重跑设为交付条件，并在评分中保留测试证据权重。