token-wizard/test/components/Common/RadioInputField.spec.js

99 lines
2.6 KiB
JavaScript

import React from 'react'
import { RadioInputField } from '../../../src/components/Common/RadioInputField'
import renderer from 'react-test-renderer'
import Adapter from 'enzyme-adapter-react-15'
import { configure, mount } from 'enzyme'
configure({ adapter: new Adapter() })
test('Should render the component', () => {
const component = renderer.create(
<RadioInputField
title="Some Title"
items={[{ label: 'Item 1', value: 'item-1' }, { label: 'Item 2', value: 'item-2' }]}
selectedItem="item-1"
onChange={() => {}}
description="Some Description"
/>
)
let tree = component.toJSON()
expect(tree).toMatchSnapshot()
})
test('Should render two inputs and check the first one', () => {
const wrapper = mount(
<RadioInputField
title="Some Title"
items={[{ label: 'Item 1', value: 'item-1' }, { label: 'Item 2', value: 'item-2' }]}
selectedItem="item-1"
onChange={() => {}}
description="Some Description"
/>
)
const inputs = wrapper.find('input[type="radio"]')
expect(inputs.length).toBe(2)
const firstInput = inputs.at(0)
const secondInput = inputs.at(1)
expect(firstInput.prop('checked')).toBe(true)
expect(secondInput.prop('checked')).toBe(false)
})
test('The onChange callback is called when an item is selected', () => {
const onChangeCallback = jest.fn()
const wrapper = mount(
<RadioInputField
title="Some Title"
items={[{ label: 'Item 1', value: 'item-1' }, { label: 'Item 2', value: 'item-2' }]}
selectedItem="item-1"
onChange={onChangeCallback}
description="Some Description"
/>
)
wrapper
.find('input[type="radio"]')
.at(1)
.simulate('change')
expect(onChangeCallback).toBeCalled()
})
test('Should change the selected item when `selectedItem` changes', () => {
const onChangeCallback = jest.fn()
const wrapper = mount(
<RadioInputField
title="Some Title"
items={[{ label: 'Item 1', value: 'item-1' }, { label: 'Item 2', value: 'item-2' }]}
selectedItem="item-1"
onChange={onChangeCallback}
description="Some Description"
/>
)
let inputs = wrapper.find('input[type="radio"]')
expect(inputs.length).toBe(2)
let firstInput = inputs.at(0)
let secondInput = inputs.at(1)
expect(firstInput.prop('checked')).toBe(true)
expect(secondInput.prop('checked')).toBe(false)
wrapper.setProps({ selectedItem: 'item-2' })
inputs = wrapper.find('input[type="radio"]')
expect(inputs.length).toBe(2)
firstInput = inputs.at(0)
secondInput = inputs.at(1)
expect(firstInput.prop('checked')).toBe(false)
expect(secondInput.prop('checked')).toBe(true)
})