dianshang-qianduan/tests/teacher-sidebar-collapse.test.mjs

import assert from "node:assert/strict";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";

const root = resolve(import.meta.dirname, "..");
const sidebar = readFileSync(resolve(root, "src/layout/components/Sidebar/index.vue"), "utf8");
const styles = readFileSync(resolve(root, "src/assets/styles/sidebar.scss"), "utf8");

assert.match(sidebar, /course-sidebar-toggle/, "侧栏应提供收起与展开把手（教师端 / 学生端共用）");
assert.match(sidebar, /toggleSideBar\(/, "收起按钮应复用全局侧栏状态");
assert.match(sidebar, /isCollapse/, "收起状态应同步到侧栏样式");
assert.match(styles, /&\.hideSidebar/, "侧栏收起时应缩小侧栏并回收内容区空间");
assert.match(styles, /\.course-sidebar-toggle/, "收起把手应贴侧栏右缘展示");

// 折叠把手必须常驻：不得再按路由条件渲染。
// 旧实现为 v-if="isTeacherRole || isStudentTrainingWorkspace"，
// 导致学生端切到非实训页（首页 / AI 智能助手 / 学情分析 / 考试 / 实验报告 / BI 等）时
// 按钮凭空消失，同一角色在不同页面表现不一致。
const toggleIndex = sidebar.indexOf("course-sidebar-toggle");
assert.ok(toggleIndex > -1, "应存在折叠把手");
const buttonStart = sidebar.lastIndexOf("<button", toggleIndex);
const buttonEnd = sidebar.indexOf(">", toggleIndex);
const toggleTag = sidebar.slice(buttonStart, buttonEnd + 1);
assert.doesNotMatch(toggleTag, /v-if/, "折叠把手不得带 v-if 条件渲染，必须常驻显示");
assert.doesNotMatch(sidebar, /isStudentTrainingWorkspace/, "不应残留按路由判断按钮显隐的旧逻辑");

// 收起状态的三条 class 链必须收敛到同一来源，否则会出现
// 「宽度已切、箭头不动 / 菜单文字不显示」的失步现象。
assert.match(
  sidebar,
  /:key="`\$\{studentMenuKey\}-\$\{isCollapse \? 'collapsed' : 'expanded'\}`"/,
  "折叠切换必须改变 el-menu 的 key，强制 Element Plus 重建菜单",
);
assert.match(
  styles,
  /#app \.hideSidebar \.sidebar-container \.course-sidebar-toggle/,
  "箭头切换应同时挂在控制宽度的 .hideSidebar 链上",
);
assert.match(
  styles,
  /#app \.app-wrapper:not\(\.hideSidebar\)[\s\S]{0,200}el-menu--collapse/,
  "展开态必须能强制恢复被 el-menu 折叠外观隐藏的菜单文字",
);

console.log("sidebar collapse toggle stays visible and keeps all states in sync");