mini-starter/mini/tests/pages/style-compliance.test.tsx

import React from 'react'
import { render } from '@testing-library/react'
import HomePage from '../../src/pages/home/index'
import ActivitySelectPage from '../../src/pages/select-activity/ActivitySelectPage'
import ScheduleListPage from '../../src/pages/schedule-list/ScheduleListPage'

// Mock Taro navigation
jest.mock('@tarojs/taro', () => ({
  useRouter: () => ({
    params: {}
  }),
  navigateTo: jest.fn()
}))

// Mock React Query
const mockUseQuery = jest.fn()
jest.mock('@tanstack/react-query', () => ({
  useQuery: (...args: any[]) => mockUseQuery(...args)
}))

// Mock API client
jest.mock('../../src/api', () => ({
  routeClient: {
    search: {
      $get: jest.fn()
    }
  }
}))

describe('样式合规性测试', () => {
  beforeEach(() => {
    mockUseQuery.mockReturnValue({
      data: null,
      isLoading: false,
      error: null
    })
  })

  describe('设计系统类名验证', () => {
    test('首页使用正确的设计系统类名', () => {
      const { container } = render(<HomePage />)

      // 验证主要颜色类名
      expect(container.innerHTML).toMatch(/bg-gradient-to-r from-primary to-primary-dark/)
      expect(container.innerHTML).toMatch(/rounded-button/)
      expect(container.innerHTML).toMatch(/shadow-primary/)

      // 验证包车主题类名（在getVehicleTypeStyle函数中定义）
      expect(container.innerHTML).toMatch(/from-charter to-charter-light/)
      expect(container.innerHTML).toMatch(/shadow-charter/)

      // 验证圆角系统
      expect(container.innerHTML).toMatch(/rounded-card/)
      expect(container.innerHTML).toMatch(/rounded-small/)
      expect(container.innerHTML).toMatch(/rounded-medium/)

      // 验证阴影系统
      expect(container.innerHTML).toMatch(/shadow-light/)
      expect(container.innerHTML).toMatch(/shadow-medium/)
      expect(container.innerHTML).toMatch(/shadow-heavy/)
    })

    test('活动选择页面使用正确的设计系统类名', () => {
      const { container } = render(<ActivitySelectPage />)

      // 验证头部渐变
      expect(container.innerHTML).toMatch(/bg-gradient-to-r from-primary to-primary-dark/)

      // 验证去程活动区域
      expect(container.innerHTML).toMatch(/from-primary to-primary-dark/)

      // 验证返程活动区域（包车主题）
      expect(container.innerHTML).toMatch(/from-charter-dark to-charter-bg/)
      expect(container.innerHTML).toMatch(/text-charter/)

      // 验证卡片样式
      expect(container.innerHTML).toMatch(/rounded-card/)
      expect(container.innerHTML).toMatch(/p-card/)
      expect(container.innerHTML).toMatch(/shadow-light/)
    })

    test('班次列表页面使用正确的设计系统类名', () => {
      const { container } = render(<ScheduleListPage />)

      // 验证头部渐变
      expect(container.innerHTML).toMatch(/bg-gradient-to-r from-primary to-primary-dark/)

      // 验证日期选择器
      expect(container.innerHTML).toMatch(/border-primary/)
      expect(container.innerHTML).toMatch(/bg-primary\/10/)
      expect(container.innerHTML).toMatch(/text-primary/)

      // 验证包车卡片样式
      expect(container.innerHTML).toMatch(/from-charter-dark to-charter-bg/)
      expect(container.innerHTML).toMatch(/border-charter/)
      expect(container.innerHTML).toMatch(/bg-charter\/20/)

      // 验证预订按钮
      expect(container.innerHTML).toMatch(/shadow-primary/)
      expect(container.innerHTML).toMatch(/from-primary to-primary-dark/)
      expect(container.innerHTML).toMatch(/from-charter to-charter-light/)
    })
  })

  describe('包车主题切换测试', () => {
    test('包车出行方式使用正确的主题样式', () => {
      const { container } = render(<HomePage />)

      // 验证包车主题类名存在（在getVehicleTypeStyle函数中定义）
      expect(container.innerHTML).toMatch(/from-charter to-charter-light/)
      expect(container.innerHTML).toMatch(/shadow-charter/)
    })

    test('返程活动使用包车主题', () => {
      const { container } = render(<ActivitySelectPage />)

      // 验证返程活动区域使用包车主题
      expect(container.innerHTML).toMatch(/from-charter-dark to-charter-bg/)
      expect(container.innerHTML).toMatch(/text-charter/)
    })

    test('包车班次卡片使用特殊样式', () => {
      const { container } = render(<ScheduleListPage />)

      // 验证包车卡片样式类名（在条件渲染中定义）
      expect(container.innerHTML).toMatch(/from-charter-dark to-charter-bg/)
      expect(container.innerHTML).toMatch(/border-charter/)
      expect(container.innerHTML).toMatch(/text-charter/)
    })
  })

  describe('设计系统颜色一致性', () => {
    test('主要颜色类名正确应用', () => {
      const { container } = render(<HomePage />)

      // 验证主要颜色类名
      const classNames = container.innerHTML

      // primary 颜色相关类名
      expect(classNames).toMatch(/bg-primary/)
      expect(classNames).toMatch(/text-primary/)
      expect(classNames).toMatch(/from-primary/)
      expect(classNames).toMatch(/to-primary-dark/)

      // charter 颜色相关类名
      expect(classNames).toMatch(/bg-charter/)
      expect(classNames).toMatch(/text-charter/)
      expect(classNames).toMatch(/from-charter/)
      expect(classNames).toMatch(/to-charter-light/)

      // 功能颜色类名
      expect(classNames).toMatch(/bg-success/)
      expect(classNames).toMatch(/bg-warning/)
      expect(classNames).toMatch(/bg-error/)
    })

    test('圆角系统一致性', () => {
      const { container } = render(<HomePage />)

      const classNames = container.innerHTML

      // 验证圆角类名
      expect(classNames).toMatch(/rounded-card/)
      expect(classNames).toMatch(/rounded-button/)
      expect(classNames).toMatch(/rounded-small/)
      expect(classNames).toMatch(/rounded-medium/)
    })

    test('阴影系统一致性', () => {
      const { container } = render(<HomePage />)

      const classNames = container.innerHTML

      // 验证阴影类名
      expect(classNames).toMatch(/shadow-light/)
      expect(classNames).toMatch(/shadow-medium/)
      expect(classNames).toMatch(/shadow-heavy/)
      expect(classNames).toMatch(/shadow-primary/)
      expect(classNames).toMatch(/shadow-charter/)
    })
  })

  describe('间距系统验证', () => {
    test('间距类名正确应用', () => {
      const { container } = render(<HomePage />)

      const classNames = container.innerHTML

      // 验证间距类名
      expect(classNames).toMatch(/p-card/)
      expect(classNames).toMatch(/py-button/)
    })
  })
})