@leafygreen-ui/text-area v9.0.0

Text Area

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/text-area

NPM

npm install @leafygreen-ui/text-area

Example

import TextArea from '@leafygreen-ui/text-area';

const [value, setValue] = useState('');

return (
  <TextArea
    label="Text Area Label"
    description="This is the description for the text area"
    onChange={event => {
      /* Something to handle the change event */
    }}
    value={value}
  />
);

Properties

Test Harnesses

getTestUtils()

getTestUtils() is a util that allows consumers to reliably interact with LG TextArea in a product test suite. If the TextArea component cannot be found, an error will be thrown.

Usage

import TextArea, { getTestUtils } from '@leafygreen-ui/text-area';

const utils = getTestUtils(lgId?: string); // lgId refers to the custom `data-lgid` attribute passed to `TextArea`. It defaults to 'lg-text_area' if left empty.

Single TextArea

import { render } from '@testing-library/react';
import TextArea, { getTestUtils } from '@leafygreen-ui/text-area';

...

test('text-area', () => {
  render(<TextArea label="label" value="text area" />);
  const { getInput, getInputValue } = getTestUtils();

  expect(getInput()).toBeInTheDocument();
  expect(getInputValue()).toBe('text area');
});

Multiple TextArea's

When testing multiple TextArea's it is recommended to add the custom data-lgid attribute to each TextArea.

import { render } from '@testing-library/react';
import TextArea, { getTestUtils } from '@leafygreen-ui/text-area';

...

test('text-area', () => {
  render(
    <>
      <TextArea data-lgid="text-area-1" label="label 1" />
      <TextArea data-lgid="text-area-2" label="label 2" value="text area" />
    </>,
  );
  const utilsOne = getTestUtils('text-area-1'); // data-lgid
  const utilsTwo = getTestUtils('text-area-2'); // data-lgid

  // First TextArea
  expect(utilsOne.getInput()).toBeInTheDocument();
  expect(utilsOne.getInputValue()).toBe('');

  // Second TextArea
  expect(utilsTwo.getInput()).toBeInTheDocument();
  expect(utilsTwo.getInputValue()).toBe('text area');
});

TextArea with other LG form elements

import { render } from '@testing-library/react';
import Toggle, { getTestUtils as getToggleTestUtils } from '@leafygreen-ui/toggle';
import TextInput, { getTestUtils as getTextInputTestUtils } from '@leafygreen-ui/text-input';
import TextArea, { getTestUtils as getTextAreaTestUtils } from '@leafygreen-ui/text-area';

...

test('Form', () => {
  render(
    <Form>
      <Toggle aria-label="Toggle label" />
      <TextInput label="TextInput label" />
      <TextArea label="TextArea label" />
    </Form>,
  );

  const toggleInputUtils = getToggleTestUtils();
  const textInputUtils = getTextInputTestUtils();
  const textAreaUtils = getTextAreaTestUtils();

  // LG Toggle
  expect(toggleInputUtils.getInput()).toBeInTheDocument();
  expect(toggleInputUtils.getInputValue()).toBe('false');

  // LG TextInput
  expect(textInputUtils.getInput()).toBeInTheDocument();
  expect(textInputUtils.getInputValue()).toBe('');

  // LG TextArea
  expect(textAreaUtils.getInput()).toBeInTheDocument();
  expect(textAreaUtils.getInputValue()).toBe('');
});

Test Utils

Elements

const {
  getInput,
  getLabel,
  getDescription,
  getErrorMessage,
  getInputValue,
  isDisabled,
  isError,
} = getTestUtils();