Add JS component for form to edit officer info

The component will control when the form is displayed using the
`editing` attribute.
This commit is contained in:
Patrick Smith 2019-01-29 09:54:57 -05:00
parent d43c1febea
commit 19169e76ed
3 changed files with 78 additions and 0 deletions

View File

@ -0,0 +1,36 @@
import { shallowMount } from '@vue/test-utils'
import EditOfficerForm from '../edit_officer_form'
describe('EditOfficerForm', () => {
it('defaults to not editing', () => {
const wrapper = shallowMount(EditOfficerForm)
expect(wrapper.vm.$data.editing).toEqual(false)
})
it('does not start in editing mode when no errors', () => {
const wrapper = shallowMount(EditOfficerForm, {
propsData: { hasErrors: false },
})
expect(wrapper.vm.$data.editing).toEqual(false)
})
it('does start in editing mode when the form has errors', () => {
const wrapper = shallowMount(EditOfficerForm, {
propsData: { hasErrors: true },
})
expect(wrapper.vm.$data.editing).toEqual(true)
})
it('starts editing when edit method called', () => {
const wrapper = shallowMount(EditOfficerForm)
wrapper.vm.edit({ preventDefault: () => null })
expect(wrapper.vm.$data.editing).toEqual(true)
})
it('stops editing when cancel method called', () => {
const wrapper = shallowMount(EditOfficerForm)
wrapper.vm.cancel()
expect(wrapper.vm.$data.editing).toEqual(false)
})
})

View File

@ -0,0 +1,40 @@
import FormMixin from '../../mixins/form'
import checkboxinput from '../checkbox_input'
import textinput from '../text_input'
export default {
name: 'edit-officer-form',
mixins: [FormMixin],
components: {
checkboxinput,
textinput,
},
props: {
hasErrors: {
type: Boolean,
default: () => false,
},
},
data: function() {
return {
editing: this.hasErrors,
}
},
methods: {
edit: function(event) {
event.preventDefault()
this.editing = true
},
cancel: function(event) {
this.editing = false
},
},
template: '<div></div>',
}

View File

@ -11,6 +11,7 @@ import multicheckboxinput from './components/multi_checkbox_input'
import textinput from './components/text_input'
import checkboxinput from './components/checkbox_input'
import DetailsOfUse from './components/forms/details_of_use'
import EditOfficerForm from './components/forms/edit_officer_form'
import poc from './components/forms/poc'
import oversight from './components/forms/oversight'
import financial from './components/forms/financial'
@ -64,6 +65,7 @@ const app = new Vue({
ConfirmationPopover,
funding,
DateSelector,
EditOfficerForm,
},
mounted: function() {