QUnit.test("Works with checkboxes", function(){
var template = stache("<input type='checkbox' {($checked)}='boolean-to-inList(item, list)' />");
var map = new DefineMap({
item: 2,
list: new DefineList([ 1, 2, 3 ])
});
var frag = template(map);
var input = frag.firstChild;
QUnit.ok(input.checked, "it is initially checked");
QUnit.equal(map.list.indexOf(2), 1, "two is in the list");
input.checked = false;
canEvent.trigger.call(input, "change");
QUnit.equal(map.list.indexOf(2), -1, "No longer in the list");
map.item = 3;
QUnit.ok(input.checked, "3 is in the list");
// Add something to the list
map.item = 5;
QUnit.ok(!input.checked, "5 is not in the list");
map.list.push(5);
QUnit.ok(input.checked, "Now 5 is in the list");
map.item = 6;
input.checked = true;
canEvent.trigger.call(input, "change");
QUnit.equal(map.list.indexOf(6), 3, "pushed into the list");
});
test("{element} event handling", function() {
expect(3);
stop();
var MyControl = Control.extend({
"{element} click": function(element){
if (element === this.element) {
ok(true, "`{element} click` should catch clicking on the element");
} else {
ok(true, "`{element} click` should catch clicking on a child of the element");
}
},
"{element} p click": function(){
ok(true, "`{element} p click` works");
start();
}
});
var div = document.createElement('div');
var p = document.createElement('p');
div.appendChild(p);
new MyControl(div, { foo: 'bar' });
canEvent.trigger.call(div, "click");
canEvent.trigger.call(p, "click");
});
test("Passing a Map as options works", function() {
expect(2);
stop();
var MyControl = Control.extend({
defaults: {
testEndEvent: 'mouseleave'
}
}, {
'{element} {eventType}': function(){
ok(true, 'catches handler from options');
},
'{element} {testEndEvent}': function(){
ok(true, 'catches handler from defaults');
start();
}
});
var map = new CanMap({
eventType: 'click'
});
var div = document.createElement('div');
new MyControl(div, map);
// change event declared in options map and trigger it
map.attr('eventType', 'mouseenter');
canEvent.trigger.call(div, 'mouseenter');
// trigger event from defaults
canEvent.trigger.call(div, 'mouseleave');
});
QUnit.test("chooses select option by the index from a list", function(){
var template = stache('<select {($value)}="index-to-selected(~person, people)"><option value="none"></option>{{#each people}}<option value="{{%index}}">{{name}}</option>{{/each}}</select>');
var map = new DefineMap({
person: "Anne",
people: [
"Matthew",
"Anne",
"Wilbur"
]
});
var select = template(map).firstChild;
// Initial value
QUnit.equal(select.value, 1, "initially set to the first value");
// Select a different thing.
select.value = 2;
canEvent.trigger.call(select, "change");
QUnit.equal(map.person, "Wilbur", "now it is me");
// Change the selected the other way.
map.person = map.people.item(0);
QUnit.equal(select.value, 0, "set back");
// Can be set to other stuff too
select.value = "none";
canEvent.trigger.call(select, "change");
QUnit.equal(map.person, undefined, "now undefined because not in the list");
});
test('on rebinding', 2, function () {
var first = true;
var Rebinder = Control.extend({
'{item} foo': function (item, ev) {
if (first) {
equal(item.id, 1, 'first item');
first = false;
} else {
equal(item.id, 2, 'first item');
}
}
});
var item1 = bindable({
id: 1
}),
item2 = bindable({
id: 2
}),
rb = new Rebinder(document.createElement('div'), {
item: item1
});
canEvent.trigger.call(item1, 'foo');
rb.options = {
item: item2
};
rb.on();
canEvent.trigger.call(item2, 'foo');
});
test("model list destroy after calling replace", function(){
expect(2);
var MyModel = CanModel.extend({},{});
var map = new MyModel({name: "map1"});
var map2 = new MyModel({name: "map2"});
var list = new MyModel.List([map, map2]);
list.bind('destroyed', function(ev){
ok(true, 'trigger destroyed');
});
canEvent.trigger.call(map, 'destroyed');
list.replace([map2]);
canEvent.trigger.call(map2, 'destroyed');
});
test("actions provide method names", function () {
var item1 = {};
var item2 = {};
var Tester = Control.extend({
"{item1} foo": "food",
"{item2} bar": "food",
food: function (item, ev, data) {
ok(true, "food called")
ok(item === item1 || item === item2, "called with an item")
}
});
new Tester(document.createElement('div'), {
item1: item1,
item2: item2
});
canEvent.trigger.call(item1, "foo");
canEvent.trigger.call(item2, "bar");
});
test('bind on document', function () {
var called = false,
handler = function () {
called = true;
};
canEvent.on.call(document, 'click', handler);
canEvent.trigger.call(document, 'click');
ok(called, 'got click event');
ok(true, 'did not error');
canEvent.off.call(document, 'click', handler);
});
test('delegate on document', function () {
var called = false,
handler = function () {
called = true;
};
canEvent.delegate.call(document, 'click', 'body', handler);
canEvent.trigger.call(document.body, 'click');
ok(called, 'got click event');
ok(true, 'did not error');
canEvent.undelegate.call(document, 'body', 'click', handler);
});
select: function ($element) {
let instance = this.attr('instance');
let itemSelector = this.attr('itemSelector');
if (instance.type === 'Assessment') {
tracker.start(instance.type,
tracker.USER_JOURNEY_KEYS.INFO_PANE,
tracker.USER_ACTIONS.INFO_PANE.OPEN_INFO_PANE);
}
$element = $element.closest(itemSelector);
trigger.call($element[0], 'selectTreeItem', [$element, instance]);
},
QUnit.test("If there is no list, treated as false", function(){
var template = stache("<input type='checkbox' {($checked)}='boolean-to-inList(item, list)' />");
var map = new DefineMap({
item: 2,
list: undefined
});
var frag = template(map);
var input = frag.firstChild;
QUnit.ok(!input.checked, "not checked because there is no list");
input.checked = true;
canEvent.trigger.call(input, "change");
QUnit.ok(true, "no errors thrown");
});
QUnit.test("can bind to a checkbox", function(){
var template = stache("<input type='checkbox' {($checked)}='either-or(~pref, \"Star Trek\", \"Star Wars\")' />");
var map = new DefineMap({
pref: "Star Trek"
});
var input = template(map).firstChild;
QUnit.equal(input.checked, true, "initial value is right");
input.checked = false;
canEvent.trigger.call(input, "change");
QUnit.equal(map.pref, "Star Wars", "changed because input changed");
map.pref = "Star Trek";
QUnit.equal(input.checked, true, "changed because map changed");
});
test("Don\'t bind if there are undefined values in templates", function () {
var C = Control.extend({}, {
'{noExistStuff} proc': function () {}
});
var c = new C(document.createElement('div'));
equal(c._bindings.user.length, 1, 'There is only one binding');
var C2 = Control.extend({
'{noExistStuff} click': function () {
ok(false, 'should not fall through to click handler');
}
});
var div = document.createElement('div');
new C2(div, {});
canEvent.trigger.call(div, "click");
});
QUnit.test("works with radio buttons", function(){
var template = stache("<form><input type='radio' name='name' value='Matthew' {($checked)}='boolean-to-inList(\"Matthew\", names)' /><input type='radio' name='name' value='Wilbur' {($checked)}='boolean-to-inList(\"Wilbur\", names)' /></form>");
var map = new DefineMap({
names: ['Wilbur']
});
var frag = template(map);
var radioOne = frag.firstChild.firstChild;
var radioTwo = radioOne.nextSibling;
// Initial state
QUnit.equal(radioOne.checked, false, "Matthew not checked");
QUnit.equal(radioTwo.checked, true, "Wilbur is checked");
radioOne.checked = true;
canEvent.trigger.call(radioOne, "change");
QUnit.equal(radioOne.checked, true, "Matthew is checked");
QUnit.equal(radioTwo.checked, false, "Wilbur is not checked");
});
test("Uses types.wrapElement", function(){
expect(3);
var $ = function(element){
this.element = element;
};
var wrapElement = types.wrapElement;
var unwrapElement = types.unwrapElement;
types.wrapElement = function(element){
return new $(element);
};
types.unwrapElement = function(object){
return object.element;
};
var MyControl = Control.extend({
init: function(element){
ok(element instanceof $, "element is wrapped");
ok(this.element instanceof $, "this.element is wrapped");
},
"click": function(element){
types.wrapElement = wrapElement;
types.unwrapElement = unwrapElement;
ok(element instanceof $);
}
});
var el = document.createElement('div');
el.innerHTML = 'Click Me!';
new MyControl(el);
canEvent.trigger.call(el, "click");
});
const instance = this.attr('instance');
return (
instance.attr('title') ||
instance.attr('description_inline') ||
instance.attr('name') ||
instance.attr('email') || ''
);
},
},
},
itemSelector: '.sub-item-content',
extraCss: '',
});
export default can.Component.extend({
tag: 'sub-tree-item',
view: can.stache(template),
leakScope: true,
viewModel,
events: {
inserted: function () {
this.viewModel.attr('$el', this.element);
},
'{viewModel.instance} destroyed'() {
const element = $(this.element)
.closest('tree-widget-container');
trigger.call(element[0], 'refreshTree');
},
},
});
test('listenTo and stopListening', 9, function () {
var parent = {
bind: canEvent.bind,
unbind: canEvent.unbind,
listenTo: canEvent.listenTo,
stopListening: canEvent.stopListening
};
var child1 = {
bind: canEvent.bind,
unbind: canEvent.unbind
};
var child2 = {
bind: canEvent.bind,
unbind: canEvent.unbind
};
var change1WithId = 0;
parent.listenTo(child1, 'change', function () {
change1WithId++;
if (change1WithId === 1) {
ok(true, 'child 1 handler with id called');
} else {
ok(false, 'child 1 handler with id should only be called once');
}
});
child1.bind('change', function () {
ok(true, 'child 1 handler without id called');
});
var foo1WidthId = 0;
parent.listenTo(child1, 'foo', function () {
foo1WidthId++;
if (foo1WidthId === 1) {
ok(true, 'child 1 foo handler with id called');
} else {
ok(false, 'child 1 foo handler should not be called twice');
}
});
// child2 stuff
(function () {
var okToCall = true;
parent.listenTo(child2, 'change', function () {
ok(okToCall, 'child 2 handler with id called');
okToCall = false;
});
}());
child2.bind('change', function () {
ok(true, 'child 2 handler without id called');
});
parent.listenTo(child2, 'foo', function () {
ok(true, 'child 2 foo handler with id called');
});
canEvent.trigger.call(child1, 'change');
canEvent.trigger.call(child1, 'foo');
canEvent.trigger.call(child2, 'change');
canEvent.trigger.call(child2, 'foo');
parent.stopListening(child1);
parent.stopListening(child2, 'change');
canEvent.trigger.call(child1, 'change');
canEvent.trigger.call(child1, 'foo');
canEvent.trigger.call(child2, 'change');
canEvent.trigger.call(child2, 'foo');
});
toggleSelection: function (el, isSelected) {
let event = isSelected ? 'selectItem' : 'deselectItem';
trigger.call(el[0], event, [this.attr('item')]);
},
.then(() => {
trigger.call(el[0], 'openMapper', ev);
});