Merge pull request #132 from danieldupriest/update-section-tests

Update section 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,58 @@
         </div>
     </template>
 
+    <template id="view-report">
+        <div class="modal fade" id="viewReportModal" tabindex="-1" role="dialog">
+            <div class="modal-dialog modal-lg" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="viewReportModalLabel"></h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-view">
+                        <div class="text-center">
+                            <i class="fas fa-spinner fa-3x fa-spin"></i>
+                            <br>
+                            <br>
+                            <h5>Loading Report ...</h5>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </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 +526,125 @@
         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");
+    });
+
+    // BEGIN animateButton tests
+    QUnit.module("animateButton");
+
+    QUnit.test("animated button renders", function(assert) {
+        let saveButton = document.createElement("button");
+        saveButton.type = "submit";
+        saveButton.classList.add("btn", "btn-primary", "save-section");
+        saveButton.innerHTML = "Save";
+        animateButton(saveButton, "Saving ...");
+        let expectedHTML = `<button type="submit" class="btn btn-primary save-section" disabled=""><span class="spinner-border spinner-border-sm"></span>Saving ...</button>`;
+        assert.deepEqual(saveButton.outerHTML, expectedHTML, "save button and expectedHTML are identical");
+    });
+
+    // BEGIN displayReport tests
+    QUnit.module("displayReport", {
+        beforeEach : function() {
+            let qunitFixture = document.getElementById("qunit-fixture");
+            let viewReport = document.getElementById("view-report");
+            let clone = document.importNode(viewReport.content, true);
+            qunitFixture.appendChild(clone);
+        }
+    });
+
+    QUnit.test("field type is boolean and value is false", function(assert) {
+        let parsedData = viewReportTest1;
+        displayReport(parsedData);
+        let viewReport = document.getElementById("viewReportModal");
+        let expectedHTML = viewReportTest1Expected;
+        assert.deepEqual(viewReport.outerHTML, expectedHTML, "view report and expectedHTML are identical");
+    });
+
+    QUnit.test("field type is boolean and value is true", function(assert) {
+        let parsedData = viewReportTest2;
+        displayReport(parsedData);
+        let viewReport = document.getElementById("viewReportModal");
+        let expectedHTML = viewReportTest2Expected;
+        assert.deepEqual(viewReport.outerHTML, expectedHTML, "view report and expectedHTML are identical");
+    });
+
+    QUnit.test("field type is non-boolean and value is the empty string", function(assert) {
+        let parsedData = viewReportTest3;
+        displayReport(parsedData);
+        let viewReport = document.getElementById("viewReportModal");
+        let expectedHTML = viewReportTest3Expected;
+        assert.deepEqual(viewReport.outerHTML, expectedHTML, "view report and expectedHTML are identical");
+    });
+
+    QUnit.test("field type is non-boolean and value is not the empty string", function(assert) {
+        let parsedData = viewReportTest4;
+        displayReport(parsedData);
+        let viewReport = document.getElementById("viewReportModal");
+        let expectedHTML = viewReportTest4Expected;
+        assert.deepEqual(viewReport.outerHTML, expectedHTML, "view report and expectedHTML are identical");
+    });
+
+    QUnit.test("multiple fields", function(assert) {
+        let parsedData = viewReportTest5;
+        displayReport(parsedData);
+        let viewReport = document.getElementById("viewReportModal");
+        let expectedHTML = viewReportTest5Expected;
+        assert.deepEqual(viewReport.outerHTML, expectedHTML, "view report and expectedHTML are identical");
+    });
     </script>
 </body>
 </html>