diff --git a/.gitignore b/.gitignore
index b50dc9ba..215433bb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -67,3 +67,6 @@ atst-overrides.ini
 
 # binary file created by celery beat
 celerybeat-schedule
+
+# templates created for JS tests
+js/test_templates
diff --git a/js/test_templates/checkbox_input_template.html b/js/test_templates/checkbox_input_template.html
deleted file mode 100644
index ce847845..00000000
--- a/js/test_templates/checkbox_input_template.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<checkboxinput
-    name='datafield'
-    inline-template
-    key='datafield'
-    v-bind:initial-checked='initialvalue'
-    v-bind:optional=false
-    >
-    <div>
-      <div class='usa-input  ' v-bind:class="[{ 'checked': isChecked }]">
-
-        <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices ">
-          <legend>
-            <input checked id="datafield" name="datafield" type="checkbox" v-model="isChecked" value="initialvalue">
-            <label for="datafield">initialvalue value</label>
-
-            
-          </legend>
-        </fieldset>
-      </div>
-    </div>
-  </checkboxinput>
\ No newline at end of file
diff --git a/js/test_templates/clin_fields.html b/js/test_templates/clin_fields.html
deleted file mode 100644
index f0f51fc4..00000000
--- a/js/test_templates/clin_fields.html
+++ /dev/null
@@ -1,601 +0,0 @@
-
-  <clin-fields
-    
-      v-bind:initial-clin-index='0'
-      v-bind:initial-total='0'
-      v-bind:initial-obligated='0'
-      v-bind:initial-start-date="'None'"
-      v-bind:initial-end-date="'None'"
-      v-bind:initial-clin-number="'None'"
-    
-    v-bind:contract-start="'2019-09-14'"
-    v-bind:contract-end="'2022-09-14'"
-    inline-template>
-    <div class="clin-card" v-if="showClin">
-      <div class="card__title">
-        <span class="h4" v-html='clinTitle'></span>
-        <button
-          v-if='clinIndex > 0'
-          class="icon-link icon-link__remove-clin"
-          v-on:click="openModal(removeModalId)"
-          type="button">
-          
-      <span class="icon icon--x " aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"/><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"/></svg>
-</span>
-  
-        </button>
-      </div>
-      <div class="card">
-        <div class="form-row">
-          <div class="h4 clin-card__title">
-            CLIN Details
-          </div>
-        </div>
-        <div class="form-row">
-          <div class="form-col">
-            
-              <textinput
-    v-cloak
-    name='number'
-    validation='anything'
-    
-    
-    
-    
-    v-bind:optional=false
-    key='number'
-    :watch='true'
-    inline-template>
-
-    <div
-      class=' '
-      v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">
-
-      
-        <label for=number>
-          <div class="usa-input__title">
-            CLIN
-            
-            
-          </div>
-
-          
-
-          
-            <span v-show='showError'>
-      <span class="icon icon--alert icon-validation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
-  <path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
-</svg>
-</span>
-  </span>
-            <span v-show='showValid'>
-      <span class="icon icon--ok icon-validation" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
-  </span>
-          
-
-        </label>
-      
-
-      
-
-        <masked-input
-          v-on:input='onInput'
-          v-on:blur='onBlur'
-          v-on:change='onChange'
-          v-bind:value='value'
-          v-bind:mask='mask'
-          v-bind:pipe='pipe'
-          v-bind:keep-char-positions='keepCharPositions'
-          v-bind:aria-invalid='showError'
-          type='text'
-          
-          id='number'
-          
-          ref='input'
-          placeholder=''>
-        </masked-input>
-
-      
-
-      <input
-        type='hidden'
-        v-bind:value='rawValue'
-        
-        name='number'
-        
-      />
-
-      
-        <template v-if='showError'>
-          <span class='usa-input__message' v-html='validationError'></span>
-        </template>
-        <template v-else>
-          <span class='usa-input__message'></span>
-        </template>
-      
-
-    </div>
-  </textinput>
-            
-          </div>
-        </div>
-        <div class="form-row">
-          <div class="form-col">
-            
-              <optionsinput
-    name='jedi_clin_type'
-    inline-template
-    
-    
-    key='jedi_clin_type'
-    v-bind:watch='true'
-    v-bind:optional=false
-    v-bind:null-option="'None'"
-    >
-    <div
-      v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
-
-      <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices ">
-        
-          <legend>
-            <div class="usa-input__title-inline">
-              Corresponding IDIQ CLIN
-              
-              
-            </div>
-
-            
-
-            
-          </legend>
-        
-
-        <select id="jedi_clin_type" name="jedi_clin_type"><option value="JEDI_CLIN_1">IaaS/PaaS (IDIQ CLIN 0001)</option><option value="JEDI_CLIN_2">IDIQ CLIN 0002</option><option value="JEDI_CLIN_3">IDIQ CLIN 0003</option><option value="JEDI_CLIN_4">IDIQ CLIN 0004</option></select>
-
-        <template v-if='showError'>
-          <span class='usa-input__message' v-html='validationError'></span>
-        </template>
-
-      </fieldset>
-    </div>
-
-  </optionsinput>
-            
-          </div>
-        </div>
-        <hr>
-        <div class="form-row">
-          <div class="h4 clin-card__title">
-              CLIN Funding
-          </div>
-        </div>
-
-        
-        <div class="form-row">
-    <div class="form-col">
-      <clindollaramount
-        v-cloak
-        inline-template
-        
-          :funding-valid='true'
-        
-        
-          name='total_amount'
-          
-          
-          key='total_amount'
-        
-
-        validation="clinDollars"
-        :watch='true'>
-        <div v-bind:class="['usa-input usa-input--validation--dollars', { 'usa-input--error': showFundingError, 'usa-input--success': showFundingValid}]">
-          
-          <label for='total_amount'> 
-          
-
-            
-            <div class="usa-input__title">Total CLIN Value</div>
-            
-            <span v-show='showFundingError'>
-      <span class="icon icon--alert icon-validation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
-  <path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
-</svg>
-</span>
-  </span>
-            <span v-show='showFundingValid'>
-      <span class="icon icon--ok icon-validation" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
-  </span>
-          </label>
-
-          <masked-input
-            v-on:input='onInput'
-            v-on:blur='onBlur'
-            v-on:change='onChange'
-            v-bind:value='value'
-            v-bind:mask='mask'
-            v-bind:pipe='pipe'
-            v-bind:keep-char-positions='keepCharPositions'
-            v-bind:aria-invalid='showError'
-            type='text'
-            :id='name'
-            ref='input'>
-          </masked-input>
-
-          <input type='hidden' v-bind:value='rawValue' :name='name' />
-          <template v-if='!fundingValid'>
-            <span class='usa-input__message'>Obligated amount must be less than or equal to total amount</span>
-          </template>
-          <template v-else-if='showError'>
-            <span class='usa-input__message' v-html='validationError'></span>
-          </template>
-          <template v-else>
-            <span class='usa-input__message'></span>
-          </template>
-        </div>
-      </clindollaramount>
-    </div>
-  </div>
-        <div class="form-row">
-    <div class="form-col">
-      <clindollaramount
-        v-cloak
-        inline-template
-        
-          :funding-valid='fundingValid'
-        
-        
-          name='obligated_amount'
-          
-          
-          key='obligated_amount'
-        
-
-        validation="clinDollars"
-        :watch='true'>
-        <div v-bind:class="['usa-input usa-input--validation--dollars', { 'usa-input--error': showFundingError, 'usa-input--success': showFundingValid}]">
-          
-          <label for='obligated_amount'> 
-          
-
-             
-            <div class="usa-input__title">Obligated Funds</div>
-            
-            <span v-show='showFundingError'>
-      <span class="icon icon--alert icon-validation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
-  <path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
-</svg>
-</span>
-  </span>
-            <span v-show='showFundingValid'>
-      <span class="icon icon--ok icon-validation" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
-  </span>
-          </label>
-
-          <masked-input
-            v-on:input='onInput'
-            v-on:blur='onBlur'
-            v-on:change='onChange'
-            v-bind:value='value'
-            v-bind:mask='mask'
-            v-bind:pipe='pipe'
-            v-bind:keep-char-positions='keepCharPositions'
-            v-bind:aria-invalid='showError'
-            type='text'
-            :id='name'
-            ref='input'>
-          </masked-input>
-
-          <input type='hidden' v-bind:value='rawValue' :name='name' />
-          <template v-if='!fundingValid'>
-            <span class='usa-input__message'>Obligated amount must be less than or equal to total amount</span>
-          </template>
-          <template v-else-if='showError'>
-            <span class='usa-input__message' v-html='validationError'></span>
-          </template>
-          <template v-else>
-            <span class='usa-input__message'></span>
-          </template>
-        </div>
-      </clindollaramount>
-    </div>
-  </div>
-        
-
-        <div class="h5 clin-card__title">Percent Obligated</div>
-        <p id="percent-obligated" v-html='percentObligated'></p>
-
-        <hr>
-        <div class="form-row">
-          <div class="h4 clin-card__title">
-            Period of Performance
-          </div>
-        </div>
-        
-          
-  
-  
-  <pop-date-range
-    initial-min-start-date="2019-09-14"
-    initial-max-end-date="2022-09-14"
-    
-      v-bind:clin-index="clinIndex"
-    
-    
-      initial-start-date="None"
-    
-    
-      initial-end-date="None"
-    
-    inline-template>
-
-    <div>
-      <div class="form-row">
-        <div class="form-col">
-          <date-selector
-            :mindate="initialMinStartDate"
-            :maxdate="maxStartProp"
-            :minrange='initialMinStartDate'
-            :maxrange='initialMaxEndDate'
-            
-              name-tag='start_date'
-              initialmonth=""
-              initialday=""
-              initialyear=""
-            
-            :optional='false'
-            v-on:date-change='handleDateChange'
-            inline-template>
-
-            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
-              <legend>
-                <div class="usa-input__title">
-                  Start Date
-                </div>
-
-                <p class='usa-input__help'>
-                  For example: 07 04 1776
-                </p>
-
-                <div v-if='outsideRange && !minError' class="usa-input-error-message">
-                  PoP start date must be before or on September 14, 2022.
-                </div>
-                <div v-if='minError' class="usa-input-error-message">
-                  PoP start date must be on or after September 14, 2019.
-                </div>
-                <div v-if='maxError && !outsideRange' class="usa-input-error-message">
-                  PoP start date must be before end date.
-                </div>
-              </legend>
-
-              <div class="date-picker-component">
-                <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
-
-                <div class="usa-form-group usa-form-group-month">
-                  <label>Month</label>
-                  <input
-                    name="date-month"
-                    max="12"
-                    maxlength="2"
-                    min="1"
-                    type="number"
-                    v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                    v-model="month"
-                    v-on:change="onInput"
-                  />
-                </div>
-
-                <div class="usa-form-group usa-form-group-day">
-                  <label>Day</label>
-                  <input
-                    name="date-day"
-                    maxlength="2"
-                    min="1"
-                    type="number"
-                    v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
-                    v-bind:max="daysMaxCalculation"
-                    v-model="day"
-                    v-on:change="onInput"
-                  />
-                </div>
-
-                <div class="usa-form-group usa-form-group-year">
-                  <label>Year</label>
-                  <input
-                    name="date-year"
-                    maxlength="4"
-                    type="number"
-                    v-model="year"
-                    max="2022"
-                    min="2019"
-                    v-on:change="onInput"
-                  />
-
-                </div>
-
-                <div v-if="isDateComplete">
-                  <div class="usa-form-group-date-ok" v-if="isDateValid">
-                    
-      <span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
-  
-                  </div>
-                  <div class="usa-form-group-date-ok" v-else>
-                    
-      <span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
-  <path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
-</svg>
-</span>
-  
-                  </div>
-                </div>
-              </div>
-            </fieldset>
-          </date-selector>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="form-col">
-          <date-selector
-            :mindate="minEndProp"
-            :maxdate="initialMaxEndDate"
-            :minrange='initialMinStartDate'
-            :maxrange='initialMaxEndDate'
-            
-              name-tag='end_date'
-              initialmonth=""
-              initialday=""
-              initialyear=""
-            
-            :optional='false'
-            v-on:date-change='handleDateChange'
-            inline-template>
-
-            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
-              <legend>
-                <div class="usa-input__title">
-                  End Date
-                </div>
-                
-  
-
-  <div class='usa-alert usa-alert-info' role='alert' aria-live='polite'>
-
-    <div class='usa-alert-body'>
-      
-
-      
-        <p class='usa-alert-text'>
-          A CLIN's period of performance must end before September 14, 2022.
-        </p>
-      
-
-      
-
-      
-
-      
-    </div>
-  </div>
-
-                <p class='usa-input__help'>
-                  For example: 07 04 1776
-                </p>
-
-                <div v-if='outsideRange && !maxError' class="usa-input-error-message">
-                  PoP end date must be after or on September 14, 2019.
-                </div>
-                <div v-if='minError && !outsideRange' class="usa-input-error-message">
-                  PoP start date must be before end date.
-                </div>
-                <div v-if='maxError' class="usa-input-error-message">
-                  PoP end date must be before or on September 14, 2022.
-                </div>
-              </legend>
-
-              <div class="date-picker-component">
-                <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
-
-                  <div class="usa-form-group usa-form-group-month">
-                    <label>Month</label>
-                    <input
-                      name="date-month"
-                      max="12"
-                      maxlength="2"
-                      min="1"
-                      type="number"
-                      v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                      v-model="month"
-                      v-on:change="onInput"
-                      />
-                  </div>
-
-                  <div class="usa-form-group usa-form-group-day">
-                    <label>Day</label>
-                    <input
-                      name="date-day"
-                      maxlength="2"
-                      min="1"
-                      type="number"
-                      v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
-                      v-bind:max="daysMaxCalculation"
-                      v-model="day"
-                      v-on:change="onInput"
-                      />
-                  </div>
-
-                  <div class="usa-form-group usa-form-group-year">
-                    <label>Year</label>
-                    <input
-                      name="date-year"
-                      maxlength="4"
-                      type="number"
-                      v-model="year"
-                      v-on:change="onInput"
-                      />
-                  </div>
-
-                <div v-if="isDateComplete">
-                  <div class="usa-form-group-date-ok" v-if="isDateValid">
-                    
-      <span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
-  
-                  </div>
-                  <div class="usa-form-group-date-ok" v-else>
-                    
-      <span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
-  <path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
-</svg>
-</span>
-  
-                  </div>
-                </div>
-              </div>
-            </fieldset>
-          </date-selector>
-        </div>
-      </div>
-    </div>
-  </pop-date-range>
-
-        
-      </div>
-
-      <div v-show="$root.activeModal === removeModalId" v-cloak>
-        <div :id='"modal--" + removeModalId' class='modal modal--dismissable'>
-          <div class='modal__container'>
-            <div class='modal__dialog' role='dialog' aria-modal='true'>
-              <div class='modal__body'>
-                <div class="task-order__modal-cancel">
-                  <h1 v-html='"Do you want to remove " + clinTitle + "?"'></h1>
-                  <div class="task-order__modal-cancel_buttons">
-                    <button
-                      v-on:click='closeModal(removeModalId)'
-                      class="usa-button usa-button-primary"
-                      type="button">
-                      No, go back
-                    </button>
-                    <button
-                      v-on:click="removeClin()"
-                      class="usa-button usa-button-primary"
-                      type="button">
-                      Yes, remove CLIN
-                    </button>
-                  </div>
-                </div>
-
-                <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal(removeModalId)'>
-                  
-      <span class="icon icon--x " aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"/><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"/></svg>
-</span>
-  
-                  <span>
-                    Close
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </clin-fields>
diff --git a/js/test_templates/pop_date_range.html b/js/test_templates/pop_date_range.html
deleted file mode 100644
index 4d0a92f1..00000000
--- a/js/test_templates/pop_date_range.html
+++ /dev/null
@@ -1,245 +0,0 @@
-
-  
-  
-  <pop-date-range
-    initial-min-start-date="2019-09-14"
-    initial-max-end-date="2022-09-14"
-    
-      v-bind:clin-index="1"
-    
-    
-      initial-start-date="None"
-    
-    
-      initial-end-date="None"
-    
-    inline-template>
-
-    <div>
-      <div class="form-row">
-        <div class="form-col">
-          <date-selector
-            :mindate="initialMinStartDate"
-            :maxdate="maxStartProp"
-            :minrange='initialMinStartDate'
-            :maxrange='initialMaxEndDate'
-            
-              name-tag='start_date'
-              initialmonth=""
-              initialday=""
-              initialyear=""
-            
-            :optional='true'
-            v-on:date-change='handleDateChange'
-            inline-template>
-
-            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
-              <legend>
-                <div class="usa-input__title">
-                  Start Date
-                </div>
-
-                <p class='usa-input__help'>
-                  For example: 07 04 1776
-                </p>
-
-                <div v-if='outsideRange && !minError' class="usa-input-error-message">
-                  PoP start date must be before or on September 14, 2022.
-                </div>
-                <div v-if='minError' class="usa-input-error-message">
-                  PoP start date must be on or after September 14, 2019.
-                </div>
-                <div v-if='maxError && !outsideRange' class="usa-input-error-message">
-                  PoP start date must be before end date.
-                </div>
-              </legend>
-
-              <div class="date-picker-component">
-                <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
-
-                <div class="usa-form-group usa-form-group-month">
-                  <label>Month</label>
-                  <input
-                    name="date-month"
-                    max="12"
-                    maxlength="2"
-                    min="1"
-                    type="number"
-                    v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                    v-model="month"
-                    v-on:change="onInput"
-                  />
-                </div>
-
-                <div class="usa-form-group usa-form-group-day">
-                  <label>Day</label>
-                  <input
-                    name="date-day"
-                    maxlength="2"
-                    min="1"
-                    type="number"
-                    v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
-                    v-bind:max="daysMaxCalculation"
-                    v-model="day"
-                    v-on:change="onInput"
-                  />
-                </div>
-
-                <div class="usa-form-group usa-form-group-year">
-                  <label>Year</label>
-                  <input
-                    name="date-year"
-                    maxlength="4"
-                    type="number"
-                    v-model="year"
-                    max="2022"
-                    min="2019"
-                    v-on:change="onInput"
-                  />
-
-                </div>
-
-                <div v-if="isDateComplete">
-                  <div class="usa-form-group-date-ok" v-if="isDateValid">
-                    
-      <span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
-  
-                  </div>
-                  <div class="usa-form-group-date-ok" v-else>
-                    
-      <span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
-  <path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
-</svg>
-</span>
-  
-                  </div>
-                </div>
-              </div>
-            </fieldset>
-          </date-selector>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="form-col">
-          <date-selector
-            :mindate="minEndProp"
-            :maxdate="initialMaxEndDate"
-            :minrange='initialMinStartDate'
-            :maxrange='initialMaxEndDate'
-            
-              name-tag='end_date'
-              initialmonth=""
-              initialday=""
-              initialyear=""
-            
-            :optional='true'
-            v-on:date-change='handleDateChange'
-            inline-template>
-
-            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
-              <legend>
-                <div class="usa-input__title">
-                  End Date
-                </div>
-                
-  
-
-  <div class='usa-alert usa-alert-info' role='alert' aria-live='polite'>
-
-    <div class='usa-alert-body'>
-      
-
-      
-        <p class='usa-alert-text'>
-          A CLIN's period of performance must end before September 14, 2022.
-        </p>
-      
-
-      
-
-      
-
-      
-    </div>
-  </div>
-
-                <p class='usa-input__help'>
-                  For example: 07 04 1776
-                </p>
-
-                <div v-if='outsideRange && !maxError' class="usa-input-error-message">
-                  PoP end date must be after or on September 14, 2019.
-                </div>
-                <div v-if='minError && !outsideRange' class="usa-input-error-message">
-                  PoP start date must be before end date.
-                </div>
-                <div v-if='maxError' class="usa-input-error-message">
-                  PoP end date must be before or on September 14, 2022.
-                </div>
-              </legend>
-
-              <div class="date-picker-component">
-                <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
-
-                  <div class="usa-form-group usa-form-group-month">
-                    <label>Month</label>
-                    <input
-                      name="date-month"
-                      max="12"
-                      maxlength="2"
-                      min="1"
-                      type="number"
-                      v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                      v-model="month"
-                      v-on:change="onInput"
-                      />
-                  </div>
-
-                  <div class="usa-form-group usa-form-group-day">
-                    <label>Day</label>
-                    <input
-                      name="date-day"
-                      maxlength="2"
-                      min="1"
-                      type="number"
-                      v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
-                      v-bind:max="daysMaxCalculation"
-                      v-model="day"
-                      v-on:change="onInput"
-                      />
-                  </div>
-
-                  <div class="usa-form-group usa-form-group-year">
-                    <label>Year</label>
-                    <input
-                      name="date-year"
-                      maxlength="4"
-                      type="number"
-                      v-model="year"
-                      v-on:change="onInput"
-                      />
-                  </div>
-
-                <div v-if="isDateComplete">
-                  <div class="usa-form-group-date-ok" v-if="isDateValid">
-                    
-      <span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
-  
-                  </div>
-                  <div class="usa-form-group-date-ok" v-else>
-                    
-      <span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
-  <path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
-</svg>
-</span>
-  
-                  </div>
-                </div>
-              </div>
-            </fieldset>
-          </date-selector>
-        </div>
-      </div>
-    </div>
-  </pop-date-range>
diff --git a/js/test_templates/to_form.html b/js/test_templates/to_form.html
deleted file mode 100644
index b010377d..00000000
--- a/js/test_templates/to_form.html
+++ /dev/null
@@ -1,375 +0,0 @@
-<to-form inline-template="">
-<form action="/task_orders//form/step_3" autocomplete="off" enctype="multipart/form-data" id="to_form" method="POST">
-<div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 76 }'>
-<div class="sticky-cta-container">
-<div class="sticky-cta-text">
-<h3>Add Task Order (step 3 of 5)</h3>
-</div>
-<div class="sticky-cta-buttons">
-<span class="action-group">
-<input :disabled="!canSave" class="usa-button usa-button-primary" form="to_form" tabindex="0" type="submit" value="Next: Review Task Order"/>
-<a class="usa-button usa-button-secondary" href="/task_orders//form/step_2">
-              Previous
-            </a>
-<a class="action-group__action icon-link" v-on:click="openModal('cancel')">
-            Cancel
-          </a>
-</span>
-</div>
-</div>
-</div>
-<div v-cloak="" v-show="$root.activeModal === 'cancel'">
-<div class="modal modal--dismissable" id="modal--cancel">
-<div class="modal__container">
-<div aria-modal="true" class="modal__dialog" role="dialog">
-<div class="modal__body">
-<!-- Use these elements in caller for modal to be styled properly -->
-<!-- h1 for header text -->
-<!-- hr -->
-<!-- div class='action-group' for buttons -->
-<div class="task-order__modal-cancel">
-<h1>Do you want to save this draft?</h1>
-<div class="action-group">
-<button class="usa-button usa-button-primary" formaction="/portfolios/e4edf994-04f4-4aaa-ba30-39507e1068a8/task_orders/form/cancel?save=False" type="submit">No, delete it</button>
-<button class="usa-button usa-button-primary" formaction="/portfolios/e4edf994-04f4-4aaa-ba30-39507e1068a8/task_orders/form/cancel?save=True" type="submit">Yes, save for later</button>
-</div>
-</div>
-<button class="icon-link modal__dismiss" type="button" v-on:click='closeModal("cancel")'>
-<span aria-hidden="true" class="icon icon--x"><svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"></path><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"></path></svg>
-</span>
-</button>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="task-order">
-<div>
-<div class="task-order__header">
-<div class="h2">
-      Enter Contract Line Items
-    </div>
-<p>
-<strong>Task Order Number:</strong> 1234567890123
-      </p>
-<p>
-      Refer to your task order to locate your Contract Line Item Numbers (CLINs).
-    </p>
-</div>
-<div v-for="clin in clins">
-<clin-fields inline-template="" v-bind:contract-end="'2022-09-14'" v-bind:contract-start="'2019-09-14'" v-bind:initial-clin-index="clinIndex" v-bind:initial-clin-type="'JEDI_CLIN_1'">
-<div class="clin-card" v-if="showClin">
-<div class="card__title">
-<span class="h4" v-html="clinTitle"></span>
-<button class="icon-link icon-link__remove-clin" type="button" v-if="clinIndex &gt; 0" v-on:click="openModal(removeModalId)">
-<span aria-hidden="true" class="icon icon--x"><svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"></path><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"></path></svg>
-</span>
-</button>
-</div>
-<div class="card">
-<div class="form-row">
-<div class="h4 clin-card__title">
-            CLIN Details
-          </div>
-</div>
-<div class="form-row">
-<div class="form-col">
-<textinput :name="'clins-' + clinIndex + '-number'" :watch="true" inline-template="">
-<div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">
-<label :for="name">
-<span v-show="showError">
-<span aria-hidden="true" class="icon icon--alert icon-validation"><svg fill="#fdb81e" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"></path>
-</svg>
-</span>
-</span>
-<span v-show="showValid">
-<span aria-hidden="true" class="icon icon--ok icon-validation"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
-</span>
-<div class="usa-input__title">CLIN</div>
-</label>
-<masked-input :id="name" ref="input" type="text" v-bind:aria-invalid="showError" v-bind:keep-char-positions="keepCharPositions" v-bind:mask="mask" v-bind:pipe="pipe" v-bind:value="value" v-on:blur="onBlur" v-on:change="onChange" v-on:input="onInput">
-</masked-input>
-<input :name="name" type="hidden" v-bind:value="rawValue">
-<template v-if="showError">
-<span class="usa-input__message" v-html="validationError"></span>
-</template>
-<template v-else="">
-<span class="usa-input__message"></span>
-</template>
-</input></div>
-</textinput>
-</div>
-</div>
-<div class="form-row">
-<div class="form-col">
-<optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :optional="false" :watch="true" inline-template="">
-<div v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
-<fieldset class="usa-input__choices" data-ally-disabled="true" v-on:change="onInput">
-<legend>
-<div class="usa-input__title">
-                          Corresponding IDIQ CLIN
-                        </div>
-</legend>
-<select :id="name" :name="name">
-<option value="JEDI_CLIN_1">IaaS/PaaS (IDIQ CLIN 0001)</option>
-<option value="JEDI_CLIN_2">IDIQ CLIN 0002</option>
-<option value="JEDI_CLIN_3">IDIQ CLIN 0003</option>
-<option value="JEDI_CLIN_4">IDIQ CLIN 0004</option>
-</select>
-</fieldset>
-</div>
-</optionsinput>
-</div>
-</div>
-<hr/>
-<div class="form-row">
-<div class="h4 clin-card__title">
-              CLIN Funding
-          </div>
-</div>
-<div class="form-row">
-<div class="form-col">
-<clindollaramount :funding-valid="true" :key="'clins-' + clinIndex + '-' + 'total' + '_amount'" :name="'clins-' + clinIndex + '-' + 'total' + '_amount'" :watch="true" inline-template="" v-cloak="" validation="clinDollars">
-<div v-bind:class="['usa-input usa-input--validation--dollars', { 'usa-input--error': showFundingError, 'usa-input--success': showFundingValid}]">
-<label :for="name">
-<div class="usa-input__title">Total CLIN Value</div>
-<span v-show="showFundingError">
-<span aria-hidden="true" class="icon icon--alert icon-validation"><svg fill="#fdb81e" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"></path>
-</svg>
-</span>
-</span>
-<span v-show="showFundingValid">
-<span aria-hidden="true" class="icon icon--ok icon-validation"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
-</span>
-</label>
-<masked-input :id="name" ref="input" type="text" v-bind:aria-invalid="showError" v-bind:keep-char-positions="keepCharPositions" v-bind:mask="mask" v-bind:pipe="pipe" v-bind:value="value" v-on:blur="onBlur" v-on:change="onChange" v-on:input="onInput">
-</masked-input>
-<input :name="name" type="hidden" v-bind:value="rawValue"/>
-<template v-if="!fundingValid">
-<span class="usa-input__message">Obligated amount must be less than or equal to total amount</span>
-</template>
-<template v-else-if="showError">
-<span class="usa-input__message" v-html="validationError"></span>
-</template>
-<template v-else="">
-<span class="usa-input__message"></span>
-</template>
-</div>
-</clindollaramount>
-</div>
-</div>
-<div class="form-row">
-<div class="form-col">
-<clindollaramount :funding-valid="fundingValid" :key="'clins-' + clinIndex + '-' + 'obligated' + '_amount'" :name="'clins-' + clinIndex + '-' + 'obligated' + '_amount'" :watch="true" inline-template="" v-cloak="" validation="clinDollars">
-<div v-bind:class="['usa-input usa-input--validation--dollars', { 'usa-input--error': showFundingError, 'usa-input--success': showFundingValid}]">
-<label :for="name">
-<div class="usa-input__title">Obligated Funds</div>
-<span v-show="showFundingError">
-<span aria-hidden="true" class="icon icon--alert icon-validation"><svg fill="#fdb81e" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"></path>
-</svg>
-</span>
-</span>
-<span v-show="showFundingValid">
-<span aria-hidden="true" class="icon icon--ok icon-validation"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
-</span>
-</label>
-<masked-input :id="name" ref="input" type="text" v-bind:aria-invalid="showError" v-bind:keep-char-positions="keepCharPositions" v-bind:mask="mask" v-bind:pipe="pipe" v-bind:value="value" v-on:blur="onBlur" v-on:change="onChange" v-on:input="onInput">
-</masked-input>
-<input :name="name" type="hidden" v-bind:value="rawValue"/>
-<template v-if="!fundingValid">
-<span class="usa-input__message">Obligated amount must be less than or equal to total amount</span>
-</template>
-<template v-else-if="showError">
-<span class="usa-input__message" v-html="validationError"></span>
-</template>
-<template v-else="">
-<span class="usa-input__message"></span>
-</template>
-</div>
-</clindollaramount>
-</div>
-</div>
-<div class="h5 clin-card__title">Percent Obligated</div>
-<p id="percent-obligated" v-html="percentObligated"></p>
-<hr/>
-<div class="form-row">
-<div class="h4 clin-card__title">
-            Period of Performance
-          </div>
-</div>
-<pop-date-range initial-max-end-date="2022-09-14" initial-min-start-date="2019-09-14" inline-template="" v-bind:clin-index="clinIndex">
-<div>
-<div class="form-row">
-<div class="form-col">
-<date-selector :maxdate="maxStartProp" :maxrange="initialMaxEndDate" :mindate="initialMinStartDate" :minrange="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-start_date'" :optional="false" inline-template="" v-on:date-change="handleDateChange">
-<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; isDateComplete, 'usa-input--error': !isDateValid &amp;&amp; isDateComplete }">
-<legend>
-<div class="usa-input__title">
-                  Start Date
-                </div>
-<p class="usa-input__help">
-                  For example: 07 04 1776
-                </p>
-<div class="usa-input-error-message" v-if="outsideRange &amp;&amp; !minError">
-                  PoP start date must be before or on September 14, 2022.
-                </div>
-<div class="usa-input-error-message" v-if="minError">
-                  PoP start date must be on or after September 14, 2019.
-                </div>
-<div class="usa-input-error-message" v-if="maxError &amp;&amp; !outsideRange">
-                  PoP start date must be before end date.
-                </div>
-</legend>
-<div class="date-picker-component">
-<input :name="name" type="hidden" v-bind:value="formattedDate" v-on:change="onInput"/>
-<div class="usa-form-group usa-form-group-month">
-<label>Month</label>
-<input max="12" maxlength="2" min="1" name="date-month" type="number" v-bind:class="{ 'usa-input-error': (month &amp;&amp; !isMonthValid) }" v-model="month" v-on:change="onInput"/>
-</div>
-<div class="usa-form-group usa-form-group-day">
-<label>Day</label>
-<input maxlength="2" min="1" name="date-day" type="number" v-bind:class="{ 'usa-input-error': (day &amp;&amp; !isDayValid) }" v-bind:max="daysMaxCalculation" v-model="day" v-on:change="onInput"/>
-</div>
-<div class="usa-form-group usa-form-group-year">
-<label>Year</label>
-<input max="2022" maxlength="4" min="2019" name="date-year" type="number" v-model="year" v-on:change="onInput"/>
-</div>
-<div v-if="isDateComplete">
-<div class="usa-form-group-date-ok" v-if="isDateValid">
-<span aria-hidden="true" class="icon icon--ok icon--green"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
-</div>
-<div class="usa-form-group-date-ok" v-else="">
-<span aria-hidden="true" class="icon icon--alert icon--red"><svg fill="#fdb81e" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"></path>
-</svg>
-</span>
-</div>
-</div>
-</div>
-</fieldset>
-</date-selector>
-</div>
-</div>
-<div class="form-row">
-<div class="form-col">
-<date-selector :maxdate="initialMaxEndDate" :maxrange="initialMaxEndDate" :mindate="minEndProp" :minrange="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-end_date'" :optional="false" inline-template="" v-on:date-change="handleDateChange">
-<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; isDateComplete, 'usa-input--error': !isDateValid &amp;&amp; isDateComplete }">
-<legend>
-<div class="usa-input__title">
-                  End Date
-                </div>
-<div aria-live="polite" class="usa-alert usa-alert-info" role="alert">
-<div class="usa-alert-body">
-<p class="usa-alert-text">
-          A CLIN's period of performance must end before September 14, 2022.
-        </p>
-</div>
-</div>
-<p class="usa-input__help">
-                  For example: 07 04 1776
-                </p>
-<div class="usa-input-error-message" v-if="outsideRange &amp;&amp; !maxError">
-                  PoP end date must be after or on September 14, 2019.
-                </div>
-<div class="usa-input-error-message" v-if="minError &amp;&amp; !outsideRange">
-                  PoP start date must be before end date.
-                </div>
-<div class="usa-input-error-message" v-if="maxError">
-                  PoP end date must be before or on September 14, 2022.
-                </div>
-</legend>
-<div class="date-picker-component">
-<input :name="name" type="hidden" v-bind:value="formattedDate" v-on:change="onInput"/>
-<div class="usa-form-group usa-form-group-month">
-<label>Month</label>
-<input max="12" maxlength="2" min="1" name="date-month" type="number" v-bind:class="{ 'usa-input-error': (month &amp;&amp; !isMonthValid) }" v-model="month" v-on:change="onInput"/>
-</div>
-<div class="usa-form-group usa-form-group-day">
-<label>Day</label>
-<input maxlength="2" min="1" name="date-day" type="number" v-bind:class="{ 'usa-input-error': (day &amp;&amp; !isDayValid) }" v-bind:max="daysMaxCalculation" v-model="day" v-on:change="onInput"/>
-</div>
-<div class="usa-form-group usa-form-group-year">
-<label>Year</label>
-<input maxlength="4" name="date-year" type="number" v-model="year" v-on:change="onInput"/>
-</div>
-<div v-if="isDateComplete">
-<div class="usa-form-group-date-ok" v-if="isDateValid">
-<span aria-hidden="true" class="icon icon--ok icon--green"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
-</div>
-<div class="usa-form-group-date-ok" v-else="">
-<span aria-hidden="true" class="icon icon--alert icon--red"><svg fill="#fdb81e" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"></path>
-</svg>
-</span>
-</div>
-</div>
-</div>
-</fieldset>
-</date-selector>
-</div>
-</div>
-</div>
-</pop-date-range>
-</div>
-<div v-cloak="" v-show="$root.activeModal === removeModalId">
-<div :id='"modal--" + removeModalId' class="modal modal--dismissable">
-<div class="modal__container">
-<div aria-modal="true" class="modal__dialog" role="dialog">
-<div class="modal__body">
-<div class="task-order__modal-cancel">
-<h1 v-html='"Do you want to remove " + clinTitle + "?"'></h1>
-<div class="task-order__modal-cancel_buttons">
-<button class="usa-button usa-button-primary" type="button" v-on:click="closeModal(removeModalId)">
-                      No, go back
-                    </button>
-<button class="usa-button usa-button-primary" type="button" v-on:click="removeClin()">
-                      Yes, remove CLIN
-                    </button>
-</div>
-</div>
-<button class="icon-link modal__dismiss" type="button" v-on:click="closeModal(removeModalId)">
-<span aria-hidden="true" class="icon icon--x"><svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"></path><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"></path></svg>
-</span>
-<span>
-                    Close
-                  </span>
-</button>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</clin-fields>
-</div>
-<button class="icon-link icon-link__add-another-clin" id="add-clin" type="button" v-on:click="addClin">
-<span aria-hidden="true" class="icon icon--plus"><?xml version="1.0" encoding="UTF-8"?>
-<svg height="16px" version="1.1" viewbox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
-<title>UI element / Icons / Plus / White</title>
-<desc>Created with Sketch.</desc>
-<g fill="none" fill-rule="evenodd" id="Wizard_Services" stroke="none" stroke-width="1">
-<g fill="#0071BC" id="c5-Add-Services" transform="translate(-285.000000, -1059.000000)">
-<g id="Group-3" transform="translate(285.000000, 1035.000000)">
-<g id="Group-2" transform="translate(0.000000, 21.000000)">
-<g id="UI-element-/-Icons-/-Plus-/-White" transform="translate(0.000000, 3.000000)">
-<g id="Group">
-<path d="M8,16 C3.589,16 0,12.411 0,8 C0,3.589 3.589,0 8,0 C12.411,0 16,3.589 16,8 C16,12.411 12.411,16 8,16 Z M8,2 C4.691,2 2,4.691 2,8 C2,11.309 4.691,14 8,14 C11.309,14 14,11.309 14,8 C14,4.691 11.309,2 8,2 Z" id="Style"></path>
-<path d="M8,12 C7.448,12 7,11.4891429 7,10.8571429 L7,5.14285714 C7,4.512 7.448,4 8,4 C8.552,4 9,4.512 9,5.14285714 L9,10.8571429 C9,11.4891429 8.552,12 8,12 Z" id="Path"></path>
-<path d="M8,12 C7.448,12 7,11.4891429 7,10.8571429 L7,5.14285714 C7,4.512 7.448,4 8,4 C8.552,4 9,4.512 9,5.14285714 L9,10.8571429 C9,11.4891429 8.552,12 8,12 Z" id="Path" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) "></path>
-</g>
-</g>
-</g>
-</g>
-</g>
-</g>
-</svg></span>
-<span>Add another CLIN</span>
-</button>
-</div>
-</div>
-</form>
-</to-form>
\ No newline at end of file
diff --git a/js/test_templates/upload_input_error_template.html b/js/test_templates/upload_input_error_template.html
deleted file mode 100644
index 13e3a262..00000000
--- a/js/test_templates/upload_input_error_template.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<uploadinput
-  inline-template
-  
-    v-bind:initial-errors='true'
-  
-  v-bind:watch='false'
-  v-bind:portfolio-id="''"
-  name='pdf'
-  :optional='false'
-  >
-  <div>
-    <div v-show="hasAttachment" class="uploaded-file">
-      
-      <span class="icon icon--ok " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
-  
-      <a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
-      <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
-    </div>
-    <div v-show="hasAttachment === false" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>
-      
-      <p>
-        
-      </p>
-      <div v-if="!hideInput" class="upload-widget">
-        <label class="upload-label" for="pdf">
-          <span class="upload-button">
-            Browse
-          </span>
-        </label>
-        <input
-          v-on:change="addAttachment"
-          ref="attachmentInput"
-          accept=""
-          id="pdf"
-          name="pdf"
-          aria-label="Task Order Upload"
-          v-bind:value="attachment"
-          type="file">
-          <input type="hidden" name="pdf-filename" id="pdf-filename" ref="attachmentFilename">
-          <input type="hidden" name="pdf-object_name" id="pdf-object_name" ref="attachmentObjectName">
-      </div>
-      <template v-if="uploadError">
-        <span class="usa-input__message">There was an error uploading your file. Please try again. If you encounter repeated problems uploading this file, please contact CCPO.</span>
-      </template>
-      <template v-if="sizeError">
-        <span class="usa-input__message">The file you have selected is too large. Please choose a file no larger than 64MB.</span>
-      </template>
-      
-        <span class="usa-input__message">Test Error Message</span>
-      
-    </div>
-  </div>
-</uploadinput>
\ No newline at end of file
diff --git a/js/test_templates/upload_input_template.html b/js/test_templates/upload_input_template.html
deleted file mode 100644
index 99197450..00000000
--- a/js/test_templates/upload_input_template.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<uploadinput
-  inline-template
-  
-    v-bind:filename='filename'
-    v-bind:object-name='objectName'
-  
-  v-bind:watch='false'
-  v-bind:portfolio-id="''"
-  name='pdf'
-  :optional='false'
-  >
-  <div>
-    <div v-show="hasAttachment" class="uploaded-file">
-      
-      <span class="icon icon--ok " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
-  
-      <a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
-      <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
-    </div>
-    <div v-show="hasAttachment === false" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>
-      
-      <p>
-        
-      </p>
-      <div v-if="!hideInput" class="upload-widget">
-        <label class="upload-label" for="pdf">
-          <span class="upload-button">
-            Browse
-          </span>
-        </label>
-        <input
-          v-on:change="addAttachment"
-          ref="attachmentInput"
-          accept=""
-          id="pdf"
-          name="pdf"
-          aria-label="Task Order Upload"
-          v-bind:value="attachment"
-          type="file">
-          <input type="hidden" name="pdf-filename" id="pdf-filename" ref="attachmentFilename">
-          <input type="hidden" name="pdf-object_name" id="pdf-object_name" ref="attachmentObjectName">
-      </div>
-      <template v-if="uploadError">
-        <span class="usa-input__message">There was an error uploading your file. Please try again. If you encounter repeated problems uploading this file, please contact CCPO.</span>
-      </template>
-      <template v-if="sizeError">
-        <span class="usa-input__message">The file you have selected is too large. Please choose a file no larger than 64MB.</span>
-      </template>
-      
-    </div>
-  </div>
-</uploadinput>
\ No newline at end of file
diff --git a/script/include/run_test b/script/include/run_test
index e176483c..e5d868f9 100644
--- a/script/include/run_test
+++ b/script/include/run_test
@@ -49,6 +49,7 @@ fi
 
 if [ "${RUN_JS_TESTS}" = "true" ]; then
   output_divider "Render Vue components"
+  mkdir js/test_templates | true
   run_python_render_vue_component
   output_divider "Run JavaScript unit test suite"
   run_javascript_tests