react-native-mask-text/lib/module/components/MaskedTextInput.test.js

A React Native and Expo library to mask text

import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react-native';
import { MaskedTextInput } from './MaskedTextInput';
import { Button, Keyboard, InputAccessoryView } from 'react-native';
describe('<MaskedTextInput />', () => {
  const mockedOnChangeText = jest.fn();
  test('should render correctly without a mask', () => {
    const container = render( /*#__PURE__*/React.createElement(MaskedTextInput, {
      value: "with space and special* characters;",
      onChangeText: mockedOnChangeText
    }));
    expect(container).toMatchSnapshot();
  });
  test('should preserve spaces in rawText when no mask is provided', async () => {
    const onChangeTextMock = jest.fn();
    const container = render( /*#__PURE__*/React.createElement(MaskedTextInput, {
      onChangeText: onChangeTextMock,
      testID: "masked-text-input"
    }));
    fireEvent.changeText(container.getByTestId('masked-text-input'), 'test test');
    await waitFor(() => {
      expect(onChangeTextMock).toHaveBeenCalledWith('test test', 'test test');
    });
  });
  test('should remove spaces in rawText when mask is provided', async () => {
    const onChangeTextMock = jest.fn();
    const container = render( /*#__PURE__*/React.createElement(MaskedTextInput, {
      mask: "AAA-999",
      onChangeText: onChangeTextMock,
      testID: "masked-text-input"
    }));
    fireEvent.changeText(container.getByTestId('masked-text-input'), 'ABC 123');
    await waitFor(() => {
      expect(onChangeTextMock).toHaveBeenCalledWith('ABC-123', 'ABC123');
    });
  });
  test('should renders correctly with custom mask', () => {
    const container = render( /*#__PURE__*/React.createElement(MaskedTextInput, {
      mask: "AAA-999",
      onChangeText: mockedOnChangeText
    }));
    expect(container).toMatchSnapshot();
  });
  test('should renders correctly with custom mask default value', () => {
    const container = render( /*#__PURE__*/React.createElement(MaskedTextInput, {
      mask: "AAA-999",
      onChangeText: mockedOnChangeText,
      defaultValue: "ABC-123"
    }));
    expect(container.getByDisplayValue('ABC-123')).toBeTruthy();
  });
  test('should renders correctly with currency mask', () => {
    const container = render( /*#__PURE__*/React.createElement(MaskedTextInput, {
      type: "currency",
      options: {
        prefix: '$',
        decimalSeparator: '.',
        groupSeparator: ',',
        precision: 2
      },
      onChangeText: mockedOnChangeText
    }));
    expect(container).toMatchSnapshot();
  });
  test('should mask input text with custom mask', async () => {
    const container = render( /*#__PURE__*/React.createElement(MaskedTextInput, {
      mask: "AAA-999",
      onChangeText: mockedOnChangeText,
      testID: "masked-text-input"
    }));
    fireEvent.changeText(container.getByTestId('masked-text-input'), 'RCT777');
    await waitFor(() => {
      expect(container.getByDisplayValue('RCT-777')).toBeTruthy();
    });
  });
  test('should mask input text with currency mask', async () => {
    const container = render( /*#__PURE__*/React.createElement(MaskedTextInput, {
      type: "currency",
      options: {
        prefix: '$',
        decimalSeparator: '.',
        groupSeparator: ',',
        precision: 2
      },
      onChangeText: mockedOnChangeText,
      testID: "masked-text-input"
    }));
    fireEvent.changeText(container.getByTestId('masked-text-input'), '5999');
    await waitFor(() => {
      expect(container.getByDisplayValue('$59.99')).toBeTruthy();
    });
  });
  test('should renders correctly with an accessory view', () => {
    const container = render( /*#__PURE__*/React.createElement(MaskedTextInput, {
      type: "currency",
      options: {
        prefix: '$',
        decimalSeparator: '.',
        groupSeparator: ',',
        precision: 2
      },
      onChangeText: mockedOnChangeText,
      inputAccessoryViewID: "Done",
      inputAccessoryView: /*#__PURE__*/React.createElement(InputAccessoryView, {
        nativeID: "Done"
      }, /*#__PURE__*/React.createElement(Button, {
        onPress: () => Keyboard.dismiss(),
        title: "Clear text"
      }))
    }));
    const tree = container.toJSON();
    expect(tree[0].props.inputAccessoryViewID).toBe('Done');
    expect(tree[1].props.nativeID).toBe('Done');
  });
  test('should be bold when the textBold attribute is added', () => {
    const container = render( /*#__PURE__*/React.createElement(MaskedTextInput, {
      testID: "masked-text-input",
      onChangeText: mockedOnChangeText,
      textBold: true,
      mask: "99/99/9999"
    }));
    expect(container.getByTestId('masked-text-input')).toHaveStyle({
      fontWeight: 'bold'
    });
  });
  test('should be italic when the textItalic attribute is added', () => {
    const container = render( /*#__PURE__*/React.createElement(MaskedTextInput, {
      testID: "masked-text-input",
      onChangeText: mockedOnChangeText,
      textItalic: true,
      mask: "99/99/9999"
    }));
    expect(container.getByTestId('masked-text-input')).toHaveStyle({
      fontStyle: 'italic'
    });
  });
  test('should be the line style added to the text when the textDecoration attribute has a non-null value', () => {
    const textDecorationLine = 'underline';
    const container = render( /*#__PURE__*/React.createElement(MaskedTextInput, {
      testID: "masked-text-input",
      onChangeText: mockedOnChangeText,
      textDecoration: textDecorationLine,
      mask: "99/99/9999"
    }));
    expect(container.getByTestId('masked-text-input')).toHaveStyle({
      textDecorationLine: textDecorationLine
    });
  });
});
//# sourceMappingURL=MaskedTextInput.test.js.map