/* eslint-disable import/extensions */
import React from 'react';
import Text from '.';
import { AllowedTagNames, FontStyle } from './Text.types';

import { TYPES, STYLE } from './Text.constants';
import { TYPE as FONT_TYPE } from '@momentum-design/components/dist/components/text/text.constants.js';
import { renderWithWebComponent } from '../../../test/utils';

describe('Text', () => {
  const setup = async (component: any) => {
    return renderWithWebComponent(component, 'mdc-text');
  };

  it('should match snapshot', async () => {
    expect.assertions(2);

    const { container } = await setup(<Text tagName="p">Hello</Text>);

    expect(container).toMatchSnapshot();
  });

  it('should match snapshot with className', async () => {
    expect.assertions(2);

    const className = 'example-class';

    const { container } = await setup(<Text tagName="p" className={className} />);

    expect(container).toMatchSnapshot();
  });

  it('should match snapshot with id', async () => {
    expect.assertions(2);

    const id = 'example-id';

    const { container } = await setup(<Text tagName="p" id={id} />);

    expect(container).toMatchSnapshot();
  });

  it('should match snapshot with style', async () => {
    expect.assertions(2);

    const style = { color: 'red' };

    const { container } = await setup(<Text tagName="p" style={style} />);

    expect(container).toMatchSnapshot();
  });

  it(`should match snapshot with type`, async () => {
    expect.assertions(2);

    const texts = Object.values(TYPES).map((type, index) => {
      return (
        <Text tagName="p" key={index} type={type as FontStyle}>
          Example Text
        </Text>
      );
    });
    const { container } = await setup(<div>{texts}</div>);

    expect(container).toMatchSnapshot();
  });

  it.each(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'small', 'div', 'span'])(
    'should match snapshot with type and each tagName',
    async (tagName) => {
      expect.assertions(2);

      const texts = Object.values(TYPES).map((type, index) => {
        return (
          <Text key={index} type={type as FontStyle} tagName={tagName as AllowedTagNames}>
            Example Text
          </Text>
        );
      });
      const { container } = await setup(<div>{texts}</div>);

      expect(container).toMatchSnapshot();
    }
  );

  describe('attributes', () => {
    it('should have its main class', async () => {
      expect.assertions(2);

      const { container } = await setup(<Text tagName="p" />);

      expect(container.querySelector('mdc-text').classList.contains(STYLE.wrapper)).toBe(true);
    });

    it('should have provided id when id is provided', async () => {
      expect.assertions(2);

      const id = 'example-id';

      const { container } = await setup(<Text tagName="p" id={id} />);

      expect(container.querySelector('mdc-text').id).toBe(id);
    });

    it('should have provided style when style is provided', async () => {
      expect.assertions(2);

      const style = { color: 'pink' };
      const styleString = 'color: pink;';

      const { container } = await setup(<Text tagName="p" style={style} />);

      expect(container.querySelector('mdc-text').getAttribute('style')).toBe(styleString);
    });

    it('should pass type prop to MdcText web componet', async () => {
      expect.assertions(2);

      const type = TYPES.LABEL_COMPACT;
      const expectedMdcTextType = FONT_TYPE.BODY_SMALL_MEDIUM;

      const { container } = await setup(<Text tagName="p" type={type} />);

      expect(container.querySelector('mdc-text').getAttribute('type')).toBe(expectedMdcTextType);
    });
  });
});