diff --git a/js/components/forms/__tests__/edit_officer_form.test.js b/js/components/forms/__tests__/edit_officer_form.test.js new file mode 100644 index 00000000..b5b02aa2 --- /dev/null +++ b/js/components/forms/__tests__/edit_officer_form.test.js @@ -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) + }) +}) diff --git a/js/components/forms/edit_officer_form.js b/js/components/forms/edit_officer_form.js new file mode 100644 index 00000000..a8e4311b --- /dev/null +++ b/js/components/forms/edit_officer_form.js @@ -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: '
', +} diff --git a/js/index.js b/js/index.js index b12de788..f9673744 100644 --- a/js/index.js +++ b/js/index.js @@ -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() {