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