初始化

刘光辉

7 小时以前 0dfe84494048ce27ba8449831782128412d3eb13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { mount } from '@vue/test-utils';
 
import { describe, expect, it } from 'vitest';
 
import AnalysisOptionPopup from '../AnalysisOptionPopup.vue';
 
const options = [
  { code: 'CJ', key: 'category-finished', name: '成品' },
  { code: 'YL', key: 'category-material', name: '原料' },
];
 
const columns = [
  { dataIndex: 'code', key: 'code', title: '分类编码', width: 180 },
  { dataIndex: 'name', key: 'name', title: '分类名称' },
];
 
function mountPopup(mode: 'multiple' | 'single', value: string | string[]) {
  return mount(AnalysisOptionPopup, {
    global: {
      stubs: {
        AModal: {
          name: 'AModal',
          props: ['bodyStyle', 'destroyOnClose', 'open', 'width'],
          template: '<div><slot /></div>',
        },
        'a-input': {
          name: 'AInput',
          props: ['value'],
          template: '<div class="input-stub" @click="$emit(\'click\')"><slot name="prefix"/><slot name="suffix"/></div>',
        },
        'a-table': {
          name: 'ATable',
          props: ['columns', 'customRow', 'dataSource', 'pagination', 'rowKey', 'rowSelection'],
          template: '<div />',
        },
      },
    },
    props: { columns, mode, options, popupTitle: '选择分类', value },
  });
}
 
describe('stability analysis option popup', () => {
  it('uses a radio column and keeps row-click selection in sync', async () => {
    const wrapper = mountPopup('single', 'category-finished');
    await wrapper.find('.input-stub').trigger('click');
    const modal = wrapper.findComponent({ name: 'AModal' });
    const table = wrapper.findComponent({ name: 'ATable' });
 
    expect(modal.props('bodyStyle')).toEqual({ padding: '16px' });
    expect(modal.props('destroyOnClose')).toBe(true);
    expect(table.props('rowKey')).toBe('key');
    expect(table.props('rowSelection')).toMatchObject({
      preserveSelectedRowKeys: true,
      selectedRowKeys: ['category-finished'],
      type: 'radio',
    });
    expect(table.props('pagination')).toMatchObject({ pageSize: 25, showSizeChanger: true });
 
    table.props('rowSelection').onChange(['category-material']);
    await modal.vm.$emit('ok');
 
    expect(wrapper.emitted('update:value')?.at(-1)).toEqual(['category-material']);
    expect(wrapper.emitted('change')?.at(-1)).toEqual(['category-material']);
  });
 
  it('preserves and confirms multiple selected keys', async () => {
    const wrapper = mountPopup('multiple', ['category-finished']);
    await wrapper.find('.input-stub').trigger('click');
    const table = wrapper.findComponent({ name: 'ATable' });
    const selection = table.props('rowSelection');
 
    expect(selection).toMatchObject({ preserveSelectedRowKeys: true, selectedRowKeys: ['category-finished'] });
    selection.onChange(['category-finished', 'category-material']);
    await wrapper.findComponent({ name: 'AModal' }).vm.$emit('ok');
 
    expect(wrapper.emitted('update:value')?.at(-1)).toEqual([['category-finished', 'category-material']]);
  });
 
  it('does not submit the draft selection when cancelled', async () => {
    const wrapper = mountPopup('multiple', ['category-finished']);
    await wrapper.find('.input-stub').trigger('click');
    wrapper.findComponent({ name: 'ATable' }).props('rowSelection').onChange(['category-material']);
    await wrapper.findComponent({ name: 'AModal' }).vm.$emit('cancel');
 
    expect(wrapper.emitted('update:value')).toBeUndefined();
  });
});