saagie-ui/src/react/core/atoms/logLine/LogLine.test.js

Saagie UI from Saagie Design System

import React from 'react';
import { render as trender, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { axe } from 'jest-axe';
import { LogLine } from './LogLine';

function render({ children = 'LogLine', ...props }) {
  return trender(<LogLine {...props}>{children}</LogLine>);
}

afterEach(cleanup);

describe('LogLine', () => {
  test('should be well formed', async () => {
    const { container } = render({});
    expect(await axe(container)).toHaveNoViolations();
  });

  test('should have correct stream class', () => {
    const { rerender, getByTestId } = render({
      'data-testid': 'logLine-1',
      stream: 'stdout',
    });

    // Default elevation should be 100.
    const logLine = getByTestId('logLine-1');
    expect(logLine).toHaveClass('as--stdout');

    // Changing stream should change class.
    rerender(<LogLine stream="stderr">Content</LogLine>);
    expect(logLine).toHaveClass('as--stderr');
  });

  test('should have line number', () => {
    const { getByTestId } = render({
      number: '1',
    });

    const logLine = getByTestId('sui-a-logline__number');
    expect(logLine).toHaveClass('sui-a-logline__number');
    expect(logLine).toHaveTextContent('1');
    expect(logLine).not.toHaveAttribute('role', 'button');
  });

  test('should have clickable line number', () => {
    const { getByTestId } = render({
      number: '1',
      onNumberClick: () => {},
    });

    const logLine = getByTestId('sui-a-logline__number');
    expect(logLine).toHaveClass('sui-a-logline__number');
    expect(logLine).toHaveTextContent('1');
    expect(logLine).toHaveAttribute('role', 'button');
    expect(logLine).toHaveAttribute('tabIndex', '0');
  });

  test('should have time', () => {
    const now = Date.now();

    const { getByTestId } = render({
      time: new Date(now).toISOString(),
    });

    const logLine = getByTestId('sui-a-logline__clock');
    expect(logLine).toHaveClass('sui-a-logline__clock');
  });

  test('should have correct highlight class', () => {
    const { rerender, getByTestId } = render({
      'data-testid': 'logLine-highlight',
    });

    // Default elevation should be 100.
    const logLine = getByTestId('logLine-highlight');
    expect(logLine).not.toHaveClass('as--highlighted');

    // Changing stream should change class.
    rerender(<LogLine isHighlighted>Content</LogLine>);
    expect(logLine).toHaveClass('as--highlighted');
  });
});