fix(#387): Curation form enhancements and unit tests update

app/src/components/explorer/InputComponent.vue

@@ -2,9 +2,12 @@
 <div class="md-card-actions viz-u-display__show">
   <template v-if="(typeof inputObj === 'object')">
     <md-field :class="[inputError ? 'md-invalid' : '']" v-if="inputObj.type === 'String'" md-dense :style="reduceSpacing">
-      <p class="md-body-2 u--color-grey-sec" style="margin-right: 4px;">{{ name }}:</p>
-      <md-input v-model="inputObj.cellValue" :required="inputObj.required" :name="uniqueKey.join(',')" :id="uniqueKey.join(',')"></md-input>
+      <p class="u--color-grey-sec" :class="[name.length >= 15 ? 'md-caption' : 'md-body-2 ']" style="margin-right: 4px;">{{ name }}:</p>
+      <md-input v-model="inputObj.cellValue" :required="inputObj.required" :name="uniqueKey.join(',')"
+      :id="uniqueKey.join(',')" :placeholder="noteExists ? inputObj.note : ''"
+      ></md-input>
       <span class="md-error">Input Required</span>
+      <span v-if="unitOfMeasureExists" class="md-body-1">{{inputObj.unitofmeasurement}}</span>
       <md-tooltip v-if="!!parent" md-direction="top">{{ parent }}</md-tooltip>
     </md-field>
 
@@ -17,15 +20,15 @@
           <md-option v-if="!!inputObj.cellValue && !listItem.length" :value="inputObj.cellValue">{{inputObj.cellValue}}</md-option>
           <md-option v-for="(item, id) in listItem" :key="id" :value="item">{{item}}</md-option>
         </template>
-
       </md-select>
       <span class="md-error">Input Required</span>
-
       <md-tooltip md-direction="top">{{ parent }}</md-tooltip>
+      <md-tooltip v-if="unitOfMeasureExists" md-direction="right">{{inputObj.unitofmeasurement}}</md-tooltip>
     </md-field>
 
     <div class="md-card-actions u--padding-zero" v-else-if="inputObj.type === 'replace_nested'" >
-      <md-chips :class="[inputError ? 'md-invalid' : '', 'md-primary']" v-model="inputObj.values" :md-placeholder="`Enter ${name}`" :md-auto-insert="true">
+      <md-chips :class="[inputError ? 'md-invalid' : '', 'md-primary']" v-model="inputObj.values"
+      :md-placeholder="`Enter ${name}`" :md-auto-insert="true">
         <md-tooltip md-direction="top">{{ parent }}</md-tooltip>
         <span class="md-error">Input Required</span>
       </md-chips>
@@ -115,7 +118,8 @@ export default {
       dialogText: '',
       dialogAction: '',
       dialogActive: false,
-      tempFileContainer: {}
+      tempFileContainer: {},
+      inFocus: false
     }
   },
   computed: {
@@ -125,6 +129,12 @@ export default {
     ...mapState({
       errors: state => state.explorer.curation.curationFormError
     }),
+    unitOfMeasureExists () {
+      return Object.hasOwnProperty.call(this.inputObj, 'unitofmeasurement')
+    },
+    noteExists () {
+      return Object.hasOwnProperty.call(this.inputObj, 'note')
+    },
     reduceSpacing () {
       return { alignItems: 'baseline', minHeight: 'auto', paddingTop: 0 }
     },
@@ -173,6 +183,9 @@ export default {
     ...mapActions({
       fetchXlsList: 'explorer/curation/fetchXlsList'
     }),
+    hasProperty (obj, prop) {
+      return Object.hasOwnProperty.call(obj, prop)
+    },
     async fetchValues () {
       // set error and loading state
       this.loading = true

app/src/components/nanomine/PageHeader.vue

@@ -75,6 +75,7 @@
                                 <div class="nav_menu--siblings">
                                     <a href="/explorer/curate/spreadsheet" class="nav_menu--siblings-lists"><a>Spreadsheet Upload</a></a>
                                     <router-link to="/explorer/curate/sdd" class="nav_menu--siblings-lists"><a>Upload with SDD</a></router-link>
+                                    <router-link to="/explorer/curate/stepper" class="nav_menu--siblings-lists"><a>Form Curation</a></router-link>
                                 </div>
                             </div>
                         </li>

app/src/pages/explorer/curate/form/CurationForm.vue

@@ -40,7 +40,7 @@
             <template v-if="active === `stepper_${id}`">
               <!-- NavBar and Dropdown  -->
               <div
-                v-if="active !== 'stepper_null'"
+                v-if="active !== ''"
                 class="md-layout md-gutter md-alignment-center-space-between"
                 style="position: relative"
               >
@@ -160,13 +160,7 @@
                             item.detail.type !== 'varied_multiples'
                           "
                         >
-                          <InputComponent
-                            @update-step-error="updateStepError(title, step)"
-                            :title="title"
-                            :name="item.name"
-                            :uniqueKey="item.ref"
-                            :inputObj="item.detail"
-                          />
+                          <InputComponent @update-step-error="updateStepError(title, step)" :title="title" :name="item.name" :uniqueKey="item.ref" :inputObj="item.detail"/>
                         </template>
 
                         <!-- For handling varied_multiples -->
@@ -291,7 +285,7 @@
 
       <!-- Center Stepper  -->
       <div
-        v-if="active === 'stepper_null'"
+        v-if="active === ''"
         class="u--margin-toplg spinner md-layout md-gutter md-alignment-center-center"
       >
         <div
@@ -360,7 +354,7 @@ export default {
       loading: true,
       loadingText: 'Loading Curation Form',
       error: false,
-      active: 'stepper_null',
+      active: '',
       verticalActive: 'v_1',
       dialogBoxText: '',
       dialogBoxAction: null,
@@ -727,7 +721,7 @@ export default {
       this.tempInputObj = {}
       this.vStepError = {}
       this.titles = []
-      this.active = 'stepper_null'
+      this.active = ''
       this.verticalActive = 'v_1'
       this.dialogBoxText = ''
       this.dialogBoxAction = null

app/src/pages/explorer/curate/validlist/XlsList.vue

@@ -67,7 +67,7 @@
                       <md-field style="align-items: baseline;">
                         <p style="margin-right: 4px;font-weight: bold;">FieldName:</p>
                         <md-input v-model="fieldName" id="fieldName"></md-input>
-                        <span class="md-helper-text">Section::Subsection::Unit</span>
+                        <!-- <span class="md-helper-text">Unit</span> -->
                       </md-field>
 
                       <md-field style="align-items: baseline;">

app/tests/unit/components/explorer/InputComponent.spec.js

@@ -85,6 +85,7 @@ describe('InputComponent.vue with input type string', async () => {
     var text = 'sampletext'
     const input = wrapper.find('input')
     expect(wrapper.vm.inputObj.cellValue).toBe(inputObj.cellValue)
+    input.element.value = text
     await input.setValue(text)
     expect(wrapper.vm.inputObj.cellValue).toBe(text)
   })

app/tests/unit/components/explorer/MultipleInputComponent.spec.js

@@ -54,6 +54,7 @@ describe('MultipleInputComponent.vue with input type string', async () => {
     var text = 'sampletext'
     const input = wrapper.find('input')
     expect(wrapper.vm.inputObj.cellValue).toBe(inputObj.cellValue)
+    input.element.value = text
     await input.setValue(text)
     expect(wrapper.vm.inputObj.cellValue).toBe(text)
   })

app/tests/unit/pages/explorer/CurationForm.spec.js

@@ -102,7 +102,7 @@ describe('CurationForm.vue', () => {
       expect(stepper.attributes('class')).toBe(
         'form__stepper form__stepper-curate'
       )
-      expect(stepper.props().mdActiveStep).toBe('stepper_null')
+      expect(stepper.props().mdActiveStep).toBe('')
       expect(stepper.props().mdVertical).toBe(false)
     })
 
@@ -122,7 +122,7 @@ describe('CurationForm.vue', () => {
       const title = Object.keys(data).filter((word) => word !== 'ID')
       const options = select.findAllComponents('md-option-stub')
 
-      expect(select.props().value).toBe('stepper_null')
+      expect(select.props().value).toBe('')
       expect(options.length).toBe(title.length)
 
       for (let i = 0; i < options.length; i++) {

app/tests/unit/pages/explorer/XlsList.spec.js

@@ -31,12 +31,11 @@ describe('Spreadsheet List Form.vue', () => {
   })
 
   it('renders page input properly', () => {
-    expect.assertions(4)
+    expect.assertions(3)
     const field = wrapper.findAll('.md-field-stub')
     expect(field.length).toBe(2)
     const name = field.at(0)
     expect(name.find('p').text()).toBe('FieldName:')
-    expect(name.find('span').text()).toBe('Section::Subsection::Unit')
     const value = field.at(1)
     expect(value.find('p').text()).toBe('Value:')
   })