|
- import * as React from 'react';
- import {
- render,
- screen
- } from '@testing-library/react';
- import userEvent from '@testing-library/user-event';
- import * as TextControlBase from '@tesseract-design/web-base-textcontrol';
- import { vi } from 'vitest';
- import {
- PhoneNumberInput,
- } from '.';
-
- vi.mock('@tesseract-design/web-base-textcontrol');
-
- describe('PhoneNumberInput', () => {
- it('renders a textbox', () => {
- render(
- <PhoneNumberInput />
- );
- const textbox = screen.getByRole('textbox');
- expect(textbox).toBeInTheDocument();
- expect(textbox).toHaveProperty('type', 'tel');
- });
-
- it('renders a border', () => {
- render(
- <PhoneNumberInput
- border
- />
- );
- const border = screen.getByTestId('border');
- expect(border).toBeInTheDocument();
- });
-
- it('renders a label', () => {
- render(
- <PhoneNumberInput
- label="foo"
- />
- );
- const textbox = screen.getByLabelText('foo');
- expect(textbox).toBeInTheDocument();
- const label = screen.getByTestId('label');
- expect(label).toHaveTextContent('foo');
- });
-
- it('renders a hidden label', () => {
- render(
- <PhoneNumberInput
- label="foo"
- hiddenLabel
- />
- );
- const textbox = screen.getByLabelText('foo');
- expect(textbox).toBeInTheDocument();
- const label = screen.queryByTestId('label');
- expect(label).toBeNull();
- });
-
- it('renders a hint', () => {
- render(
- <PhoneNumberInput
- hint="foo"
- />
- );
- const hint = screen.getByTestId('hint');
- expect(hint).toBeInTheDocument();
- });
-
- it('renders an indicator', () => {
- render(
- <PhoneNumberInput
- indicator={
- <div data-testid="indicator" />
- }
- />
- );
- const indicator = screen.getByTestId('indicator');
- expect(indicator).toBeInTheDocument();
- });
-
- describe.each(Object.values(TextControlBase.TextControlSize))('on %s size', (size) => {
- it('renders input styles', () => {
- render(
- <PhoneNumberInput
- size={size}
- />
- );
-
- expect(TextControlBase.Input).toBeCalledWith(expect.objectContaining({
- size,
- }));
- });
-
- it('renders hint styles', () => {
- render(
- <PhoneNumberInput
- size={size}
- hint="hint"
- />
- );
-
- expect(TextControlBase.HintWrapper).toBeCalledWith(expect.objectContaining({
- size,
- }));
- });
-
- it('renders indicator styles', () => {
- render(
- <PhoneNumberInput
- size={size}
- indicator={
- <div data-testid="indicator" />
- }
- />
- );
-
- expect(TextControlBase.IndicatorWrapper).toBeCalledWith(expect.objectContaining({
- size,
- }));
- });
- });
-
- it('renders a block textbox', () => {
- render(
- <PhoneNumberInput
- block
- />
- );
-
- expect(TextControlBase.Root).toBeCalledWith(expect.objectContaining({
- block: true,
- }));
- });
-
- describe.each(Object.values(TextControlBase.TextControlStyle))('on %s style', (style) => {
- it('renders input styles', () => {
- render(
- <PhoneNumberInput
- style={style}
- />
- );
-
- expect(TextControlBase.Input).toBeCalledWith(expect.objectContaining({
- style,
- }));
- });
-
- it('renders hint styles', () => {
- render(
- <PhoneNumberInput
- style={style}
- hint="hint"
- />
- );
-
- expect(TextControlBase.HintWrapper).toBeCalledWith(expect.objectContaining({
- style,
- }));
- });
-
- it('renders indicator styles', () => {
- render(
- <PhoneNumberInput
- style={style}
- indicator={
- <div
- data-testid="indicator"
- />
- }
- />
- );
-
- expect(TextControlBase.IndicatorWrapper).toBeCalledWith(expect.objectContaining({
- style,
- }));
- });
- });
-
- it('handles change events', () => {
- const onChange = vi.fn().mockImplementationOnce((e) => { e.preventDefault() });
- render(
- <PhoneNumberInput
- onChange={onChange}
- />
- );
- const textbox: HTMLInputElement = screen.getByRole('textbox');
- userEvent.type(textbox, 'foobar');
- expect(onChange).toBeCalled();
- });
-
- it('handles input events', () => {
- const onInput = vi.fn().mockImplementationOnce((e) => { e.preventDefault() });
- render(
- <PhoneNumberInput
- onInput={onInput}
- />
- );
- const textbox: HTMLInputElement = screen.getByTestId('input');
- userEvent.type(textbox, 'foobar');
- expect(onInput).toBeCalled();
- });
- });
|