text: // @ts-check
  import * as React from 'react';
  import { expect } from 'chai';
  import { createClientRender, createMount, describeConformanceV5 } from 'test/utils';
  import Typography from './Typography';
  import classes from './typographyClasses';
  
  describe('<Typography />', () => {
    /**
     * @type {ReturnType<typeof createMount>}
     */
    const mount = createMount();
  
    const render = createClientRender();
  
    describeConformanceV5(<Typography />, () => ({
      classes,
      inheritComponent: 'p',
      mount,
      refInstanceof: window.HTMLParagraphElement,
      muiName: 'MuiTypography',
      testVariantProps: { color: 'secondary', variant: 'dot' },
      testStateOverrides: { prop: 'variant', value: 'h2', styleKey: 'h2' },
      skip: ['componentsProp'],
    }));
  
    it('should render the text', () => {
      const { container } = render(<Typography>Hello</Typography>);
      expect(container.firstChild).to.have.text('Hello');
    });
  
    it('should render body1 root by default', () => {
      const { container } = render(<Typography>Hello</Typography>);
  
      expect(container.firstChild).to.have.class(classes.body1);
      expect(container.firstChild).to.have.class(classes.root);
    });
  
    it('should center text', () => {
      const { container } = render(
        <Typography align="center" className="woofTypography">
          Hello
        </Typography>,
      );
  
      expect(container.firstChild).to.have.class(classes.alignCenter);
    });
    [
      'h1',
      'h2',
      'h3',
      'h4',
      'h5',
      'h6',
      'subtitle1',
      'body2',
      'body1',
      'caption',
      'button',
      'overline',
    ].forEach((variant) => {
      it(`should render ${variant} text`, () => {
        // @ts-ignore literal/tuple type widening
        const { container } = render(<Typography variant={variant}>Hello</Typography>);
  
        expect(classes).to.have.property(variant);
  
        // @ts-ignore
        expect(container.firstChild).to.have.class(classes[variant]);
      });
    });
  
    [
      ['primary', 'colorPrimary'],
      ['textSecondary', 'colorTextSecondary'],
      ['secondary', 'colorSecondary'],
      ['inherit', 'colorInherit'],
      ['error', 'colorError'],
    ].forEach(([color, className]) => {
      it(`should render ${color} color`, () => {
        // @ts-ignore literal/tuple type widening
        const { container } = render(<Typography color={color}>Hello</Typography>);
  
        // @ts-ignore
        expect(classes[className] != null).to.equal(true);
        // @ts-ignore
        expect(container.firstChild).to.have.class(classes[className]);
      });
    });
  
    describe('prop: color', () => {
      it('should inherit the color', () => {
        const { container } = render(<Typography color="inherit">Hello</Typography>);
  
        expect(container.firstChild).to.have.class(classes.colorInherit);
      });
    });
  
    describe('headline', () => {
      it('should render a span by default', () => {
        const { getByText } = render(<Typography variant="button">Hello</Typography>);
  
        expect(getByText(/hello/i).tagName).to.equal('SPAN');
      });
  
      it('should render a p with a paragraph', () => {
        const { getByText } = render(<Typography paragraph>Hello</Typography>);
  
        expect(getByText(/hello/i).tagName).to.equal('P');
      });
  
      it('should render the mapped headline', () => {
        const { getByText } = render(<Typography variant="h6">Hello</Typography>);
  
        expect(getByText(/hello/i).tagName).to.equal('H6');
      });
  
      it('should render a h1', () => {
        const { getByText } = render(<Typography component="h1">Hello</Typography>);
  
        expect(getByText(/hello/i).tagName).to.equal('H1');
      });
    });
  
    describe('prop: variantMapping', () => {
      it('should work with a single value', () => {
        const { getByText } = render(
          <Typography variant="h6" variantMapping={{ h6: 'aside' }}>
            Hello
          </Typography>,
        );
  
        expect(getByText(/hello/i).tagName).to.equal('ASIDE');
      });
  
      it('should work event without the full mapping', () => {
        const { getByText } = render(
          <Typography variant="h6" variantMapping={{}}>
            Hello
          </Typography>,
        );
  
        expect(getByText(/hello/i).tagName).to.equal('H6');
      });
    });
  
    describe('prop: display', () => {
      it('should render with displayInline class in display="inline"', () => {
        const { container } = render(<Typography display="inline">Hello</Typography>);
  
        expect(container.firstChild).to.have.class(classes.root);
        expect(container.firstChild).to.have.class(classes.displayInline);
        expect(container.firstChild).not.to.have.class(classes.displayBlock);
      });
  
      it('should render with displayInline class in display="block"', () => {
        const { container } = render(<Typography display="block">Hello</Typography>);
  
        expect(container.firstChild).to.have.class(classes.root);
        expect(container.firstChild).to.have.class(classes.displayBlock);
        expect(container.firstChild).not.to.have.class(classes.displayInline);
      });
  
      it('should render with no display classes if display="initial"', () => {
        const { container } = render(<Typography display="initial">Hello</Typography>);
  
        expect(container.firstChild).to.have.class(classes.root);
        expect(container.firstChild).not.to.have.class(classes.displayBlock);
        expect(container.firstChild).not.to.have.class(classes.displayInline);
      });
    });
  });
  