/* eslint-disable function-paren-newline, comma-dangle */
import React from 'react'
import renderWithTheme from '../../testHelper'
import SelectWithSupplementaryField from '../SelectWithSupplementaryField'

describe('SelectWithSupplementaryField', () => {
  it('renders with no supplementary field', () => {
    const tree = renderWithTheme(
      <SelectWithSupplementaryField
        label="Select Other"
        options={[
          { label: 'One', value: 1, tag: 'One' },
          { label: 'Two', value: 2, tag: 'Two' },
          { label: 'Three', value: 3, tag: 'Three' },
          { label: 'Other', value: 'Other', tag: 'Other' },
        ]}
        placeholder="Choose"
        input={{ name: 'select-other', value: 'One' }}
        render={() => (
          <div>
Show Other
          </div>
        )}
        showSupplementalValue={['Other']}
      />
    )
    expect(tree).toMatchSnapshot()
  })

  it('renders with a supplementary field', () => {
    const tree = renderWithTheme(
      <SelectWithSupplementaryField
        label="Select Other"
        options={[
          { label: 'One', value: 1, tag: 'One' },
          { label: 'Two', value: 2, tag: 'Two' },
          { label: 'Three', value: 3, tag: 'Three' },
          { label: 'Other', value: 'Other', tag: 'Other' },
        ]}
        placeholder="Choose"
        input={{ name: 'select-other', value: 'Other' }}
        render={() => (
          <div>
Show Other
          </div>
        )}
        showSupplementalValue={['Other']}
      />
    )
    expect(tree).toMatchSnapshot()
  })
})