Add updateSection tests

front/static/js/viewHistory.js

@@ -68,7 +68,7 @@ function updateSection(parsedData, saveButton) {
     if (parsedData.completed) {
         const sectionAlert = collapseDiv.querySelector(".section-alert");
         if (sectionAlert) {
-            collapseDiv.firstChild.removeChild(sectionAlert);
+            collapseDiv.firstElementChild.removeChild(sectionAlert);
         }
         if (parsedData.rule_violations.length === 0) {
             // Complete with no rule violations
@@ -94,7 +94,6 @@ function updateSection(parsedData, saveButton) {
 
     saveButton.innerHTML = "Save";
     saveButton.disabled = false;
-
 }
 
 // Wraps a Bootstrap form group around a field

front/tests/qunit_tests.html

@@ -88,6 +88,35 @@
         </div>
     </template>
 
+    <template id="collapse-card">
+        <div class="card">
+            <div class="card-header">
+                <h2 class="mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#section-1-collapse">General Info</button>
+                    <i id="section-1-state"></i>
+                </h2>
+            </div>
+            <div id="section-1-collapse" class="collapse show">
+                <div class="card-body">
+                    <div class="alert alert-danger section-alert">This section is not complete</div>
+                    <p>Description</p>
+                    <form class="form section-form" id="section-1-form" data-rid="2" data-sid="1">
+                        <div class="form-group row">
+                            <label class="col-sm-4 col-form" for="section-1-after_trip">Have you taken this trip already?: </label>
+                            <div class="col-sm-6">
+                                <select name="after_trip" id="section-1-after_trip" class="form-control">
+                                    <option value="true">Yes</option>
+                                    <option value="false" selected="selected">No</option>
+                                </select>
+                            </div>
+                        </div>
+                        <button type="submit" class="btn btn-primary save-section">Save</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </template>
+
     <script src="https://code.jquery.com/qunit/qunit-2.9.2.js"></script>
     <script>
 
@@ -474,6 +503,63 @@
         let cardBody = document.querySelector(".card-body");
         assert.deepEqual(cardBody.outerHTML.replace(/>\s+</g, "><"), expectedHTML, "card body and expectedHTML are identical");
     });
+
+    // BEGIN updateSection unit tests
+    QUnit.module("updateSection", {
+        beforeEach : function() {
+            let qunitFixture = document.getElementById("qunit-fixture");
+            let collapseCard = document.getElementById("collapse-card");
+            let clone = document.importNode(collapseCard.content, true);
+            qunitFixture.appendChild(clone);
+        }
+    });
+
+    QUnit.test("incomplete section with no rule violations", function(assert) {
+        let parsedData = {"id" : 1, "completed": false, "rule_violations" : []};
+        let saveButton = document.createElement("button");
+        saveButton.classList.add("btn", "btn-primary", "save-section");
+        saveButton.innerHTML = "Saving ...";
+        updateSection(parsedData, saveButton);
+        let collapseCard = document.querySelector(".card");
+        let expectedHTML = updateSectionExpected;
+        assert.deepEqual(collapseCard.outerHTML, expectedHTML, "card and expectedHTML are identical");
+    });
+
+    QUnit.test("complete section with no rule violations", function(assert) {
+        let parsedData = {"id" : 1, "completed": true, "rule_violations" : []};
+        let saveButton = document.createElement("button");
+        saveButton.classList.add("btn", "btn-primary", "save-section");
+        saveButton.innerHTML = "Saving ...";
+        updateSection(parsedData, saveButton);
+        let collapseCard = document.querySelector(".card");
+        let expectedHTML = updateSectionCompleteNoRuleViolationsExpected.replace(/>\s+</g, "><");
+        assert.deepEqual(collapseCard.outerHTML.replace(/>\s+</g, "><"), expectedHTML, "card and expectedHTML are identical");
+    });
+
+    QUnit.test("complete section with one new rule violation", function(assert) {
+        let parsedData = {"id" : 1, "completed": true, "rule_violations" : [{"label": "Fare limit", "rule_break_text": "You did a bad thing"}]};
+        let saveButton = document.createElement("button");
+        saveButton.classList.add("btn", "btn-primary", "save-section");
+        saveButton.innerHTML = "Saving ...";
+        updateSection(parsedData, saveButton);
+        let collapseCard = document.querySelector(".card");
+        let expectedHTML = updateSectionCompleteOneRuleViolationsExpected.replace(/>\s+</g, "><");
+        assert.deepEqual(collapseCard.outerHTML.replace(/>\s+</g, "><"), expectedHTML, "card and expectedHTML are identical");
+    });
+
+    QUnit.test("complete section with one pre-existing rule violation", function(assert) {
+        let parsedData = {"id" : 1, "completed": true, "rule_violations" : [{"label": "Fare limit", "rule_break_text": "You did a bad thing"}]};
+        let saveButton = document.createElement("button");
+        saveButton.classList.add("btn", "btn-primary", "save-section");
+        saveButton.innerHTML = "Saving ...";
+        let collapseCard = document.querySelector(".card");
+        let collapseDiv = document.querySelector("#section-1-collapse");
+        collapseDiv.appendChild(createCardFooter(parsedData.rule_violations));
+        updateSection(parsedData, saveButton);
+        let expectedHTML = updateSectionCompleteOneRuleViolationsExpected.replace(/>\s+</g, "><");
+        assert.deepEqual(collapseCard.outerHTML.replace(/>\s+</g, "><"), expectedHTML, "card and expectedHTML are identical");
+    });
+
     </script>
 </body>
 </html>

front/tests/testObjects.js

@@ -44,3 +44,89 @@ const displayReportsOneReportExpected = `<div class="card-body"><table class="ta
 const displayReportsTwoReportsExpected = `<div class="card-body"><table class="table table-striped table-responsive-sm" style="visibility: visible;"><thead><tr><th>Title</th><th>Date Created</th><th class="d-none d-md-table-cell">Date Submitted</th><th>Action</th></tr></thead><tbody><tr><td>TEST1</td><td>3/5/2019</td><td class="d-none d-md-table-cell">TBD</td><td><button type="submit" data-rid="4" class="btn btn-primary edit-report-button" data-toggle="modal" data-target="#editReportModal">Edit</button></td></tr><tr><td>TEST2</td><td>3/5/2019</td><td class="d-none d-md-table-cell">TBD</td><td><button type="submit" data-rid="5" class="btn btn-primary edit-report-button" data-toggle="modal" data-target="#editReportModal">Edit</button></td></tr></tbody></table></div>`;
 
 const displayReportsOneViewableExpected = `<div class="card-body"><table class="table table-striped table-responsive-sm" style="visibility: visible;"><thead><tr><th>Title</th><th>Date Created</th><th class="d-none d-md-table-cell">Date Submitted</th><th>Action</th></tr></thead><tbody><tr><td>TEST2</td><td>3/5/2019</td><td class="d-none d-md-table-cell">3/5/2019</td><td><button type="submit" data-rid="5" class="btn btn-success view-report-button" data-toggle="modal" data-target="#viewReportModal">View</button></td></tr></tbody></table></div>`;
+
+const updateSectionExpected = `<div class="card">
+            <div class="card-header">
+                <h2 class="mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#section-1-collapse">General Info</button>
+                    <i id="section-1-state"></i>
+                </h2>
+            </div>
+            <div id="section-1-collapse" class="collapse show">
+                <div class="card-body">
+                    <div class="alert alert-danger section-alert">This section is not complete</div>
+                    <p>Description</p>
+                    <form class="form section-form" id="section-1-form" data-rid="2" data-sid="1">
+                        <div class="form-group row">
+                            <label class="col-sm-4 col-form" for="section-1-after_trip">Have you taken this trip already?: </label>
+                            <div class="col-sm-6">
+                                <select name="after_trip" id="section-1-after_trip" class="form-control">
+                                    <option value="true">Yes</option>
+                                    <option value="false" selected="selected">No</option>
+                                </select>
+                            </div>
+                        </div>
+                        <button type="submit" class="btn btn-primary save-section">Save</button>
+                    </form>
+                </div>
+            </div>
+        </div>`;
+
+const updateSectionCompleteNoRuleViolationsExpected = `<div class="card">
+            <div class="card-header">
+                <h2 class="mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#section-1-collapse">General Info</button>
+                    <i id="section-1-state" class="fas fa-check-square"></i>
+                </h2>
+            </div>
+            <div id="section-1-collapse" class="collapse">
+                <div class="card-body">
+                    <p>Description</p>
+                    <form class="form section-form" id="section-1-form" data-rid="2" data-sid="1">
+                        <div class="form-group row">
+                            <label class="col-sm-4 col-form" for="section-1-after_trip">Have you taken this trip already?: </label>
+                            <div class="col-sm-6">
+                                <select name="after_trip" id="section-1-after_trip" class="form-control">
+                                    <option value="true">Yes</option>
+                                    <option value="false" selected="selected">No</option>
+                                </select>
+                            </div>
+                        </div>
+                        <button type="submit" class="btn btn-primary save-section">Save</button>
+                    </form>
+                </div>
+            </div>
+        </div>`;
+
+const updateSectionCompleteOneRuleViolationsExpected = `<div class="card">
+            <div class="card-header">
+                <h2 class="mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#section-1-collapse">General Info</button>
+                    <i id="section-1-state" class="fas fa-exclamation-triangle"></i>
+                </h2>
+            </div>
+            <div id="section-1-collapse" class="collapse show">
+                <div class="card-body">
+                    <p>Description</p>
+                    <form class="form section-form" id="section-1-form" data-rid="2" data-sid="1">
+                        <div class="form-group row">
+                            <label class="col-sm-4 col-form" for="section-1-after_trip">Have you taken this trip already?: </label>
+                            <div class="col-sm-6">
+                                <select name="after_trip" id="section-1-after_trip" class="form-control">
+                                    <option value="true">Yes</option>
+                                    <option value="false" selected="selected">No</option>
+                                </select>
+                            </div>
+                        </div>
+                        <button type="submit" class="btn btn-primary save-section">Save</button>
+                    </form>
+                </div>
+                <div class="card-footer">
+                    <div class="alert alert-danger">
+                        <div class="alert-heading">Rule Violations</div>
+                        <hr>
+                        <p><strong>Fare limit</strong><br>You did a bad thing</p>
+                    </div>
+                </div>
+            </div>
+        </div>`;