2019-08-24 00:25:45 +08:00
|
|
|
import React from 'react';
|
2022-09-05 19:41:32 +08:00
|
|
|
import type { InputRef } from '..';
|
2019-08-24 00:25:45 +08:00
|
|
|
import Input from '..';
|
|
|
|
import focusTest from '../../../tests/shared/focusTest';
|
2019-08-26 22:53:20 +08:00
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
2020-01-02 19:10:16 +08:00
|
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
2022-10-31 10:19:56 +08:00
|
|
|
import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
|
2020-06-16 19:49:08 +08:00
|
|
|
import Password from '../Password';
|
2019-08-24 00:25:45 +08:00
|
|
|
|
|
|
|
describe('Input.Password', () => {
|
2020-06-16 19:49:08 +08:00
|
|
|
focusTest(Input.Password, { refFocus: true });
|
2019-08-26 22:53:20 +08:00
|
|
|
mountTest(Input.Password);
|
2020-01-02 19:10:16 +08:00
|
|
|
rtlTest(Input.Password);
|
2019-08-24 00:25:45 +08:00
|
|
|
|
|
|
|
it('should get input element from ref', () => {
|
2022-09-05 19:41:32 +08:00
|
|
|
const ref = React.createRef<InputRef>();
|
2023-06-07 21:59:21 +08:00
|
|
|
const onSelect = jest.fn();
|
2020-06-16 19:49:08 +08:00
|
|
|
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container } = render(<Input.Password onSelect={onSelect} ref={ref} />);
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(ref.current?.input instanceof HTMLInputElement).toBe(true);
|
|
|
|
fireEvent.select(container.querySelector('input')!);
|
2020-06-16 19:49:08 +08:00
|
|
|
expect(onSelect).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should support size', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { asFragment, container } = render(<Password size="large" />);
|
|
|
|
expect(container.querySelector('.ant-input-affix-wrapper-lg')).toBeTruthy();
|
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
2019-08-24 00:25:45 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should change type when click', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { asFragment, container } = render(<Input.Password />);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.change(container.querySelector('input')!, { target: { value: '111' } });
|
2022-06-02 16:28:22 +08:00
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
|
|
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.click(container.querySelector('.ant-input-password-icon')!);
|
2022-06-02 16:28:22 +08:00
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
|
|
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.click(container.querySelector('.ant-input-password-icon')!);
|
2022-06-02 16:28:22 +08:00
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
2019-08-24 00:25:45 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('visibilityToggle should work', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container, rerender } = render(<Input.Password visibilityToggle={false} />);
|
|
|
|
expect(container.querySelectorAll('.anticon-eye').length).toBe(0);
|
|
|
|
rerender(<Input.Password visibilityToggle />);
|
|
|
|
expect(container.querySelectorAll('.anticon-eye-invisible').length).toBe(1);
|
2019-08-24 00:25:45 +08:00
|
|
|
});
|
|
|
|
|
2019-09-19 17:19:22 +08:00
|
|
|
it('should not toggle visibility when disabled prop is true', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container } = render(<Input.Password disabled />);
|
|
|
|
expect(container.querySelectorAll('.anticon-eye-invisible').length).toBe(1);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.click(container.querySelector('.anticon-eye-invisible')!);
|
2022-06-02 16:28:22 +08:00
|
|
|
expect(container.querySelectorAll('.anticon-eye').length).toBe(0);
|
2019-09-19 17:19:22 +08:00
|
|
|
});
|
|
|
|
|
2019-08-24 00:25:45 +08:00
|
|
|
it('should keep focus state', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container, unmount } = render(<Input.Password defaultValue="111" autoFocus />, {
|
|
|
|
container: document.body,
|
2020-02-17 19:12:42 +08:00
|
|
|
});
|
2022-06-02 16:28:22 +08:00
|
|
|
expect(document.activeElement).toBe(container.querySelector('input'));
|
2022-09-05 19:41:32 +08:00
|
|
|
(document?.activeElement as any)?.setSelectionRange(2, 2);
|
|
|
|
expect((document?.activeElement as any)?.selectionStart).toBe(2);
|
|
|
|
fireEvent.mouseDown(container.querySelector('.ant-input-password-icon')!);
|
|
|
|
fireEvent.mouseUp(container.querySelector('.ant-input-password-icon')!);
|
|
|
|
fireEvent.click(container.querySelector('.ant-input-password-icon')!);
|
2022-06-02 16:28:22 +08:00
|
|
|
expect(document.activeElement).toBe(container.querySelector('input'));
|
2022-09-05 19:41:32 +08:00
|
|
|
expect((document?.activeElement as any).selectionStart).toBe(2);
|
2022-06-02 16:28:22 +08:00
|
|
|
unmount();
|
2019-08-24 00:25:45 +08:00
|
|
|
});
|
2019-12-31 14:41:09 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/20541
|
|
|
|
it('should not show value attribute in input element', async () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useFakeTimers();
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container } = render(<Input.Password />);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.change(container.querySelector('input')!, { target: { value: 'value' } });
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.runAllTimers();
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(container.querySelector('input')?.getAttribute('value')).toBeFalsy();
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useRealTimers();
|
2019-12-31 14:41:09 +08:00
|
|
|
});
|
|
|
|
|
2020-05-28 14:49:03 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/24526
|
|
|
|
it('should not show value attribute in input element after blur it', async () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useFakeTimers();
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container } = render(<Input.Password />);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.change(container.querySelector('input')!, { target: { value: 'value' } });
|
2022-10-31 10:19:56 +08:00
|
|
|
await waitFakeTimer();
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(container.querySelector('input')?.getAttribute('value')).toBeFalsy();
|
|
|
|
fireEvent.blur(container.querySelector('input')!);
|
2022-10-31 10:19:56 +08:00
|
|
|
await waitFakeTimer();
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(container.querySelector('input')?.getAttribute('value')).toBeFalsy();
|
|
|
|
fireEvent.focus(container.querySelector('input')!);
|
2022-10-31 10:19:56 +08:00
|
|
|
await waitFakeTimer();
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(container.querySelector('input')?.getAttribute('value')).toBeFalsy();
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.clearAllTimers();
|
|
|
|
jest.useRealTimers();
|
2020-05-28 14:49:03 +08:00
|
|
|
});
|
|
|
|
|
2019-12-31 14:41:09 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/20541
|
|
|
|
it('could be unmount without errors', () => {
|
|
|
|
expect(() => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container, unmount } = render(<Input.Password />);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.change(container.querySelector('input')!, { target: { value: 'value' } });
|
2022-06-02 16:28:22 +08:00
|
|
|
unmount();
|
2019-12-31 14:41:09 +08:00
|
|
|
}).not.toThrow();
|
|
|
|
});
|
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/pull/20544#issuecomment-569861679
|
2020-06-17 10:58:24 +08:00
|
|
|
it('should not contain value attribute in input element with defaultValue', async () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useFakeTimers();
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container } = render(<Input.Password defaultValue="value" />);
|
2022-10-31 10:19:56 +08:00
|
|
|
await waitFakeTimer();
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(container.querySelector('input')?.getAttribute('value')).toBeFalsy();
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.clearAllTimers();
|
|
|
|
jest.useRealTimers();
|
2019-12-31 14:41:09 +08:00
|
|
|
});
|
2022-10-13 15:07:43 +08:00
|
|
|
|
|
|
|
it('should not show value attribute in input element after toggle visibility', async () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useFakeTimers();
|
2022-10-13 15:07:43 +08:00
|
|
|
const { container } = render(<Input.Password />);
|
|
|
|
fireEvent.change(container.querySelector('input')!, { target: { value: 'value' } });
|
2022-10-31 10:19:56 +08:00
|
|
|
await waitFakeTimer();
|
2022-10-13 15:07:43 +08:00
|
|
|
expect(container.querySelector('input')?.getAttribute('value')).toBeFalsy();
|
|
|
|
fireEvent.click(container.querySelector('.ant-input-password-icon')!);
|
2022-10-31 10:19:56 +08:00
|
|
|
await waitFakeTimer();
|
2022-10-13 15:07:43 +08:00
|
|
|
expect(container.querySelector('input')?.getAttribute('value')).toBeTruthy();
|
|
|
|
fireEvent.click(container.querySelector('.ant-input-password-icon')!);
|
2022-10-31 10:19:56 +08:00
|
|
|
await waitFakeTimer();
|
2022-10-13 15:07:43 +08:00
|
|
|
expect(container.querySelector('input')?.getAttribute('value')).toBeFalsy();
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.clearAllTimers();
|
|
|
|
jest.useRealTimers();
|
2022-10-13 15:07:43 +08:00
|
|
|
});
|
2022-10-31 21:15:59 +08:00
|
|
|
|
|
|
|
it('should control password visible', () => {
|
|
|
|
const { container, rerender } = render(<Input.Password visibilityToggle={{ visible: true }} />);
|
|
|
|
expect(container.querySelectorAll('.anticon-eye').length).toBe(1);
|
|
|
|
rerender(<Input.Password visibilityToggle={{ visible: false }} />);
|
|
|
|
expect(container.querySelectorAll('.anticon-eye-invisible').length).toBe(1);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should call onPasswordVisibleChange when visible is changed', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const handlePasswordVisibleChange = jest.fn();
|
2022-10-31 21:15:59 +08:00
|
|
|
const { container, rerender } = render(
|
|
|
|
<Input.Password visibilityToggle={{ onVisibleChange: handlePasswordVisibleChange }} />,
|
|
|
|
);
|
|
|
|
fireEvent.click(container.querySelector('.ant-input-password-icon')!);
|
|
|
|
expect(handlePasswordVisibleChange).toHaveBeenCalledTimes(1);
|
|
|
|
rerender(
|
|
|
|
<Input.Password visibilityToggle={{ onVisibleChange: handlePasswordVisibleChange }} />,
|
|
|
|
);
|
|
|
|
expect(handlePasswordVisibleChange).toHaveBeenCalledTimes(1);
|
|
|
|
fireEvent.click(container.querySelector('.ant-input-password-icon')!);
|
|
|
|
expect(handlePasswordVisibleChange).toHaveBeenCalledTimes(2);
|
|
|
|
});
|
2019-08-24 00:25:45 +08:00
|
|
|
});
|