Skip to content

Commit b6e9479

Browse files
AmandaBirminghamwasade
AmandaBirmingham
authored and
wasade
committed
Issue524 (#528)
* Javascript tests--whee! * Fixes #525 by demonstrating functioning use of a 2.0 beforeEach module hook
1 parent da97b4b commit b6e9479

3 files changed

Lines changed: 356 additions & 32 deletions

File tree

‎labcontrol/gui/js_tests/addPlateModal_tests.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!--
2+
/**
3+
* Loosely based on The Emperor Project's javascript testing framework
4+
* by Yoshiki Vazquez Baeza
5+
*/
6+
-->
7+
8+
<!DOCTYPE html>
9+
<html>
10+
<head>
11+
<title>addPlateModal.js Unit Tests</title>
12+
<link rel="stylesheet" href="qunit/qunit-2.9.2.css" type="text/css"
13+
media="screen">
14+
15+
<!-- Testing framework requirements -->
16+
<script src="qunit/qunit-2.9.2.js"></script>
17+
18+
<!-- LabControl scripts generally require JQuery -->
19+
<script src="../static/vendor/js/jquery-3.2.1.min.js"></script>
20+
21+
<!-- Library under test requires DataTables -->
22+
<script src="../static/vendor/js/datatables.min.js"></script>
23+
24+
<!-- Library under test -->
25+
<script src="../static/js/addPlateModal.js"></script>
26+
27+
<script src="addPlateModal_tests.js"></script>
28+
</head>
29+
<body>
30+
<div id="qunit"></div>
31+
<div id="qunit-fixture">
32+
</div>
33+
</body>
34+
</html>

‎labcontrol/gui/js_tests/addPlateModal_tests.js‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
// Requires
2+
// QUnit
3+
4+
// Library under test:
5+
// addPlateModal.js
6+
7+
// Tests of function insertPlateModalDiv
8+
QUnit.module("insertPlateModalDiv", function (hooks) {
9+
// Verify correct behavior using default arguments
10+
QUnit.test("default arguments", function (assert) {
11+
//jquery selector strings
12+
let modalIdDivSelectorStr = "body div#addPlateModal";
13+
let tableIdSelectorStr = "body table#searchPlateTable";
14+
15+
// before running function under test, body has no div with
16+
// default modal id and no table with default table name
17+
assert.equal($(modalIdDivSelectorStr).length, 0);
18+
assert.equal($(tableIdSelectorStr).length, 0);
19+
20+
insertPlateModalDiv();
21+
22+
// after running function under test, table has these elements
23+
assert.equal($(modalIdDivSelectorStr).length, 1);
24+
assert.equal($(tableIdSelectorStr).length, 1);
25+
26+
// NOTE: unlike python unit tests, qunit does not abort the whole
27+
// test case when an assert fails. Therefore, the cleanup can
28+
// simply be done in-line at the end of the test.
29+
// Also note that this clean-up can't be done automatically as the dom
30+
// objects were added (intentionally) to body rather than to the
31+
// qunit-fixture div.
32+
$(modalIdDivSelectorStr).remove();
33+
});
34+
35+
// Verify correct behavior when arguments are explicitly specified
36+
QUnit.test("explicit arguments", function (assert) {
37+
//explicit names
38+
let modalId = 'myModal';
39+
let tableId = 'myPlateTable';
40+
let parentId = 'qunit-fixture';
41+
42+
//jquery selector strings
43+
let modalIdDivSelectorStr = "#" + parentId + " div#" + modalId;
44+
let tableIdSelectorStr = "#" + parentId + " table#" + tableId;
45+
46+
// before running function under test, qunit-fixture has no div
47+
// with explicit modal id and no table with explicit table name
48+
assert.equal($(modalIdDivSelectorStr).length, 0);
49+
assert.equal($(tableIdSelectorStr).length, 0);
50+
51+
insertPlateModalDiv(parentId, modalId, tableId);
52+
53+
// after running function under test, table has these elements
54+
assert.equal($(modalIdDivSelectorStr).length, 1);
55+
assert.equal($(tableIdSelectorStr).length, 1);
56+
});
57+
});
58+
59+
// Tests of functions that depend on the plate modal div having already
60+
// been inserted
61+
QUnit.module("modal-div-dependent tests", function (hooks) {
62+
hooks.beforeEach(function (assert) {
63+
insertPlateModalDiv("qunit-fixture");
64+
});
65+
66+
// No need for an afterEach hook because the modal div is inserted into
67+
// the qunit-fixture div, which QUnit automatically empties after each test
68+
69+
// Tests of the function populatePlateTable
70+
QUnit.module("populatePlateTable", function (hooks) {
71+
let qunitTbodySelectorStr = "#qunit-fixture tbody";
72+
73+
// Verify correct behavior when some realistic plates are input
74+
QUnit.test("happy path", function (assert) {
75+
let tbodyInnerHtml = '<tr role="row" class="odd"><td ' +
76+
'class="sorting_1">33</td><td>Test plate 4</td><' +
77+
'td>2019-05-09 21:21:15.386036</td>' +
78+
'<td>Identification of the Microbiomes for ' +
79+
'Cannabis Soils</td><td><button id="addAplate33" ' +
80+
'class="btn btn-success btn-circle-small">' +
81+
'<span class="glyphicon glyphicon-plus"></span>' +
82+
'</button></td></tr><tr role="row" class="even">' +
83+
'<td class="sorting_1">30</td><td>Test plate 3</td>' +
84+
'<td>2019-05-09 21:21:15.386036</td><td>Identification ' +
85+
'of the Microbiomes for Cannabis Soils</td><td>' +
86+
'<button id="addAplate30" class="btn btn-success ' +
87+
'btn-circle-small"><span class="glyphicon ' +
88+
'glyphicon-plus"></span></button></td></tr>' +
89+
'<tr role="row" class="odd">' +
90+
'<td class="sorting_1">27</td><td>Test plate 2</td><' +
91+
'td>2019-05-09 21:21:15.386036</td>' +
92+
'<td>Identification of the Microbiomes for Cannabis ' +
93+
'Soils<br>Some other study</td><td><button id="addAplate27" ' +
94+
'class="btn btn-success btn-circle-small">' +
95+
'<span class="glyphicon glyphicon-plus"></span></button>' +
96+
'</td></tr><tr role="row" class="even">' +
97+
'<td class="sorting_1">21</td><td>Test plate 1</td>' +
98+
'<td>2019-05-09 21:21:15.386036</td>' +
99+
'<td>Identification of the Microbiomes for Cannabis ' +
100+
'Soils</td><td><button id="addAplate21" ' +
101+
'class="btn btn-success btn-circle-small"><' +
102+
'span class="glyphicon glyphicon-plus"></span></button>' +
103+
'</td></tr>';
104+
let testPlateInfo = [
105+
[21, "Test plate 1",
106+
"2019-05-09 21:21:15.386036",
107+
["Identification of the Microbiomes for Cannabis Soils"]
108+
],
109+
[27, "Test plate 2", "2019-05-09 21:21:15.386036",
110+
["Identification of the Microbiomes for Cannabis Soils",
111+
"Some other study"]
112+
],
113+
[30, "Test plate 3", "2019-05-09 21:21:15.386036",
114+
["Identification of the Microbiomes for Cannabis Soils"]
115+
],
116+
[33, "Test plate 4", "2019-05-09 21:21:15.386036",
117+
["Identification of the Microbiomes for Cannabis Soils"]
118+
]
119+
];
120+
121+
// before running function under test, table has no tbody elements
122+
assert.equal($(qunitTbodySelectorStr).length, 0);
123+
124+
populatePlateTable(testPlateInfo, "#searchPlateTable",
125+
"addAplate");
126+
127+
// after running function under test, table has 1 tbody element
128+
// containing rows for 4 plates
129+
let tbodysList = $($(qunitTbodySelectorStr));
130+
assert.equal(tbodysList.length, 1);
131+
assert.equal(tbodysList[0].innerHTML, tbodyInnerHtml)
132+
});
133+
134+
// Verify correct behavior when no plates are input
135+
QUnit.test("no plates", function (assert) {
136+
let tbodyInnerHtml = '<tr class="odd"><td valign="top" ' +
137+
'colspan="5" class="dataTables_empty">No data available in ' +
138+
'table</td></tr>';
139+
140+
// before running function under test, table has no tbody elements
141+
assert.equal($(qunitTbodySelectorStr).length, 0);
142+
143+
populatePlateTable([], "#searchPlateTable", "addAplate");
144+
145+
// after running function under test, table has 1 tbody element
146+
// containing a row saying there are no records
147+
let tbodysList = $($(qunitTbodySelectorStr));
148+
assert.equal(tbodysList.length, 1);
149+
assert.equal(tbodysList[0].innerHTML, tbodyInnerHtml)
150+
});
151+
});
152+
});
153+
154+

0 commit comments

Comments
 (0)