/* @vitest-environment happy-dom */
|
|
import type { VueWrapper } from '@vue/test-utils';
|
import type { Component } from 'vue';
|
|
import { mount } from '@vue/test-utils';
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
import { defineComponent, getCurrentInstance, h, inject, nextTick, provide } from 'vue';
|
|
const modalMocks = vi.hoisted(() => ({
|
closeModal: vi.fn(),
|
createConfirm: vi.fn(),
|
openModal: vi.fn(),
|
print: vi.fn(),
|
register: vi.fn(),
|
reload: vi.fn(),
|
}));
|
|
vi.mock('#/router', () => ({
|
router: {
|
push: vi.fn(),
|
},
|
}));
|
|
vi.mock('@jnpf/hooks', () => ({
|
useGlobSetting: () => ({ apiURL: '' }),
|
useMessage: () => ({
|
createConfirm: modalMocks.createConfirm,
|
}),
|
}));
|
|
vi.mock('@jnpf/ui/modal', async () => {
|
const { defineComponent, h, onMounted } = await import('vue');
|
|
return {
|
BasicModal: defineComponent({
|
name: 'BasicModal',
|
emits: ['register'],
|
props: {
|
closeFunc: Function,
|
},
|
setup(_, { emit, slots }) {
|
onMounted(() => emit('register'));
|
|
return () =>
|
h('section', { 'data-test': 'basic-modal' }, [
|
h('header', { 'data-test': 'modal-title' }, slots.title?.()),
|
h('main', { 'data-test': 'modal-content' }, slots.default?.()),
|
]);
|
},
|
}),
|
useModal: () => [modalMocks.register, { closeModal: modalMocks.closeModal, openModal: modalMocks.openModal }],
|
};
|
});
|
|
vi.mock('ant-design-vue', async () => {
|
const { defineComponent, h } = await import('vue');
|
|
return {
|
Button: defineComponent({
|
name: 'AButton',
|
props: {
|
danger: Boolean,
|
disabled: Boolean,
|
loading: Boolean,
|
type: String,
|
},
|
emits: ['click'],
|
setup(props, { emit, slots }) {
|
return () =>
|
h(
|
'button',
|
{
|
disabled: props.disabled || props.loading,
|
type: 'button',
|
onClick: () => emit('click'),
|
},
|
slots.default?.(),
|
);
|
},
|
}),
|
Space: defineComponent({
|
name: 'ASpace',
|
setup(_, { slots }) {
|
return () => h('div', { 'data-test': 'space' }, slots.default?.());
|
},
|
}),
|
Spin: defineComponent({
|
name: 'ASpin',
|
setup(_, { slots }) {
|
return () => h('div', slots.default?.());
|
},
|
}),
|
};
|
});
|
|
vi.mock('#/components/CustomPrint/CustomPrintPreviewPane.vue', () => ({
|
default: defineComponent({
|
name: 'CustomPrintPreviewPane',
|
emits: ['error', 'loaded', 'loading'],
|
props: {
|
config: {
|
required: true,
|
type: Object,
|
},
|
},
|
setup(_, { expose }) {
|
expose({ print: modalMocks.print, reload: modalMocks.reload });
|
|
return () => h('div', { 'data-test': 'custom-print-preview' });
|
},
|
}),
|
}));
|
|
vi.mock('../ReportAttachmentsPane.vue', () => ({
|
default: defineComponent({
|
name: 'ReportAttachmentsPane',
|
setup() {
|
return () => h('div', { 'data-test': 'attachments-pane' });
|
},
|
}),
|
}));
|
|
vi.mock('../ReportFormDetailPane.vue', () => ({
|
default: defineComponent({
|
name: 'ReportFormDetailPane',
|
props: {
|
tab: {
|
required: true,
|
type: Object,
|
},
|
},
|
setup(props) {
|
return () => h('div', { 'data-test': 'form-detail-pane' }, props.tab.id);
|
},
|
}),
|
}));
|
|
import { onlineUtils } from '#/utils/jnpf';
|
|
import GlobalReportViewModal from '../index.vue';
|
|
const customPrintTab = {
|
key: 'customPrint',
|
print: {
|
data: { id: 'record-id' },
|
template: 'template-id',
|
},
|
} as const;
|
|
function mountModal() {
|
return mount(GlobalReportViewModal, {
|
global: {
|
components: {
|
'a-tab-pane': defineComponent({
|
name: 'ATabPane',
|
props: {
|
tab: String,
|
},
|
setup(props) {
|
const instance = getCurrentInstance();
|
const setActiveKey = inject<(key: string) => void>('setActiveKey');
|
|
return () =>
|
h(
|
'div',
|
{
|
'data-test': 'tab-pane',
|
onClick: () => setActiveKey?.(String(instance?.vnode.key)),
|
},
|
props.tab,
|
);
|
},
|
}),
|
'a-tabs': defineComponent({
|
name: 'ATabs',
|
emits: ['update:activeKey'],
|
props: {
|
activeKey: String,
|
},
|
setup(_, { emit, slots }) {
|
provide('setActiveKey', (key: string) => emit('update:activeKey', key));
|
|
return () => h('div', { 'data-test': 'tabs' }, slots.default?.());
|
},
|
}),
|
},
|
},
|
});
|
}
|
|
async function openReportView(config = {}) {
|
onlineUtils.openReportView({
|
tabs: [customPrintTab],
|
title: '查看报告',
|
...config,
|
});
|
|
await nextTick();
|
await nextTick();
|
}
|
|
async function emitPrintLoaded(wrapper: VueWrapper) {
|
wrapper.findComponent({ name: 'CustomPrintPreviewPane' }).vm.$emit('loaded');
|
await nextTick();
|
}
|
|
function getButton(wrapper: VueWrapper, text: string) {
|
const button = wrapper.findAll('button').find(item => item.text() === text);
|
|
expect(button, `button "${text}" exists`).toBeTruthy();
|
return button!;
|
}
|
|
function queryButton(wrapper: VueWrapper, text: string) {
|
return wrapper.findAll('button').find(item => item.text() === text);
|
}
|
|
function getFormDetailText(wrapper: VueWrapper) {
|
return wrapper.find('[data-test="form-detail-pane"]').text();
|
}
|
|
describe('GlobalReportViewModal interactions', () => {
|
let wrapper: VueWrapper<Component> | null = null;
|
|
beforeEach(() => {
|
modalMocks.closeModal.mockClear();
|
modalMocks.createConfirm.mockClear();
|
modalMocks.openModal.mockClear();
|
modalMocks.print.mockClear();
|
modalMocks.register.mockClear();
|
modalMocks.reload.mockClear();
|
wrapper = mountModal();
|
});
|
|
afterEach(() => {
|
wrapper?.unmount();
|
wrapper = null;
|
vi.clearAllMocks();
|
});
|
|
it('无 actions 时显示默认打印按钮和关闭按钮', async () => {
|
await openReportView();
|
await emitPrintLoaded(wrapper!);
|
|
expect(getButton(wrapper!, '导出PDF').attributes('disabled')).toBeUndefined();
|
expect(getButton(wrapper!, '打印').attributes('disabled')).toBeUndefined();
|
expect(getButton(wrapper!, '关闭').exists()).toBe(true);
|
});
|
|
it('有 actions 时显示业务动作且不显示默认打印按钮', async () => {
|
await openReportView({
|
actions: [
|
{
|
key: 'approve',
|
label: '审核通过',
|
onClick: vi.fn(),
|
type: 'primary',
|
},
|
],
|
});
|
|
expect(getButton(wrapper!, '审核通过').exists()).toBe(true);
|
expect(queryButton(wrapper!, '导出PDF')).toBeUndefined();
|
expect(queryButton(wrapper!, '打印')).toBeUndefined();
|
expect(getButton(wrapper!, '关闭').exists()).toBe(true);
|
});
|
|
it('actions 为空数组时隐藏默认打印按钮', async () => {
|
await openReportView({
|
actions: [],
|
});
|
|
expect(queryButton(wrapper!, '导出PDF')).toBeUndefined();
|
expect(queryButton(wrapper!, '打印')).toBeUndefined();
|
expect(getButton(wrapper!, '关闭').exists()).toBe(true);
|
});
|
|
it('action 没有 confirmText 时点击后直接执行 action 且不弹确认', async () => {
|
const onClick = vi.fn();
|
|
await openReportView({
|
actions: [
|
{
|
key: 'approve',
|
label: '审核通过',
|
onClick,
|
},
|
],
|
});
|
|
await getButton(wrapper!, '审核通过').trigger('click');
|
|
expect(modalMocks.createConfirm).not.toHaveBeenCalled();
|
expect(onClick).toHaveBeenCalledTimes(1);
|
});
|
|
it('action 有 confirmText 时点击后弹出确认且不直接执行 action', async () => {
|
const onClick = vi.fn();
|
|
await openReportView({
|
actions: [
|
{
|
confirmText: '确认审核通过吗？',
|
key: 'approve',
|
label: '审核通过',
|
onClick,
|
},
|
],
|
});
|
|
await getButton(wrapper!, '审核通过').trigger('click');
|
|
expect(modalMocks.createConfirm).toHaveBeenCalledTimes(1);
|
expect(modalMocks.createConfirm).toHaveBeenCalledWith(
|
expect.objectContaining({
|
content: '确认审核通过吗？',
|
}),
|
);
|
expect(onClick).not.toHaveBeenCalled();
|
|
const confirmOptions = modalMocks.createConfirm.mock.calls[0]?.[0] as { onOk: () => void } | undefined;
|
expect(confirmOptions).toBeTruthy();
|
confirmOptions!.onOk();
|
await nextTick();
|
|
expect(onClick).toHaveBeenCalledTimes(1);
|
});
|
|
it('点击打印和导出PDF时调用打印预览 expose 的 print', async () => {
|
await openReportView();
|
await emitPrintLoaded(wrapper!);
|
|
await getButton(wrapper!, '打印').trigger('click');
|
expect(modalMocks.print).toHaveBeenCalledTimes(1);
|
|
await getButton(wrapper!, '导出PDF').trigger('click');
|
expect(modalMocks.print).toHaveBeenCalledTimes(2);
|
});
|
|
it('onlineUtils.closeReportView 连续触发时只关闭一次并只调用一次 onClose', async () => {
|
const onClose = vi.fn();
|
|
await openReportView({ onClose });
|
|
onlineUtils.closeReportView();
|
onlineUtils.closeReportView();
|
|
expect(modalMocks.closeModal).toHaveBeenCalledTimes(1);
|
expect(onClose).toHaveBeenCalledTimes(1);
|
});
|
|
it('点击关闭按钮后再次触发 closeReportView 仍只关闭一次', async () => {
|
const onClose = vi.fn();
|
|
await openReportView({ onClose });
|
|
await getButton(wrapper!, '关闭').trigger('click');
|
onlineUtils.closeReportView();
|
|
expect(modalMocks.closeModal).toHaveBeenCalledTimes(1);
|
expect(onClose).toHaveBeenCalledTimes(1);
|
});
|
|
it('unmount 后清理 report view 事件监听', async () => {
|
await openReportView();
|
|
expect(modalMocks.openModal).toHaveBeenCalledTimes(1);
|
|
wrapper!.unmount();
|
wrapper = null;
|
|
onlineUtils.openReportView({
|
tabs: [customPrintTab],
|
title: '卸载后打开',
|
});
|
onlineUtils.closeReportView();
|
|
await nextTick();
|
await nextTick();
|
|
expect(modalMocks.openModal).toHaveBeenCalledTimes(1);
|
expect(modalMocks.closeModal).not.toHaveBeenCalled();
|
});
|
|
it('loaded 前打印按钮 disabled，loaded 后启用', async () => {
|
await openReportView();
|
|
expect(getButton(wrapper!, '打印').attributes('disabled')).toBeDefined();
|
|
await emitPrintLoaded(wrapper!);
|
|
expect(getButton(wrapper!, '打印').attributes('disabled')).toBeUndefined();
|
});
|
|
it('支持在多个 formDetail tab 之间切换', async () => {
|
await openReportView({
|
activeKey: 'formDetail',
|
tabs: [
|
{
|
id: 'form-id-1',
|
key: 'formDetail',
|
modelId: 'model-id-1',
|
title: '委托信息',
|
},
|
{
|
id: 'form-id-2',
|
key: 'formDetail',
|
modelId: 'model-id-2',
|
title: '检验记录',
|
},
|
],
|
});
|
|
expect(wrapper!.findAll('[data-test="tab-pane"]').map(item => item.text())).toEqual(['委托信息', '检验记录']);
|
expect(getFormDetailText(wrapper!)).toContain('form-id-1');
|
|
await wrapper!.findAll('[data-test="tab-pane"]')[1]!.trigger('click');
|
|
expect(getFormDetailText(wrapper!)).toContain('form-id-2');
|
});
|
});
|
