it('should not contain <FuelSavingsResults /> when necessary conditions are not met', () => { const fuelSavings = getFuelSavings(); const wrapper = shallow(<FuelSavingsForm onSaveClick={jest.fn()} onChange={jest.fn()} fuelSavings={fuelSavings} />); const expected = <FuelSavingsResults savings={fuelSavings.savings} />; expect(wrapper.contains(expected)).toBeFalsy(); });
it('should contain options to change miles driven timeframe', () => { const wrapper = shallow(<FuelSavingsForm onSaveClick={jest.fn()} onChange={jest.fn()} fuelSavings={getFuelSavings()} />); const expectedOption1 = '<option value="week">Week</option>'; const expectedOption2 = '<option value="month">Month</option>'; const expectedOption3 = '<option value="year">Year</option>'; expect(wrapper.find('select').childAt(0).html()).toEqual(expectedOption1); expect(wrapper.find('select').childAt(1).html()).toEqual(expectedOption2); expect(wrapper.find('select').childAt(2).html()).toEqual(expectedOption3); });
it('should call onChange when timeframe changes', () => { const onChange = jest.fn(); const fuelSavings = getFuelSavings(); const wrapper = shallow(<FuelSavingsForm onSaveClick={jest.fn()} onChange={onChange} fuelSavings={fuelSavings} />); const changeEvent = { target: { name: 'timeframe', value: 'year' } }; expect(onChange).not.toBeCalled(); wrapper.find('select').simulate('change', changeEvent); expect(onChange).toBeCalledWith(changeEvent); });
describe('<AboutPage />', () => { it('should have a header called \'About\'', () => { const wrapper = shallow(<AboutPage />); const actual = wrapper.find('h2').text(); const expected = 'About'; expect(actual).toEqual(expected); }); it('should have a header with \'alt-header\' class', () => { const wrapper = shallow(<AboutPage />); const actual = wrapper.find('h2').prop('className'); const expected = 'alt-header'; expect(actual).toEqual(expected); }); it('should link to an unknown route path', () => { const wrapper = shallow(<AboutPage />); const actual = wrapper.findWhere(n => n.prop('to') === '/badlink').length; const expected = 1; expect(actual).toEqual(expected); }); });
it('should contain <FuelSavingsTextInput /> components', () => { const fuelSavings = getFuelSavings(); const wrapper = shallow(<FuelSavingsForm onSaveClick={jest.fn()} onChange={jest.fn()} fuelSavings={fuelSavings} />); const allInputs = wrapper.find(FuelSavingsTextInput); expect(allInputs.length).toEqual(5); expect(allInputs.at(0).props().name).toEqual('newMpg'); expect(allInputs.at(0).props().value).toEqual(fuelSavings.newMpg); expect(allInputs.at(1).props().name).toEqual('tradeMpg'); expect(allInputs.at(1).props().value).toEqual(fuelSavings.tradeMpg); expect(allInputs.at(2).props().name).toEqual('newPpg'); expect(allInputs.at(2).props().value).toEqual(fuelSavings.newPpg); expect(allInputs.at(3).props().name).toEqual('tradePpg'); expect(allInputs.at(3).props().value).toEqual(fuelSavings.tradePpg); expect(allInputs.at(4).props().name).toEqual('milesDriven'); expect(allInputs.at(4).props().value).toEqual(fuelSavings.milesDriven); });
it('should call onChange when text input changes', () => { const onChange = jest.fn(); const wrapper = shallow(<FuelSavingsForm onSaveClick={jest.fn()} onChange={onChange} fuelSavings={getFuelSavings()} />); const changeEvent = { target: { name: 'newMpg', value: '20' } }; expect(onChange).not.toBeCalled(); wrapper.find(FuelSavingsTextInput).first().simulate('change', changeEvent); expect(onChange).toBeCalledWith(changeEvent); });
const savingsLabelText = wrapper.find('.fuel-savings-label').text(); expect(savingsLabelText).toEqual('Savings'); }); const numObjectsWithSavingsClass = wrapper.find('.savings').length; expect(numObjectsWithSavingsClass).toEqual(3); }); const labelText = wrapper.find('.fuel-savings-label').text(); expect(labelText).toEqual('Loss'); }); const numObjectsWithLossClass = wrapper.find('.loss').length; expect(numObjectsWithLossClass).toEqual(3); });
it('should submit appState', () => { const fuelSavings = getFuelSavings(); const onSaveClick = jest.fn(); const wrapper = shallow(<FuelSavingsForm onSaveClick={onSaveClick} onChange={jest.fn()} fuelSavings={fuelSavings} />); expect(onSaveClick).not.toBeCalled(); wrapper.find('input[type="submit"]').simulate('click'); expect(onSaveClick).toBeCalled(); });
describe('SideBarBottom Component', () => { it('should match snapshot', () => { const tree = create(<SidebarBottom />).toJSON() expect(tree).toMatchSnapshot() }) it('should toggle options when clicked', () => { const wrapper = shallow(<SidebarBottom />) wrapper.find('.toggle-sb-options').simulate('click') expect(wrapper.state().showOptions).toBe(true) expect(wrapper.find('SidebarOptions').exists()).toBe(true) }) })
it('should contain <FuelSavingsResults /> when necessary conditions are met', () => { const fuelSavings = getFuelSavings({ necessaryDataIsProvidedToCalculateSavings: true, savings: { monthly: 10, annual: 120, threeYear: 360 } }); const wrapper = shallow(<FuelSavingsForm onSaveClick={jest.fn()} onChange={jest.fn()} fuelSavings={fuelSavings} />); const expected = <FuelSavingsResults savings={fuelSavings.savings} />; expect(wrapper.contains(expected)).toBeTruthy(); });
describe('GroupTopOptions Component', () => { MockDataElement() it('should match snapshot', () => { const tree = create(<GroupTopOptions />).toJSON() expect(tree).toMatchSnapshot() }) it('should show options when icon is clicked', () => { const wraper = shallow(<GroupTopOptions />) wraper.find('.pro_more_horiz').simulate('click') expect(wraper.find('.pro_banner_options').exists()).toBe(true) }) })
it('should handle save button click', () => { const onSaveClick = jest.fn(); const wrapper = shallow(<FuelSavingsForm onSaveClick={onSaveClick} onChange={jest.fn()} fuelSavings={getFuelSavings()} />); expect(onSaveClick).not.toBeCalled(); wrapper.find('input[type="submit"]').simulate('click'); expect(onSaveClick).toBeCalled(); });
describe('ExpPhotos Component', () => { // shallow snapshot testing it('should match snapshot', () => { const result = shallow(<PureExpPhotos dispatch={jest.fn()} />) expect(result).toMatchSnapshot() }) it('should hide spinner when loading=false', () => { const wrapper = shallow(<PureExpPhotos dispatch={jest.fn()} />) wrapper.setState({ loading: false }) expect(wrapper.find('IsLoading').prop('loading')).toEqual(false) }) })