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

Merge pull request #115 from danieldupriest/createCard-unit-tests

Browse source 
Create card unit tests
This commit is contained in:
Daniel Dupriest 2019-03-06 15:18:37 -08:00 • committed by GitHub
commit d8b9788c6f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 505 additions and 251 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -86,7 +86,7 @@ function updateSection(parsedData, saveButton) {
saveButton.innerHTML = "Save";
saveButton.disabled = false;
}
// Wraps a Bootstrap form group around a field
@ -214,7 +214,7 @@ function createCollapsibleCard(sectionIdStr, sectionTitle, sectionCompleted, rul
sectionState.classList.add("fas", "fa-exclamation-triangle");
}
}
// Create h2, button. Append button to h2, h2 to header, and header to card
const h2 = document.createElement("h2");
h2.classList.add("mb-0");
@ -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";
@ -284,7 +284,7 @@ function createCardFooter(ruleViolations) {
violation.appendChild(ruleBreakText);
violationMessage.appendChild(violation);
}
cardFooter.appendChild(violationMessage);
return cardFooter;
}
@ -295,12 +295,6 @@ function createReportForm(parsedData, type) {
const accordion = document.createElement("div");
accordion.classList.add("accordion");
//submit button
const submitButton = document.querySelector(".submit-report-button");
if (submitButton) {
submitButton.setAttribute("data-rid", parsedData.report_pk);
}
if (type === reportType.EDIT) {
modalBody = document.querySelector("#editReportModalBody");
modalLabel = document.querySelector("#editReportModalLabel");
@ -317,6 +311,11 @@ function createReportForm(parsedData, type) {
return;
}
const submitButton = document.querySelector(".submit-report-button");
if (submitButton) {
submitButton.setAttribute("data-rid", parsedData.report_pk);
}
while (modalBody.firstChild) {
modalBody.removeChild(modalBody.firstChild);
}
@ -339,13 +338,6 @@ function createReportForm(parsedData, type) {
// Traverse the fields of this section
let fields = sections[i].fields;
for (let j = 0; j < fields.length; j++) {
/*
console.log("Field label: " + fields[j].label);
console.log("Field type: " + fields[j].field_type);
console.log("Field value: " + fields[j].value);
*/
// Create a form group for each field and add it to the form
form.appendChild(createFormGroup(sectionIdStr, fields[j]));
}
@ -358,7 +350,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) {

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

@ -1,233 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<title>QUnit Tests</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.9.2.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="../js/viewHistory.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="https://code.jquery.com/qunit/qunit-2.9.2.js"></script>
<script>
// BEGIN createFormGroup unit tests
QUnit.module("createFormGroup");
// BEGIN: Test rendering of fields with type boolean
QUnit.test("boolean input group false renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "Have you taken this trip already?",
"field_name": "after_trip",
"field_type": "boolean",
"value": false
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<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>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "boolean false renders as no option selected");
});
QUnit.test("boolean input group true renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "Have you taken this trip already?",
"field_name": "after_trip",
"field_type": "boolean",
"value": true
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<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" selected="selected">Yes</option><option value="false">No</option></select></div></div>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "boolean true renders as yes option selected");
});
// END: Test rendering of fields with type boolean
// BEGIN: Test rendering of fields with type date
QUnit.test("date input group renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "Departure date",
"field_name": "departure_date",
"field_type": "date",
"value": "None"
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<div class="form-group row"><label class="col-sm-4 col-form" for="section-1-departure_date">Departure date: </label><div class="col-sm-6"><input name="departure_date" id="section-1-departure_date" type="date" placeholder="mm-dd-yyyy" class="form-control"></div></div>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
});
QUnit.test("date value None", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "Departure date",
"field_name": "departure_date",
"field_type": "date",
"value": "None"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-departure_date").value;
assert.deepEqual(value, "", "date initialized to None has null value");
});
QUnit.test("date value assignment", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "Departure date",
"field_name": "departure_date",
"field_type": "date",
"value": "2019-02-28"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-departure_date").value;
assert.deepEqual(value, field.value, "date input initialized to a value is rendered with that value");
});
// END: Test rendering of fields with type date
// BEGIN: Test rendering of fields with type string
QUnit.test("string input group renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "City",
"field_name": "city",
"field_type": "string",
"value": "Portland"
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<div class="form-group row"><label class="col-sm-4 col-form" for="section-1-city">City: </label><div class="col-sm-6"><input name="city" id="section-1-city" type="text" class="form-control"></div></div>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
});
QUnit.test("string value assignment", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "City",
"field_name": "city",
"field_type": "string",
"value": "Portland"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-city").value;
assert.deepEqual(value, field.value, "text input initialized to a value is rendered with that value");
});
// END: Test rendering of fields with type date
// BEGIN: Test rendering of fields with type decimal
QUnit.test("decimal input group renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": "0.00",
"field_type": "decimal",
"label": "Lowest fare",
"field_name": "lowest_fare"
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<div class="form-group row"><label class="col-sm-4 col-form" for="section-1-lowest_fare">Lowest fare: </label><div class="col-sm-6"><input name="lowest_fare" id="section-1-lowest_fare" type="number" class="form-control" step="0.01" min="0"></div></div>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
});
QUnit.test("decimal input group initialized to default", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": "0.00",
"field_type": "decimal",
"label": "Lowest fare",
"field_name": "lowest_fare"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-lowest_fare").value;
assert.deepEqual(value, "", "decimal input initialized to 0.00 has null value");
});
QUnit.test("decimal input group initialized to value", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": "1337",
"field_type": "decimal",
"label": "Lowest fare",
"field_name": "lowest_fare"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-lowest_fare").value;
assert.deepEqual(value, field.value, "decimal input initialized to 1337 has value 1337");
});
// END: Test rendering of fields with type decimal
// BEGIN: Test rendering of fields with type integer
QUnit.test("integer input group renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": 0,
"field_type": "integer",
"label": "Number of full days of travel",
"field_name": "full_days"
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<div class="form-group row"><label class="col-sm-4 col-form" for="section-1-full_days">Number of full days of travel: </label><div class="col-sm-6"><input name="full_days" id="section-1-full_days" type="number" class="form-control" step="1" min="0"></div></div>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
});
QUnit.test("integer input group initialized to default", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": 0,
"field_type": "integer",
"label": "Number of full days of travel",
"field_name": "full_days"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-full_days").value;
assert.deepEqual(value, "", "integer input initialized to 0 has null value");
});
QUnit.test("integer input group initialized to value", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": 1234,
"field_type": "integer",
"label": "Number of full days of travel",
"field_name": "full_days"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-full_days").value;
assert.deepEqual(value, field.value.toString(), "integer input initialized to 1234 has string value 1234");
});
// END: Test rendering of fields with type integer
// BEGIN: Test rendering of fields with type file
QUnit.test("file input group renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": "",
"field_type": "file",
"label": "Screenshot of invoice",
"field_name": "invoice_screenshot"
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<div class="form-group row"><label class="col-sm-4 col-form" for="section-1-invoice_screenshot">Screenshot of invoice: </label><div class="col-sm-6"><input name="invoice_screenshot" id="section-1-invoice_screenshot" type="file" class="form-control-file"><p class="form-text"></p></div></div>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
});
QUnit.test("file input group form text assignment", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": "screenshot.jpg",
"field_type": "file",
"label": "Screenshot of invoice",
"field_name": "invoice_screenshot"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector(".form-text").innerHTML;
assert.deepEqual(value, field.value, "file input initialized to screenshot.jpg has string value screenshot.jpg");
});
// END: Test rendering of fields with type file
</script>
</body>
</html>

