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

describe('MultiselectWithSupplementaryField', () => {
  it('renders with no supplementary field', () => {
    const tree = renderWithTheme(
      <MultiselectWithSupplementaryField
        label="Multiselect 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: 'multiselect-other', value: ['One', 'Two'] }}
        meta={{
          touched: false,
          error: false,
        }}
        render={() => (
          <div>
Show Other
          </div>
        )}
        showSupplementalValue="Other"
      />
    )
    expect(tree).toMatchSnapshot()
  })

  it('renders with a supplementary field', () => {
    const tree = renderWithTheme(
      <MultiselectWithSupplementaryField
        label="Multiselect 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: 'multiselect-other', value: ['One', 'Other'] }}
        meta={{
          touched: false,
          error: false,
        }}
        render={() => (
          <div>
Show Other
          </div>
        )}
        showSupplementalValue="Other"
      />
    )
    expect(tree).toMatchSnapshot()
  })
})