From 8d7c7a0d6e43cd83e582c2d8a925564a1556f064 Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Wed, 25 Sep 2019 10:10:09 -0400
Subject: [PATCH] Render Vue component templates as part of test script.

Add a command to the test script to output up-to-date Vue component
templates. Most of the Vue component tests rely on HTML templates built
from Jinja.
---
 js/test_templates/clin_fields.html   | 2 +-
 js/test_templates/to_form.html       | 4 ++--
 script/include/run_test              | 1 +
 script/include/test_functions.inc.sh | 5 +++++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/js/test_templates/clin_fields.html b/js/test_templates/clin_fields.html
index c8e4bc0a..e59aaa83 100644
--- a/js/test_templates/clin_fields.html
+++ b/js/test_templates/clin_fields.html
@@ -15,7 +15,7 @@
       <div class="card__title">
         <span class="h4" v-html='clinTitle'></span>
         <button
-          v-if='$parent.clinIndex > 0'
+          v-if='clinIndex > 0'
           class="icon-link icon-link__remove-clin"
           v-on:click="openModal(removeModalId)"
           type="button">
diff --git a/js/test_templates/to_form.html b/js/test_templates/to_form.html
index 00a327d2..817f7c5d 100644
--- a/js/test_templates/to_form.html
+++ b/js/test_templates/to_form.html
@@ -60,7 +60,7 @@
 <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="$parent.clinIndex &gt; 0" v-on:click="openModal(removeModalId)">
+<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>
@@ -192,7 +192,7 @@
 </div>
 </div>
 <div class="h5 clin-card__title">Percent Obligated</div>
-<p v-html="percentObligated"></p>
+<p id="percent-obligated" v-html="percentObligated"></p>
 <hr/>
 <div class="form-row">
 <div class="h4 clin-card__title">
diff --git a/script/include/run_test b/script/include/run_test
index 340b9eab..847ad693 100644
--- a/script/include/run_test
+++ b/script/include/run_test
@@ -45,5 +45,6 @@ if [ "${RUN_PYTHON_TESTS}" = "true" ]; then
 fi
 
 if [ "${RUN_JS_TESTS}" = "true" ]; then
+  run_python_render_vue_component
   run_javascript_tests
 fi
diff --git a/script/include/test_functions.inc.sh b/script/include/test_functions.inc.sh
index 71574d98..e4e8a401 100644
--- a/script/include/test_functions.inc.sh
+++ b/script/include/test_functions.inc.sh
@@ -19,6 +19,11 @@ run_python_unit_tests() {
   return $?
 }
 
+run_python_render_vue_component() {
+  run_command "python -m pytest tests/render_vue_component.py --no-cov --no-print-logs --tb=no -q --disable-warnings"
+  return $?
+}
+
 run_javascript_tests() {
   run_command "yarn test:coverage"
   return $?