451
front/tests/qunit_tests.html Normal file
View file

@ -0,0 +1,451 @@
<html>
<head>
<meta charset="utf-8">
<title>QUnit Tests</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.9.2.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="../static/js/viewHistory.js"></script>
<script src="testObjects.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div class="card-body">
<div class="text-center">
<i class="fas fa-spinner fa-3x fa-spin"></i>
</div>
<table class="table table-striped table-responsive-sm" style="visibility:hidden">
<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>
</tbody>
</table>
</div>
<div class="modal fade" id="newReportModal" 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="newReportModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="newReportModalBody">
<div class="text-center">
<i class="fas fa-spinner fa-3x fa-spin"></i>
<br>
<br>
<h5>Creating Report ...</h5>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary submit-report-button">Submit Report</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="editReportModal" 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="editReportModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="editReportModalBody">
<div class="text-center">
<i class="fas fa-spinner fa-3x fa-spin"></i>
<br>
<br>
<h5>Loading Report ...</h5>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger delete-report">Delete Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary submit-report-button">Submit Report</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/qunit/qunit-2.9.2.js"></script>
<script>
// BEGIN createFormGroup unit tests
QUnit.module("createFormGroup");
// BEGIN: Test rendering of fields with type boolean
QUnit.test("boolean input group false renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "Have you taken this trip already?",
"field_name": "after_trip",
"field_type": "boolean",
"value": false
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<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>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "boolean false renders as no option selected");
});
QUnit.test("boolean input group true renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "Have you taken this trip already?",
"field_name": "after_trip",
"field_type": "boolean",
"value": true
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<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" selected="selected">Yes</option><option value="false">No</option></select></div></div>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "boolean true renders as yes option selected");
});
// BEGIN: Test rendering of fields with type date
QUnit.test("date input group renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "Departure date",
"field_name": "departure_date",
"field_type": "date",
"value": "None"
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<div class="form-group row"><label class="col-sm-4 col-form" for="section-1-departure_date">Departure date: </label><div class="col-sm-6"><input name="departure_date" id="section-1-departure_date" type="date" placeholder="mm-dd-yyyy" class="form-control"></div></div>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
});
QUnit.test("date value None", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "Departure date",
"field_name": "departure_date",
"field_type": "date",
"value": "None"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-departure_date").value;
assert.deepEqual(value, "", "date initialized to None has null value");
});
QUnit.test("date value assignment", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "Departure date",
"field_name": "departure_date",
"field_type": "date",
"value": "2019-02-28"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-departure_date").value;
assert.deepEqual(value, field.value, "date input initialized to a value is rendered with that value");
});
// BEGIN: Test rendering of fields with type string
QUnit.test("string input group renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "City",
"field_name": "city",
"field_type": "string",
"value": "Portland"
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<div class="form-group row"><label class="col-sm-4 col-form" for="section-1-city">City: </label><div class="col-sm-6"><input name="city" id="section-1-city" type="text" class="form-control"></div></div>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
});
QUnit.test("string value assignment", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"label": "City",
"field_name": "city",
"field_type": "string",
"value": "Portland"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-city").value;
assert.deepEqual(value, field.value, "text input initialized to a value is rendered with that value");
});
// BEGIN: Test rendering of fields with type decimal
QUnit.test("decimal input group renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": "0.00",
"field_type": "decimal",
"label": "Lowest fare",
"field_name": "lowest_fare"
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<div class="form-group row"><label class="col-sm-4 col-form" for="section-1-lowest_fare">Lowest fare: </label><div class="col-sm-6"><input name="lowest_fare" id="section-1-lowest_fare" type="number" class="form-control" step="0.01" min="0"></div></div>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
});
QUnit.test("decimal input group initialized to default", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": "0.00",
"field_type": "decimal",
"label": "Lowest fare",
"field_name": "lowest_fare"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-lowest_fare").value;
assert.deepEqual(value, "", "decimal input initialized to 0.00 has null value");
});
QUnit.test("decimal input group initialized to value", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": "1337",
"field_type": "decimal",
"label": "Lowest fare",
"field_name": "lowest_fare"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-lowest_fare").value;
assert.deepEqual(value, field.value, "decimal input initialized to 1337 has value 1337");
});
// BEGIN: Test rendering of fields with type integer
QUnit.test("integer input group renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": 0,
"field_type": "integer",
"label": "Number of full days of travel",
"field_name": "full_days"
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<div class="form-group row"><label class="col-sm-4 col-form" for="section-1-full_days">Number of full days of travel: </label><div class="col-sm-6"><input name="full_days" id="section-1-full_days" type="number" class="form-control" step="1" min="0"></div></div>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
});
QUnit.test("integer input group initialized to default", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": 0,
"field_type": "integer",
"label": "Number of full days of travel",
"field_name": "full_days"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-full_days").value;
assert.deepEqual(value, "", "integer input initialized to 0 has null value");
});
QUnit.test("integer input group initialized to value", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": 1234,
"field_type": "integer",
"label": "Number of full days of travel",
"field_name": "full_days"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector("#section-1-full_days").value;
assert.deepEqual(value, field.value.toString(), "integer input initialized to 1234 has string value 1234");
});
// BEGIN: Test rendering of fields with type file
QUnit.test("file input group renders", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": "",
"field_type": "file",
"label": "Screenshot of invoice",
"field_name": "invoice_screenshot"
};
let formGroup = createFormGroup(sectionIdStr, field);
let expectedHTML = `<div class="form-group row"><label class="col-sm-4 col-form" for="section-1-invoice_screenshot">Screenshot of invoice: </label><div class="col-sm-6"><input name="invoice_screenshot" id="section-1-invoice_screenshot" type="file" class="form-control-file"><p class="form-text"></p></div></div>`
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
});
QUnit.test("file input group form text assignment", function(assert) {
let sectionIdStr = "section-1-";
let field = {
"value": "screenshot.jpg",
"field_type": "file",
"label": "Screenshot of invoice",
"field_name": "invoice_screenshot"
};
let formGroup = createFormGroup(sectionIdStr, field);
let value = formGroup.querySelector(".form-text").innerHTML;
assert.deepEqual(value, field.value, "file input initialized to screenshot.jpg has string value screenshot.jpg");
});
// 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");
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");
});
// BEGIN createCardFooter unit tests
QUnit.module("createCardFooter");
QUnit.test("card footer no rule violations does not render", function(assert) {
let ruleViolations = [];
let cardFooter = createCardFooter(ruleViolations);
assert.strictEqual(cardFooter, null, "cardFooter is null");
});
QUnit.test("card footer with one rule violation renders", function(assert) {
let ruleViolations = [{"label": "Fare limits", "rule_break_text": "You did a bad thing"}];
let cardFooter = createCardFooter(ruleViolations);
let expectedHTML = `<div class="card-footer"><div class="alert alert-danger"><div class="alert-heading">Rule Violations</div><hr><p><strong>Fare limits</strong><br>You did a bad thing</p></div></div>`;
assert.deepEqual(cardFooter.outerHTML, expectedHTML, "cardFooter html and expectedHTML are identical");
});
QUnit.test("card footer with multiple rule violation renders", function(assert) {
let ruleViolations = [{"label": "Fare limits", "rule_break_text": "You did a bad thing"}, {"label": "Fare limits", "rule_break_text": "Now you've done it"}];
let cardFooter = createCardFooter(ruleViolations);
let expectedHTML = `<div class="card-footer"><div class="alert alert-danger"><div class="alert-heading">Rule Violations</div><hr><p><strong>Fare limits</strong><br>You did a bad thing</p><p><strong>Fare limits</strong><br>Now you've done it</p></div></div>`;
assert.deepEqual(cardFooter.outerHTML, expectedHTML, "cardFooter html and expectedHTML are identical");
});
// BEGIN createReportForm unit tests
QUnit.module("createReportForm");
QUnit.test("new report renders", function(assert) {
createReportForm(testReport, reportType.NEW);
let newReportModal = document.getElementById("newReportModal");
let expectedHTML = typeNewExpectedHTML;
assert.deepEqual(newReportModal.outerHTML, expectedHTML, "new report form and expectedHTML are identical")
});
QUnit.test("edit report renders", function(assert) {
createReportForm(testReport, reportType.EDIT);
let editReportModal = document.getElementById("editReportModal");
let expectedHTML = typeEditExpectedHTML;
assert.deepEqual(editReportModal.outerHTML, expectedHTML, "edit report form and expectedHTML are identical")
});
QUnit.test("undefined report does not render", function(assert) {
let qunitFixture = document.getElementById("qunit-fixture");
let expectedHTML = qunitFixture.outerHTML;
createReportForm(testReport, undefined);
assert.deepEqual(qunitFixture.outerHTML, expectedHTML, "report forms and expectedHTML are identical")
});
// BEGIN displayListOfReports unit tests
QUnit.module("displayListOfReports");
QUnit.test("empty reports", function(assert) {
let expectedHTML = `<div class="card-body"><h5 class="text-center">No reports found.</h5></div>`;
let parsedData = {"reports": []};
displayListOfReports(parsedData);
let cardBody = document.querySelector(".card-body");
assert.deepEqual(cardBody.outerHTML.replace(/>\s+</g, "><"), expectedHTML, "card body and expectedHTML are identical");
});
QUnit.test("one editable report", function(assert) {
let parsedData = {"reports": [{"date_created": "2019-03-05T08:00:00Z", "title": "TEST1", "reference_number": "1234", "date_submitted": "2019-03-05T08:00:00Z", "user_id": 2, "submitted": false, "report_pk": 4}]};
let expectedHTML = displayReportsOneReportExpected;
displayListOfReports(parsedData);
let cardBody = document.querySelector(".card-body");
assert.deepEqual(cardBody.outerHTML.replace(/>\s+</g, "><"), expectedHTML, "card body and expectedHTML are identical");
});
QUnit.test("two editable reports", function(assert) {
let parsedData = {"reports": [{"date_created": "2019-03-05T08:00:00Z", "title": "TEST1", "reference_number": "1234", "date_submitted": "2019-03-05T08:00:00Z", "user_id": 2, "submitted": false, "report_pk": 4}, {"date_created": "2019-03-05T08:00:00Z", "title": "TEST2", "reference_number": "12345", "date_submitted": "2019-03-05T08:00:00Z", "user_id": 2, "submitted": false, "report_pk": 5}]};
let expectedHTML = displayReportsTwoReportsExpected;
displayListOfReports(parsedData);
let cardBody = document.querySelector(".card-body");
assert.deepEqual(cardBody.outerHTML.replace(/>\s+</g, "><"), expectedHTML, "card body and expectedHTML are identical");
});
QUnit.test("one viewable report", function(assert) {
let parsedData = {"reports": [{"date_created": "2019-03-05T08:00:00Z", "title": "TEST2", "reference_number": "12345", "date_submitted": "2019-03-05T08:00:00Z", "user_id": 2, "submitted": true, "report_pk": 5}]};
let expectedHTML = displayReportsOneViewableExpected;
displayListOfReports(parsedData);
let cardBody = document.querySelector(".card-body");
assert.deepEqual(cardBody.outerHTML.replace(/>\s+</g, "><"), expectedHTML, "card body and expectedHTML are identical");
});
</script>
</body>
</html>

44
front/tests/testObjects.js Normal file
View file

File diff suppressed because one or more lines are too long