107 lines
2.8 KiB
TypeScript
107 lines
2.8 KiB
TypeScript
/**
|
|
* Luopan 组件单元测试
|
|
*/
|
|
|
|
import { describe, it, expect } from 'vitest';
|
|
import { mount } from '@vue/test-utils';
|
|
import Luopan from '../src/Luopan.vue';
|
|
import type { LuopanConfig } from '../src/types';
|
|
|
|
const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0));
|
|
|
|
const baseConfig: LuopanConfig = {
|
|
name: '测试配置',
|
|
background: '#000000',
|
|
theme: {
|
|
colorPalettes: {
|
|
A: '#111111',
|
|
},
|
|
},
|
|
layers: [
|
|
{
|
|
divisions: 4,
|
|
rInner: 0,
|
|
rOuter: 80,
|
|
sectors: [{ content: '甲' }, { content: '乙' }, { content: '丙' }, { content: '丁' }],
|
|
},
|
|
{
|
|
type: 'degreeRing',
|
|
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);
|
|
});
|
|
});
|