token-wizard/test/components/StepThree/GasPriceInput.spec.js

232 lines
6.6 KiB
JavaScript

import React from 'react'
import Adapter from 'enzyme-adapter-react-15'
import { configure, mount } from 'enzyme'
import renderer from 'react-test-renderer'
import GasPriceInput from '../../../src/components/StepThree/GasPriceInput'
import { Form } from 'react-final-form'
import { gasPriceStore, generalStore } from '../../../src/stores'
import { GAS_PRICE } from '../../../src/utils/constants'
configure({ adapter: new Adapter() })
jest.mock('../../../src/utils/api')
const stores = { generalStore }
describe('GasPriceInput', () => {
beforeEach(() => {
generalStore.setGasTypeSelected(GAS_PRICE.SLOW)
})
it(`should render GasPriceInput component`, () => {
// Given
const wrapper = renderer.create(
<Form
onSubmit={jest.fn()}
initialValues={{}}
render={() => (
<GasPriceInput
input={{ name: 'gasPrice' }}
gasPrices={gasPriceStore.gasPricesInGwei}
updateGasTypeSelected={jest.fn()}
validate={jest.fn()}
{...stores}
/>
)}
/>
)
// When
const tree = wrapper.toJSON()
// Then
expect(tree).toMatchSnapshot()
})
it(`should render GasPriceInput component with custom gasType selected`, () => {
// Given
generalStore.setGasTypeSelected(GAS_PRICE.CUSTOM)
const wrapper = mount(
<Form
onSubmit={jest.fn()}
initialValues={{}}
render={() => (
<GasPriceInput
input={{ name: 'gasPrice', onChange: jest.fn() }}
gasPrices={gasPriceStore.gasPricesInGwei}
updateGasTypeSelected={jest.fn()}
validate={jest.fn()}
{...stores}
/>
)}
/>
)
// When
wrapper
.find('.sw-GasPriceInput_SelectInput')
.find(`[value="${GAS_PRICE.CUSTOM.id}"]`)
.simulate('click')
// Then
expect(wrapper).toMatchSnapshot()
})
it(`should store the custom value`, () => {
// Given
generalStore.setGasTypeSelected(GAS_PRICE.CUSTOM)
const onChange = jest.fn()
const customValue = '12'
const wrapper = mount(
<Form
onSubmit={jest.fn()}
initialValues={{}}
render={() => (
<GasPriceInput
input={{ name: 'gasPrice', onChange: onChange }}
gasPrices={gasPriceStore.gasPricesInGwei}
updateGasTypeSelected={jest.fn()}
validate={jest.fn()}
{...stores}
/>
)}
/>
)
// When
wrapper
.find('.sw-GasPriceInput_SelectInput')
.find(`[value="${GAS_PRICE.CUSTOM.id}"]`)
.simulate('click')
wrapper.find('#customGasPrice').simulate('change', { target: { value: customValue } })
// Then
expect(onChange).toHaveBeenCalledWith({ id: GAS_PRICE.CUSTOM.id, price: customValue })
})
it(`should select 'fast' option`, () => {
// Given
const wrapper = mount(
<Form
onSubmit={jest.fn()}
initialValues={{}}
render={() => (
<GasPriceInput
input={{ name: 'gasPrice', onChange: jest.fn() }}
gasPrices={gasPriceStore.gasPricesInGwei}
updateGasTypeSelected={jest.fn()}
validate={jest.fn()}
{...stores}
/>
)}
/>
)
// When
wrapper
.find('.sw-GasPriceInput_SelectInput')
.find(`[value="${GAS_PRICE.FAST.id}"]`)
.simulate('click')
// Then
expect(
wrapper
.find('.sw-GasPriceInput_SelectInput')
.find(`[value="${GAS_PRICE.FAST.id}"]`)
.props('checked')
).toBeTruthy()
})
it(`should remove 'mousedown' event listener`, () => {
// Given
const wrapper = mount(
<Form
onSubmit={jest.fn()}
initialValues={{}}
render={() => (
<GasPriceInput
input={{ name: 'gasPrice', onChange: jest.fn() }}
gasPrices={gasPriceStore.gasPricesInGwei}
updateGasTypeSelected={jest.fn()}
validate={jest.fn()}
{...stores}
/>
)}
/>
)
const gasPriceInputInstance = wrapper.find(GasPriceInput).instance().wrappedInstance
const willUnmount = jest.spyOn(gasPriceInputInstance, 'componentWillUnmount')
// When
wrapper.unmount()
// Then
expect(willUnmount).toHaveBeenCalled()
})
it(`should display the dropdown with the options`, () => {
// Given
const wrapper = mount(
<Form
onSubmit={jest.fn()}
initialValues={{}}
render={() => (
<GasPriceInput
input={{ name: 'gasPrice', onChange: jest.fn() }}
gasPrices={gasPriceStore.gasPricesInGwei}
updateGasTypeSelected={jest.fn()}
validate={jest.fn()}
{...stores}
/>
)}
/>
)
const gasPriceInputInstance = wrapper.find(GasPriceInput).instance().wrappedInstance
const openDropdownHandler = jest.spyOn(gasPriceInputInstance, 'openDropdown')
// When
wrapper.find('.sw-GasPriceInput_SelectButton').simulate('click')
// Then
expect(openDropdownHandler).toHaveBeenCalled()
expect(openDropdownHandler).toHaveBeenCalledTimes(1)
expect(wrapper.find(GasPriceInput).instance().wrappedInstance.state.openDropdown).toBeTruthy()
})
// On hold until find how dispatch a 'mousedown' event
// it(`should close dropdown when clicking outside of it`, () => {
// // Given
// const div = global.document.createElement('div')
// global.document.body.appendChild(div)
// const mousedownEvent = new MouseEvent('mousedown', {
// bubbles: true,
// cancelable: true
// })
// const wrapper = mount(
// <Form
// onSubmit={jest.fn()}
// initialValues={{}}
// render={() => (
// <GasPriceInput
// input={{ name: 'gasPrice', onChange: jest.fn() }}
// gasPrices={gasPriceStore.gasPricesInGwei}
// updateGasTypeSelected={jest.fn()}
// validate={jest.fn()}
// {...stores}
// />
// )}
// />,
// { attachTo: div }
// )
// const gasPriceInputInstance = wrapper.find(GasPriceInput).instance().wrappedInstance
// const clickOutsideHandler = jest.spyOn(gasPriceInputInstance, 'handleClickOutside')
//
// // When
// wrapper.find('.sw-GasPriceInput_SelectButton').simulate('click')
// document.querySelectorAll('.sw-FormControlTitle_Info')[0].dispatchEvent(mousedownEvent)
//
// // Then
// expect(clickOutsideHandler).toHaveBeenCalled()
// expect(clickOutsideHandler).toHaveBeenCalledTimes(1)
// expect(wrapper.find(GasPriceInput).instance().wrappedInstance.state.openDropdown).toBeFalsy()
// })
})