import React from 'react';
import { render } from '@testing-library/react';
import FormTestBase from '../../__Tests__/FormTestBase';
import {
  MultiNumberSelectGroup,
  SingleNumberSelectGroup,
} from '../NumberSelectGroup';

describe('SingleNumberSelectGroup', () => {
  it('renders without crashing', () => {
    render(
      <FormTestBase>
        {({ Field }) => (
          <Field
            name="favoriteNumber"
            Component={SingleNumberSelectGroup}
            label="Favorite Number"
            options={[
              { label: 'I like one', value: 1 },
              { label: 'Occasionally two', value: 2 },
              { label: 'Forever three', value: 3 },
            ]}
          />
        )}
      </FormTestBase>
    );
  });

  it('has matching snapshot', () => {
    const renderResult = render(
      <FormTestBase>
        {({ Field }) => (
          <Field
            name="favoriteNumber"
            Component={SingleNumberSelectGroup}
            label="Favorite Number"
            options={[
              { label: 'I like one', value: 1 },
              { label: 'Occasionally two', value: 2 },
              { label: 'Forever three', value: 3 },
            ]}
          />
        )}
      </FormTestBase>
    );
    expect(renderResult.asFragment()).toMatchSnapshot();
  });
});

describe('MultiNumberSelectGroup', () => {
  it('renders without crashing', () => {
    render(
      <FormTestBase>
        {({ Field }) => (
          <Field
            name="userRoles"
            Component={MultiNumberSelectGroup}
            label="Favorite Number"
            options={[
              { label: 'Tyrannosaurus Rex', value: 1 },
              { label: 'Stegosaurus', value: 2 },
            ]}
          />
        )}
      </FormTestBase>
    );
  });

  it('has matching snapshot', () => {
    const renderResult = render(
      <FormTestBase>
        {({ Field }) => (
          <Field
            name="userRoles"
            Component={MultiNumberSelectGroup}
            label="Favorite Number"
            options={[
              { label: 'Tyrannosaurus Rex', value: 1 },
              { label: 'Stegosaurus', value: 2 },
            ]}
          />
        )}
      </FormTestBase>
    );
    expect(renderResult.asFragment()).toMatchSnapshot();
  });
});
