');
@@ -85,7 +85,7 @@ describe("A Body", function () {
it("will remove a row from the DOM if a model is removed from its collection", function () {
var m1 = body.collection.at(1);
body.collection.remove(m1);
- var $trs = body.$el.children();
+ var $trs = $(body.el).children();
expect($trs.length).toBe(2);
expect($(body.el).html().toLowerCase().replace(/\s+
2
' +
@@ -95,7 +95,7 @@ describe("A Body", function () {
it("will remove a row from the DOM is removeRow is called directly with a model", function () {
var m1 = body.collection.at(1);
body.removeRow(m1);
- var $trs = body.$el.children();
+ var $trs = $(body.el).children();
expect($trs.length).toBe(2);
expect($(body.el).html().toLowerCase().replace(/\s+
2
' +
@@ -113,7 +113,7 @@ describe("A Body", function () {
}]);
body.collection.off("backgrid:refresh", handler);
expect(eventFired).toBe(true);
- var $trs = body.$el.children();
+ var $trs = $(body.el).children();
expect($trs.length).toBe(1);
expect($(body.el).html().toLowerCase().replace(/\s+
6
');
@@ -168,12 +168,12 @@ describe("A Body", function () {
it("when adding to a full page", function () {
col.add(new Backbone.Model({id: 4}));
- expect(body.$el.find("tr").length).toBe(2);
+ expect($(body.el).find("tr").length).toBe(2);
});
it("when removing from a full page", function () {
col.remove(col.get(1));
- expect(body.$el.find("tr").length).toBe(2);
+ expect($(body.el).find("tr").length).toBe(2);
});
});
@@ -189,11 +189,11 @@ describe("A Body", function () {
});
body.render();
- expect(body.$el.find("tr.empty").length).toBe(0);
+ expect($(body.el).find("tr.empty").length).toBe(0);
});
it("will not display the empty row if `options.emptyText` is not supplied", function () {
- expect(body.$el.find("tr.empty").length).toBe(0);
+ expect($(body.el).find("tr.empty").length).toBe(0);
col.reset();
body = new Backgrid.Body({
@@ -205,7 +205,7 @@ describe("A Body", function () {
});
body.render();
- expect(body.$el.find("tr.empty").length).toBe(0);
+ expect($(body.el).find("tr.empty").length).toBe(0);
});
it("will display the empty row if the collection is empty and `options.emptyText` is supplied", function () {
@@ -220,8 +220,8 @@ describe("A Body", function () {
});
body.render();
- expect(body.$el.find("tr.empty").length).toBe(1);
- expect(body.$el.find("tr.empty > td").attr("colspan")).toBe("1");
+ expect($(body.el).find("tr.empty").length).toBe(1);
+ expect($(body.el).find("tr.empty > td").attr("colspan")).toBe("1");
});
it("will clear the empty row if a new model is added to an empty collection", function () {
@@ -235,16 +235,16 @@ describe("A Body", function () {
collection: col
});
body.render();
- expect(body.$el.find("tr.empty").length).toBe(1);
+ expect($(body.el).find("tr.empty").length).toBe(1);
col.add({id: 4});
- expect(body.$el.find("tr.empty").length).toBe(0);
+ expect($(body.el).find("tr.empty").length).toBe(0);
col.reset();
- expect(body.$el.find("tr.empty").length).toBe(1);
+ expect($(body.el).find("tr.empty").length).toBe(1);
body.insertRow({id: 5});
- expect(body.$el.find("tr.empty").length).toBe(0);
+ expect($(body.el).find("tr.empty").length).toBe(0);
});
it("#sort will throw a RangeError is direction is not ascending, descending or null", function () {
@@ -453,8 +453,8 @@ describe("A Body", function () {
// right
people.trigger("backgrid:edited", people.at(0), columns.at(0), new Backgrid.Command({keyCode: 9}));
- expect(body.rows[0].cells[0].$el.hasClass("editor")).toBe(false);
- expect(body.rows[1].cells[0].$el.hasClass("editor")).toBe(true);
+ expect($(body.rows[0].cells[0].el).hasClass("editor")).toBe(false);
+ expect($(body.rows[1].cells[0].el).hasClass("editor")).toBe(true);
expect(callOrders[0]).toBe("exit");
expect(callOrders[1]).toBe("enter");
@@ -463,29 +463,29 @@ describe("A Body", function () {
// left
people.trigger("backgrid:edited", people.at(1), columns.at(0), new Backgrid.Command({keyCode: 9, shiftKey: true}));
- expect(body.rows[0].cells[0].$el.hasClass("editor")).toBe(true);
- expect(body.rows[1].cells[0].$el.hasClass("editor")).toBe(false);
+ expect($(body.rows[0].cells[0].el).hasClass("editor")).toBe(true);
+ expect($(body.rows[1].cells[0].el).hasClass("editor")).toBe(false);
// down
people.trigger("backgrid:edited", people.at(0), columns.at(0), new Backgrid.Command({keyCode: 40}));
- expect(body.rows[0].cells[0].$el.hasClass("editor")).toBe(false);
- expect(body.rows[1].cells[0].$el.hasClass("editor")).toBe(true);
+ expect($(body.rows[0].cells[0].el).hasClass("editor")).toBe(false);
+ expect($(body.rows[1].cells[0].el).hasClass("editor")).toBe(true);
// up
people.trigger("backgrid:edited", people.at(1), columns.at(0), new Backgrid.Command({keyCode: 38}));
- expect(body.rows[0].cells[0].$el.hasClass("editor")).toBe(true);
- expect(body.rows[1].cells[0].$el.hasClass("editor")).toBe(false);
+ expect($(body.rows[0].cells[0].el).hasClass("editor")).toBe(true);
+ expect($(body.rows[1].cells[0].el).hasClass("editor")).toBe(false);
// enter
people.trigger("backgrid:edited", people.at(0), columns.at(0), new Backgrid.Command({keyCode: 13}));
- expect(body.rows[0].cells[0].$el.hasClass("editor")).toBe(false);
- expect(body.rows[1].cells[0].$el.hasClass("editor")).toBe(false);
+ expect($(body.rows[0].cells[0].el).hasClass("editor")).toBe(false);
+ expect($(body.rows[1].cells[0].el).hasClass("editor")).toBe(false);
// esc
body.rows[1].cells[0].enterEditMode();
people.trigger("backgrid:edited", people.at(1), columns.at(0), new Backgrid.Command({keyCode: 27}));
- expect(body.rows[0].cells[0].$el.hasClass("editor")).toBe(false);
- expect(body.rows[1].cells[0].$el.hasClass("editor")).toBe(false);
+ expect($(body.rows[0].cells[0].el).hasClass("editor")).toBe(false);
+ expect($(body.rows[1].cells[0].el).hasClass("editor")).toBe(false);
});
});
diff --git a/test/cell.js b/test/cell.js
index ac696d67..2cd1e4f1 100644
--- a/test/cell.js
+++ b/test/cell.js
@@ -5,6 +5,16 @@
Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
Licensed under the MIT license.
*/
+
+function emit(element, event) {
+ if (element.dispatchEvent) {
+ element.dispatchEvent(event);
+ }
+ else if (element.fireEvent) {
+ element.fireEvent("on" + event.type, event);
+ }
+}
+
describe("A CellEditor", function () {
it("calls postRender when model triggers 'backgrid:editing'", function () {
@@ -89,32 +99,35 @@ describe("An InputCellEditor", function () {
it("renders a text input box with a placeholder and the model value formatted for display", function () {
editor.render();
expect(editor.el).toBeAnInstanceOf(HTMLInputElement);
- expect(editor.$el.attr("placeholder")).toBe("put your text here");
- expect(editor.$el.val()).toBe("title");
+ expect($(editor.el).attr("placeholder")).toBe("put your text here");
+ expect($(editor.el).val()).toBe("title");
});
it("saves a formatted value in the input box to the model and triggers 'backgrid:edited' from the model when tab is pressed", function () {
editor.render();
- editor.$el.val("another title");
- var tab = $.Event("keydown", { keyCode: 9 });
- editor.$el.trigger(tab);
+ $(editor.el).val("another title");
+
+ document.body.appendChild(editor.el);
+ emit(editor.el, SyntheticEvent("keydown", {keyCode: 9, bubbles: true, cancelable: true}));
expect(editor.model.get(editor.column.get("name"))).toBe("another title");
expect(backgridEditedTriggerCount).toBe(1);
expect(backgridEditedTriggerArgs[0]).toEqual(editor.model);
expect(backgridEditedTriggerArgs[1]).toEqual(editor.column);
expect(backgridEditedTriggerArgs[2].moveRight()).toBe(true);
+ document.body.removeChild(editor.el);
});
it("saves a formatted value in the input box to the model and triggers 'backgrid:edited' from the model when enter is pressed", function () {
editor.render();
- editor.$el.val("another title");
- var enter = $.Event("keydown", { keyCode: 13 });
- editor.$el.trigger(enter);
+ $(editor.el).val("another title");
+ document.body.appendChild(editor.el);
+ emit(editor.el, SyntheticEvent("keydown", {keyCode: 13, bubbles: true, cancelable: true}));
expect(editor.model.get(editor.column.get("name"))).toBe("another title");
expect(backgridEditedTriggerCount).toBe(1);
expect(backgridEditedTriggerArgs[0]).toEqual(editor.model);
expect(backgridEditedTriggerArgs[1]).toEqual(editor.column);
expect(backgridEditedTriggerArgs[2].save()).toBe(true);
+ document.body.removeChild(editor.el);
});
it("triggers 'backgrid:error' from the model when trying to save an invalid value", function () {
@@ -125,55 +138,63 @@ describe("An InputCellEditor", function () {
toRaw: jasmine.createSpy("toRaw").andReturn(undefined)
};
editor.render();
- editor.$el.val("invalid value");
- var enter = $.Event("keydown", { keyCode: 13 });
- editor.$el.trigger(enter);
+ $(editor.el).val("invalid value");
+ document.body.appendChild(editor.el);
+ emit(editor.el, SyntheticEvent("keydown", {keyCode: 13, bubbles: true, cancelable: true}));
expect(editor.formatter.toRaw.calls.length).toBe(1);
expect(editor.formatter.toRaw).toHaveBeenCalledWith("invalid value", editor.model);
expect(backgridErrorTriggerCount).toBe(1);
expect(backgridErrorTriggerArgs[0]).toEqual(editor.model);
expect(backgridErrorTriggerArgs[1]).toEqual(editor.column);
expect(backgridErrorTriggerArgs[2]).toEqual("invalid value");
+ document.body.removeChild(editor.el);
editor.formatter.toRaw.reset();
- editor.$el.blur();
+ document.body.appendChild(editor.el);
+ emit(editor.el, SyntheticEvent("blur"));
expect(backgridErrorTriggerCount).toBe(2);
expect(backgridErrorTriggerArgs[0]).toEqual(editor.model);
expect(backgridErrorTriggerArgs[1]).toEqual(editor.column);
expect(backgridErrorTriggerArgs[2]).toEqual("invalid value");
+ document.body.removeChild(editor.el);
});
it("discards changes and triggers 'backgrid:edited' from the model when esc is pressed'", function () {
editor.render();
- editor.$el.val("new value");
- var esc = $.Event("keydown", { keyCode: 27 });
- editor.$el.trigger(esc);
+ $(editor.el).val("new value");
+ document.body.appendChild(editor.el);
+ emit(editor.el, SyntheticEvent("keydown", {keyCode: 27, bubbles: true, cancelable: true}));
expect(backgridEditedTriggerCount).toBe(1);
expect(backgridEditedTriggerArgs[0]).toEqual(editor.model);
expect(backgridEditedTriggerArgs[1]).toEqual(editor.column);
expect(backgridEditedTriggerArgs[2].cancel()).toBe(true);
expect(editor.model.get(editor.column.get("name"))).toBe("title");
+ document.body.removeChild(editor.el);
});
it("triggers 'backgrid:edited' from the model when value hasn't changed and focus is lost", function () {
editor.render();
- editor.$el.blur();
+ document.body.appendChild(editor.el);
+ emit(editor.el, SyntheticEvent("blur"));
expect(backgridEditedTriggerCount).toBe(1);
expect(backgridEditedTriggerArgs[0]).toEqual(editor.model);
expect(backgridEditedTriggerArgs[1]).toEqual(editor.column);
expect(backgridEditedTriggerArgs[2].passThru()).toBe(true);
expect(editor.model.get(editor.column.get("name"))).toBe("title");
+ document.body.removeChild(editor.el);
});
it("saves the value if the value is valid when going out of focus", function () {
editor.render();
- editor.$el.val("another title");
- editor.$el.blur();
+ $(editor.el).val("another title");
+ document.body.appendChild(editor.el);
+ emit(editor.el, SyntheticEvent("blur"));
expect(backgridEditedTriggerCount).toBe(1);
expect(backgridEditedTriggerArgs[0]).toEqual(editor.model);
expect(backgridEditedTriggerArgs[1]).toEqual(editor.column);
expect(backgridEditedTriggerArgs[2].passThru()).toBe(true);
expect(editor.model.get(editor.column.get("name"))).toBe("another title");
+ document.body.removeChild(editor.el);
});
});
@@ -236,18 +257,18 @@ describe("A Cell", function () {
column: column
});
- expect(cell.$el.hasClass("editable")).toBe(true);
- expect(cell.$el.hasClass("sortable")).toBe(true);
- expect(cell.$el.hasClass("renderable")).toBe(true);
+ expect($(cell.el).hasClass("editable")).toBe(true);
+ expect($(cell.el).hasClass("sortable")).toBe(true);
+ expect($(cell.el).hasClass("renderable")).toBe(true);
cell.column.set("editable", false);
- expect(cell.$el.hasClass("editable")).toBe(false);
+ expect($(cell.el).hasClass("editable")).toBe(false);
cell.column.set("sortable", false);
- expect(cell.$el.hasClass("sortable")).toBe(false);
+ expect($(cell.el).hasClass("sortable")).toBe(false);
cell.column.set("renderable", false);
- expect(cell.$el.hasClass("renderable")).toBe(false);
+ expect($(cell.el).hasClass("renderable")).toBe(false);
var TrueCol = Backgrid.Column.extend({
mySortable: function () { return true; },
@@ -274,9 +295,9 @@ describe("A Cell", function () {
column: column
});
- expect(cell.$el.hasClass("editable")).toBe(true);
- expect(cell.$el.hasClass("sortable")).toBe(true);
- expect(cell.$el.hasClass("renderable")).toBe(true);
+ expect($(cell.el).hasClass("editable")).toBe(true);
+ expect($(cell.el).hasClass("sortable")).toBe(true);
+ expect($(cell.el).hasClass("renderable")).toBe(true);
column = new FalseCol({
name: "title",
@@ -291,9 +312,9 @@ describe("A Cell", function () {
column: column
});
- expect(cell.$el.hasClass("editable")).toBe(false);
- expect(cell.$el.hasClass("sortable")).toBe(false);
- expect(cell.$el.hasClass("renderable")).toBe(false);
+ expect($(cell.el).hasClass("editable")).toBe(false);
+ expect($(cell.el).hasClass("sortable")).toBe(false);
+ expect($(cell.el).hasClass("renderable")).toBe(false);
column = new Backgrid.Column({
name: "title",
@@ -308,35 +329,35 @@ describe("A Cell", function () {
column: column
});
- expect(cell.$el.hasClass("editable")).toBe(true);
- expect(cell.$el.hasClass("sortable")).toBe(true);
- expect(cell.$el.hasClass("renderable")).toBe(true);
+ expect($(cell.el).hasClass("editable")).toBe(true);
+ expect($(cell.el).hasClass("sortable")).toBe(true);
+ expect($(cell.el).hasClass("renderable")).toBe(true);
});
it("renders a td with the model value formatted for display", function () {
cell.render();
- expect(cell.$el.text()).toBe("title");
+ expect($(cell.el).text()).toBe("title");
});
it("goes into edit mode on click", function () {
cell.render();
- cell.$el.click();
- expect(cell.$el.hasClass("editor")).toBe(true);
+ emit(cell.el, SyntheticEvent("click", {bubbles: true}));
+ expect($(cell.el).hasClass("editor")).toBe(true);
});
it("goes into edit mode when `enterEditMode` is called", function () {
cell.render();
cell.enterEditMode();
- expect(cell.$el.hasClass("editor")).toBe(true);
+ expect($(cell.el).hasClass("editor")).toBe(true);
});
it("goes back into display mode when `exitEditMode` is called", function () {
cell.render();
- cell.$el.click();
+ emit(cell.el, SyntheticEvent("click", {bubbles: true}));
cell.exitEditMode();
- expect(cell.$el.hasClass("editor")).toBe(false);
- expect(cell.$el.text()).toBe("title");
+ expect($(cell.el).hasClass("editor")).toBe(false);
+ expect($(cell.el).text()).toBe("title");
});
it("renders error when the editor triggers 'backgrid:error'", function () {
@@ -347,21 +368,20 @@ describe("A Cell", function () {
};
cell.render();
- cell.$el.click();
+ emit(cell.el, SyntheticEvent("click", {bubbles: true}));
var editor = cell.currentEditor;
- editor.$el.val(undefined);
+ $(editor.el).val(undefined);
- var enter = $.Event("keydown", { keyCode: 13 });
- editor.$el.trigger(enter);
+ emit(editor.el, SyntheticEvent("keydown", {keyCode: 13, bubbles: true, cancelable: true}));
- expect(cell.$el.hasClass("error")).toBe(true);
- expect(cell.$el.hasClass("editor")).toBe(true);
+ expect($(cell.el).hasClass("error")).toBe(true);
+ expect($(cell.el).hasClass("editor")).toBe(true);
});
it("removes the editor correctly when removing the cell", function() {
cell.render();
- cell.$el.click();
+ emit(cell.el, SyntheticEvent("click", {bubbles: true}));
var editor = cell.currentEditor;
@@ -376,20 +396,20 @@ describe("A Cell", function () {
it("refreshes during display mode", function () {
cell.render();
book.set("title", "another title");
- expect(cell.$el.text()).toBe("another title");
+ expect($(cell.el).text()).toBe("another title");
});
it("does not refresh during display mode if the change was silenced", function () {
cell.render();
book.set("title", "another title", {silent: true});
- expect(cell.$el.text()).toBe("title");
+ expect($(cell.el).text()).toBe("title");
});
it("does not refresh during edit mode", function () {
cell.render();
- cell.$el.click();
+ emit(cell.el, SyntheticEvent("click", {bubbles: true}));
book.set("title", "another title");
- expect(cell.$el.find("input[type=text]").val(), "title");
+ expect($(cell.el).find("input[type=text]").val(), "title");
});
});
@@ -413,7 +433,7 @@ describe("A StringCell", function () {
});
cell.render();
- expect(cell.$el.hasClass("string-cell")).toBe(true);
+ expect($(cell.el).hasClass("string-cell")).toBe(true);
});
});
@@ -442,18 +462,18 @@ describe("A UriCell", function () {
it("applies a uri-cell class to the cell", function () {
cell.render();
- expect(cell.$el.hasClass("uri-cell")).toBe(true);
+ expect($(cell.el).hasClass("uri-cell")).toBe(true);
});
it("renders the model value in an anchor", function () {
cell.render();
- expect(cell.$el.find("a").attr("href")).toBe("http://www.example.com");
- expect(cell.$el.find("a").text()).toBe("http://www.example.com");
+ expect($(cell.el).find("a").attr("href")).toBe("http://www.example.com");
+ expect($(cell.el).find("a").text()).toBe("http://www.example.com");
});
it("uses the supplied target or _blank", function () {
cell.render();
- expect(cell.$el.find("a").attr("target")).toBe("_blank");
+ expect($(cell.el).find("a").attr("target")).toBe("_blank");
cell = new Backgrid.UriCell({
model: model,
@@ -461,12 +481,12 @@ describe("A UriCell", function () {
target: "_self"
});
cell.render();
- expect(cell.$el.find("a").attr("target")).toBe("_self");
+ expect($(cell.el).find("a").attr("target")).toBe("_self");
});
it("uses the supplied title or the raw value", function () {
cell.render();
- expect(cell.$el.find("a").attr("title")).toBe("http://www.example.com");
+ expect($(cell.el).find("a").attr("title")).toBe("http://www.example.com");
cell = new Backgrid.UriCell({
model: model,
@@ -474,7 +494,7 @@ describe("A UriCell", function () {
title: "http://backgridjs.com"
});
cell.render();
- expect(cell.$el.find("a").attr("title")).toBe("http://backgridjs.com");
+ expect($(cell.el).find("a").attr("title")).toBe("http://backgridjs.com");
});
});
@@ -502,13 +522,13 @@ describe("An EmailCell", function () {
});
it("applies a email-cell class to the cell", function () {
- expect(cell.render().$el.hasClass("email-cell")).toBe(true);
+ expect($(cell.render().el).hasClass("email-cell")).toBe(true);
});
it("renders the model value in a mailto: anchor", function () {
cell.render();
- expect(cell.$el.find("a").attr("href")).toBe("mailto:email@host");
- expect(cell.$el.find("a").text()).toBe("email@host");
+ expect($(cell.el).find("a").attr("href")).toBe("mailto:email@host");
+ expect($(cell.el).find("a").text()).toBe("email@host");
});
});
@@ -551,7 +571,7 @@ describe("A NumberCell", function () {
}
});
cell.render();
- expect(cell.$el.hasClass("number-cell")).toBe(true);
+ expect($(cell.el).hasClass("number-cell")).toBe(true);
});
});
@@ -574,13 +594,13 @@ describe("An IntegerCell", function () {
it("applies an integer-cell class to the cell", function () {
cell.render();
- expect(cell.$el.hasClass("integer-cell")).toBe(true);
+ expect($(cell.el).hasClass("integer-cell")).toBe(true);
});
it("will render a number with no trailing decimals numbers", function () {
cell.model.set("age", 1.1);
cell.render();
- expect(cell.$el.text()).toBe("1");
+ expect($(cell.el).text()).toBe("1");
});
it("can be extended and it's defaults overidden", function () {
@@ -600,7 +620,7 @@ describe("An IntegerCell", function () {
});
cell.render();
- expect(cell.$el.text()).toBe("1000");
+ expect($(cell.el).text()).toBe("1000");
});
});
@@ -623,12 +643,12 @@ describe("A PercentCell", function () {
it("applies an percent-cell class to the cell", function () {
cell.render();
- expect(cell.$el.hasClass("percent-cell")).toBe(true);
+ expect($(cell.el).hasClass("percent-cell")).toBe(true);
});
it("will render a percentage string", function () {
cell.render();
- expect(cell.$el.text()).toBe("99.80%");
+ expect($(cell.el).text()).toBe("99.80%");
});
it("can be extended and it's defaults overidden", function () {
@@ -650,7 +670,7 @@ describe("A PercentCell", function () {
});
cell.render();
- expect(cell.$el.text()).toBe("1099.00pct");
+ expect($(cell.el).text()).toBe("1099.00pct");
});
});
@@ -701,7 +721,7 @@ describe("A DatetimeCell", function () {
it("applies a datetime-cell class to the cell", function () {
cell.render();
- expect(cell.$el.hasClass("datetime-cell")).toBe(true);
+ expect($(cell.el).hasClass("datetime-cell")).toBe(true);
});
it("renders a placeholder for different datetime formats for the editor according to configuration", function () {
@@ -752,7 +772,7 @@ describe("A DatetimeCell", function () {
model: new Backbone.Model({ datetime: null }),
column: column
});
- expect(cell.$el.html()).toBe('');
+ expect($(cell.el).html()).toBe('');
});
});
@@ -775,13 +795,13 @@ describe("A DateCell", function () {
it("applies a date-cell class to the cell", function () {
cell.render();
- expect(cell.$el.hasClass("date-cell")).toBe(true);
+ expect($(cell.el).hasClass("date-cell")).toBe(true);
});
it("will render a date with no time", function () {
cell.model.set("date", "2000-01-01T00:00:00.000Z");
cell.render();
- expect(cell.$el.text()).toBe("2000-01-01");
+ expect($(cell.el).text()).toBe("2000-01-01");
});
});
@@ -804,13 +824,13 @@ describe("A TimeCell", function () {
it("applies a time-cell class to the cell", function () {
cell.render();
- expect(cell.$el.hasClass("time-cell")).toBe(true);
+ expect($(cell.el).hasClass("time-cell")).toBe(true);
});
it("will render a time with no date", function () {
cell.model.set("date", "2000-01-01T00:00:00.000Z");
cell.render();
- expect(cell.$el.text()).toBe("00:00:00");
+ expect($(cell.el).text()).toBe("00:00:00");
});
});
@@ -836,47 +856,47 @@ describe("A BooleanCell", function () {
});
it("applies a boolean-cell class to the cell", function () {
- expect(cell.render().$el.hasClass("boolean-cell")).toBe(true);
+ expect($(cell.render().el).hasClass("boolean-cell")).toBe(true);
});
it("has a display mode that renders a checkbox with the checkbox checked if the model value is true, not checked otherwise", function () {
cell.render();
- expect(cell.$el.find(":checkbox").prop("checked")).toBe(true);
+ expect($(cell.el).find(":checkbox").prop("checked")).toBe(true);
model.set("ate", false);
cell.render();
- expect(cell.$el.find(":checkbox").prop("checked")).toBe(false);
+ expect($(cell.el).find(":checkbox").prop("checked")).toBe(false);
});
it("renders a disabled checkbox if not editable", function () {
cell.column.set("editable", false);
cell.render();
- expect(cell.$el.find(":checkbox").prop("disabled")).toBe(true);
+ expect($(cell.el).find(":checkbox").prop("disabled")).toBe(true);
cell.column.set("editable", true);
cell.render();
- expect(cell.$el.find(":checkbox").prop("disabled")).toBe(false);
+ expect($(cell.el).find(":checkbox").prop("disabled")).toBe(false);
});
it("goes into edit mode after clicking the cell with the checkbox intact", function () {
cell.render();
- cell.$el.click();
- expect(cell.$el.hasClass("editor")).toBe(true);
- expect(cell.$el.find(":checkbox").length).toBe(1);
+ emit(cell.el, SyntheticEvent("click", {bubbles: true}));
+ expect($(cell.el).hasClass("editor")).toBe(true);
+ expect($(cell.el).find(":checkbox").length).toBe(1);
});
it("goes into edit mode after calling `enterEditMode` with the checkbox intact", function () {
cell.render();
cell.enterEditMode();
- expect(cell.$el.hasClass("editor")).toBe(true);
- expect(cell.$el.find(":checkbox").length).toBe(1);
+ expect($(cell.el).hasClass("editor")).toBe(true);
+ expect($(cell.el).find(":checkbox").length).toBe(1);
});
it("goes back to display mode after calling `exitEditMode`", function () {
cell.render();
cell.enterEditMode();
cell.exitEditMode();
- expect(cell.$el.hasClass("editor")).toBe(false);
- expect(cell.$el.find(":checkbox").prop("checked")).toBe(true);
+ expect($(cell.el).hasClass("editor")).toBe(false);
+ expect($(cell.el).find(":checkbox").prop("checked")).toBe(true);
});
it("triggers `backgrid:edited` when the checkbox goes out of focus", function () {
@@ -888,25 +908,26 @@ describe("A BooleanCell", function () {
});
cell.render();
- cell.$el.click();
- cell.$el.find(":checkbox").blur();
+ emit(cell.el, SyntheticEvent("click", {bubbles: true}));
+ emit($(cell.el).find(":checkbox")[0], SyntheticEvent("blur"));
expect(backgridEditedTriggerCount).toBe(1);
expect(backgridEditedTriggerArgs[0]).toBe(cell.model);
expect(backgridEditedTriggerArgs[1]).toBe(cell.column);
expect(backgridEditedTriggerArgs[2].passThru()).toBe(true);
- expect(cell.$el.find(":checkbox").prop("checked")).toBe(true);
+ expect($(cell.el).find(":checkbox").prop("checked")).toBe(true);
cell.render();
- cell.$el.click();
- cell.currentEditor.$el.mousedown();
- cell.$el.find(":checkbox").blur();
+ emit(cell.el, SyntheticEvent("click", {bubbles: true}));
+ $(cell.currentEditor.el).mousedown();
+ $(cell.el).find(":checkbox").blur();
expect(backgridEditedTriggerCount).toBe(1);
});
it("saves a boolean value to the model when the checkbox is toggled", function () {
cell.render();
cell.enterEditMode();
- cell.$el.find(":checkbox").prop("checked", false).change();
+ $(cell.el).find(":checkbox")[0].checked = false;
+ emit($(cell.el).find(":checkbox")[0], SyntheticEvent("change"));
expect(cell.model.get(cell.column.get("name"))).toBe(false);
});
@@ -914,25 +935,25 @@ describe("A BooleanCell", function () {
it("refreshes during display mode", function () {
cell.render();
model.set("ate", false);
- expect(cell.$el.find(":checkbox").prop("checked")).toBe(false);
+ expect($(cell.el).find(":checkbox").prop("checked")).toBe(false);
model.set("ate", true);
- expect(cell.$el.find(":checkbox").prop("checked")).toBe(true);
+ expect($(cell.el).find(":checkbox").prop("checked")).toBe(true);
});
it("does not refresh during display mode if the change was silenced", function () {
cell.render();
model.set("ate", false, {silent: true});
- expect(cell.$el.find(":checkbox").prop("checked")).toBe(true);
+ expect($(cell.el).find(":checkbox").prop("checked")).toBe(true);
model.set("ate", false);
model.set("ate", true, {silent: true});
- expect(cell.$el.find(":checkbox").prop("checked")).toBe(true);
+ expect($(cell.el).find(":checkbox").prop("checked")).toBe(true);
});
it("does not refresh during edit mode", function () {
cell.render();
- cell.$el.click();
+ emit(cell.el, SyntheticEvent("click", {bubbles: true}));
model.set("ate", false);
- expect(cell.$el.find(":checkbox").prop("checked")).toBe(true);
+ expect($(cell.el).find(":checkbox").prop("checked")).toBe(true);
});
});
@@ -966,7 +987,7 @@ describe("A SelectCellEditor", function () {
}];
});
- it("renders a select box using a list if nvps", function () {
+ it("renders a select box using a list of nvps", function () {
// single selection
var editor = new Backgrid.SelectCellEditor({
@@ -983,7 +1004,7 @@ describe("A SelectCellEditor", function () {
editor.setOptionValues(optionValues);
editor.render();
expect(editor.el.tagName).toBe("SELECT");
- var $options = editor.$el.children();
+ var $options = $(editor.el).children();
expect($options.length).toBe(2);
expect($options.eq(0).val()).toBe("1");
expect($options.eq(0).prop("selected")).toBe(false);
@@ -1009,7 +1030,7 @@ describe("A SelectCellEditor", function () {
editor.render();
expect(editor.el.tagName).toBe("SELECT");
expect(editor.el.multiple).toBe(true);
- var $options = editor.$el.children();
+ var $options = $(editor.el).children();
expect($options.length).toBe(2);
expect($options.eq(0).val()).toBe("1");
expect($options.eq(0).prop("selected")).toBe(true);
@@ -1038,7 +1059,7 @@ describe("A SelectCellEditor", function () {
});
editor.render();
expect(editor.el.tagName).toBe("SELECT");
- var $options = editor.$el.children();
+ var $options = $(editor.el).children();
expect($options.length).toBe(2);
expect($options.eq(0).val()).toBe("1");
expect($options.eq(0).prop("selected")).toBe(false);
@@ -1066,7 +1087,7 @@ describe("A SelectCellEditor", function () {
editor.render();
expect(editor.el.tagName).toBe("SELECT");
expect(editor.el.multiple).toBe(true);
- var $options = editor.$el.children();
+ var $options = $(editor.el).children();
expect($options.length).toBe(2);
expect($options.eq(0).val()).toBe("1");
expect($options.eq(0).prop("selected")).toBe(true);
@@ -1092,7 +1113,7 @@ describe("A SelectCellEditor", function () {
editor.setOptionValues(optionGroupValues);
editor.render();
- var $optionGroups = editor.$el.children();
+ var $optionGroups = $(editor.el).children();
expect($optionGroups.length).toBe(2);
var $group1 = $optionGroups.eq(0);
@@ -1138,7 +1159,7 @@ describe("A SelectCellEditor", function () {
editor.setMultiple(true);
editor.setOptionValues(optionGroupValues);
editor.render();
- var $optionGroups = editor.$el.children();
+ var $optionGroups = $(editor.el).children();
expect($optionGroups.length).toBe(2);
var $group1 = $optionGroups.eq(0);
@@ -1188,7 +1209,7 @@ describe("A SelectCellEditor", function () {
return optionGroupValues;
});
editor.render();
- var $optionGroups = editor.$el.children();
+ var $optionGroups = $(editor.el).children();
expect($optionGroups.length).toBe(2);
var $group1 = $optionGroups.eq(0);
@@ -1236,7 +1257,7 @@ describe("A SelectCellEditor", function () {
return optionGroupValues;
});
editor.render();
- var $optionGroups = editor.$el.children();
+ var $optionGroups = $(editor.el).children();
expect($optionGroups.length).toBe(2);
var $group1 = $optionGroups.eq(0);
@@ -1268,6 +1289,8 @@ describe("A SelectCellEditor", function () {
expect($group2Options.eq(2).text()).toBe("Maize");
});
+ // NOTE: change events are fired on most browsers on blur, the rest are when
+ // the value has been changed
it("saves the value to the model on change", function () {
// single selection
@@ -1287,7 +1310,7 @@ describe("A SelectCellEditor", function () {
spyOn(editor.formatter, "toRaw").andCallThrough();
- editor.$el.val(1).change();
+ emit($(editor.el).val(1)[0], SyntheticEvent("blur"));
expect(editor.formatter.toRaw).toHaveBeenCalledWith("1", editor.model);
expect(editor.formatter.toRaw.calls.length).toBe(1);
expect(editor.model.get(editor.column.get("name"))).toBe("1");
@@ -1310,12 +1333,12 @@ describe("A SelectCellEditor", function () {
spyOn(editor.formatter, "toRaw").andCallThrough();
- editor.$el.val([1, 2]).change();
+ emit($(editor.el).val([1, 2])[0], SyntheticEvent("blur"));
expect(editor.formatter.toRaw).toHaveBeenCalledWith(["1", "2"], editor.model);
expect(editor.formatter.toRaw.calls.length).toBe(1);
expect(editor.model.get(editor.column.get("name"))).toEqual(["1", "2"]);
- editor.$el.val(null).change();
+ emit($(editor.el).val(null)[0], SyntheticEvent("blur"));
expect(editor.formatter.toRaw).toHaveBeenCalledWith(null, editor.model);
expect(editor.formatter.toRaw.calls.length).toBe(2);
expect(editor.model.get(editor.column.get("name"))).toBe(null);
@@ -1333,7 +1356,7 @@ describe("A SelectCellEditor", function () {
editor.setOptionValues([["Boy", "1"]]);
editor.render();
- editor.$el.blur();
+ emit(editor.el, SyntheticEvent("blur"));
expect(editor.model.get(editor.column.get("name"))).toBe("1");
});
@@ -1350,10 +1373,10 @@ describe("A SelectCellEditor", function () {
return [["Male", "M"], ["Female", "F"]];
});
editor.render();
- expect(editor.$el.find("option").eq(0).val()).toBe("M");
- expect(editor.$el.find("option").eq(0).text()).toBe("Male");
- expect(editor.$el.find("option").eq(1).val()).toBe("F");
- expect(editor.$el.find("option").eq(1).text()).toBe("Female");
+ expect($(editor.el).find("option").eq(0).val()).toBe("M");
+ expect($(editor.el).find("option").eq(0).text()).toBe("Male");
+ expect($(editor.el).find("option").eq(1).val()).toBe("F");
+ expect($(editor.el).find("option").eq(1).text()).toBe("Female");
expect(editor.el.tagName).toBe("SELECT");
});
@@ -1401,7 +1424,7 @@ describe("A SelectCell", function () {
cell.render();
- expect(cell.$el.hasClass("select-cell")).toBe(true);
+ expect($(cell.el).hasClass("select-cell")).toBe(true);
});
it("renders the label of the selected option in display mode", function () {
@@ -1420,7 +1443,7 @@ describe("A SelectCell", function () {
});
cell.render();
- expect(cell.$el.text()).toBe("Girl");
+ expect($(cell.el).text()).toBe("Girl");
var cell = new (Backgrid.SelectCell.extend({
optionValues: optionGroupValues
@@ -1435,7 +1458,7 @@ describe("A SelectCell", function () {
});
cell.render();
- expect(cell.$el.text()).toBe("Banana");
+ expect($(cell.el).text()).toBe("Banana");
// multiple selection
var cell = new (Backgrid.SelectCell.extend({
@@ -1451,7 +1474,7 @@ describe("A SelectCell", function () {
});
cell.render();
- expect(cell.$el.text()).toBe("Boy, Girl");
+ expect($(cell.el).text()).toBe("Boy, Girl");
var cell = new (Backgrid.SelectCell.extend({
optionValues: optionGroupValues
@@ -1466,7 +1489,7 @@ describe("A SelectCell", function () {
});
cell.render();
- expect(cell.$el.text()).toBe("Apple, Banana");
+ expect($(cell.el).text()).toBe("Apple, Banana");
});
it("can accept optionValues that is a function", function () {
@@ -1482,7 +1505,7 @@ describe("A SelectCell", function () {
model: new Backbone.Model({"gender": "m"})
});
cell.render();
- expect(cell.$el.text()).toBe("Male");
+ expect($(cell.el).text()).toBe("Male");
});
describe("when the model value has changed", function () {
@@ -1514,21 +1537,21 @@ describe("A SelectCell", function () {
it("refreshes during display mode", function () {
cell.render();
model.set("gender", 1);
- expect(cell.$el.text()).toBe("Boy");
+ expect($(cell.el).text()).toBe("Boy");
});
it("does not refresh during display mode if the change was silenced", function () {
cell.render();
model.set("gender", 1, {silent: true});
- expect(cell.$el.text()).toBe("Girl");
+ expect($(cell.el).text()).toBe("Girl");
});
it("does not refresh during edit mode", function () {
cell.render();
- cell.$el.click();
+ emit(cell.el, SyntheticEvent("click", {bubbles: true}));
model.set("gender", 1);
- expect(cell.$el.find("option[selected]").val()).toBe("2");
- expect(cell.$el.find("option[selected]").text()).toBe("Girl");
+ expect($(cell.el).find("option[selected]").val()).toBe("2");
+ expect($(cell.el).find("option[selected]").text()).toBe("Girl");
});
});
diff --git a/test/header.js b/test/header.js
index cf035ce7..9cc02bbe 100644
--- a/test/header.js
+++ b/test/header.js
@@ -5,6 +5,16 @@
Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
Licensed under the MIT license.
*/
+
+function emit(element, event) {
+ if (element.dispatchEvent) {
+ element.dispatchEvent(event);
+ }
+ else if (element.fireEvent) {
+ element.fireEvent("on" + event.type, event);
+ }
+}
+
describe("A HeaderCell", function () {
var col;
@@ -21,18 +31,23 @@ describe("A HeaderCell", function () {
});
cell.render();
+ document.body.appendChild(cell.el);
+ });
+
+ afterEach(function () {
+ document.body.removeChild(cell.el);
});
it("renders a table header cell with the label text and an optional anchor with sort-caret", function () {
expect(cell.el.tagName).toBe("TH");
- expect(cell.$el.find("a").text()).toBe("id");
- expect(cell.$el.find(".sort-caret").length).toBe(1);
+ expect($(cell.el).find("a").text()).toBe("id");
+ expect($(cell.el).find(".sort-caret").length).toBe(1);
cell.column.set("sortable", false);
cell.render();
expect(cell.el.tagName).toBe("TH");
- expect(cell.$el.text()).toBe("id");
- expect(cell.$el.find(".sort-caret").length).toBe(0);
+ expect($(cell.el).text()).toBe("id");
+ expect($(cell.el).find(".sort-caret").length).toBe(0);
});
it("adds an editable, sortable and a renderable class to the cell if these column attributes are true", function () {
@@ -41,23 +56,23 @@ describe("A HeaderCell", function () {
cell: "string"
};
- cell = new Backgrid.HeaderCell({
+ var cell = new Backgrid.HeaderCell({
column: column,
collection: col
});
- expect(cell.$el.hasClass("editable")).toBe(true);
- expect(cell.$el.hasClass("sortable")).toBe(true);
- expect(cell.$el.hasClass("renderable")).toBe(true);
+ expect($(cell.el).hasClass("editable")).toBe(true);
+ expect($(cell.el).hasClass("sortable")).toBe(true);
+ expect($(cell.el).hasClass("renderable")).toBe(true);
cell.column.set("editable", false);
- expect(cell.$el.hasClass("editable")).toBe(false);
+ expect($(cell.el).hasClass("editable")).toBe(false);
cell.column.set("sortable", false);
- expect(cell.$el.hasClass("sortable")).toBe(false);
+ expect($(cell.el).hasClass("sortable")).toBe(false);
cell.column.set("renderable", false);
- expect(cell.$el.hasClass("renderable")).toBe(false);
+ expect($(cell.el).hasClass("renderable")).toBe(false);
var TrueCol = Backgrid.Column.extend({
mySortable: function () { return true; },
@@ -84,9 +99,9 @@ describe("A HeaderCell", function () {
collection: col
});
- expect(cell.$el.hasClass("editable")).toBe(true);
- expect(cell.$el.hasClass("sortable")).toBe(true);
- expect(cell.$el.hasClass("renderable")).toBe(true);
+ expect($(cell.el).hasClass("editable")).toBe(true);
+ expect($(cell.el).hasClass("sortable")).toBe(true);
+ expect($(cell.el).hasClass("renderable")).toBe(true);
column = new FalseCol({
name: "title",
@@ -101,9 +116,9 @@ describe("A HeaderCell", function () {
collection: col
});
- expect(cell.$el.hasClass("editable")).toBe(false);
- expect(cell.$el.hasClass("sortable")).toBe(false);
- expect(cell.$el.hasClass("renderable")).toBe(false);
+ expect($(cell.el).hasClass("editable")).toBe(false);
+ expect($(cell.el).hasClass("sortable")).toBe(false);
+ expect($(cell.el).hasClass("renderable")).toBe(false);
column = new Backgrid.Column({
name: "title",
@@ -118,26 +133,26 @@ describe("A HeaderCell", function () {
collection: col
});
- expect(cell.$el.hasClass("editable")).toBe(true);
- expect(cell.$el.hasClass("sortable")).toBe(true);
- expect(cell.$el.hasClass("renderable")).toBe(true);
+ expect($(cell.el).hasClass("editable")).toBe(true);
+ expect($(cell.el).hasClass("sortable")).toBe(true);
+ expect($(cell.el).hasClass("renderable")).toBe(true);
});
it("will rerender with the column name and/or label changes", function () {
- expect(cell.$el.find("a").text(), "id");
- expect(cell.$el.hasClass("id"), true);
+ expect($(cell.el).find("a").text(), "id");
+ expect($(cell.el).hasClass("id"), true);
cell.column.set("name", "name");
- expect(cell.$el.find("name"), true);
- expect(cell.$el.hasClass("name"), true);
+ expect($(cell.el).find("name"), true);
+ expect($(cell.el).hasClass("name"), true);
cell.column.set("label", "Name");
- expect(cell.$el.find("a").text(), "Name");
- expect(cell.$el.hasClass("Name"), true);
+ expect($(cell.el).find("a").text(), "Name");
+ expect($(cell.el).hasClass("Name"), true);
});
it("will put a class indicating the sorting direction if `direction` is set in the column", function () {
- cell = new Backgrid.HeaderCell({
+ var cell = new Backgrid.HeaderCell({
column: {
name: "id",
cell: "integer",
@@ -149,15 +164,15 @@ describe("A HeaderCell", function () {
cell.render();
expect(cell.el.tagName).toBe("TH");
- expect(cell.$el.find("a").text()).toBe("id");
- expect(cell.$el.find(".sort-caret").length).toBe(1);
- expect(cell.$el.hasClass("descending")).toBe(true);
+ expect($(cell.el).find("a").text()).toBe("id");
+ expect($(cell.el).find(".sort-caret").length).toBe(1);
+ expect($(cell.el).hasClass("descending")).toBe(true);
});
it("triggers `backgrid:sort` with the column and direction set to 'ascending' if the column's direction is not set", function () {
var column, direction;
cell.collection.on("backgrid:sort", function (col, dir) { column = col; direction = dir; });
- cell.$el.find("a").click();
+ emit($(cell.el).find("a")[0], SyntheticEvent("click", {bubbles: true}));
expect(column).toBe(cell.column);
expect(direction).toBe("ascending");
});
@@ -166,7 +181,7 @@ describe("A HeaderCell", function () {
var column, direction;
cell.collection.on("backgrid:sort", function (col, dir) { column = col; direction = dir; });
cell.column.set("direction", "ascending");
- cell.$el.find("a").click();
+ emit($(cell.el).find("a")[0], SyntheticEvent("click", {bubbles: true}));
expect(column).toBe(cell.column);
expect(direction).toBe("descending");
});
@@ -175,52 +190,54 @@ describe("A HeaderCell", function () {
var column, direction;
cell.collection.on("backgrid:sort", function (col, dir) { column = col; direction = dir; });
cell.column.set("direction", "descending");
- cell.$el.find("a").click();
+ emit($(cell.el).find("a")[0], SyntheticEvent("click", {bubbles: true}));
expect(column).toBe(cell.column);
expect(direction).toBeNull();
});
it("will set the column to the correct direction when `change:direction` is triggered from the column", function () {
cell.column.set("direction", "ascending");
- expect(cell.$el.hasClass("ascending")).toBe(true);
+ expect($(cell.el).hasClass("ascending")).toBe(true);
cell.column.set("direction", "descending");
- expect(cell.$el.hasClass("descending")).toBe(true);
+ expect($(cell.el).hasClass("descending")).toBe(true);
cell.column.set("direction", null);
- expect(cell.$el.hasClass("ascending")).toBe(false);
- expect(cell.$el.hasClass("descending")).toBe(false);
+ expect($(cell.el).hasClass("ascending")).toBe(false);
+ expect($(cell.el).hasClass("descending")).toBe(false);
});
- it("will remove its direction CSS class if `sort` is triggered from the collection or pageableCollection#fullCollection", function () {
+ it("will remove its direction CSS class if `sort` is triggered from the collection", function () {
cell.column.set("direction", "ascending");
cell.collection.comparator = "id";
cell.collection.sort();
- expect(cell.$el.hasClass("ascending")).toBe(false);
- expect(cell.$el.hasClass("descending")).toBe(false);
+ expect($(cell.el).hasClass("ascending")).toBe(false);
+ expect($(cell.el).hasClass("descending")).toBe(false);
+ });
- col = new Backbone.PageableCollection(col.toJSON(), {
+ it("will remove its direction CSS class if `sort` is triggered from the pageableCollection#fullCollection", function () {
+ var pagedCol = new Backbone.PageableCollection(col.toJSON(), {
mode: "client"
});
- col.setSorting("id", 1);
- cell = new Backgrid.HeaderCell({
+ pagedCol.setSorting("id", 1);
+ var cell = new Backgrid.HeaderCell({
column: {
name: "id",
cell: "integer"
},
- collection: col
+ collection: pagedCol
});
cell.column.set("direction", "ascending");
cell.collection.fullCollection.comparator = "id";
cell.collection.fullCollection.sort();
- expect(cell.$el.hasClass("ascending")).toBe(false);
- expect(cell.$el.hasClass("descending")).toBe(false);
+ expect($(cell.el).hasClass("ascending")).toBe(false);
+ expect($(cell.el).hasClass("descending")).toBe(false);
});
it("with `sortType` set to `toggle`, triggers `backgrid:sort` with the column and direction set to 'ascending' if the column's direction is not set", function () {
var column, direction;
cell.column.set("sortType", "toggle");
cell.collection.on("backgrid:sort", function (col, dir) { column = col; direction = dir; });
- cell.$el.find("a").click();
+ emit($(cell.el).find("a")[0], SyntheticEvent("click", {bubbles: true}));
expect(column).toBe(cell.column);
expect(direction).toBe("ascending");
});
@@ -230,7 +247,7 @@ describe("A HeaderCell", function () {
cell.column.set("sortType", "toggle");
cell.column.set("direction", "ascending");
cell.collection.on("backgrid:sort", function (col, dir) { column = col; direction = dir; });
- cell.$el.find("a").click();
+ emit($(cell.el).find("a")[0], SyntheticEvent("click", {bubbles: true}));
expect(column).toBe(cell.column);
expect(direction).toBe("descending");
});
@@ -240,7 +257,7 @@ describe("A HeaderCell", function () {
cell.column.set("sortType", "toggle");
cell.column.set("direction", "descending");
cell.collection.on("backgrid:sort", function (col, dir) { column = col; direction = dir; });
- cell.$el.find("a").click();
+ emit($(cell.el).find("a")[0], SyntheticEvent("click", {bubbles: true}));
expect(column).toBe(cell.column);
expect(direction).toBe("ascending");
});
@@ -286,7 +303,7 @@ describe("A HeaderRow", function () {
});
it("renders a row of header cells", function () {
- expect(row.$el[0].tagName).toBe("TR");
+ expect(row.el.tagName).toBe("TR");
var th1 = $(row.el.childNodes[0]);
expect(th1.hasClass("editable")).toBe(true);
expect(th1.hasClass("sortable")).toBe(true);
@@ -305,15 +322,15 @@ describe("A HeaderRow", function () {
});
it("resets the carets of the non-sorting columns", function () {
- row.$el.find("a").eq(0).click(); // ascending
- row.$el.find("a").eq(1).click(); // ascending, resets the previous
- expect(row.$el.find("a").eq(0).hasClass("ascending")).toBe(false);
- expect(row.$el.find("a").eq(1).hasClass("ascending")).toBe(false);
+ $(row.el).find("a").eq(0).click(); // ascending
+ $(row.el).find("a").eq(1).click(); // ascending, resets the previous
+ expect($(row.el).find("a").eq(0).hasClass("ascending")).toBe(false);
+ expect($(row.el).find("a").eq(1).hasClass("ascending")).toBe(false);
});
it("inserts or removes a cell if a column is added or removed", function () {
row.columns.add({name: "price", cell: "number"});
- expect(row.$el.children().length).toBe(3);
+ expect(row.el.childNodes.length).toBe(3);
var lastTh = $(row.el.lastChild);
expect(lastTh.hasClass("editable")).toBe(true);
expect(lastTh.hasClass("sortable")).toBe(true);
@@ -323,12 +340,12 @@ describe("A HeaderRow", function () {
expect(lastTh.find("a > b:last-child").eq(0).hasClass("sort-caret")).toBe(true);
row.columns.add({name: "publisher", cell: "string", renderable: false});
- expect(row.$el.children().length).toBe(4);
- expect(row.$el.children().last().find("a").text()).toBe("publisher");
- expect(row.$el.children().last().hasClass("renderable")).toBe(false);
+ expect($(row.el).children().length).toBe(4);
+ expect($(row.el).children().last().find("a").text()).toBe("publisher");
+ expect($(row.el).children().last().hasClass("renderable")).toBe(false);
row.columns.remove(row.columns.first());
- expect(row.$el.children().length).toBe(3);
+ expect(row.el.childNodes.length).toBe(3);
var firstTh = $(row.el.firstChild);
expect(firstTh.hasClass("editable")).toBe(true);
expect(firstTh.hasClass("sortable")).toBe(true);
@@ -379,7 +396,7 @@ describe("A Header", function () {
});
it("renders a header with a row of header cells", function () {
- expect(head.$el[0].tagName).toBe("THEAD");
+ expect(head.el.tagName).toBe("THEAD");
var th1 = $(head.row.el.childNodes[0]);
expect(th1.hasClass("editable")).toBe(true);
diff --git a/test/index.html b/test/index.html
index df74e9db..d1c38719 100644
--- a/test/index.html
+++ b/test/index.html
@@ -6,8 +6,14 @@
Backgrid.js Jasmine Spec Runner
+
+
+
+
diff --git a/test/row.js b/test/row.js
index 63b36364..9713bbe4 100644
--- a/test/row.js
+++ b/test/row.js
@@ -26,7 +26,7 @@ describe("A Row", function () {
expect(row.el.tagName).toBe("TR");
- var $tds = row.$el.children();
+ var $tds = $(row.el).children();
expect($tds.eq(0).text()).toBe("name");
expect($tds.eq(1).text()).toBe("18");
});
@@ -45,17 +45,17 @@ describe("A Row", function () {
row.render();
- var $tds = row.$el.children();
+ var $tds = $(row.el).children();
expect($tds.eq(0).text()).toBe("name");
expect($tds.eq(0).hasClass("renderable")).toBe(true);
row.columns.at(0).set("renderable", false);
- $tds = row.$el.children();
+ $tds = $(row.el).children();
expect($tds.eq(0).text()).toBe("name");
expect($tds.eq(0).hasClass("renderable")).toBe(false);
row.columns.at(0).set("renderable", true);
- $tds = row.$el.children();
+ $tds = $(row.el).children();
expect($tds.eq(0).text()).toBe("name");
expect($tds.eq(0).hasClass("renderable")).toBe(true);
});
@@ -76,17 +76,17 @@ describe("A Row", function () {
row.render();
row.columns.add({name: "age", cell: "integer"});
- var $tds = row.$el.children();
+ var $tds = $(row.el).children();
expect($tds.length).toBe(2);
expect($tds.eq(1).text()).toBe("18");
row.columns.add({name: "birthday", cell: "date", renderable: false});
- $tds = row.$el.children();
+ $tds = $(row.el).children();
expect($tds.length).toBe(3);
expect($tds.last().text()).toBe("1987-06-05");
row.columns.remove(row.columns.first());
- $tds = row.$el.children();
+ $tds = $(row.el).children();
expect($tds.length).toBe(2);
expect($tds.first().text()).toBe("18");
expect($tds.last().text()).toBe("1987-06-05");
diff --git a/test/vendor/js/classList.js b/test/vendor/js/classList.js
new file mode 100644
index 00000000..47eddeec
--- /dev/null
+++ b/test/vendor/js/classList.js
@@ -0,0 +1,70 @@
+(function () {
+
+if (typeof window.Element === "undefined" || "classList" in document.documentElement) return;
+
+var prototype = Array.prototype,
+ push = prototype.push,
+ splice = prototype.splice,
+ join = prototype.join;
+
+function DOMTokenList(el) {
+ this.el = el;
+ // The className needs to be trimmed and split on whitespace
+ // to retrieve a list of classes.
+ var classes = el.className.replace(/^\s+|\s+$/g,'').split(/\s+/);
+ for (var i = 0; i < classes.length; i++) {
+ push.call(this, classes[i]);
+ }
+};
+
+DOMTokenList.prototype = {
+ add: function(token) {
+ if(this.contains(token)) return;
+ push.call(this, token);
+ this.el.className = this.toString();
+ },
+ contains: function(token) {
+ return this.el.className.indexOf(token) != -1;
+ },
+ item: function(index) {
+ return this[index] || null;
+ },
+ remove: function(token) {
+ if (!this.contains(token)) return;
+ for (var i = 0; i < this.length; i++) {
+ if (this[i] == token) break;
+ }
+ splice.call(this, i, 1);
+ this.el.className = this.toString();
+ },
+ toString: function() {
+ return join.call(this, ' ');
+ },
+ toggle: function(token) {
+ if (!this.contains(token)) {
+ this.add(token);
+ } else {
+ this.remove(token);
+ }
+
+ return this.contains(token);
+ }
+};
+
+window.DOMTokenList = DOMTokenList;
+
+function defineElementGetter (obj, prop, getter) {
+ if (Object.defineProperty) {
+ Object.defineProperty(obj, prop,{
+ get : getter
+ });
+ } else {
+ obj.__defineGetter__(prop, getter);
+ }
+}
+
+defineElementGetter(Element.prototype, 'classList', function () {
+ return new DOMTokenList(this);
+});
+
+})();
diff --git a/test/vendor/js/synthetic-dom-events.js b/test/vendor/js/synthetic-dom-events.js
new file mode 100644
index 00000000..d48b7079
--- /dev/null
+++ b/test/vendor/js/synthetic-dom-events.js
@@ -0,0 +1,236 @@
+!function(e){"object"==typeof exports?module.exports=e():"function"==typeof define&&define.amd?define(e):"undefined"!=typeof window?window.SyntheticEvent=e():"undefined"!=typeof global?global.SyntheticEvent=e():"undefined"!=typeof self&&(self.SyntheticEvent=e())}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o