Conservancy/reimbursinator
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add createCollapsibleCard and createCollapsibleCardBody tests

Browse source
This commit is contained in:
Preston Doman 2019-03-04 00:36:36 -08:00
parent 05f29b3584
commit 7a68ec8bac
2 changed files with 95 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
front/static/js/viewHistory.js
View file

@ -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) {

73
front/static/tests/qunit_tests.html
View file

@ -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>