huike-e2e-moicen/tests/clazz-dual-view.spec.ts

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 });

    // Header should show time slot labels (第一节 ~ 第四节)
    const headerCells = page.locator('.header-cell');
    await expect(headerCells.first()).toBeVisible();
    const count = await headerCells.count();
    await expect(count).toBeGreaterThanOrEqual(4);

    // Each header cell should have slot label + time
    const firstHeader = headerCells.first();
    await expect(firstHeader.locator('.header-label')).toBeVisible();
    await expect(firstHeader.locator('.header-time')).toBeVisible();

    // Day sidebar should show weekday labels (周一 ~ 周日)
    const dayCells = page.locator('.day-cell');
    await expect(dayCells.first()).toBeVisible();
    expect(await dayCells.count()).toBe(7);

    // Each day cell should have day name + date
    const firstDay = dayCells.first();
    await expect(firstDay.locator('.day-name')).toBeVisible();
    await expect(firstDay.locator('.day-date')).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);

    // 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);

    // Check event blocks exist in the grid
    const eventBlocks = page.locator('.event-block');
    const count = await eventBlocks.count();

    if (count === 0) {
      test.skip(true, '无排课数据');
      return;
    }

    // First block should show course name
    const first = eventBlocks.first();
    await expect(first.locator('.ev-title')).toBeVisible();

    // At least one block should have teacher name
    const hasTeacher = await page.locator('.ev-teacher').count();
    expect(hasTeacher).toBeGreaterThanOrEqual(0);

    // At least one block should have student names
    const hasStudents = await page.locator('.ev-students').count();
    expect(hasStudents).toBeGreaterThanOrEqual(0);
  });

  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
    await expect(page.locator('.fc')).toBeVisible({ timeout: 10_000 });
  });
});