/* 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); }); });