/* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react';
import React from 'react';
import { IconName } from '..';
import { ButtonLink, ButtonLinkSize } from '.';
describe('ButtonLink', () => {
it('should render button element correctly', () => {
const { getByText, getByTestId, container } = render(
Button Link,
);
expect(getByText('Button Link')).toBeDefined();
expect(container.querySelector('button')).toBeDefined();
expect(getByTestId('button-link')).toHaveClass('mm-button-base');
expect(container).toMatchSnapshot();
});
it('should render anchor element correctly', () => {
const { getByTestId, container } = render(
,
);
expect(getByTestId('button-link')).toHaveClass('mm-button-base');
const anchor = container.getElementsByTagName('a').length;
expect(anchor).toBe(1);
});
it('should render button as block', () => {
const { getByTestId } = render();
expect(getByTestId('block')).toHaveClass(`mm-button-base--block`);
});
it('should render with added classname', () => {
const { getByTestId } = render(
,
);
expect(getByTestId('classname')).toHaveClass('mm-button--test');
});
it('should render with different size classes', () => {
const { getByTestId } = render(
<>
>,
);
expect(getByTestId(ButtonLinkSize.Sm)).toHaveClass(
`mm-button-base--size-${ButtonLinkSize.Sm}`,
);
expect(getByTestId(ButtonLinkSize.Md)).toHaveClass(
`mm-button-base--size-${ButtonLinkSize.Md}`,
);
expect(getByTestId(ButtonLinkSize.Lg)).toHaveClass(
`mm-button-base--size-${ButtonLinkSize.Lg}`,
);
});
it('should render ButtonLink inherit size', () => {
const { getByTestId } = render(
,
);
// Different size classname compared to ButtonLinkSize.Sm, ButtonLinkSize.Md, ButtonLinkSize.Lg
expect(getByTestId('inherit')).toHaveClass(`mm-button-link--size-inherit`);
});
it('should render as danger', () => {
const { getByTestId } = render(
<>
>,
);
expect(getByTestId('danger')).toHaveClass('mm-button-link--type-danger');
});
it('should render with different button states', () => {
const { getByTestId } = render(
<>
>,
);
expect(getByTestId('loading')).toHaveClass(`mm-button-base--loading`);
expect(getByTestId('disabled')).toHaveClass(`mm-button-base--disabled`);
});
it('should render with icon', () => {
const { container } = render(
,
);
const icons = container.getElementsByClassName('mm-icon').length;
expect(icons).toBe(1);
});
});