/* This file contains proprietary software owned by Motorola Mobility, Inc.
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
*/ var Montage = require("montage").Montage, TestPageLoader = require("support/testpageloader").TestPageLoader; var testPage = TestPageLoader.queueTest("buttontest", function() { var test = testPage.test; var click = function(component, el, fn) { el = el || component.element; var listener = testPage.addListener(component, fn); testPage.mouseEvent({target: el}, "mousedown"); testPage.mouseEvent({target: el}, "mouseup"); testPage.mouseEvent({target: el}, "click"); // Return this so that it can be checked in tha calling function. return listener; }; var testButton = function(component, value) { expect(component).toBeDefined(); expect(click(component)).toHaveBeenCalled(); expect(component.label).toBe(value); }; describe("ui/button-spec", function() { it("should load", function() { expect(testPage.loaded).toBe(true); }); describe("button", function(){ it("can be created from a div element", function(){ testButton(test.divbutton, "div button"); }); it("can be created from an input element", function(){ testButton(test.inputbutton, "input button"); }); it("can be created from a button element", function(){ testButton(test.buttonbutton, "button button"); }); describe("disabled property", function(){ it("is taken from the element's disabled attribute", function() { expect(test.disabledbutton.disabled).toBe(true); expect(click(test.disabledbutton)).not.toHaveBeenCalled(); expect(test.disabledinput.disabled).toBe(true); expect(click(test.disabledinput)).not.toHaveBeenCalled(); expect(test.inputbutton.disabled).toBe(false); }); it("can be set", function(){ expect(test.disabledbutton.disabled).toBe(true); test.disabledbutton.disabled = false; expect(test.disabledbutton.disabled).toBe(false); // TODO click the button and check that it wasn't pressed expect(test.disabledinput.disabled).toBe(true); test.disabledinput.disabled = false; expect(test.disabledinput.disabled).toBe(false); // TODO click the button and check that it wasn't pressed }); it("can can be set in the serialization", function(){ expect(test.disabledinputszn.disabled).toBe(true); // TODO check button pressibility }); it("is the inverse of the enabled property", function(){ expect(test.enabledinputszn.disabled).toBe(false); expect(test.enabledinputszn.enabled).toBe(true); test.enabledinputszn.enabled = false; expect(test.enabledinputszn.disabled).toBe(true); expect(test.enabledinputszn.enabled).toBe(false); // TODO click the button and check that it wasn't pressed }); }); describe("label property", function() { it("is set from the serialization on a button", function() { expect(test.buttonlabelszn.label).toBe("pass"); testPage.waitForDraw(); runs(function(){ expect(test.buttonlabelszn.element.firstChild.data).toBe("pass"); }); }); it("is set from the serialization on an input", function() { expect(test.inputlabelszn.label).toBe("pass"); expect(test.inputlabelszn.element.value).toBe("pass"); }); it("sets the value on an input", function() { expect(test.inputbutton.label).toBe("input button"); test.inputbutton.label = "label pass"; expect(test.inputbutton.label).toBe("label pass"); expect(test.inputbutton.value).toBe("label pass"); test.inputbutton.label = "input button"; }); it("sets the first child on a non-input element", function() { expect(test.buttonbutton.label).toBe("button button"); test.buttonbutton.label = "label pass"; expect(test.buttonbutton.label).toBe("label pass"); testPage.waitForDraw(); runs(function(){ expect(test.buttonbutton.element.firstChild.data).toBe("label pass"); test.buttonbutton.label = "button button"; }); }); }); describe("value property", function() { it("is set from the value on an input", function() { expect(test.inputbutton.element.value).toBe("input button"); expect(test.inputbutton.value).toBe("input button"); }); it("is set by the label property in the serialization", function() { expect(test.inputlabelszn.label).toBe("pass"); //expect(test.inputlabelszn.value).toBe("pass"); }); it("sets the label property when using an input element", function() { expect(test.inputbutton.label).toBe("input button"); test.inputbutton.value = "value pass"; expect(test.inputbutton.value).toBe("value pass"); expect(test.inputbutton.label).toBe("value pass"); test.inputbutton.value = "input button"; }); it("doesn't set the label property when using a non-input element", function() { expect(test.buttonbutton.label).toBe("button button"); test.buttonbutton.value = "value fail"; expect(test.buttonbutton.label).toBe("button button"); testPage.waitForDraw(); runs(function(){ expect(test.buttonbutton.element.firstChild.data).toBe("button button"); test.buttonbutton.value = "button button"; }); }); }); it("responds when child elements are clicked on", function(){ expect(click(test.buttonnested, test.buttonnested.element.firstChild)).toHaveBeenCalled(); }); it("supports converters for label", function(){ expect(test.converterbutton.label).toBe("PASS"); expect(test.converterbutton.element.value).toBe("PASS"); }); // TODO should be transplanted to the press-composer-spec // it("correctly releases the pointer", function() { // var l = testPage.addListener(test.scroll_button); // testpage.mouseEvent({target: test.scroll_button.element}, "mousedown");; // expect(test.scroll_button.active).toBe(true); // test.scroll_button.surrenderPointer(test.scroll_button._observedPointer, null); // expect(test.scroll_button.active).toBe(false); // testPage.mouseEvent({target: test.scroll_button.element}, "mouseup");; // expect(l).not.toHaveBeenCalled(); // }); if (window.Touch) { describe("when supporting touch events", function() { it("should dispatch an action event when a touchend follows a touchstart on a button", function() { }); }); } else { describe("when supporting mouse events", function() { it("dispatches an action event when a mouseup follows a mousedown", function() { expect(click(test.inputbutton)).toHaveBeenCalled(); }); it("does not dispatch an action event when a mouseup occurs after not previously receiving a mousedown", function() { // reset interaction // test.inputbutton._endInteraction(); var l = testPage.addListener(test.inputbutton); testPage.mouseEvent({target: test.inputbutton.element}, "mouseup");; expect(l).not.toHaveBeenCalled(); }); it("does not dispatch an action event when a mouseup occurs away from the button after a mousedown on a button", function() { var l = testPage.addListener(test.inputbutton); testpage.mouseEvent({target: test.inputbutton.element}, "mousedown");; // Mouse up somewhere else testPage.mouseEvent({target: test.divbutton.element}, "mouseup");; expect(l).not.toHaveBeenCalled(); }); }); } describe("inside a scroll view", function() { it("fires an action event when clicked", function() { testButton(test.scroll_button, "scroll button"); }); it("doesn't fire an action event when scroller is dragged", function() { var el = test.scroll_button.element; var scroll_el = test.scroll.element; var listener = testPage.addListener(test.scroll_button); var press_composer = test.scroll_button.composerList[0]; // mousedown testPage.mouseEvent({target: el}, "mousedown"); expect(test.scroll_button.active).toBe(true); expect(test.scroll_button.eventManager.isPointerClaimedByComponent(press_composer._observedPointer, press_composer)).toBe(true); // Mouse move doesn't happen instantly waits(10); runs(function() { // mouse move up var moveEvent = document.createEvent("MouseEvent"); // Dispatch to scroll view, but use the coordinates from the // button moveEvent.initMouseEvent("mousemove", true, true, scroll_el.view, null, el.offsetLeft, el.offsetTop - 100, el.offsetLeft, el.offsetTop - 100, false, false, false, false, 0, null); scroll_el.dispatchEvent(moveEvent); expect(test.scroll_button.active).toBe(false); expect(test.scroll_button.eventManager.isPointerClaimedByComponent(press_composer._observedPointer, press_composer)).toBe(false); // mouse up testPage.mouseEvent({target: el}, "mouseup");; expect(listener).not.toHaveBeenCalled(); }); }); }); }); describe("toggle button", function() { it("alternates between unpressed and pressed", function() { expect(test.toggleinput.pressed).toBe(false); expect(test.toggleinput.label).toBe("off"); click(test.toggleinput); expect(test.toggleinput.pressed).toBe(true); expect(test.toggleinput.label).toBe("on"); click(test.toggleinput); expect(test.toggleinput.pressed).toBe(false); expect(test.toggleinput.label).toBe("off"); }); describe("toggle()", function() { it("swaps the state", function() { test.toggleinput.pressed = false; test.toggleinput.toggle(); expect(test.toggleinput.pressed).toBe(true); test.toggleinput.toggle(); expect(test.toggleinput.pressed).toBe(false); test.toggleinput.toggle(); expect(test.toggleinput.pressed).toBe(true); }); }); describe("label property", function() { it("alternates between unpressed and pressed", function() { test.toggleinput.pressed = false; // The expectations are in a closure because the draw can // happen at any point after we click on the button var checker = function(e) { return function(){ expect(test.toggleinput.pressed).toBe(e); expect(test.toggleinput.element.value).toBe((e)?"on":"off"); }; }; runs(checker(false)); runs(function(){ click(test.toggleinput); }); testPage.waitForDraw(); runs(checker(true)); }); it("changes pressed state when set to unpressedLabel or pressedLabel", function(){ test.toggleinput.pressed = false; test.toggleinput.label = "on"; expect(test.toggleinput.pressed).toBe(true); test.toggleinput.label = "off"; expect(test.toggleinput.pressed).toBe(false); }); it("doesn't change pressed state when set to a non-matching string", function(){ expect(test.toggleinput.pressed).toBe(false); test.toggleinput.label = "random"; expect(test.toggleinput.pressed).toBe(false); expect(test.toggleinput.label).toBe("random"); test.toggleinput.pressed = true; expect(test.toggleinput.label).toBe("on"); }); }); describe("unpressedLabel", function() { it("is set as the value when the button is unpressed", function() { test.toggleinput.pressed = false; expect(test.toggleinput.label).toBe("off"); test.toggleinput.unpressedLabel = "unpressed"; expect(test.toggleinput.label).toBe("unpressed"); testPage.waitForDraw(); runs(function(){ expect(test.toggleinput.element.value).toBe("unpressed"); }); }); it("is taken from `value` on init if the button is unpressed and unpressedLabel isn't set", function() { expect(test.toggleinput2.unpressedLabel).toBe(test.toggleinput2.label); }); }); describe("pressedLabel", function() { it("is set as the value when the button is pressed", function() { test.toggleinput.pressed = true; expect(test.toggleinput.label).toBe("on"); test.toggleinput.pressedLabel = "pressed"; expect(test.toggleinput.label).toBe("pressed"); testPage.waitForDraw(); runs(function(){ expect(test.toggleinput.element.value).toBe("pressed"); }); }); it("is taken from `value` on init if the button is pressed and pressedLabel isn't set", function() { expect(test.toggleinput3.pressedLabel).toBe(test.toggleinput3.label); }); }); describe("pressedClass", function() { it("is not in the classList when the button is unpressed", function() { test.toggleinput.pressed = false; testPage.waitForDraw(); runs(function(){ expect(test.toggleinput.element.className).not.toContain("pressed"); }); }); it("is added to the classList when the button is pressed", function() { test.toggleinput.pressed = true; testPage.waitForDraw(); runs(function(){ expect(test.toggleinput.element.className).toContain("pressed"); }); }); }); }); }); });