|
- import * as React from 'react';
- import {
- render,
- screen,
- } from '@testing-library/react';
- import '@testing-library/jest-dom';
- import {
- LinkButton,
- } from '.';
- import userEvent from '@testing-library/user-event';
- import * as ButtonBase from '@tesseract-design/web-base-button';
-
- jest.mock('@tesseract-design/web-base-button');
-
- describe('LinkButton', () => {
- it('should render a link', () => {
- render(
- <LinkButton
- href="http://example.com"
- />
- );
- const button: HTMLButtonElement = screen.getByRole('link');
- expect(button).toBeInTheDocument();
- });
-
- it('should render a subtext', () => {
- render(
- <LinkButton
- subtext="subtext"
- />
- );
- const subtext: HTMLElement = screen.getByTestId('subtext');
- expect(subtext).toBeInTheDocument();
- });
-
- it('should render a badge', () => {
- render(
- <LinkButton
- badge="badge"
- />
- );
- const badge: HTMLElement = screen.getByTestId('badge');
- expect(badge).toBeInTheDocument();
- });
-
- it('should render as a menu item', () => {
- render(
- <LinkButton
- menuItem
- />
- );
- const menuItemIndicator: HTMLElement = screen.getByTestId('menuItemIndicator');
- expect(menuItemIndicator).toBeInTheDocument();
- });
-
- it('should handle click events', () => {
- const onClick = jest.fn();
- render(
- <LinkButton
- href="http://example.com"
- onClick={onClick}
- />
- );
- const button: HTMLButtonElement = screen.getByRole('link');
- userEvent.click(button);
- expect(onClick).toBeCalled();
- });
-
- it('should render a compact button', () => {
- render(
- <LinkButton
- compact
- />
- );
-
- expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
- compact: true,
- }));
-
- expect(ButtonBase.Label).toBeCalledWith(expect.objectContaining({
- compact: true,
- }));
- });
-
- describe.each([
- ButtonBase.ButtonSize.SMALL,
- ButtonBase.ButtonSize.MEDIUM,
- ButtonBase.ButtonSize.LARGE,
- ])('on %s size', (size) => {
- it('should render button styles', () => {
- render(
- <LinkButton
- size={size}
- />
- );
-
- expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
- size,
- }));
- });
-
- it('should render badge styles', () => {
- render(
- <LinkButton
- size={size}
- badge="badge"
- />
- );
-
- expect(ButtonBase.BadgeContainer).toBeCalledWith(expect.objectContaining({
- size,
- }));
- });
-
- it('should render indicator styles', () => {
- render(
- <LinkButton
- size={size}
- menuItem
- />
- );
-
- expect(ButtonBase.IndicatorWrapper).toBeCalledWith(expect.objectContaining({
- size,
- }));
- });
- });
-
- it.each([
- ButtonBase.ButtonVariant.OUTLINE,
- ButtonBase.ButtonVariant.FILLED,
- ])('should render a button with variant %s', (variant) => {
- render(
- <LinkButton
- variant={variant}
- />
- );
-
- expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
- variant,
- }));
- });
-
- it('should render a bordered button', () => {
- render(
- <LinkButton
- border
- />
- );
-
- expect(ButtonBase.Border).toBeCalledWith(expect.objectContaining({
- border: true,
- }));
- });
-
- it('should render a block button', () => {
- render(
- <LinkButton
- block
- />
- );
-
- expect(ButtonBase.Border).toBeCalledWith(expect.objectContaining({
- block: true,
- }));
- });
-
- it('should render children', () => {
- render(
- <LinkButton>
- Foo
- </LinkButton>
- );
-
- const children: HTMLElement = screen.getByTestId('children');
- expect(children).toHaveTextContent('Foo');
- });
-
- it('should render a disabled link', () => {
- render(
- <LinkButton
- href="http://example.com"
- disabled
- />
- );
- const button = screen.queryByRole('link');
- expect(button).toBeNull();
- });
- });
|