mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-12-12 11:22:56 +00:00
261 lines
6.9 KiB
TypeScript
261 lines
6.9 KiB
TypeScript
/*
|
||
* Tencent is pleased to support the open source community by making MagicEditor available.
|
||
*
|
||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||
*
|
||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||
* you may not use this file except in compliance with the License.
|
||
* You may obtain a copy of the License at
|
||
*
|
||
* http://www.apache.org/licenses/LICENSE-2.0
|
||
*
|
||
* Unless required by applicable law or agreed to in writing, software
|
||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
* See the License for the specific language governing permissions and
|
||
* limitations under the License.
|
||
*/
|
||
|
||
import vueRouter from 'vue-router';
|
||
import { flushPromises, mount } from '@vue/test-utils';
|
||
import { ElSelect } from 'element-plus';
|
||
|
||
import actApi from '@src/api/act';
|
||
import List from '@src/components/act-list.vue';
|
||
import FormDialog from '@src/components/form-dialog.vue';
|
||
import MTable from '@src/components/table.vue';
|
||
import { components } from '@tests/utils';
|
||
|
||
beforeEach(() => {
|
||
jest.clearAllMocks();
|
||
});
|
||
|
||
// mock
|
||
jest.mock('js-cookie', () => {
|
||
const map = new Map();
|
||
return {
|
||
get: (key: string) => map.get(key),
|
||
set: (key: string, val: any) => map.set(key, val),
|
||
};
|
||
});
|
||
|
||
// mock
|
||
jest.mock('vue-router', () => {
|
||
let route = {
|
||
path: '',
|
||
params: {
|
||
type: 'all',
|
||
page: 0,
|
||
query: 'query',
|
||
status: -1,
|
||
},
|
||
query: {
|
||
create: false,
|
||
},
|
||
};
|
||
return {
|
||
useRoute: jest.fn(() => route),
|
||
useRouter: jest.fn(() => ({
|
||
push: jest.fn((query) => {
|
||
route.path = query;
|
||
}),
|
||
})),
|
||
setRoute: (mockRoute: any) => {
|
||
route = mockRoute;
|
||
},
|
||
};
|
||
});
|
||
|
||
// mock
|
||
jest.mock('@src/api/act', () => {
|
||
const acts: any[] = [];
|
||
for (let i = 0; i < 12; i++) {
|
||
acts.push({
|
||
actId: i,
|
||
actName: `活动${i}`,
|
||
operator: `operator${i}`,
|
||
pagePublishStatus: 1,
|
||
actStatusFormatter: 1,
|
||
});
|
||
}
|
||
let actsRes = {
|
||
data: acts,
|
||
fetch: true,
|
||
errorMsg: '',
|
||
total: 15,
|
||
};
|
||
let copyRes = {
|
||
ret: 0,
|
||
msg: '复制成功',
|
||
};
|
||
return {
|
||
getList: jest.fn(() => Promise.resolve(actsRes)),
|
||
copyAct: jest.fn(() => Promise.resolve(copyRes)),
|
||
setCopyRet: (ret: any) => {
|
||
copyRes = ret;
|
||
},
|
||
setActsRes: (res: any) => {
|
||
actsRes = res;
|
||
},
|
||
};
|
||
});
|
||
|
||
// 获取列表实例
|
||
const getWrapper = () =>
|
||
mount(List, {
|
||
global: {
|
||
components: {
|
||
'form-dialog': FormDialog,
|
||
'm-table': MTable,
|
||
...components,
|
||
},
|
||
directives: {
|
||
loading: {},
|
||
},
|
||
},
|
||
});
|
||
|
||
window.ResizeObserver =
|
||
window.ResizeObserver ||
|
||
jest.fn().mockImplementation(() => ({
|
||
disconnect: jest.fn(),
|
||
observe: jest.fn(),
|
||
unobserve: jest.fn(),
|
||
}));
|
||
|
||
describe('List', () => {
|
||
it('活动查询', async () => {
|
||
const wrapper = getWrapper();
|
||
const queryInput = wrapper.find('input[placeholder="输入活动ID，活动名称，加密ID，创建人查询.."]');
|
||
|
||
await queryInput.setValue('test');
|
||
// 模拟回车
|
||
await queryInput.trigger('keydown.enter');
|
||
|
||
const queryData = (actApi.getList as jest.Mock).mock.calls[0][0].data;
|
||
expect(queryData.where.search).toBe('test');
|
||
});
|
||
|
||
it('输入切换页面', async () => {
|
||
const wrapper = getWrapper();
|
||
// 等待获取活动列表
|
||
await flushPromises();
|
||
const pageInput = wrapper.find('input[max="2"]');
|
||
await pageInput.setValue(2);
|
||
// 模拟回车
|
||
await pageInput.trigger('keydown.enter');
|
||
|
||
expect((vueRouter as any).useRoute().path).toBe('/act/all/1/-1/query');
|
||
});
|
||
|
||
it('按活动状态筛选', async () => {
|
||
const wrapper = getWrapper();
|
||
const select = wrapper.findComponent(ElSelect);
|
||
select.vm.$emit('change', 0);
|
||
expect((vueRouter as any).useRoute().path).toBe('/act/all/0/0/query');
|
||
});
|
||
|
||
it('按页面标题查询', async () => {
|
||
const wrapper = getWrapper();
|
||
const queryInput = wrapper.find('input[placeholder="页面标题"]');
|
||
|
||
await queryInput.setValue('test');
|
||
// 模拟回车
|
||
await queryInput.trigger('keydown.enter');
|
||
|
||
const queryData = (actApi.getList as jest.Mock).mock.calls[0][0].data;
|
||
expect(queryData.where.pageTitle).toBe('test');
|
||
});
|
||
|
||
it('关闭对话框', () => {
|
||
const wrapper = getWrapper();
|
||
const dialog = wrapper.findComponent(FormDialog);
|
||
dialog.vm.$emit('close');
|
||
|
||
expect(dialog.vm.$props.visible).toBe(false);
|
||
});
|
||
|
||
it('复制成功', () => {
|
||
const wrapper = getWrapper();
|
||
const buttons = wrapper.findAll('button');
|
||
const copyBtn = buttons.find((btn) => btn.text() === '复制');
|
||
copyBtn?.trigger('click');
|
||
setTimeout((done) => {
|
||
expect(document.querySelector('.el-message')?.textContent).toBe('复制成功');
|
||
done();
|
||
}, 0);
|
||
});
|
||
|
||
it('复制成功-无msg', () => {
|
||
(actApi as any).setCopyRet({
|
||
ret: 0,
|
||
});
|
||
const wrapper = getWrapper();
|
||
const buttons = wrapper.findAll('button');
|
||
const copyBtn = buttons.find((btn) => btn.text() === '复制');
|
||
copyBtn?.trigger('click');
|
||
setTimeout((done) => {
|
||
expect(document.querySelector('.el-message')?.textContent).toBe('复制失败');
|
||
done();
|
||
}, 0);
|
||
});
|
||
|
||
it('复制失败-有msg', () => {
|
||
(actApi as any).setCopyRet({
|
||
ret: -1,
|
||
msg: '失败原因',
|
||
});
|
||
const wrapper = getWrapper();
|
||
const buttons = wrapper.findAll('button');
|
||
const copyBtn = buttons.find((btn) => btn.text() === '复制');
|
||
copyBtn?.trigger('click');
|
||
setTimeout((done) => {
|
||
expect(document.querySelector('.el-message')?.textContent).toBe('失败原因');
|
||
done();
|
||
}, 0);
|
||
});
|
||
|
||
it('无权限复制', () => {
|
||
const wrapper = getWrapper();
|
||
const buttons = wrapper.findAll('button');
|
||
const copyBtn = buttons.find((btn) => btn.text() === '复制');
|
||
copyBtn?.trigger('click');
|
||
expect(actApi.copyAct).toBeCalledTimes(0);
|
||
});
|
||
|
||
it('查看', () => {
|
||
const wrapper = getWrapper();
|
||
const buttons = wrapper.findAll('button');
|
||
const copyBtn = buttons.find((btn) => btn.text() === '查看');
|
||
copyBtn?.trigger('click');
|
||
expect((vueRouter as any).useRoute().path).toBe('/editor/undefined');
|
||
});
|
||
|
||
it('新建活动出现弹窗', async () => {
|
||
// 在创建活动页点击创建跳转到当前页面
|
||
const wrapper = getWrapper();
|
||
const createButton = wrapper.find('#create');
|
||
await createButton.trigger('click');
|
||
expect(wrapper.vm.dialog?.dialogVisible).toBe(true);
|
||
});
|
||
|
||
it('路由的活动状态值缺省', () => {
|
||
(vueRouter as any).setRoute({
|
||
path: '',
|
||
params: {
|
||
type: 'all',
|
||
// 第一页
|
||
page: 0,
|
||
query: 'query',
|
||
// 活动状态
|
||
status: undefined,
|
||
},
|
||
query: {
|
||
create: false,
|
||
},
|
||
});
|
||
getWrapper();
|
||
expect((actApi.getList as jest.Mock).mock.calls[0][0].data.where.actStatus).toBe(-1);
|
||
});
|
||
});
|