import React from 'react';
import renderer from 'react-test-renderer';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import Glyph from './index';

describe('Glyph', () => {
  test('it renders correctly', () => {
    const component = renderer.create(
      <Glyph name="done" />,
    );
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });

  it('renders as presentational component if no ariaLabel is provided', () => {
    render(<Glyph name="done" />);
    const svg = document.querySelector('svg');
    expect(screen.getByRole('presentation')).toBe(svg);
  });

  it('renders with aria-label if one is provided', () => {
    render(<Glyph name="done" ariaLabel="EXAMPLE LABEL TEXT" />);
    const svg = document.querySelector('svg');
    expect(screen.getByLabelText('EXAMPLE LABEL TEXT')).toBe(svg);
    expect(svg!.getAttribute('role')).toBe('img');
  });
});