133 lines
3.7 KiB
JavaScript
133 lines
3.7 KiB
JavaScript
/**
|
|
* "Beware of bugs in the above code; I have only proved it correct, not tried
|
|
* it."
|
|
*
|
|
* ~ Donald Knuth
|
|
*/
|
|
|
|
// eslint-disable-next-line no-shadow-restricted-names
|
|
(function ($, ImageInput, undefined) {
|
|
describe("ImageInput", function () {
|
|
var state;
|
|
|
|
beforeEach(function () {
|
|
var $el;
|
|
|
|
loadFixtures("imageinput.html");
|
|
$el = $("#imageinput_12345");
|
|
|
|
$el.append(createTestImage("cross_12345", 300, 400, "red"));
|
|
|
|
state = new ImageInput("12345");
|
|
});
|
|
|
|
it("initialization", function () {
|
|
// Check that object's properties are present, and that the DOM
|
|
// elements they reference exist.
|
|
expect(state.el).toBeDefined();
|
|
expect(state.el).toExist();
|
|
|
|
expect(state.crossEl).toBeDefined();
|
|
expect(state.crossEl).toExist();
|
|
|
|
expect(state.inputEl).toBeDefined();
|
|
expect(state.inputEl).toExist();
|
|
|
|
expect(state.el).toHandle("click");
|
|
});
|
|
|
|
it("cross becomes visible after first click", function () {
|
|
expect(state.crossEl.css("visibility")).toBe("hidden");
|
|
|
|
state.el.click();
|
|
|
|
expect(state.crossEl.css("visibility")).toBe("visible");
|
|
});
|
|
|
|
it("coordinates are updated [offsetX is set]", function () {
|
|
var event, posX, posY, cssLeft, cssTop;
|
|
|
|
// Set up of 'click' event.
|
|
event = jQuery.Event("click", { offsetX: 35.3, offsetY: 42.7 });
|
|
|
|
// Calculating the expected coordinates.
|
|
posX = event.offsetX;
|
|
posY = event.offsetY;
|
|
|
|
// Triggering 'click' event.
|
|
jQuery(state.el).trigger(event);
|
|
|
|
// Getting actual (new) coordinates, and testing them against the
|
|
// expected.
|
|
cssLeft = stripPx(state.crossEl.css("left"));
|
|
cssTop = stripPx(state.crossEl.css("top"));
|
|
|
|
expect(cssLeft).toBeCloseTo(posX - 15, 1);
|
|
expect(cssTop).toBeCloseTo(posY - 15, 1);
|
|
expect(state.inputEl.val()).toBe("[" + Math.round(posX) + "," + Math.round(posY) + "]");
|
|
});
|
|
|
|
it("coordinates are updated [offsetX is NOT set]", function () {
|
|
var offset = state.el.offset(),
|
|
event,
|
|
posX,
|
|
posY,
|
|
cssLeft,
|
|
cssTop;
|
|
|
|
// Set up of 'click' event.
|
|
event = jQuery.Event("click", {
|
|
offsetX: undefined,
|
|
offsetY: undefined,
|
|
pageX: 35.3,
|
|
pageY: 42.7,
|
|
});
|
|
|
|
// Calculating the expected coordinates.
|
|
posX = event.pageX - offset.left;
|
|
posY = event.pageY - offset.top;
|
|
|
|
// Triggering 'click' event.
|
|
jQuery(state.el).trigger(event);
|
|
|
|
// Getting actual (new) coordinates, and testing them against the
|
|
// expected.
|
|
cssLeft = stripPx(state.crossEl.css("left"));
|
|
cssTop = stripPx(state.crossEl.css("top"));
|
|
|
|
expect(cssLeft).toBeCloseTo(posX - 15, 1);
|
|
expect(cssTop).toBeCloseTo(posY - 15, 1);
|
|
expect(state.inputEl.val()).toBe("[" + Math.round(posX) + "," + Math.round(posY) + "]");
|
|
});
|
|
});
|
|
|
|
// Instead of storing an image, and then including it in the template via
|
|
// the <img /> tag, we will generate one on the fly.
|
|
//
|
|
// Create a simple image from a canvas. The canvas is filled by a colored
|
|
// rectangle.
|
|
function createTestImage(id, width, height, fillStyle) {
|
|
var canvas, ctx, img;
|
|
|
|
canvas = document.createElement("canvas");
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
|
|
ctx = canvas.getContext("2d");
|
|
ctx.fillStyle = fillStyle;
|
|
ctx.fillRect(0, 0, width, height);
|
|
|
|
img = document.createElement("img");
|
|
img.src = canvas.toDataURL("image/png");
|
|
img.id = id;
|
|
|
|
return img;
|
|
}
|
|
|
|
// Strip the trailing 'px' substring from a CSS string containing the
|
|
// `left` and `top` properties of an element's style.
|
|
function stripPx(str) {
|
|
return str.substring(0, str.length - 2);
|
|
}
|
|
}).call(this, window.jQuery, window.ImageInput);
|