/**
 * Luopan 组件单元测试
 */

import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import Luopan from '../src/Luopan.vue';
import type { LuopanConfigInput } from '../src/types';

const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0));

const baseConfig: LuopanConfigInput = {
  name: '测试配置',
  background: '#000000',
  theme: {
    colorPalettes: {
      A: '#111111',
    },
  },
  layers: [
    {
      divisions: 4,
      rInner: 0,
      rOuter: 80,
      sectors: [{ content: '甲' }, { content: '乙' }, { content: '丙' }, { content: '丁' }],
    },
    {
      type: 'degreeRing',
      rInner: 90,
      rOuter: 100,
      showDegree: 1,
      mode: 'both',
      opacity: 0.3,
      tickLength: 6,
      tickLengthStep: 1,
      majorTick: 10,
      minorTick: 5,
      microTick: 1,
      tickColor: '#ffffff',
      ringColor: '#ffffff',
    },
    {
      type: 'centerIcon',
      centerIcon: {
        rIcon: 10,
        opacity: 1,
        name: 'centericon.svg',
      },
    },
  ],
};

describe('Luopan 组件', () => {
  it('应该成功渲染', async () => {
    const wrapper = mount(Luopan, { props: { config: baseConfig } });
    await flushPromises();
    expect(wrapper.exists()).toBe(true);
  });

  it('应该渲染工具栏控件', async () => {
    const wrapper = mount(Luopan, { props: { config: baseConfig } });
    await flushPromises();

    expect(wrapper.find('.toolbar').exists()).toBe(true);
    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true);
    expect(wrapper.find('select').exists()).toBe(true);
    expect(wrapper.find('.zoom-controls').exists()).toBe(true);
  });

  it('应该渲染 SVG 容器', async () => {
    const wrapper = mount(Luopan, { props: { config: baseConfig } });
    await flushPromises();
    expect(wrapper.find('svg').exists()).toBe(true);
  });

  it('应该渲染扇区路径', async () => {
    const wrapper = mount(Luopan, { props: { config: baseConfig } });
    await flushPromises();

    const sectorPaths = wrapper.findAll('path[fill]').filter((path) =>
      path.attributes('d')?.includes('M ')
    );
    expect(sectorPaths.length).toBeGreaterThan(0);
  });

  it('应该渲染文字或 SVG 内容', async () => {
    const wrapper = mount(Luopan, { props: { config: baseConfig } });
    await flushPromises();

    const textPaths = wrapper.findAll('textPath');
    expect(textPaths.length).toBeGreaterThan(0);
  });

  it('应该渲染刻度环和中心图标', async () => {
    const wrapper = mount(Luopan, { props: { config: baseConfig } });
    await flushPromises();

    const lines = wrapper.findAll('line');
    expect(lines.length).toBeGreaterThan(0);

    const images = wrapper.findAll('image');
    expect(images.length).toBeGreaterThan(0);
  });
});