text: import * as React from 'react';
  import { expect } from 'chai';
  import { spy } from 'sinon';
  import { act, createRenderer, fireEvent, describeConformance } from 'test/utils';
  import Typography from '@mui/joy/Typography';
  import Link, { linkClasses as classes } from '@mui/joy/Link';
  import { ThemeProvider } from '@mui/joy/styles';
  import { unstable_capitalize as capitalize } from '@mui/utils';
  
  function focusVisible(element) {
    act(() => {
      element.blur();
      document.dispatchEvent(new window.Event('keydown'));
      element.focus();
    });
  }
  
  describe('<Link />', () => {
    const { render } = createRenderer();
  
    describeConformance(<Link href="/">Home</Link>, () => ({
      classes,
      inheritComponent: Typography,
      render,
      ThemeProvider,
      muiName: 'MuiLink',
      refInstanceof: window.HTMLAnchorElement,
      testVariantProps: { color: 'primary', variant: 'text' },
      testStateOverrides: { prop: 'underline', value: 'always', styleKey: 'underlineAlways' },
      skip: [
        'classesRoot',
        'componentsProp',
        'themeDefaultProps',
        'propsSpread',
        'themeStyleOverrides',
      ],
    }));
  
    it('should render children', () => {
      const { queryByText } = render(<Link href="/">Home</Link>);
  
      expect(queryByText('Home')).not.to.equal(null);
    });
  
    describe('event callbacks', () => {
      it('should fire event callbacks', () => {
        const events = ['onBlur', 'onFocus'];
  
        const handlers = events.reduce((result, n) => {
          result[n] = spy();
          return result;
        }, {});
  
        const { container } = render(
          <Link href="/" {...handlers}>
            Home
          </Link>,
        );
        const anchor = container.querySelector('a');
  
        events.forEach((n) => {
          const event = n.charAt(2).toLowerCase() + n.slice(3);
          fireEvent[event](anchor);
          expect(handlers[n].callCount).to.equal(1);
        });
      });
    });
  
    describe('keyboard focus', () => {
      it('should add the focusVisible class when focused', () => {
        const { container } = render(<Link href="/">Home</Link>);
        const anchor = container.querySelector('a');
  
        expect(anchor).not.to.have.class(classes.focusVisible);
  
        focusVisible(anchor);
  
        expect(anchor).to.have.class(classes.focusVisible);
  
        act(() => {
          anchor.blur();
        });
  
        expect(anchor).not.to.have.class(classes.focusVisible);
      });
    });
  
    describe('prop: variant', () => {
      it('undefined by default', () => {
        const { getByTestId } = render(
          <Link href="/" data-testid="root">
            Hello World
          </Link>,
        );
  
        expect(getByTestId('root')).not.to.have.class(classes.variantText);
        expect(getByTestId('root')).not.to.have.class(classes.variantOutlined);
        expect(getByTestId('root')).not.to.have.class(classes.variantLight);
        expect(getByTestId('root')).not.to.have.class(classes.variantContained);
      });
  
      ['text', 'outlined', 'light', 'contained'].forEach((variant) => {
        it(`should render ${variant}`, () => {
          const { getByTestId } = render(
            <Link href="/" data-testid="root" variant={variant}>
              Hello World
            </Link>,
          );
  
          expect(getByTestId('root')).to.have.class(classes[`variant${capitalize(variant)}`]);
        });
      });
    });
  
    describe('prop: color', () => {
      it('adds a primary class by default', () => {
        const { getByTestId } = render(
          <Link href="/" data-testid="root">
            Hello World
          </Link>,
        );
  
        expect(getByTestId('root')).to.have.class(classes.colorPrimary);
      });
  
      ['primary', 'success', 'info', 'danger', 'neutral', 'warning'].forEach((color) => {
        it(`should render ${color}`, () => {
          const { getByTestId } = render(
            <Link href="/" data-testid="root" color={color}>
              Hello World
            </Link>,
          );
  
          expect(getByTestId('root')).to.have.class(classes[`color${capitalize(color)}`]);
        });
      });
    });
  
    describe('prop: level', () => {
      it('body1 by default', () => {
        const { getByTestId } = render(
          <Link href="/" data-testid="root">
            Hello World
          </Link>,
        );
  
        expect(getByTestId('root')).have.class(classes.body1);
      });
  
      ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2', 'body3'].forEach((level) => {
        it(`should render ${level}`, () => {
          const { getByTestId } = render(
            <Link href="/" data-testid="root" level={level}>
              Hello World
            </Link>,
          );
  
          expect(getByTestId('root')).to.have.class(classes[level]);
        });
      });
    });
  
    describe('prop: underline', () => {
      it('hover by default', () => {
        const { getByTestId } = render(
          <Link href="/" data-testid="root">
            Hello World
          </Link>,
        );
  
        expect(getByTestId('root')).have.class(classes.underlineHover);
      });
  
      ['none', 'always', 'hover'].forEach((underline) => {
        it(`should render ${underline}`, () => {
          const { getByTestId } = render(
            <Link href="/" data-testid="root" underline={underline}>
              Hello World
            </Link>,
          );
  
          expect(getByTestId('root')).to.have.class(classes[`underline${capitalize(underline)}`]);
        });
      });
    });
  });
  