Repository: h2oai/wave
File: ui/src/picker.test.tsx (TypeScript)

Code before:

const name = 'picker'
const altName = 'something else'
let pickerProps: Picker

const typeToInput = (input: HTMLInputElement, value: string) => {
  input.focus()
  input.value = value
  fireEvent.input(input, { target: { value } })
}

describe('Picker.tsx', () => {
  beforeEach(() => {
    pickerProps = {
      name,
      choices: [{ name }, { name: altName }]
    }
    wave.args[name] = null
  })

  it('Renders data-test attr', () => {
    const { queryByTestId } = render(<XPicker model={pickerProps} />)
    expect(queryByTestId(name)).toBeInTheDocument()
  })

  it('Does not render data-test attr when max choices reached', () => {
    const { queryByTestId } = render(<XPicker model={{...pickerProps, values: [name], max_choices: 1}} />)
    expect(queryByTestId(name)).toBe(null)
  })

  it('Remove selection so data-test attr for picker renders', () => {
    const { queryByTestId } = render(<XPicker model={{...pickerProps, values: [name], max_choices: 1}} />)
    expect(queryByTestId(name)).toBe(null)

    //get the 'remove' button using its data-test attr 
    const removeButton = (queryByTestId('remove_'+name) as HTMLElement)
    expect(removeButton).toBeInTheDocument()
    fireEvent.click(removeButton)

    //now the picker data-test attr is in the DOM
    expect(queryByTestId(name)).toBeInTheDocument()
    expect(queryByTestId('remove_'+name)).toBe(null)      
  })

  it('Sets correct args - init', () => {
    render(<XPicker model={pickerProps} />)
    expect(wave.args[name]).toBeNull()
  })

  it('Sets correct args - init - values specified', () => {
    render(<XPicker model={{ ...pickerProps, values: [name] }} />)

Review comment (suggestion):
Not sure I understand these tests. We do want to render `data-test` every time a picker is rendered, irrespective of `max_choices`. `data-test_remove` should be rendered every time a value is selected (has a cancel button).

Code after:

const name = 'picker'
const altName = 'something else'
let pickerProps: Picker

const typeToInput = (input: HTMLInputElement, value: string) => {
  input.focus()
  input.value = value
  fireEvent.input(input, { target: { value } })
}

describe('Picker.tsx', () => {
  beforeEach(() => {
    pickerProps = {
      name,
      choices: [{ name }, { name: altName }]
    }
    wave.args[name] = null
  })

  it('Renders data-test attr', () => {
    const { queryByTestId } = render(<XPicker model={pickerProps} />)
    expect(queryByTestId(name)).toBeInTheDocument()
  })

  it('Renders data-test attr on selection remove button', () => {
    const { queryByTestId } = render(<XPicker model={{...pickerProps, values: [name]}} />)

    const removeButton = (queryByTestId('remove_'+name) as HTMLElement)
    expect(removeButton).toBeInTheDocument()
    fireEvent.click(removeButton)
    expect(queryByTestId('remove_'+name)).toBe(null)      
  })

  it('Sets correct args - init', () => {
    render(<XPicker model={pickerProps} />)
    expect(wave.args[name]).toBeNull()
  })

  it('Sets correct args - init - values specified', () => {
    render(<XPicker model={{ ...pickerProps, values: [name] }} />)
    expect(wave.args[name]).toMatchObject([name])
  })

  it('Set args when value is updated to different value', () => {
    const { rerender } = render(<XPicker model={pickerProps} />)
    expect(wave.args[name]).toBe(null)
    rerender(<XPicker model={{ ...pickerProps, values: [name] }} />)
    expect(wave.args[name]).toMatchObject([name])
  })