src/app/components/Paragraph/index.test.tsx

Summary

Maintainability
A
0 mins
Test Coverage
import React from 'react';

import Paragraph from '.';
import { render, screen } from '../react-testing-library-with-providers';

describe('Paragraph', () => {
  it('should render the paragraph text in a p element', async () => {
    render(<Paragraph>Hello World!</Paragraph>);

    expect(screen.getByText('Hello World!').nodeName).toBe('P');
  });

  it('should render the correct typography for the mundo service', async () => {
    render(<Paragraph>Hello World!</Paragraph>, {
      service: 'mundo',
    });

    expect(screen.getByText('Hello World!')).toHaveStyle({
      color: '#141414',
      fontSize: '0.9375rem',
      lineHeight: '1.25rem',
      fontFamily: 'ReithSans,Helvetica,Arial,sans-serif',
      fontStyle: 'normal',
      fontWeight: 400,
      margin: 0,
    });
  });

  it('should render the correct typography for the arabic service', async () => {
    render(<Paragraph>Hello World!</Paragraph>, {
      service: 'arabic',
    });

    expect(screen.getByText('Hello World!')).toHaveStyle({
      color: '#141414',
      fontSize: '0.9375rem',
      lineHeight: '1.5rem',
      fontFamily:
        '"BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif',
      fontStyle: 'normal',
      fontWeight: 400,
      margin: 0,
    });
  });
});