2019-03-01 15:51:51 -08:00
< 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 >
2019-03-04 15:34:03 -08:00
< script src = "../js/testObjects.js" > < / script >
2019-03-01 15:51:51 -08:00
< / head >
< body >
< div id = "qunit" > < / div >
2019-03-04 15:34:03 -08:00
< div id = "qunit-fixture" >
2019-03-05 15:58:41 -08:00
< 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 >
2019-03-04 15:34:03 -08:00
< 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 >
2019-03-01 15:51:51 -08:00
< script src = "https://code.jquery.com/qunit/qunit-2.9.2.js" > < / script >
< script >
2019-03-01 17:02:49 -08:00
// BEGIN createFormGroup unit tests
QUnit.module("createFormGroup");
// BEGIN: Test rendering of fields with type boolean
QUnit.test("boolean input group false renders", function(assert) {
2019-03-01 15:51:51 -08:00
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 > `
2019-03-04 00:36:36 -08:00
assert.deepEqual(formGroup.outerHTML, expectedHTML, "boolean false renders as no option selected");
2019-03-01 15:51:51 -08:00
});
2019-03-01 17:02:49 -08:00
QUnit.test("boolean input group true renders", function(assert) {
2019-03-01 15:51:51 -08:00
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 > `
2019-03-04 00:36:36 -08:00
assert.deepEqual(formGroup.outerHTML, expectedHTML, "boolean true renders as yes option selected");
2019-03-01 15:51:51 -08:00
});
2019-03-01 17:02:49 -08:00
// BEGIN: Test rendering of fields with type date
QUnit.test("date input group renders", function(assert) {
2019-03-01 15:51:51 -08:00
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 > `
2019-03-04 00:36:36 -08:00
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
2019-03-01 15:51:51 -08:00
});
2019-03-01 17:02:49 -08:00
QUnit.test("date value None", function(assert) {
2019-03-01 15:51:51 -08:00
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;
2019-03-04 00:36:36 -08:00
assert.deepEqual(value, "", "date initialized to None has null value");
2019-03-01 15:51:51 -08:00
});
2019-03-01 17:02:49 -08:00
QUnit.test("date value assignment", function(assert) {
2019-03-01 15:51:51 -08:00
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;
2019-03-04 00:36:36 -08:00
assert.deepEqual(value, field.value, "date input initialized to a value is rendered with that value");
2019-03-01 15:51:51 -08:00
});
2019-03-01 17:02:49 -08:00
// BEGIN: Test rendering of fields with type string
QUnit.test("string input group renders", function(assert) {
2019-03-01 15:51:51 -08:00
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 > `
2019-03-04 00:36:36 -08:00
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
2019-03-01 15:51:51 -08:00
});
2019-03-01 17:02:49 -08:00
QUnit.test("string value assignment", function(assert) {
2019-03-01 15:51:51 -08:00
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;
2019-03-04 00:36:36 -08:00
assert.deepEqual(value, field.value, "text input initialized to a value is rendered with that value");
2019-03-01 15:51:51 -08:00
});
2019-03-01 17:02:49 -08:00
// 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 > `
2019-03-04 00:36:36 -08:00
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
2019-03-01 17:02:49 -08:00
});
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;
2019-03-04 00:36:36 -08:00
assert.deepEqual(value, "", "decimal input initialized to 0.00 has null value");
2019-03-01 17:02:49 -08:00
});
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;
2019-03-04 00:36:36 -08:00
assert.deepEqual(value, field.value, "decimal input initialized to 1337 has value 1337");
2019-03-01 17:02:49 -08:00
});
// 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 > `
2019-03-04 00:36:36 -08:00
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
2019-03-01 17:02:49 -08:00
});
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;
2019-03-04 00:36:36 -08:00
assert.deepEqual(value, "", "integer input initialized to 0 has null value");
2019-03-01 17:02:49 -08:00
});
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;
2019-03-04 00:36:36 -08:00
assert.deepEqual(value, field.value.toString(), "integer input initialized to 1234 has string value 1234");
2019-03-01 17:02:49 -08:00
});
// 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 > `
2019-03-04 00:36:36 -08:00
assert.deepEqual(formGroup.outerHTML, expectedHTML, "formGroup string matches expectedHTML string");
2019-03-01 17:02:49 -08:00
});
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;
2019-03-04 00:36:36 -08:00
assert.deepEqual(value, field.value, "file input initialized to screenshot.jpg has string value screenshot.jpg");
2019-03-01 17:02:49 -08:00
});
2019-03-05 15:58:41 -08:00
2019-03-01 17:02:49 -08:00
2019-03-04 00:36:36 -08:00
// 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");
});
2019-03-04 13:32:18 -08:00
2019-03-05 15:58:41 -08:00
2019-03-04 13:32:18 -08:00
// 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");
});
2019-03-04 15:34:03 -08:00
2019-03-05 15:58:41 -08:00
// BEGIN createReportForm unit tests
2019-03-04 15:34:03 -08:00
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")
});
2019-03-05 15:58:41 -08:00
// 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 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 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");
});
2019-03-01 15:51:51 -08:00
< / script >
< / body >
< / html >
