saagie-ui/src/react/core/atoms/formFeedback/FormFeedback.test.js

Saagie UI from Saagie Design System

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

expect.extend(toHaveNoViolations);

function render({ label = 'FormFeedback', ...props }) {
  return trender(<FormFeedback id="formFeedbackId" {...props}>{label}</FormFeedback>);
}

describe('FormFeedback', () => {
  test('should be well formed ', async () => {
    const { container } = render({});
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
  test('should have validation state', async () => {
    const { rerender, getByTestId } = render({ color: 'success' });
    const icon = getByTestId('formFeedbackId');
    expect(icon).toHaveClass('as--success');
    await rerender(<FormFeedback name="form_name" color="warning">FormFeedback</FormFeedback>);
    expect(icon).toHaveClass('as--warning');
    await rerender(<FormFeedback name="form_name" color="danger">FormFeedback</FormFeedback>);
    expect(icon).toHaveClass('as--danger');
  });
});