/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-undef */
import React from 'react';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom';

import Typography from '../components/Typography';

describe('Typography component', () => {
  afterEach(cleanup);

  test('check title style', () => {
    const { getByText } = render(
      <Typography variant="title">title</Typography>
    );

    expect(getByText('title')).toHaveStyle('font-size: 16px;color: #000000;');
  });

  test('check subtitle style', () => {
    const { queryByText } = render(
      <Typography variant="subtitle">title</Typography>
    );

    expect(queryByText('title')).toHaveStyle('font-size: 14px;color: #000000;');
  });
});