ballonizer 0.1.0 → 0.2.0

data/spec/javascripts/ballonizer_spec.js

@@ -0,0 +1,568 @@
+// The order of the requires bellow is important
+//= require jquery-2.0.1.js
+//= require jquery-ui-1.10.3.custom.min.js
+//= require jquery.json-2.4.min.js
+//= require jquery.simulate.js
+//= require jquery.simulate-ext.js
+//= require jquery.simulate.drag-n-drop.js
+
+describe("Ballonizer", function () {
+    /* jshint strict: false */
+    // We disable the strict mode here because the libs included
+    // with "//= require" break the tests if with strict mode
+
+    // Variables pre-set before each test
+    var actionFormURL,
+        imageToBallonizeCSSSelector,
+        initialBallonText,
+        instance;
+
+    beforeEach(function () {
+        actionFormURL = "/action/path/to/submit";
+        imageToBallonizeCSSSelector = ".ballonizer_image_container";
+        initialBallonText = "double click to edit";
+        instance = null;
+
+        this.addMatchers({
+            toHaveBallonizerForm: function (actionFormURL) {
+                var lastBodyChild = this.actual.children().last();
+
+                expect(lastBodyChild).toBe("form.ballonizer_page_form" +
+                        "[method='post'][action='" + actionFormURL + "']");
+                expect(lastBodyChild).toContain("input[type='submit']" +
+                        "[name='ballonizer_submit']");
+                expect(lastBodyChild).toContain("input[type='hidden']" +
+                        "[name='ballonizer_data']");
+
+                return true;
+            },
+            toBeAnEmptyObject: function () {
+                var obj = this.actual;
+                for (var p in obj) {
+                    if (obj.hasOwnProperty(p)) {
+                        this.message = "expected object to be empty but" +
+                                "found the key '" + p + "'";
+
+                        return false;
+                    }
+                }
+                return true;
+            }
+        });
+    });
+
+    afterEach(function () {
+        // Remove left-overs created out of the #jasmine-fixtures container
+        $(".ballonizer_page_form").remove();
+    });
+
+    it("it's defined", function () {
+        expect(Ballonizer).toBeDefined();
+    });
+
+    describe("when exist images to ballonize in the document", function () {
+        describe("but none in the context", function () {
+            it("doesn't create a form", function () {
+                loadFixtures("ballonized-xkcd-without-ballons.html");
+                Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#bottom"));
+                expect($("form.ballonizer_page_form")).not.toExist();
+            });
+            it(".getForm return null", function () {
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#bottom"));
+                expect(instance.getForm()).toEqual(null);
+            });
+        });
+        describe("and they are in the context", function () {
+            it("create a hidden form as the last child of the context", function () {
+                loadFixtures("ballonized-xkcd-without-ballons.html");
+                Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                expect($("#jasmine-fixtures")).toHaveBallonizerForm(actionFormURL);
+                expect($("form.ballonizer_page_form")).toBeHidden();
+            });
+            it("changes in .getForm result affect the node in the DOM", function () {
+                loadFixtures("ballonized-xkcd-without-ballons.html");
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                instance.getForm().attr("method", "get");
+                expect($("form.ballonizer_page_form")).toHaveAttr("method", "get");
+            });
+        });
+        describe("when the ballonized image is double clicked", function () {
+            it("a new ballon will be created", function () {
+                loadFixtures("ballonized-xkcd-without-ballons.html");
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+
+                var ballonizedImg = $(".ballonizer_image_container img");
+                ballonizedImg.trigger("dblclick");
+                expect($(".ballonizer_ballon")).toExist();
+            });
+            it("the default action of clicking the image (if any) will not trigger", function () {
+                loadFixtures("ballonized-xkcd-with-anchor-in-image.html");
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                var spyAnchor = spyOnEvent("#comic a", "click");
+                var ballonizedImg = $(".ballonizer_image_container img");
+                // In a real browser the dblclick event will be generated with one or
+                // two clicks events before it (http://api.jquery.com/dblclick/)
+                ballonizedImg.trigger("click");
+                expect(spyAnchor).toHaveBeenPrevented();
+            });
+        });
+    });
+
+    describe(".getBallonizedImageContainers", function () {
+        describe("when there's no image to ballonize", function () {
+            it("return an object without any keys", function () {
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                var ballonizedImageContainers = instance.getBallonizedImageContainers();
+                expect(ballonizedImageContainers).toBeAnEmptyObject();
+            });
+        });
+        describe("when there's a image to ballonize", function () {
+            it("return an object with the img src as key and the object as value", function () {
+                loadFixtures("ballonized-xkcd-without-ballons.html");
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                var ballonizedImageContainers = instance.getBallonizedImageContainers();
+                expect(ballonizedImageContainers.hasOwnProperty("http://imgs.xkcd.com/comics/cells.png")).toBeTruthy();
+            });
+        });
+    });
+    describe("BallonizedImageContainer", function () {
+        it("adds a hidden form for the ballon edition in the container", function () {
+            loadFixtures("ballonized-xkcd-without-ballons.html");
+            instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+            expect($(".ballonizer_image_container")).toContain("form.ballonizer_image_form");
+            // What the value of method is not important, but the method attribute
+            // is required (http://www.w3.org/TR/html401/interact/forms.html#h-17.3)
+            expect($("form.ballonizer_image_form")).toHaveAttr("method");
+            expect($("form.ballonizer_image_form")).toBeHidden();
+        });
+        describe("when there's a image with ballons", function () {
+            it("getBallons return they", function () {
+                loadFixtures("ballonized-xkcd-with-ballons.html");
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                var ballonizedImageContainers = instance.getBallonizedImageContainers();
+                var ballons = ballonizedImageContainers["http://imgs.xkcd.com/comics/cells.png"].getBallons();
+
+                expect(ballons.length).toEqual(2);
+                expect(ballons[0].getText()).toEqual("When you see a claim that a common drug or vitamin \"kills cancer cells in a petri dish\", keep in mind:");
+                expect(ballons[1].getText()).toEqual("So does a handgun.");
+                expect(ballons[0].getPositionAndSize()).toEqual(
+                    { left: 0, top: 0, width: 218, height: 82 }
+                );
+                expect(ballons[1].getPositionAndSize()).toEqual(
+                    { left: 21, top: 319, width: 170, height: 19 }
+                );
+            });
+        });
+    });
+    describe("InterfaceBallon", function () {
+        var containerWidth, containerHeight;
+        var getBallons = function () {
+            loadFixtures("ballonized-xkcd-with-ballons.html");
+            instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+            var imageContainer = instance.getBallonizedImageContainers()["http://imgs.xkcd.com/comics/cells.png"],
+                ballons = imageContainer.getBallons(),
+                containerNode = imageContainer.getContainerNode();
+
+            containerWidth = containerNode.width();
+            containerHeight = containerNode.height();
+
+            return ballons;
+        };
+        var realWorldEvent = function (eventName, obj) {
+            switch (eventName) {
+            case "dblclick":
+                obj.mousedown().mouseup().click().mousedown().mouseup().click().dblclick();
+                break;
+            case "click":
+                obj.mousedown().mouseup().click();
+                break;
+            }
+
+            return obj;
+        };
+        var ballons = null;
+
+        it("creates a hidden edit ballon for each ballon", function () {
+            ballons = getBallons();
+
+            var imgContainer = ballons[0].getBallonizedImageContainer().getContainerNode();
+            var imgForm = $("form.ballonizer_image_form", imgContainer);
+
+            expect(imgForm.children().length).toEqual(2);
+            expect(imgForm.children()).toBeHidden();
+            expect(imgForm).toContain("textarea.ballonizer_edition_ballon");
+
+            var textfieldTexts = imgForm.children().toArray().map(function (e, ix) {
+                /* jshint unused: false */
+                return $(e).val();
+            }).sort();
+            var ballonTexts = jQuery.map(ballons, function (e, ix) {
+                /* jshint unused: false */
+                return e.getText();
+            }).sort();
+
+            expect(textfieldTexts).toEqual(ballonTexts);
+        });
+        it("initial state is 'initial'", function () {
+            ballons = getBallons();
+            expect(ballons[0].getState()).toEqual("initial");
+            expect(ballons[1].getState()).toEqual("initial");
+        });
+        describe("when in initial state", function () {
+            it("the ballon can be dragged (and this update the getBounds return)", function () {
+                ballons = getBallons();
+                // We are using the second ballon because the first
+                // can't be dragged in the x axis, it already occupy
+                // all the x axis
+                var oldBounds = ballons[1].getPositionAndSize();
+                ballons[1].getNode().simulate("drag-n-drop", { dx: -20, dy: -20 });
+                expect(ballons[1].getPositionAndSize()).toEqual({
+                    left: (oldBounds.left - 20),
+                    top: (oldBounds.top - 20),
+                    width: oldBounds.width,
+                    height: oldBounds.height
+                });
+            });
+            it("the ballon can be resized (and this update the getBounds return)", function () {
+                ballons = getBallons();
+                var oldBounds = ballons[0].getPositionAndSize();
+                var resizeHandle = $(".ui-icon-gripsmall-diagonal-se", ballons[0].getNode());
+                
+                // The handle is hidden when not hovering over the ballon
+                // (which includes the handle)
+                resizeHandle.mouseover().simulate("drag-n-drop", {
+                    dx: -20,
+                    dy: -20
+                }).mouseout();
+
+                expect(ballons[0].getPositionAndSize()).toEqual({
+                    left: oldBounds.left,
+                    top: oldBounds.top,
+                    width: oldBounds.width - 20,
+                    height: oldBounds.height - 20
+                });
+            });
+        });
+        describe("when dblclicked 2x(mousedown + mouseup + click) + dblclick", function () {
+            it("alternate to edit mode initial -> edit)", function () {
+                ballons = getBallons();
+                realWorldEvent("dblclick", ballons[0].getNode());
+                expect(ballons[0].getState()).toEqual("edit");
+            });
+            it("hide the normal ballon and put the textarea (focused) in the place", function () {
+                ballons = getBallons();
+
+                // Test from the initial state
+                realWorldEvent("dblclick", ballons[0].getNode());
+
+                expect(ballons[0].getNormalNode()).toBeHidden();
+                expect(ballons[0].getEditionNode()).toBeVisible();
+                expect(ballons[0].getEditionNode()).toBeFocused();
+
+                expect(ballons[0].getEditionNode().attr("style")).toEqual(
+                    ballons[0].getNormalNode().attr("style")
+                );
+            });
+        });
+        describe("when the focus is lost in edit mode", function () {
+            it("the ballon return to the initial mode with the new text", function () {
+                ballons = getBallons();
+                // Edit the text of the first ballon
+                realWorldEvent("dblclick", ballons[0].getNode());
+                var firstNewText = "This is the first ballon text";
+                ballons[0].getNode().val(firstNewText);
+                // simulate focus loss
+                ballons[0].getNode().blur();
+                expect(ballons[0].getNormalNode()).toBeVisible();
+                expect(ballons[0].getText()).toEqual(firstNewText);
+                expect(ballons[0].getNormalNode().text()).toEqual(firstNewText);
+                expect(ballons[0].getEditionNode()).toBeHidden();
+            });
+            describe("and the ballon is empty (or only with spaces)", function () {
+                it("the ballon is removed", function () {
+                    ballons = getBallons();
+                    var imgContainer = ballons[0].getBallonizedImageContainer();
+
+                    realWorldEvent("dblclick", ballons[0].getNode());
+                    ballons[0].getNode().val("");
+                    ballons[0].getNode().blur();
+
+                    ballons = imgContainer.getBallons();
+
+                    expect(ballons.length).toEqual(1);
+                    expect($(".ballonizer_ballon")).toHaveLength(1);
+                    expect($("form.ballonizer_image_form > *")).toHaveLength(1);
+                });
+            });
+        });
+        describe("when the ballons change", function () {
+            var htmlUnescape = function (value) {
+                return (value)
+                    .replace(/"/g, '"')
+                    .replace(/'/g, "'")
+                    .replace(/&lt;/g, '<')
+                    .replace(/&gt;/g, '>')
+                    .replace(/&amp;/g, '&');
+            };
+
+            describe("position", function () {
+                var changePosition = function (ballon, dx, dy) {
+                    ballon.getNode().simulate("drag-n-drop", { dx: dx, dy: dy });
+
+                    return ballon;
+                };
+                // We are using the second ballon in the tests because
+                // the first can't be dragged in the x axis, it already
+                // occupy all the x axis
+                it("the button to submit change appears", function () {
+                    ballons = getBallons();
+                    changePosition(ballons[1], -20, -20);
+                    expect($("form.ballonizer_page_form > input[name='ballonizer_submit']")).toBeVisible();
+                });
+                it("the serialize methods shows the new values", function () {
+                    ballons = getBallons();
+                    var ballon = ballons[1],
+                        image = ballon.getBallonizedImageContainer(),
+                        ballonizer = image.getBallonizerInstance(),
+                        bounds = ballon.getPositionAndSize(),
+                        expectedLeft = (bounds.left - 20) / containerWidth,
+                        expectedTop = (bounds.top - 20) / containerHeight;
+
+                    changePosition(ballons[1], -20, -20);
+
+                    expect(ballon.serialize().left).toEqual(expectedLeft);
+                    expect(ballon.serialize().top).toEqual(expectedTop);
+                    expect(image.serialize()[1].left).toEqual(expectedLeft);
+                    expect(image.serialize()[1].top).toEqual(expectedTop);
+                    expect(ballonizer.serialize()["http://imgs.xkcd.com/comics/cells.png"][1].left).toEqual(expectedLeft);
+                    expect(ballonizer.serialize()["http://imgs.xkcd.com/comics/cells.png"][1].top).toEqual(expectedTop);
+                });
+                it("the page form data update", function () {
+                    ballons = getBallons();
+                    var formData = $("form.ballonizer_page_form > input[name='ballonizer_data']");
+                    expect(formData).toHaveValue("");
+                    changePosition(ballons[1], -20, -20);
+                    expect(jQuery.parseJSON(htmlUnescape(formData.val()))).toEqual({
+                        "http://imgs.xkcd.com/comics/cells.png": [
+                            { left: 0,
+                                top: 0,
+                                width: 1,
+                                height: 0.24188790560471976,
+                                text: 'When you see a claim that a common drug or vitamin "kills cancer cells in a petri dish", keep in mind:'
+                            },
+                            { left: 0.0045871559633027525,
+                                top: 0.8820058997050148,
+                                width: 0.7798165137614679,
+                                height: 0.05604719764011799,
+                                text: 'So does a handgun.'
+                            }
+                        ]
+                    });
+                });
+            });
+            describe("size", function () {
+                var changeSize = function (ballon, dx, dy) {
+                    var resizeHandle = $(".ui-icon-gripsmall-diagonal-se", ballon.getNode());
+                
+                    // The handle is hidden when not hovering over the ballon (which includes the handle)
+                    resizeHandle.mouseover().simulate("drag-n-drop", { dx: dx, dy: dy }).mouseout();
+
+                    return ballon;
+                };
+                it("the button to submit change appears", function () {
+                    ballons = getBallons();
+                    changeSize(ballons[0], -20, -20);
+                    expect($("form.ballonizer_page_form > input[name='ballonizer_submit']")).toBeVisible();
+                });
+                it("the serialize methods shows the new values", function () {
+                    ballons = getBallons();
+                    var ballon = ballons[0],
+                        image = ballon.getBallonizedImageContainer(),
+                        ballonizer = image.getBallonizerInstance(),
+                        bounds = ballon.getPositionAndSize(),
+                        expectedWidth = (bounds.width - 20) / containerWidth,
+                        expectedHeight = (bounds.height - 20) / containerHeight;
+
+                    changeSize(ballons[0], -20, -20);
+
+                    expect(ballon.serialize().width).toEqual(expectedWidth);
+                    expect(ballon.serialize().height).toEqual(expectedHeight);
+                    expect(image.serialize()[0].width).toEqual(expectedWidth);
+                    expect(image.serialize()[0].height).toEqual(expectedHeight);
+                    expect(ballonizer.serialize()["http://imgs.xkcd.com/comics/cells.png"][0].width).toEqual(expectedWidth);
+                    expect(ballonizer.serialize()["http://imgs.xkcd.com/comics/cells.png"][0].height).toEqual(expectedHeight);
+                });
+                it("the page form data update", function () {
+                    ballons = getBallons();
+                    var formData = $("form.ballonizer_page_form > input[name='ballonizer_data']");
+                    expect(formData).toHaveValue("");
+                    changeSize(ballons[0], -20, -20);
+                    expect(jQuery.parseJSON(htmlUnescape(formData.val()))).toEqual({
+                        "http://imgs.xkcd.com/comics/cells.png": [
+                            { left: 0,
+                                top: 0,
+                                width: 0.908256880733945,
+                                height: 0.18289085545722714,
+                                text: 'When you see a claim that a common drug or vitamin "kills cancer cells in a petri dish", keep in mind:'
+                            },
+                            { left: 0.0963302752293578,
+                                top: 0.9410029498525073,
+                                width: 0.7798165137614679,
+                                height: 0.05604719764011799,
+                                text: 'So does a handgun.'
+                            }
+                        ]
+                    });
+                });
+            });
+            describe("text", function () {
+                var changeText = function (ballon, text) {
+                    realWorldEvent("dblclick", ballon.getNode());
+                    ballon.getNode().val(text);
+                    ballon.getNode().blur();
+
+                    return ballon;
+                };
+                it("the button to submit change appears", function () {
+                    ballons = getBallons();
+                    changeText(ballons[0], "Ballon new text");
+                    expect($("form.ballonizer_page_form > input[name='ballonizer_submit']")).toBeVisible();
+                });
+                it("the serialize methods shows the new values", function () {
+                    ballons = getBallons();
+                    var ballon = ballons[0],
+                        text = "Ballon new text",
+                        image = ballon.getBallonizedImageContainer(),
+                        ballonizer = image.getBallonizerInstance();
+
+                    changeText(ballon, text);
+
+                    expect(ballon.serialize().text).toEqual(text);
+                    expect(image.serialize()[0].text).toEqual(text);
+                    expect(ballonizer.serialize()["http://imgs.xkcd.com/comics/cells.png"][0].text).toEqual(text);
+                });
+                it("the page form data update", function () {
+                    ballons = getBallons();
+                    var formData = $("form.ballonizer_page_form > input[name='ballonizer_data']");
+                    expect(formData).toHaveValue("");
+                    changeText(ballons[0], "Ballon new text");
+                    expect(jQuery.parseJSON(htmlUnescape(formData.val()))).toEqual({
+                        "http://imgs.xkcd.com/comics/cells.png": [
+                            { left: 0,
+                                top: 0,
+                                width: 1,
+                                height: 0.24188790560471976,
+                                text: 'Ballon new text'
+                            },
+                            { left: 0.0963302752293578,
+                                top: 0.9410029498525073,
+                                width: 0.7798165137614679,
+                                height: 0.05604719764011799,
+                                text: 'So does a handgun.'
+                            }
+                        ]
+                    });
+                });
+            });
+            describe("a ballon being added", function () {
+                var addBallon = function () {
+                    $(".ballonizer_image_container img").trigger(
+                        jQuery.Event("dblclick", { pageX: 490, pageY: 444 })
+                    );
+                };
+
+                it("the button to submit change appears", function () {
+                    getBallons();
+                    addBallon();
+                    expect($("form.ballonizer_page_form > input[name='ballonizer_submit']")).toBeVisible();
+                });
+                it("the serialize methods shows the new values", function () {
+                    ballons = getBallons();
+                    addBallon();
+                    var image = ballons[0].getBallonizedImageContainer(),
+                        imageData = image.serialize(),
+                        ballonizer = image.getBallonizerInstance(),
+                        ballonizerData = ballonizer.serialize();
+
+                    expect(imageData.length).toEqual(3);
+                    expect(ballonizerData["http://imgs.xkcd.com/comics/cells.png"].length).toEqual(3);
+                });
+                it("the page form data update", function () {
+                    getBallons();
+                    var formData = $("form.ballonizer_page_form > input[name='ballonizer_data']");
+                    expect(formData).toHaveValue("");
+                    addBallon();
+                    expect(jQuery.parseJSON(htmlUnescape(formData.val()))).toEqual({
+                        "http://imgs.xkcd.com/comics/cells.png": [
+                            { left: 0,
+                                top: 0,
+                                width: 1,
+                                height: 0.24188790560471976,
+                                text: 'When you see a claim that a common drug or vitamin "kills cancer cells in a petri dish", keep in mind:'
+                            },
+                            { left: 0.0963302752293578,
+                                top: 0.9410029498525073,
+                                width: 0.7798165137614679,
+                                height: 0.05604719764011799,
+                                text: 'So does a handgun.'
+                            },
+                            { left: 0.40825688073394495,
+                                top: 0.05604719764011799,
+                                width: 0.591743119266055,
+                                height: 0.12094395280235988,
+                                text: 'double click to edit ballon text'
+                            }
+                        ]
+                    });
+                });
+            });
+            describe("a ballon being removed", function () {
+                var removeBallon = function (ballon) {
+                    realWorldEvent("dblclick", ballon.getNode());
+                    ballon.getNode().val("");
+                    ballon.getNode().blur();
+
+                    return ballon;
+                };
+                it("the button to submit change appears", function () {
+                    ballons = getBallons();
+                    removeBallon(ballons[0]);
+                    expect($("form.ballonizer_page_form > input[name='ballonizer_submit']")).toBeVisible();
+
+                    return ballons;
+                });
+                it("the serialize methods shows the new values", function () {
+                    ballons = getBallons();
+
+                    var image = ballons[0].getBallonizedImageContainer(),
+                        ballonizer = image.getBallonizerInstance();
+
+                    removeBallon(ballons[0]);
+
+                    var imageData = image.serialize(),
+                        ballonizerData = ballonizer.serialize();
+
+                    expect(imageData.length).toEqual(1);
+                    expect(ballonizerData["http://imgs.xkcd.com/comics/cells.png"].length).toEqual(1);
+                });
+                it("the page form data update", function () {
+                    ballons = getBallons();
+                    var formData = $("form.ballonizer_page_form > input[name='ballonizer_data']");
+                    expect(formData).toHaveValue("");
+                    removeBallon(ballons[0]);
+                    expect(jQuery.parseJSON(htmlUnescape(formData.val()))).toEqual({
+                        "http://imgs.xkcd.com/comics/cells.png": [
+                            { left: 0.0963302752293578,
+                                top: 0.9410029498525073,
+                                width: 0.7798165137614679,
+                                height: 0.05604719764011799,
+                                text: 'So does a handgun.'
+                            }
+                        ]
+                    });
+                });
+            });
+        });
+    });
+});
+