tree-select/tests/Select.semantic.spec.tsx at 969662942cbe2cbafdbfac9de0c58bb57e864039 · react-component/tree-select · GitHub

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
import React from 'react';
import { render } from '@testing-library/react';
import TreeSelect, { TreeNode } from '../src';

describe('TreeSelect.semantic', () => {
  const createSingleSelect = (props = {}) => (
    <TreeSelect {...props}>
      <TreeNode value="0" title="Node 0" key="0">
        <TreeNode value="0-0" title="Node 0-0" key="0-0" />
        <TreeNode value="0-1" title="Node 0-1" key="0-1" />
      </TreeNode>
      <TreeNode value="1" title="Node 1" key="1" />
    </TreeSelect>
  );

  const createMultipleSelect = (props = {}) => (
    <TreeSelect multiple {...props}>
      <TreeNode value="0" title="Node 0" key="0">
        <TreeNode value="0-0" title="Node 0-0" key="0-0" />
        <TreeNode value="0-1" title="Node 0-1" key="0-1" />
      </TreeNode>
      <TreeNode value="1" title="Node 1" key="1" />
    </TreeSelect>
  );

  it('should support semantic classNames and styles in single mode', () => {
    const classNames = {
      prefix: 'custom-prefix',
      suffix: 'custom-suffix',
      input: 'custom-input',
      clear: 'custom-clear',
      placeholder: 'custom-placeholder',
      content: 'custom-content',
    };

    const styles = {
      prefix: { color: 'red' },
      suffix: { color: 'blue' },
      input: { backgroundColor: 'yellow' },
      clear: { fontSize: '14px' },
      placeholder: { fontStyle: 'italic' },
      content: { fontWeight: 'bold' },
    };

    const { container } = render(
      createSingleSelect({
        value: '0',
        prefix: <span>Prefix</span>,
        suffix: <span>Suffix</span>,
        allowClear: true,
        placeholder: 'Please select',
        classNames,
        styles,
      }),
    );

    // Test prefix
    const prefixElement = container.querySelector(`.${classNames.prefix}`);
    expect(prefixElement).toBeTruthy();
    expect(prefixElement).toHaveStyle(styles.prefix);

    // Test suffix
    const suffixElement = container.querySelector(`.${classNames.suffix}`);
    expect(suffixElement).toBeTruthy();
    expect(suffixElement).toHaveStyle(styles.suffix);

    // Test content
    const contentElement = container.querySelector(`.${classNames.content}`);
    expect(contentElement).toBeTruthy();
    expect(contentElement).toHaveStyle(styles.content);

    // Test clear
    const clearElement = container.querySelector(`.${classNames.clear}`);
    expect(clearElement).toBeTruthy();
    expect(clearElement).toHaveStyle(styles.clear);
  });

  it('should support semantic classNames and styles in multiple mode', () => {
    const classNames = {
      prefix: 'custom-prefix',
      suffix: 'custom-suffix',
      content: 'custom-content',
      clear: 'custom-clear',
      item: 'custom-item',
      itemContent: 'custom-item-content',
      itemRemove: 'custom-item-remove',
    };

    const styles = {
      prefix: { color: 'red' },
      suffix: { color: 'blue' },
      content: { fontWeight: 'bold' },
      clear: { fontSize: '14px' },
      item: { border: '1px solid green' },
      itemContent: { padding: '4px' },
      itemRemove: { color: 'orange' },
    };

    const { container } = render(
      createMultipleSelect({
        value: ['0', '1'],
        prefix: <span>Prefix</span>,
        suffix: <span>Suffix</span>,
        allowClear: true,
        classNames,
        styles,
      }),
    );

    // Test prefix
    const prefixElement = container.querySelector(`.${classNames.prefix}`);
    expect(prefixElement).toBeTruthy();
    expect(prefixElement).toHaveStyle(styles.prefix);

    // Test suffix
    const suffixElement = container.querySelector(`.${classNames.suffix}`);
    expect(suffixElement).toBeTruthy();
    expect(suffixElement).toHaveStyle(styles.suffix);

    // Test content
    const contentElement = container.querySelector(`.${classNames.content}`);
    expect(contentElement).toBeTruthy();
    expect(contentElement).toHaveStyle(styles.content);

    // Test clear
    const clearElement = container.querySelector(`.${classNames.clear}`);
    expect(clearElement).toBeTruthy();
    expect(clearElement).toHaveStyle(styles.clear);

    // Test items (multiple mode specific)
    const items = container.querySelectorAll(`.${classNames.item}`);
    expect(items.length).toBeGreaterThan(0);
    items.forEach(item => {
      expect(item).toHaveStyle(styles.item);
    });

    // Test item contents (multiple mode specific)
    const itemContents = container.querySelectorAll(`.${classNames.itemContent}`);
    expect(itemContents.length).toBeGreaterThan(0);
    itemContents.forEach(content => {
      expect(content).toHaveStyle(styles.itemContent);
    });

    // Test item remove buttons (multiple mode specific)
    const removeButtons = container.querySelectorAll(`.${classNames.itemRemove}`);
    expect(removeButtons.length).toBeGreaterThan(0);
    removeButtons.forEach(button => {
      expect(button).toHaveStyle(styles.itemRemove);
    });
  });
});