e2e: add dual-view (calendar/matrix) switching tests

- View toggle button visibility and active state - Matrix view renders time slots and date columns - Navigation buttons (prev/this-week/next) - Empty cell click opens create form - Switch back to calendar preserves FullCalendar Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-02 08:44:12 +08:00
parent 79a50157da
commit 27148f0e52
1 changed files with 139 additions and 0 deletions
@@ -0,0 +1,139 @@
+import { expect, test } from './fixtures';
+
+const moicenUnionid = process.env.MOICEN_E2E_UNIONID?.trim();
+test.skip(!moicenUnionid, 'MOICEN_E2E_UNIONID 未设置');
+
+async function loginAsTeacher(page: any) {
+  const q = new URLSearchParams({ unionid: moicenUnionid!, status: '2' });
+  await page.goto(`/?${q.toString()}`, { waitUntil: 'domcontentloaded', timeout: 60_000 });
+  await expect(page.locator('#app')).toBeVisible({ timeout: 60_000 });
+  await page.waitForTimeout(3000);
+
+  const rs = page.getByText('请选择您的登录身份');
+  if (await rs.isVisible().catch(() => false)) {
+    const items = page.locator('.van-grid-item');
+    const count = await items.count();
+    if (count >= 3) {
+      await items.nth(2).click(); // TEACHER role
+      await page.waitForTimeout(3000);
+    } else {
+      await items.first().click();
+      await page.waitForTimeout(3000);
+    }
+  }
+}
+
+test.describe('排课双视图切换（阿难账号）', () => {
+
+  test('教师端排课页显示视图切换按钮', async ({ page }) => {
+    await loginAsTeacher(page);
+    await page.goto('/clazz', { waitUntil: 'domcontentloaded', timeout: 60_000 });
+    await expect(page.locator('#app')).toBeVisible({ timeout: 60_000 });
+    await page.waitForTimeout(3000);
+
+    // Check toggle buttons exist
+    const toggleBar = page.locator('.view-toolbar');
+    await expect(toggleBar).toBeVisible({ timeout: 10_000 });
+
+    const calBtn = toggleBar.locator('button', { hasText: '日历' });
+    const matrixBtn = toggleBar.locator('button', { hasText: '矩阵' });
+    await expect(calBtn).toBeVisible();
+    await expect(matrixBtn).toBeVisible();
+
+    // Default is calendar — 日历 should be primary
+    await expect(calBtn).toHaveClass(/van-button--primary/);
+  });
+
+  test('切换到矩阵视图后显示时段和日期列', async ({ page }) => {
+    await loginAsTeacher(page);
+    await page.goto('/clazz', { waitUntil: 'domcontentloaded', timeout: 60_000 });
+    await expect(page.locator('#app')).toBeVisible({ timeout: 60_000 });
+    await page.waitForTimeout(3000);
+
+    // Switch to matrix view
+    const matrixBtn = page.locator('.view-toolbar button', { hasText: '矩阵' });
+    await matrixBtn.click();
+    await page.waitForTimeout(1500);
+
+    // Matrix container should be visible
+    const matrixContainer = page.locator('.matrix-container');
+    await expect(matrixContainer).toBeVisible({ timeout: 10_000 });
+
+    // Should show header with date columns
+    const header = page.locator('.matrix-header');
+    await expect(header).toBeVisible();
+
+    // Should show time slot labels (第一节, 第二节, etc.)
+    const slotLabels = page.locator('.slot-label');
+    const count = await slotLabels.count();
+    expect(count).toBeGreaterThanOrEqual(4); // at least 4 time slots
+  });
+
+  test('矩阵视图导航栏可操作（上一周/本周/下一周）', async ({ page }) => {
+    await loginAsTeacher(page);
+    await page.goto('/clazz', { waitUntil: 'domcontentloaded', timeout: 60_000 });
+    await expect(page.locator('#app')).toBeVisible({ timeout: 60_000 });
+    await page.waitForTimeout(3000);
+
+    // Switch to matrix
+    await page.locator('.view-toolbar button', { hasText: '矩阵' }).click();
+    await page.waitForTimeout(1500);
+
+    // Nav buttons should exist
+    const nav = page.locator('.view-toolbar__nav');
+    await expect(nav).toBeVisible({ timeout: 10_000 });
+
+    // Click "本周" to reset to current week
+    await nav.locator('button', { hasText: '本周' }).click();
+    await page.waitForTimeout(2000);
+
+    // Should show date range
+    const range = nav.locator('.view-toolbar__range');
+    await expect(range).toBeVisible();
+  });
+
+  test('矩阵视图点击空槽可创建排课', async ({ page }) => {
+    await loginAsTeacher(page);
+    await page.goto('/clazz', { waitUntil: 'domcontentloaded', timeout: 60_000 });
+    await expect(page.locator('#app')).toBeVisible({ timeout: 60_000 });
+    await page.waitForTimeout(3000);
+
+    // Switch to matrix
+    await page.locator('.view-toolbar button', { hasText: '矩阵' }).click();
+    await page.waitForTimeout(1500);
+
+    // Find an empty cell and click it
+    const emptyCell = page.locator('.slot-cell--empty').first();
+    if (await emptyCell.isVisible().catch(() => false)) {
+      await emptyCell.click();
+      await page.waitForTimeout(1500);
+
+      // Should show the editing form with "新增排课" title
+      await expect(page.locator('h1')).toContainText('新增排课', { timeout: 10_000 });
+      await page.locator('.content-head .van-icon-cross').click(); // close
+      await page.waitForTimeout(500);
+    } else {
+      test.skip(true, '无可点击的空时段');
+    }
+  });
+
+  test('从矩阵视图切换回日历视图后日历正常显示', async ({ page }) => {
+    await loginAsTeacher(page);
+    await page.goto('/clazz', { waitUntil: 'domcontentloaded', timeout: 60_000 });
+    await expect(page.locator('#app')).toBeVisible({ timeout: 60_000 });
+    await page.waitForTimeout(3000);
+
+    // Switch to matrix
+    await page.locator('.view-toolbar button', { hasText: '矩阵' }).click();
+    await page.waitForTimeout(1500);
+    await expect(page.locator('.matrix-container')).toBeVisible({ timeout: 10_000 });
+
+    // Switch back to calendar
+    await page.locator('.view-toolbar button', { hasText: '日历' }).click();
+    await page.waitForTimeout(1500);
+
+    // Calendar (FullCalendar) should be visible
+    const calendarView = page.locator('.calendar.fc'); // FullCalendar root
+    await expect(page.locator('.fc')).toBeVisible({ timeout: 10_000 });
+  });
+});