+
+
+
-
-
-
+ class="rc-tree-select-tree-indent-unit"
+ />
+
+
`;
exports[`TreeSelect.basic search nodes renders search input 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- labela
-
-
-
-
-
-
-
-
-
- labelb
-
-
-
-
-
-
-
-
-
-
-
-
-
+
`;
diff --git a/tests/setup.js b/tests/setup.js
index 6084fb66..251482d4 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -11,7 +11,7 @@ Enzyme.configure({ adapter: new Adapter() });
Object.assign(Enzyme.ReactWrapper.prototype, {
openSelect() {
- this.find('.rc-tree-select-selector').simulate('mousedown');
+ this.find('.rc-tree-select').first().simulate('mousedown');
},
selectNode(index = 0) {
this.find('.rc-tree-select-tree-node-content-wrapper').at(index).simulate('click');
@@ -40,11 +40,37 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
return this.find('.rc-tree-select-clear').first().simulate('mouseDown');
},
search(text) {
- this.find('input.rc-tree-select-selection-search-input').simulate('change', {
+ this.find('input.rc-tree-select-input').simulate('change', {
target: { value: text },
});
},
isOpen() {
- return this.find('.rc-tree-select').hasClass('rc-tree-select-open');
+ return this.find('.rc-tree-select').first().hasClass('rc-tree-select-open');
},
});
+
+window.MessageChannel = class {
+ constructor() {
+ const createPort = () => {
+ const port = {
+ onmessage: null,
+ postMessage: message => {
+ setTimeout(() => {
+ if (port._target && typeof port._target.onmessage === 'function') {
+ port._target.onmessage({ data: message });
+ }
+ }, 0);
+ },
+ _target: null,
+ };
+ return port;
+ };
+
+ const port1 = createPort();
+ const port2 = createPort();
+ port1._target = port2;
+ port2._target = port1;
+ this.port1 = port1;
+ this.port2 = port2;
+ }
+};
diff --git a/tests/shared/focusTest.js b/tests/shared/focusTest.js
index 7ca1f985..56b62d21 100644
--- a/tests/shared/focusTest.js
+++ b/tests/shared/focusTest.js
@@ -3,7 +3,7 @@ import React from 'react';
import { mount } from 'enzyme';
import TreeSelect from '../../src';
-export default function focusTest(mode) {
+export default function focusTest(multiple = false) {
let container;
beforeEach(() => {
@@ -21,7 +21,7 @@ export default function focusTest(mode) {
const treeRef = React.createRef();
mount(
-
,
+
,
{ attachTo: container },
);
@@ -35,7 +35,7 @@ export default function focusTest(mode) {
const treeRef = React.createRef();
mount(
-
,
+
,
{ attachTo: container },
);
treeRef.current.focus();
@@ -46,10 +46,9 @@ export default function focusTest(mode) {
it('autoFocus', () => {
const handleFocus = jest.fn();
const treeData = [{ key: '0', value: '0', title: '0 label' }];
- mount(
-
,
- { attachTo: container },
- );
+ mount(
, {
+ attachTo: container,
+ });
expect(handleFocus).toHaveBeenCalled();
});
}
diff --git a/tests/util.tsx b/tests/util.tsx
index d9f7123d..5a3e7262 100644
--- a/tests/util.tsx
+++ b/tests/util.tsx
@@ -1,6 +1,43 @@
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, createEvent, act } from '@testing-library/react';
export function selectNode(index = 0) {
const treeNode = document.querySelectorAll('.rc-tree-select-tree-node-content-wrapper')[index];
fireEvent.click(treeNode);
}
+
+export function keyDown(element: HTMLElement, keyCode: number) {
+ const event = createEvent.keyDown(element, { keyCode });
+ fireEvent(element, event);
+}
+
+export function keyUp(element: HTMLElement, keyCode: number) {
+ const event = createEvent.keyUp(element, { keyCode });
+ fireEvent(element, event);
+}
+
+export function triggerOpen(element: HTMLElement) {
+ fireEvent.mouseDown(element.querySelector('.rc-tree-select')!);
+ act(() => {
+ jest.advanceTimersByTime(10000);
+ });
+}
+
+export function expectOpen(element: HTMLElement, open = true) {
+ act(() => {
+ jest.advanceTimersByTime(10000);
+ });
+ return expect(!!element.querySelector('.rc-tree-select-open')).toBe(open);
+}
+
+export function search(element: HTMLElement, value: string) {
+ const input = element.querySelector('input')!;
+ fireEvent.change(input, { target: { value } });
+ act(() => {
+ jest.advanceTimersByTime(10000);
+ });
+}
+
+export function clearSelection(element: HTMLElement, index = 0) {
+ const removeButton = element.querySelectorAll('.rc-tree-select-selection-item-remove')[index];
+ fireEvent.click(removeButton);
+}
diff --git a/tsconfig.json b/tsconfig.json
index eb94c63c..a0d29f04 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,8 +9,8 @@
"esModuleInterop": true,
"paths": {
"@/*": ["src/*"],
- "@@/*": ["src/.umi/*"],
- "rc-tree-select": ["src/index.tsx"]
+ "@@/*": [".dumi/tmp/*"],
+ "@rc-component/tree-select": ["src/index.tsx"]
}
}
}
diff --git a/update-example.js b/update-example.js
index 57d561c0..60452da0 100644
--- a/update-example.js
+++ b/update-example.js
@@ -13,9 +13,14 @@ paths.forEach(path => {
const name = path.split('/').pop().split('.')[0];
fs.writeFile(
`./docs/demo/${name}.md`,
- `## ${name}
+ `---
+title: ${name}
+nav:
+ title: Demo
+ path: /demo
+---
-
+
-
## Development
```
@@ -41,81 +48,83 @@ online example: https://tree-select-react-component.vercel.app/
## install
-[](https://npmjs.org/package/rc-tree-select)
+[](https://npmjs.org/package/@rc-component/tree-select)
## API
### TreeSelect props
-| name | description | type | default |
-|----------|----------------|----------|--------------|
-|className | additional css class of root dom node | String | '' |
-|prefixCls | prefix class | String | '' |
-|animation | dropdown animation name. only support slide-up now | String | '' |
-|transitionName | dropdown css animation name | String | '' |
-|choiceTransitionName | css animation name for selected items at multiple mode | String | '' |
-|dropdownMatchSelectWidth | whether dropdown's with is same with select. Default set `min-width` same as input | bool | true |
-|dropdownClassName | additional className applied to dropdown | String | - |
-|dropdownStyle | additional style applied to dropdown | Object | {} |
-|dropdownPopupAlign | specify alignment for dropdown (alignConfig of [dom-align](https://github.com/yiminghe/dom-align)) | Object | - |
-|onDropdownVisibleChange | control dropdown visible | function | `() => { return true; }` |
-|notFoundContent | specify content to show when no result matches. | String | 'Not Found' |
-|showSearch | whether show search input in single mode | bool | true |
-|allowClear | whether allowClear | bool | false |
-|maxTagTextLength | max tag text length to show | number | - |
-|maxTagCount | max tag count to show | number | - |
-|maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - |
-|multiple | whether multiple select (true when enable treeCheckable) | bool | false |
-|disabled | whether disabled select | bool | false |
-|searchValue | work with `onSearch` to make search value controlled. | string | '' |
-|defaultValue | initial selected treeNode(s) | same as value type | - |
-|value | current selected treeNode(s). | normal: String/Array