1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/label/label.test.tsx
Gabriel Méndez 9b0f8d457b
Migrate Label component to TS (#19146)
* Migrating Label component to TS

* label TS updates

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
Co-authored-by: garrettbear <gwhisten@gmail.com>
2023-07-24 10:54:34 -07:00

61 lines
2.0 KiB
TypeScript

/* eslint-disable jest/require-top-level-describe */
import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import { Icon, IconName } from '..';
import { TextField } from '../text-field';
import { Label } from './label';
describe('label', () => {
it('should render text inside the label', () => {
const { getByText, container } = render(<Label>label</Label>);
expect(getByText('label')).toHaveClass('mm-label');
expect(getByText('label')).toBeDefined();
expect(container).toMatchSnapshot();
});
it('should render with additional className', () => {
const { getByText } = render(<Label className="test-class">label</Label>);
expect(getByText('label')).toHaveClass('mm-label test-class');
});
it('should render text and react nodes as children', () => {
const { getByText, getByTestId } = render(
<Label>
label
<Icon name={IconName.Info} data-testid="icon" />
</Label>,
);
expect(getByText('label')).toBeDefined();
expect(getByTestId('icon')).toBeDefined();
});
it('should be able to accept an htmlFor prop and focus an input of a given id', () => {
const { getByText, getByRole } = render(
<>
<Label htmlFor="input">label</Label>
<TextField id="input" />
</>,
);
const input = getByRole('textbox');
const label = getByText('label');
expect(label).toBeDefined();
expect(input).not.toHaveFocus();
fireEvent.click(label);
expect(input).toHaveFocus();
});
it('should render when wrapping an input and focus input when clicked without htmlFor', () => {
const { getByText, getByRole } = render(
<>
<Label>
Label text
<TextField />
</Label>
</>,
);
const input = getByRole('textbox');
const label = getByText('Label text');
expect(label).toBeDefined();
expect(input).not.toHaveFocus();
fireEvent.click(label);
expect(input).toHaveFocus();
});
});