Add updateSection tests
This commit is contained in:
Preston Doman
parent
1ebd953057
commit
a3ffb3d9dc
3 changed files with 173 additions and 2 deletions
|
|
@ -68,7 +68,7 @@ function updateSection(parsedData, saveButton) {
|
|||
if (parsedData.completed) {
|
||||
const sectionAlert = collapseDiv.querySelector(".section-alert");
|
||||
if (sectionAlert) {
|
||||
collapseDiv.firstChild.removeChild(sectionAlert);
|
||||
collapseDiv.firstElementChild.removeChild(sectionAlert);
|
||||
}
|
||||
if (parsedData.rule_violations.length === 0) {
|
||||
// Complete with no rule violations
|
||||
|
|
@ -94,7 +94,6 @@ function updateSection(parsedData, saveButton) {
|
|||
|
||||
saveButton.innerHTML = "Save";
|
||||
saveButton.disabled = false;
|
||||
|
||||
}
|
||||
|
||||
// Wraps a Bootstrap form group around a field
|
||||
|
|
|
|||
|
|
@ -88,6 +88,35 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<template id="collapse-card">
|
||||
<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 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>Description</p>
|
||||
<form class="form section-form" id="section-1-form" data-rid="2" data-sid="1">
|
||||
<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>
|
||||
<button type="submit" class="btn btn-primary save-section">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="https://code.jquery.com/qunit/qunit-2.9.2.js"></script>
|
||||
<script>
|
||||
|
||||
|
|
@ -474,6 +503,63 @@
|
|||
let cardBody = document.querySelector(".card-body");
|
||||
assert.deepEqual(cardBody.outerHTML.replace(/>\s+</g, "><"), expectedHTML, "card body and expectedHTML are identical");
|
||||
});
|
||||
|
||||
// BEGIN updateSection unit tests
|
||||
QUnit.module("updateSection", {
|
||||
beforeEach : function() {
|
||||
let qunitFixture = document.getElementById("qunit-fixture");
|
||||
let collapseCard = document.getElementById("collapse-card");
|
||||
let clone = document.importNode(collapseCard.content, true);
|
||||
qunitFixture.appendChild(clone);
|
||||
}
|
||||
});
|
||||
|
||||
QUnit.test("incomplete section with no rule violations", function(assert) {
|
||||
let parsedData = {"id" : 1, "completed": false, "rule_violations" : []};
|
||||
let saveButton = document.createElement("button");
|
||||
saveButton.classList.add("btn", "btn-primary", "save-section");
|
||||
saveButton.innerHTML = "Saving ...";
|
||||
updateSection(parsedData, saveButton);
|
||||
let collapseCard = document.querySelector(".card");
|
||||
let expectedHTML = updateSectionExpected;
|
||||
assert.deepEqual(collapseCard.outerHTML, expectedHTML, "card and expectedHTML are identical");
|
||||
});
|
||||
|
||||
QUnit.test("complete section with no rule violations", function(assert) {
|
||||
let parsedData = {"id" : 1, "completed": true, "rule_violations" : []};
|
||||
let saveButton = document.createElement("button");
|
||||
saveButton.classList.add("btn", "btn-primary", "save-section");
|
||||
saveButton.innerHTML = "Saving ...";
|
||||
updateSection(parsedData, saveButton);
|
||||
let collapseCard = document.querySelector(".card");
|
||||
let expectedHTML = updateSectionCompleteNoRuleViolationsExpected.replace(/>\s+</g, "><");
|
||||
assert.deepEqual(collapseCard.outerHTML.replace(/>\s+</g, "><"), expectedHTML, "card and expectedHTML are identical");
|
||||
});
|
||||
|
||||
QUnit.test("complete section with one new rule violation", function(assert) {
|
||||
let parsedData = {"id" : 1, "completed": true, "rule_violations" : [{"label": "Fare limit", "rule_break_text": "You did a bad thing"}]};
|
||||
let saveButton = document.createElement("button");
|
||||
saveButton.classList.add("btn", "btn-primary", "save-section");
|
||||
saveButton.innerHTML = "Saving ...";
|
||||
updateSection(parsedData, saveButton);
|
||||
let collapseCard = document.querySelector(".card");
|
||||
let expectedHTML = updateSectionCompleteOneRuleViolationsExpected.replace(/>\s+</g, "><");
|
||||
assert.deepEqual(collapseCard.outerHTML.replace(/>\s+</g, "><"), expectedHTML, "card and expectedHTML are identical");
|
||||
});
|
||||
|
||||
QUnit.test("complete section with one pre-existing rule violation", function(assert) {
|
||||
let parsedData = {"id" : 1, "completed": true, "rule_violations" : [{"label": "Fare limit", "rule_break_text": "You did a bad thing"}]};
|
||||
let saveButton = document.createElement("button");
|
||||
saveButton.classList.add("btn", "btn-primary", "save-section");
|
||||
saveButton.innerHTML = "Saving ...";
|
||||
let collapseCard = document.querySelector(".card");
|
||||
let collapseDiv = document.querySelector("#section-1-collapse");
|
||||
collapseDiv.appendChild(createCardFooter(parsedData.rule_violations));
|
||||
updateSection(parsedData, saveButton);
|
||||
let expectedHTML = updateSectionCompleteOneRuleViolationsExpected.replace(/>\s+</g, "><");
|
||||
assert.deepEqual(collapseCard.outerHTML.replace(/>\s+</g, "><"), expectedHTML, "card and expectedHTML are identical");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -44,3 +44,89 @@ const displayReportsOneReportExpected = `<div class="card-body"><table class="ta
|
|||
const displayReportsTwoReportsExpected = `<div class="card-body"><table class="table table-striped table-responsive-sm" style="visibility: visible;"><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><tr><td>TEST1</td><td>3/5/2019</td><td class="d-none d-md-table-cell">TBD</td><td><button type="submit" data-rid="4" class="btn btn-primary edit-report-button" data-toggle="modal" data-target="#editReportModal">Edit</button></td></tr><tr><td>TEST2</td><td>3/5/2019</td><td class="d-none d-md-table-cell">TBD</td><td><button type="submit" data-rid="5" class="btn btn-primary edit-report-button" data-toggle="modal" data-target="#editReportModal">Edit</button></td></tr></tbody></table></div>`;
|
||||
|
||||
const displayReportsOneViewableExpected = `<div class="card-body"><table class="table table-striped table-responsive-sm" style="visibility: visible;"><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><tr><td>TEST2</td><td>3/5/2019</td><td class="d-none d-md-table-cell">3/5/2019</td><td><button type="submit" data-rid="5" class="btn btn-success view-report-button" data-toggle="modal" data-target="#viewReportModal">View</button></td></tr></tbody></table></div>`;
|
||||
|
||||
const updateSectionExpected = `<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 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>Description</p>
|
||||
<form class="form section-form" id="section-1-form" data-rid="2" data-sid="1">
|
||||
<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>
|
||||
<button type="submit" class="btn btn-primary save-section">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
const updateSectionCompleteNoRuleViolationsExpected = `<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 id="section-1-collapse" class="collapse">
|
||||
<div class="card-body">
|
||||
<p>Description</p>
|
||||
<form class="form section-form" id="section-1-form" data-rid="2" data-sid="1">
|
||||
<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>
|
||||
<button type="submit" class="btn btn-primary save-section">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
const updateSectionCompleteOneRuleViolationsExpected = `<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 id="section-1-collapse" class="collapse show">
|
||||
<div class="card-body">
|
||||
<p>Description</p>
|
||||
<form class="form section-form" id="section-1-form" data-rid="2" data-sid="1">
|
||||
<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>
|
||||
<button type="submit" class="btn btn-primary save-section">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="alert alert-danger">
|
||||
<div class="alert-heading">Rule Violations</div>
|
||||
<hr>
|
||||
<p><strong>Fare limit</strong><br>You did a bad thing</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
Loading…
Reference in a new issue