('.rc-input-clear-icon')!,
+ );
+ expect(onClear).toHaveBeenCalled();
+ });
+ });
});
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index 024b277..cb35b43 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -130,7 +130,7 @@ exports[`Input allowClear should change type when click 1`] = `
exports[`Input allowClear should change type when click 2`] = `
[...new Intl.Segmenter().segment(val)];
+
+describe('Input.Count', () => {
+ it('basic emoji take length', () => {
+ const { container } = render();
+ expect(
+ container.querySelector('.rc-input-show-count-suffix')?.textContent,
+ ).toEqual('11');
+ });
+
+ it('strategy', () => {
+ const { container } = render(
+ getSegments(val).length }}
+ value="π¨βπ©βπ§βπ¦"
+ />,
+ );
+ expect(
+ container.querySelector('.rc-input-show-count-suffix')?.textContent,
+ ).toEqual('1');
+ });
+
+ it('exceed style', () => {
+ const { container } = render(
+ ,
+ );
+ expect(container.querySelector('.rc-input-out-of-range')).toBeTruthy();
+ });
+
+ it('show formatter', () => {
+ const { container } = render(
+
+ `${value}_${count}_${maxLength}`,
+ }}
+ value="π¨βπ©βπ§βπ¦"
+ maxLength={5}
+ />,
+ );
+ expect(
+ container.querySelector('.rc-input-show-count-suffix')?.textContent,
+ ).toEqual('π¨βπ©βπ§βπ¦_11_5');
+ });
+
+ it('exceedFormatter', () => {
+ const onCompositionStart = jest.fn();
+ const onCompositionEnd = jest.fn();
+
+ const { container } = render(
+
+ getSegments(val)
+ .filter((seg) => seg.index + seg.segment.length <= max)
+ .map((seg) => seg.segment)
+ .join(''),
+ }}
+ onCompositionStart={onCompositionStart}
+ onCompositionEnd={onCompositionEnd}
+ />,
+ );
+
+ // Allow input
+ fireEvent.compositionStart(container.querySelector('input')!);
+ fireEvent.change(container.querySelector('input')!, {
+ target: {
+ value: 'π₯π₯π₯π₯π₯',
+ },
+ });
+ expect(container.querySelector('input')?.value).toEqual('π₯π₯π₯π₯π₯');
+ expect(onCompositionStart).toHaveBeenCalled();
+
+ // Fallback
+ fireEvent.compositionEnd(container.querySelector('input')!);
+ expect(container.querySelector('input')?.value).toEqual('π₯');
+ expect(onCompositionEnd).toHaveBeenCalled();
+ });
+
+ it('exceedFormatter selection', () => {
+ const { container } = render(
+ val.slice(0, max),
+ }}
+ defaultValue={'123'}
+ />,
+ );
+
+ const input = container.querySelector('input')!;
+ const setSelectionRange = jest.spyOn(input, 'setSelectionRange');
+
+ fireEvent.change(input, {
+ target: {
+ selectionStart: 2,
+ selectionEnd: 2,
+ value: '1a23',
+ },
+ });
+
+ expect(setSelectionRange).toHaveBeenCalledWith(2, 2);
+ });
+
+ it('input using the input method should trigger onChange once', () => {
+ const onChange = jest.fn();
+ const { container } = render();
+ const input = container.querySelector('input')!;
+ fireEvent.compositionStart(input);
+ fireEvent.compositionUpdate(input, { data: 'δ½ ' });
+ fireEvent.compositionEnd(input, { data: 'δ½ ε₯½' });
+ fireEvent.input(input, { target: { value: 'δ½ ε₯½' } });
+ expect(onChange).toHaveBeenCalledTimes(1);
+ });
+
+ it('using the input method to enter the cropped content should trigger onChange twice', () => {
+ const onChange = jest.fn();
+ const onCompositionEnd = jest.fn();
+ const { container } = render(
+
+ getSegments(val)
+ .filter((seg) => seg.index + seg.segment.length <= max)
+ .map((seg) => seg.segment)
+ .join(''),
+ }}
+ onChange={onChange}
+ onCompositionEnd={onCompositionEnd}
+ />,
+ );
+ const input = container.querySelector('input')!;
+ fireEvent.compositionStart(input);
+ fireEvent.compositionUpdate(input, { target: { value: 'δ½ ' } });
+ fireEvent.compositionUpdate(input, { target: { value: 'δ½ ε₯½' } });
+ fireEvent.compositionUpdate(input, { target: { value: 'δ½ ε₯½δΈ' } });
+ fireEvent.compositionUpdate(input, { target: { value: 'δ½ ε₯½δΈη' } });
+ fireEvent.compositionEnd(input, { target: { value: 'δ½ ε₯½δΈη' } });
+ expect(input?.value).toEqual('δ½ ε₯½δΈ');
+ });
+
+ describe('cls', () => {
+ it('raw', () => {
+ const { container } = render(
+ ,
+ );
+
+ expect(container.querySelector('.rc-input-out-of-range')).toBeTruthy();
+ });
+
+ it('wrapper', () => {
+ const { container } = render(
+ ,
+ );
+
+ expect(container.querySelector('.rc-input-out-of-range')).toBeTruthy();
+ });
+
+ it('mix usage', () => {
+ const { container } = render(
+ ,
+ );
+ expect(
+ container.querySelector('.rc-input-show-count-suffix')?.textContent,
+ ).toEqual('6 / 10');
+ });
+ });
+});
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 33d4322..6daf791 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -40,6 +40,54 @@ describe('Input', () => {
expect(onPressEnter).toHaveBeenCalled();
});
+ it('should prevent long press of enter', () => {
+ const onKeyDown = jest.fn();
+ const onPressEnter = jest.fn();
+ const onKeyUp = jest.fn();
+ const { container } = render(
+ ,
+ );
+ const inputEl = container.querySelector('input')!;
+ fireEvent.keyDown(inputEl, { key: 'Enter' });
+ fireEvent.keyDown(inputEl, { key: 'Enter' });
+ fireEvent.keyUp(inputEl, { key: 'Enter' });
+ expect(onKeyDown).toBeCalledTimes(2);
+ expect(onPressEnter).toBeCalledTimes(1);
+ expect(onKeyUp).toBeCalledTimes(1);
+ });
+
+ it('should trigger onPressEnter after trigger onBlur', () => {
+ const onPressEnter = jest.fn();
+ const onBlur = jest.fn();
+ const { container } = render(
+ ,
+ );
+ const inputEl = container.querySelector('input')!;
+ fireEvent.keyDown(inputEl, { key: 'Enter' });
+ fireEvent.blur(inputEl);
+ fireEvent.keyDown(inputEl, { key: 'Enter' });
+ expect(onBlur).toBeCalled();
+ expect(onPressEnter).toBeCalledTimes(2);
+ });
+
+ it('should trigger onPressEnter after disabled', () => {
+ const onPressEnter = jest.fn();
+ const { container, rerender } = render(
+ ,
+ );
+ const inputEl = container.querySelector('input')!;
+ expect(inputEl.disabled).toBe(false);
+ fireEvent.keyDown(inputEl, { key: 'Enter' });
+ rerender();
+ expect(inputEl.disabled).toBe(true);
+ fireEvent.keyDown(inputEl, { key: 'Enter' });
+ expect(onPressEnter).toBeCalledTimes(2);
+ });
+
it('should trigger onChange', () => {
const onChange = jest.fn();
const { container } = render();
@@ -75,6 +123,25 @@ describe('Input', () => {
await user.click(container.querySelector('.rc-input-clear-icon')!);
expect(document.activeElement).toBe(container.querySelector('input'));
});
+
+ it('support bigint type', () => {
+ expect().toBeTruthy();
+ });
+
+ it('should be compatible with type="file"', () => {
+ const onChange = jest.fn();
+ const { container } = render();
+ const inputEl = container.querySelector('input')!;
+ const file = new File(['(ββ‘_β‘)'], 'file.xml', { type: 'application/xml' });
+ // upload the file by updating the value attribute of the input
+ // I assume :
+ fireEvent.change(inputEl, {
+ target: { files: [file] },
+ });
+
+ expect(onChange).toHaveBeenCalled();
+ expect(onChange.mock.calls[0][0].target.files[0]).toBe(file);
+ });
});
describe('should support showCount', () => {
@@ -98,35 +165,6 @@ describe('should support showCount', () => {
).toBe('8 / 5');
});
- describe('emoji', () => {
- it('should minimize value between emoji length and maxLength', () => {
- const { container } = render(
- ,
- );
- expect(container.querySelector('input')?.value).toBe('π');
- expect(
- container.querySelector('.rc-input-show-count-suffix')?.innerHTML,
- ).toBe('1 / 1');
-
- const { container: container1 } = render(
- ,
- );
- expect(
- container1.querySelector('.rc-input-show-count-suffix')?.innerHTML,
- ).toBe('1 / 2');
- });
-
- it('slice emoji', () => {
- const { container } = render(
- ,
- );
- expect(container.querySelector('input')?.value).toBe('1234π');
- expect(
- container.querySelector('.rc-input-show-count-suffix')?.innerHTML,
- ).toBe('5 / 5');
- });
- });
-
it('count formatter', () => {
const { container } = render(
{
inputSpy.mockRestore();
});
- it('setSelectionRange should work', () => {
- const setSelectionRange = jest.fn();
- const inputSpy = spyElementPrototypes(HTMLInputElement, {
- setSelectionRange,
+ describe('selection', () => {
+ it('setSelectionRange should work', () => {
+ const setSelectionRange = jest.fn();
+ const inputSpy = spyElementPrototypes(HTMLInputElement, {
+ setSelectionRange,
+ });
+ const ref = React.createRef();
+ render();
+ ref.current?.setSelectionRange(0, 0);
+ expect(setSelectionRange).toHaveBeenCalledWith(
+ expect.anything(),
+ 0,
+ 0,
+ undefined,
+ );
+ inputSpy.mockRestore();
+ });
+
+ it('selectionXXX should pass', () => {
+ const onChange = jest.fn();
+ const { container } = render();
+ const spySetSelectionRange = jest.spyOn(
+ container.querySelector('input')!,
+ 'setSelectionRange',
+ );
+
+ const inputEl = container.querySelector('input')!;
+ fireEvent.change(inputEl, { target: { value: 'test' } });
+
+ expect(onChange).toHaveBeenCalled();
+ const event = onChange.mock.calls[0][0];
+ expect(event.target.selectionStart).toBe(4);
+ expect(event.target.selectionEnd).toBe(4);
+
+ // Call `setSelectionRange`
+ event.target.setSelectionRange(1, 2);
+ expect(spySetSelectionRange).toHaveBeenCalledWith(1, 2);
+ });
+
+ it('email type not support selection', () => {
+ const onChange = jest.fn();
+ const { container } = render();
+
+ fireEvent.change(container.querySelector('input')!, {
+ target: { value: 'test' },
+ });
+ expect(onChange).toHaveBeenCalled();
+ const event = onChange.mock.calls[0][0];
+ expect(event.target.selectionStart).toBeNull();
+ expect(event.target.selectionEnd).toBeNull();
});
- const ref = React.createRef();
- render();
- ref.current?.setSelectionRange(0, 0);
- expect(setSelectionRange).toHaveBeenCalledWith(
- expect.anything(),
- 0,
- 0,
- undefined,
- );
- inputSpy.mockRestore();
});
it('input should work', () => {
@@ -364,6 +438,21 @@ describe('Input ref', () => {
const { container } = render();
const inputEl = container.querySelector('input')!;
expect(ref.current?.input).toBe(inputEl);
+ expect(ref.current?.nativeElement).toBe(inputEl);
+ });
+
+ it('support onClear', () => {
+ const onClear = jest.fn();
+ const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+ const { container } = render(
+ ,
+ );
+ fireEvent.click(
+ container.querySelector('.rc-input-clear-icon')!,
+ );
+ expect(onClear).toHaveBeenCalled();
+ expect(errorSpy).not.toHaveBeenCalled();
+ errorSpy.mockRestore();
});
});
diff --git a/tsconfig.json b/tsconfig.json
index e352d2d..71f9c78 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
"module": "ESNext",
"moduleResolution": "node",
"baseUrl": "./",
- "lib": ["dom", "es2017"],
+ "lib": ["dom", "es2017", "es2022", "esnext"],
"jsx": "react",
"strict": true,
"esModuleInterop": true,
@@ -18,5 +18,5 @@
"rc-input": ["src/index.tsx"]
}
},
- "include": [".dumi/**/*", ".dumirc.ts", "**/*.ts", "**/*.tsx"]
+ "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"]
}