1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-23 02:10:12 +01:00
metamask-extension/ui/components/component-library/input/input.test.js
George Marshall 527387bbfe
Adding Input component and updating TextFieldBase (#17664)
* Adding Input component and updating TextField

* Exporting from index, removing as prop and updating snapshot
2023-02-21 10:35:28 -08:00

146 lines
6.0 KiB
JavaScript

/* eslint-disable jest/require-top-level-describe */
import React from 'react';
import { fireEvent, render, act } from '@testing-library/react';
import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
import { TextVariant } from '../../../helpers/constants/design-system';
import { Input } from './input';
import { INPUT_TYPES } from './input.constants';
describe('Input', () => {
it('should render correctly', () => {
const { getByRole, container } = render(<Input />);
expect(getByRole('textbox')).toBeDefined();
expect(container).toMatchSnapshot();
});
it('should render correctly with custom className', () => {
const { getByRole } = render(<Input className="test" />);
expect(getByRole('textbox')).toHaveClass('test');
});
it('should render and be able to input text', () => {
const { getByTestId } = render(<Input data-testid="input" />);
const InputComponent = getByTestId('input');
expect(InputComponent.value).toBe(''); // initial value is empty string
fireEvent.change(InputComponent, { target: { value: 'text value' } });
expect(InputComponent.value).toBe('text value');
fireEvent.change(InputComponent, { target: { value: '' } }); // reset value
expect(InputComponent.value).toBe(''); // value is empty string after reset
});
it('should render without state styles when disableStateStyles is true', async () => {
const { getByTestId, user } = renderWithUserEvent(
<Input data-testid="input" disableStateStyles />,
);
const InputComponent = getByTestId('input');
await user.click(InputComponent);
expect(getByTestId('input')).toHaveFocus();
expect(getByTestId('input')).toHaveClass('mm-input--disable-state-styles');
expect(getByTestId('input')).not.toHaveClass('mm-input--disabled');
});
it('should render and fire onFocus and onBlur events', async () => {
const onFocus = jest.fn();
const onBlur = jest.fn();
const { getByTestId, user } = renderWithUserEvent(
<Input data-testid="input" onFocus={onFocus} onBlur={onBlur} />,
);
const InputComponent = getByTestId('input');
await user.click(InputComponent);
expect(onFocus).toHaveBeenCalledTimes(1);
fireEvent.blur(InputComponent);
expect(onBlur).toHaveBeenCalledTimes(1);
});
it('should pass ref to allow input to focus through another element', () => {
const ref = React.createRef();
const { getByRole } = renderWithUserEvent(<Input ref={ref} />);
act(() => ref.current.focus());
expect(getByRole('textbox')).toHaveFocus();
});
it('should render and fire onChange event', async () => {
const onChange = jest.fn();
const { getByTestId, user } = renderWithUserEvent(
<Input data-testid="input" onChange={onChange} />,
);
const InputComponent = getByTestId('input');
await user.type(InputComponent, '123');
expect(InputComponent).toHaveValue('123');
expect(onChange).toHaveBeenCalledTimes(3);
});
it('should render with different types', () => {
const { getByTestId } = render(
<>
<Input data-testid="input-text-default" />
<Input type={INPUT_TYPES.TEXT} data-testid="input-text" />
<Input type={INPUT_TYPES.NUMBER} data-testid="input-number" />
<Input type={INPUT_TYPES.PASSWORD} data-testid="input-password" />
</>,
);
expect(getByTestId('input-text-default')).toHaveAttribute('type', 'text');
expect(getByTestId('input-text')).toHaveAttribute('type', 'text');
expect(getByTestId('input-number')).toHaveAttribute('type', 'number');
expect(getByTestId('input-password')).toHaveAttribute('type', 'password');
});
it('should render with autoComplete', () => {
const { getByTestId } = render(
<Input autoComplete data-testid="input-auto-complete" />,
);
expect(getByTestId('input-auto-complete')).toHaveAttribute(
'autocomplete',
'on',
);
});
it('should render with autoFocus', () => {
const { getByRole } = render(<Input autoFocus />);
expect(getByRole('textbox')).toHaveFocus();
});
it('should render with a defaultValue', () => {
const { getByRole } = render(<Input defaultValue="default value" />);
expect(getByRole('textbox').value).toBe('default value');
});
it('should render in disabled state and not focus or be clickable', async () => {
const mockOnFocus = jest.fn();
const { getByRole, getByTestId, user } = renderWithUserEvent(
<Input disabled onFocus={mockOnFocus} data-testid="input" />,
);
const InputComponent = getByTestId('input');
await user.click(InputComponent);
expect(getByRole('textbox')).toBeDisabled();
expect(mockOnFocus).toHaveBeenCalledTimes(0);
});
it('should render with maxLength and not allow more than the set characters', async () => {
const { getByRole, user } = renderWithUserEvent(<Input maxLength={5} />);
const InputComponent = getByRole('textbox');
await user.type(InputComponent, '1234567890');
expect(getByRole('textbox')).toBeDefined();
expect(InputComponent.maxLength).toBe(5);
expect(InputComponent.value).toBe('12345');
expect(InputComponent.value).toHaveLength(5);
});
it('should render with readOnly attr when readOnly is true', async () => {
const { getByTestId, getByRole, user } = renderWithUserEvent(
<Input readOnly data-testid="read-only" />,
);
const InputComponent = getByTestId('read-only');
await user.type(InputComponent, '1234567890');
expect(getByRole('textbox').value).toBe('');
expect(getByRole('textbox')).toHaveAttribute('readonly', '');
});
it('should render with required attr when required is true', () => {
const { getByTestId } = render(
<Input required data-testid="input-required" />,
);
expect(getByTestId('input-required')).toHaveAttribute('required', '');
});
it('should render with a different Text variant', () => {
const { getByTestId } = render(
<Input
data-testid="input-required"
textVariant={TextVariant.headingSm}
/>,
);
expect(getByTestId('input-required')).toHaveClass('mm-text--heading-sm');
});
});