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(
( )} /> ) // 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( ( )} /> ) // 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( ( )} /> ) // 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( ( )} /> ) // 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( ( )} /> ) 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( ( )} /> ) 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( // ( // // )} // />, // { 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() // }) })