初始化

刘光辉

11 小时以前 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
88
89
90
91
import { mount } from '@vue/test-utils';
 
import { describe, expect, it } from 'vitest';
 
import TrendTablePopup from '../TrendTablePopup.vue';
 
const options = [
  { code: 'W-1', label: 'W-1', location: '制水间使用点', value: 'point-1' },
  { code: 'W-2', label: 'W-2', location: '灌装间回水口', value: 'point-2' },
];
 
const columns = [
  { dataIndex: 'code', key: 'code', title: '取样点编号', width: 180 },
  { dataIndex: 'location', key: 'location', title: '取样地点' },
];
 
function mountPopup() {
  return mount(TrendTablePopup, {
    global: {
      stubs: {
        AModal: {
          name: 'AModal',
          props: ['bodyStyle', 'destroyOnClose', 'open', 'width'],
          template: '<div><slot /></div>',
        },
        'a-button': true,
        'a-input': {
          template: '<div class="input-stub" @click="$emit(\'click\')"><slot name="suffix" /></div>',
        },
        'a-table': {
          name: 'ATable',
          props: ['columns', 'customRow', 'dataSource', 'pagination', 'rowKey', 'rowSelection', 'scroll'],
          template: '<div />',
        },
      },
    },
    props: {
      columns,
      options,
      placeholder: '全部取样点',
      popupTitle: '选择取样点',
      value: ['point-1'],
      width: 760,
    },
  });
}
 
describe('trend table popup', () => {
  it('configures a paginated table with consistent modal spacing', async () => {
    const wrapper = mountPopup();
    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(modal.props('width')).toBe(760);
    expect(table.props('columns')).toEqual(columns);
    expect(table.props('pagination')).toMatchObject({ pageSize: 25, showSizeChanger: true });
    expect(table.props('rowKey')).toBe('value');
    expect(table.props('rowSelection')).toMatchObject({ preserveSelectedRowKeys: true, selectedRowKeys: ['point-1'] });
    expect(wrapper.find('.fixed-height-table').exists()).toBe(true);
    expect(wrapper.find('.dropdown-icon').exists()).toBe(true);
    expect(wrapper.find('[aria-label="清空"]').exists()).toBe(false);
    expect(wrapper.find('a-button-stub').exists()).toBe(false);
  });
 
  it('emits only selected ids when the modal is confirmed', async () => {
    const wrapper = mountPopup();
    const table = wrapper.findComponent({ name: 'ATable' });
 
    table.props('rowSelection').onChange(['point-1', 'point-2']);
    await wrapper.findComponent({ name: 'AModal' }).vm.$emit('ok');
 
    expect(wrapper.emitted('update:value')?.at(-1)).toEqual([['point-1', 'point-2']]);
    expect(wrapper.emitted('change')?.at(-1)).toEqual([['point-1', 'point-2']]);
  });
 
  it('toggles selection when a table row is clicked', async () => {
    const wrapper = mountPopup();
    await wrapper.find('.input-stub').trigger('click');
    const table = wrapper.findComponent({ name: 'ATable' });
 
    table
      .props('customRow')(options[1])
      .onClick({ target: { closest: () => null } });
    await wrapper.findComponent({ name: 'AModal' }).vm.$emit('ok');
 
    expect(wrapper.emitted('update:value')?.at(-1)).toEqual([['point-1', 'point-2']]);
  });
});