Add createCollapsibleCard and createCollapsibleCardBody tests

front/static/js/viewHistory.js

@@ -232,7 +232,7 @@ function createCollapsibleCard(sectionIdStr, sectionTitle, sectionCompleted, rul
     return card;
 }
 
-function createCollapsibleCardBody(form, type, sectionIdStr, sectionDescription, sectionCompleted, ruleViolations) {
+function createCollapsibleCardBody(form, sectionIdStr, sectionDescription, sectionCompleted, ruleViolations) {
     // Create wrapper div
     const collapseDiv = document.createElement("div");
     collapseDiv.id = sectionIdStr + "collapse";
@@ -358,7 +358,7 @@ function createReportForm(parsedData, type) {
         form.appendChild(saveButton);
 
         // Create collapsible card body, append form to it, append card to accordion
-        let cardBody = createCollapsibleCardBody(form, type, sectionIdStr,
+        let cardBody = createCollapsibleCardBody(form, sectionIdStr,
             sections[i].html_description, sections[i].completed, sections[i].rule_violations);
         let cardFooter = createCardFooter(sections[i].rule_violations);
         if (cardFooter) {

front/static/tests/qunit_tests.html

@@ -228,6 +228,79 @@
     });
     // END: Test rendering of fields with type file
 
+    // BEGIN createCollapsibleCard unit tests
+    QUnit.module("createCollapsibleCard");
+
+    QUnit.test("incomplete section renders", function(assert) {
+        let sectionIdStr = "section-1-";
+        let sectionTitle = "General Info";
+        let sectionCompleted = false;
+        let ruleViolations = [];
+
+        let card = createCollapsibleCard(sectionIdStr, sectionTitle, sectionCompleted, ruleViolations);
+        let expectedHTML = `<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>`;
+        assert.deepEqual(card.outerHTML, expectedHTML, "card html and expectedHTML are identical");
+    });
+
+    QUnit.test("complete section with no rule violations renders", function(assert) {
+        let sectionIdStr = "section-1-";
+        let sectionTitle = "General Info";
+        let sectionCompleted = true;
+        let ruleViolations = [];
+
+        let card = createCollapsibleCard(sectionIdStr, sectionTitle, sectionCompleted, ruleViolations);
+        let expectedHTML = `<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>`
+        assert.deepEqual(card.outerHTML, expectedHTML, "card html and expectedHTML are identical");
+    });
+
+    QUnit.test("complete section with a violation renders", function(assert) {
+        let sectionIdStr = "section-1-";
+        let sectionTitle = "General Info";
+        let sectionCompleted = true;
+        let ruleViolations = [{"label": "Fare limits", "rule_break_text": "You did a bad thing"}]
+
+        let card = createCollapsibleCard(sectionIdStr, sectionTitle, sectionCompleted, ruleViolations);
+        let expectedHTML = `<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>`
+        assert.deepEqual(card.outerHTML, expectedHTML, "card html and expectedHTML are identical");
+    });
+
+
+    // BEGIN createCollapsibleCard unit tests
+    QUnit.module("createCollapsibleCardBody");
+    // form, sectionIdStr, sectionDescription, sectionCompleted, ruleViolations
+
+    QUnit.test("incomplete section renders", function(assert) {
+        let form = document.createElement("form");
+        let sectionIdStr = "section-1-";
+        let sectionDescription = "<p>Section Description</p>";
+        let sectionCompleted = false;
+        let ruleViolations = [];
+        let collapseDiv = createCollapsibleCardBody(form, sectionIdStr, sectionDescription, sectionCompleted, ruleViolations);
+        let expectedHTML = `<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>Section Description</p><form></form></div></div>`;
+        assert.deepEqual(collapseDiv.outerHTML, expectedHTML, "collapseDiv html and expectedHTML are identical");
+    });
+
+    QUnit.test("complete section with no rule violations renders", function(assert) {
+        let form = document.createElement("form");
+        let sectionIdStr = "section-1-";
+        let sectionDescription = "<p>Section Description</p>";
+        let sectionCompleted = true;
+        let ruleViolations = [];
+        let collapseDiv = createCollapsibleCardBody(form, sectionIdStr, sectionDescription, sectionCompleted, ruleViolations);
+        let expectedHTML = `<div id="section-1-collapse" class="collapse"><div class="card-body"><div></div><p>Section Description</p><form></form></div></div>`;
+        assert.deepEqual(collapseDiv.outerHTML, expectedHTML, "collapseDiv html and expectedHTML are identical");
+    });
+
+    QUnit.test("complete section with rule violation renders", function(assert) {
+        let form = document.createElement("form");
+        let sectionIdStr = "section-1-";
+        let sectionDescription = "<p>Section Description</p>";
+        let sectionCompleted = true;
+        let ruleViolations = [{"label": "Fare limits", "rule_break_text": "You did a bad thing"}]
+        let collapseDiv = createCollapsibleCardBody(form, sectionIdStr, sectionDescription, sectionCompleted, ruleViolations);
+        let expectedHTML = `<div id="section-1-collapse" class="collapse show"><div class="card-body"><div></div><p>Section Description</p><form></form></div></div>`;
+        assert.deepEqual(collapseDiv.outerHTML, expectedHTML, "collapseDiv html and expectedHTML are identical");
+    });
     </script>
 </body>
 </html>