|
- import * as React from 'react';
- import {
- render,
- screen,
- } from '@testing-library/react';
- import '@testing-library/jest-dom';
- import userEvent from '@testing-library/user-event';
- import * as TextControlBase from '@tesseract-design/web-base-textcontrol';
- import {
- MaskedTextInput
- } from '.';
-
- jest.mock('@tesseract-design/web-base-textcontrol');
-
- describe('MaskedTextInput', () => {
- it('should render an input', () => {
- render(
- <MaskedTextInput />
- );
- const textbox: HTMLInputElement = screen.getByTestId('input');
- expect(textbox).toBeInTheDocument();
- expect(textbox).toHaveProperty('type', 'password');
- });
-
- it('should render a border', () => {
- render(
- <MaskedTextInput
- border
- />
- );
- const border = screen.getByTestId('border');
- expect(border).toBeInTheDocument();
- });
-
- it('should render a label', () => {
- render(
- <MaskedTextInput
- label="foo"
- />
- );
- const textbox = screen.getByLabelText('foo');
- expect(textbox).toBeInTheDocument();
- const label = screen.getByTestId('label');
- expect(label).toHaveTextContent('foo');
- });
-
- it('should render a hidden label', () => {
- render(
- <MaskedTextInput
- label="foo"
- hiddenLabel
- />
- );
- const textbox = screen.getByLabelText('foo');
- expect(textbox).toBeInTheDocument();
- const label = screen.queryByTestId('label');
- expect(label).toBeNull();
- });
-
- it('should render a hint', () => {
- render(
- <MaskedTextInput
- hint="foo"
- />
- );
- const hint = screen.getByTestId('hint');
- expect(hint).toBeInTheDocument();
- });
-
- it('should render an indicator', () => {
- render(
- <MaskedTextInput
- indicator={
- <div data-testid="indicator" />
- }
- />
- );
- const indicator = screen.getByTestId('indicator');
- expect(indicator).toBeInTheDocument();
- });
-
- describe.each([
- TextControlBase.TextControlSize.SMALL,
- TextControlBase.TextControlSize.MEDIUM,
- TextControlBase.TextControlSize.LARGE,
- ])('on %s size', (size) => {
- it('should render input styles', () => {
- render(
- <MaskedTextInput
- size={size}
- />
- );
-
- expect(TextControlBase.Input).toBeCalledWith(expect.objectContaining({
- size,
- }));
- });
-
- it('should render hint styles', () => {
- render(
- <MaskedTextInput
- size={size}
- hint="hint"
- />
- );
-
- expect(TextControlBase.HintWrapper).toBeCalledWith(expect.objectContaining({
- size,
- }));
- });
-
- it('should render indicator styles', () => {
- render(
- <MaskedTextInput
- size={size}
- indicator={
- <div data-testid="indicator" />
- }
- />
- );
-
- expect(TextControlBase.IndicatorWrapper).toBeCalledWith(expect.objectContaining({
- size,
- }));
- });
- });
-
- it('should render a block textbox', () => {
- render(
- <MaskedTextInput
- block
- />
- );
-
- expect(TextControlBase.Root).toBeCalledWith(expect.objectContaining({
- block: true,
- }));
- });
-
- describe.each([
- TextControlBase.TextControlStyle.DEFAULT,
- TextControlBase.TextControlStyle.ALTERNATE,
- ])('on %s style', (style) => {
- it('should render input styles', () => {
- render(
- <MaskedTextInput
- style={style}
- />
- );
-
- expect(TextControlBase.Input).toBeCalledWith(expect.objectContaining({
- style,
- }));
- });
-
- it('should render hint styles', () => {
- render(
- <MaskedTextInput
- style={style}
- hint="hint"
- />
- );
-
- expect(TextControlBase.HintWrapper).toBeCalledWith(expect.objectContaining({
- style,
- }));
- });
-
- it('should render indicator styles', () => {
- render(
- <MaskedTextInput
- style={style}
- indicator={
- <div
- data-testid="indicator"
- />
- }
- />
- );
-
- expect(TextControlBase.IndicatorWrapper).toBeCalledWith(expect.objectContaining({
- style,
- }));
- });
- });
-
- it('should handle change events', () => {
- const onChange = jest.fn();
- render(
- <MaskedTextInput
- onChange={onChange}
- />
- );
- const textbox: HTMLInputElement = screen.getByTestId('input');
- userEvent.type(textbox, 'foobar');
- expect(onChange).toBeCalled();
- });
- });
|