328 lines
17 KiB
HTML
328 lines
17 KiB
HTML
<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
|
|
|
|
// 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");
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|