import type { OperationState, RuntimeStatus } from '../../src/stores/annotation';
|
|
import { mount } from '@vue/test-utils';
|
|
import Antd, { Alert, Badge, Result, Spin } from 'ant-design-vue';
|
import { describe, expect, it } from 'vitest';
|
|
import OperationStatus from '../../src/components/OperationStatus.vue';
|
|
function mountStatus(status: RuntimeStatus, operation: OperationState, extra: { fatalMessage?: string; retryable?: boolean; sdkAvailable?: boolean } = {}) {
|
return mount(OperationStatus, { props: { status, operation, ...extra }, global: { plugins: [Antd] } });
|
}
|
|
describe('operationStatus', () => {
|
it('initializing 只显示紧凑状态,不再占用第二行显示 Spin', () => {
|
const wrapper = mountStatus('initializing', { kind: 'idle', message: '' });
|
|
expect(wrapper.findComponent(Spin).exists()).toBe(false);
|
expect(wrapper.find('[data-test="runtime-message"]').exists()).toBe(false);
|
expect(wrapper.get('[data-test="connection-status"]').text()).toBe('加载中');
|
});
|
|
it('working 顶部只显示紧凑连接状态,进度留给当前任务区', () => {
|
const wrapper = mountStatus('working', { kind: 'working', message: '正在定位字段...' });
|
|
expect(wrapper.findComponent(Spin).exists()).toBe(false);
|
expect(wrapper.find('[data-test="runtime-message"]').exists()).toBe(false);
|
expect(wrapper.get('[data-test="connection-status"]').text()).toBe('处理中');
|
});
|
|
it('ready 使用状态圆点和文字显示已连接,idle 不渲染操作提示', () => {
|
const wrapper = mountStatus('ready', { kind: 'idle', message: '' });
|
|
expect(wrapper.findComponent(Badge).props('status')).toBe('success');
|
expect(wrapper.findComponent(Badge).props('text')).toBe('已连接');
|
expect(wrapper.get('[data-test="connection-status"]').text()).toBe('已连接');
|
expect(wrapper.get('[data-test="plugin-version"]').text()).toBe('v0.1.0');
|
expect(wrapper.find('[data-test="operation-message"]').exists()).toBe(false);
|
});
|
|
it('不持续显示自动刷新成功文案', () => {
|
const wrapper = mountStatus('ready', { kind: 'success', message: '文档字段已刷新' });
|
|
expect(wrapper.find('[data-test="operation-message"]').exists()).toBe(false);
|
});
|
|
it('成功反馈不常驻顶部布局', () => {
|
const wrapper = mountStatus('ready', { kind: 'success', message: '字段已定位' });
|
|
expect(wrapper.find('[data-test="operation-message"]').exists()).toBe(false);
|
});
|
|
it('ready 状态的任务错误不占用顶部布局', () => {
|
const wrapper = mountStatus('ready', { kind: 'error', message: '读取内容控件失败' });
|
|
expect(wrapper.findComponent(Alert).exists()).toBe(false);
|
expect(wrapper.text()).not.toContain('读取内容控件失败');
|
});
|
|
it('初始化失败在顶部显示完整错误并可重试', async () => {
|
const wrapper = mountStatus('error', { kind: 'error', message: '读取模板标注失败:网络异常' }, { retryable: true });
|
|
expect(wrapper.findComponent(Result).exists() || wrapper.findComponent(Alert).exists()).toBe(true);
|
expect(wrapper.text()).toContain('读取模板标注失败:网络异常');
|
await wrapper.get('[data-test="retry-initialization"]').trigger('click');
|
expect(wrapper.emitted('retry')).toHaveLength(1);
|
});
|
|
it('sDK 缺失显示不可继续的 fatal 结果', () => {
|
const wrapper = mountStatus('error', { kind: 'idle', message: '' }, { sdkAvailable: false });
|
|
expect(wrapper.findComponent(Result).exists() || wrapper.findComponent(Alert).exists()).toBe(true);
|
expect(wrapper.text()).toContain('ONLYOFFICE SDK 未加载,无法初始化插件');
|
});
|
});
|