/*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*/
/*global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false*/
/*global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false*/
define(function(require) {
var $ = require('jquery');
var html = require('text!test/markup/pillbox-markup.html!strip');
require('bootstrap');
require('fuelux/pillbox');
module('Fuel UX Pillbox');
test('should be defined on jquery object', function() {
ok($().find('#MyPillbox').pillbox, 'pillbox method is defined');
});
test('should return element', function() {
var $pillbox = $(html).find('#MyPillbox');
ok($pillbox.pillbox() === $pillbox, 'pillbox is initialized');
});
test('should behave as designed', function() {
var $pillbox = $(html).find('#MyPillbox').pillbox();
equal($pillbox.pillbox('items').length, 5, 'pillbox returns both items');
$pillbox.find('li > span:last').click();
equal($pillbox.pillbox('items').length, 4, 'pillbox removed an item');
deepEqual($pillbox.pillbox('items')[0], {
text: 'Item 1',
value: 'foo'
}, 'pillbox returns item data');
});
test('getValue alias should function', function() {
var $pillbox = $(html).find('#MyPillbox').pillbox();
deepEqual($pillbox.pillbox('items'), $pillbox.pillbox('getValue'), 'getValue aliases items');
});
test('Input functionality should behave as designed', function() {
var $pillbox = $(html).find('#MyPillbox').pillbox();
var $input = $pillbox.find('.pillbox-add-item');
$input.val('three-value');
$input.trigger($.Event('keydown', {
keyCode: 13
}));
deepEqual($pillbox.pillbox('items')[5], {
text: 'three-value',
value: 'three-value'
}, 'pillbox returns added item');
});
test('Input functionality should, by default, not allow empty pills', function() {
var $pillbox = $(html).find('#MyPillbox').pillbox();
var $input = $pillbox.find('.pillbox-add-item');
$input.val(',');
$input.trigger($.Event('keydown', {
keyCode: 13
}));
equal($pillbox.pillbox('items').length, 5, 'no item added');
});
test('Input functionality should allow empty pills if allowEmptyPills is set to true', function() {
var $pillbox = $(html).find('#MyPillbox').pillbox({
allowEmptyPills: true
});
var $input = $pillbox.find('.pillbox-add-item');
$input.val(',');
$input.trigger($.Event('keydown', {
keyCode: 13
}));
equal($pillbox.pillbox('items').length, 6, 'item added');
});
test('itemCount function', function() {
var $pillbox = $(html).find('#MyPillboxEmpty').pillbox();
equal($pillbox.pillbox('itemCount'), 0, 'itemCount on empty pillbox');
$pillbox = $(html).find('#MyPillbox').pillbox();
equal($pillbox.pillbox('itemCount'), 5, 'itemCount on pillbox with 5 items');
});
test('addItems/removeItems functions', function() {
var $pillbox = $(html).find('#MyPillboxEmpty').pillbox();
equal($pillbox.pillbox('itemCount'), 0, 'pillbox is initially empty');
$pillbox.pillbox('addItems',
{
text: 'Item 1',
value: 1,
attr: {
'cssClass': 'example-pill-class',
'style': 'background-color: #0000FF',
'data-example-attribute': true
}
});
deepEqual($pillbox.pillbox('items')[0],
{
text: 'Item 1',
value: 1,
'exampleAttribute': true
},
'single item added has correct text, value, and data');
$pillbox.pillbox('addItems', {
text: 'Item 2',
value: 2
});
$pillbox.pillbox('removeItems');
equal($pillbox.pillbox('items').length, 0, 'removedItems removed all items');
$pillbox.pillbox('addItems', {
text: 'Item 1',
value: 1
}, {
text: 'Item 2',
value: 2
});
deepEqual($pillbox.pillbox('items')[1], {
text: 'Item 2',
value: 2
}, 'multiple items have been added correctly');
$pillbox.pillbox('removeItems');
$pillbox.pillbox('addItems', [{
text: 'Item 1',
value: 1
}, {
text: 'Item 2',
value: 2
}, {
text: 'Item 3',
value: 3
}]);
deepEqual($pillbox.pillbox('items')[2], {
text: 'Item 3',
value: 3
}, 'multiple items have been added correctly by array');
$pillbox.pillbox('removeItems', 2, 1);
deepEqual($pillbox.pillbox('items')[1], {
text: 'Item 3',
value: 3
}, 'single item has been removed at the correct index');
$pillbox.pillbox('removeItems', 1);
deepEqual($pillbox.pillbox('items')[0], {
text: 'Item 3',
value: 3
}, 'single item has been removed at the correct index');
});
test('removeByValue function', function() {
var $pillbox = $(html).find('#MyPillbox').pillbox();
equal($pillbox.pillbox('itemCount'), 5, 'pillbox has 7 items initially');
$pillbox.pillbox('removeByValue', 'foo');
equal($pillbox.pillbox('itemCount'), 4, 'pillbox has 1 item after removeByValue');
deepEqual($pillbox.pillbox('items')[0], {
text: 'Item 2'
}, 'item not removed has correct text and value');
});
test('removeByText function', function() {
var $pillbox = $(html).find('#MyPillbox').pillbox();
equal($pillbox.pillbox('itemCount'), 5, 'pillbox has 7 items initially');
$pillbox.pillbox('removeByText', 'Item 2');
equal($pillbox.pillbox('itemCount'), 4, 'pillbox has 1 item after removeByText');
deepEqual($pillbox.pillbox('items')[0], {
text: 'Item 1',
value: 'foo'
}, 'item not removed has correct text and value');
});
test('all user defined methods work as expected', function() {
var $pillbox = $(html).find('#MyPillbox').pillbox({
onAdd: function(data, callback) {
callbackTriggers++;
callback(data);
},
onKeyDown: function(data, callback) {
callbackTriggers++;
callback({
data: [
{
text: 'Item 3',
value: 'three-value'
}
]
});
},
onRemove: function(data, callback) {
callbackTriggers++;
callback(data);
}
});
var $input = $pillbox.find('.pillbox-add-item');
var callbackTriggers = 0;
$input.val('anything');
$input.trigger($.Event('keydown', {
keyCode: 13
})); //enter
equal(callbackTriggers, 1, 'onAdd triggered correctly');
deepEqual($pillbox.pillbox('items')[2], {
text: 'Item 3',
value: 'three-value'
}, 'item correctly added after onAdd user callback');
$input.trigger($.Event('keydown', {
keyCode: 97
})); // number 1
equal(callbackTriggers, 2, 'onKeyDown triggered correctly');
$pillbox.find('> li > .glyphicon-close').click();
equal(callbackTriggers, 2, 'onRemove triggered correctly');
deepEqual($pillbox.pillbox('items')[2], {
text: 'Item 3',
value: 'three-value'
}, 'item correctly added after onAdd user callback');
});
test('Suggestions functionality should behave as designed', function() {
var $pillbox = $(html).find('#MyPillboxEmpty').pillbox({
onKeyDown: function(data, callback) {
callback({
data: [
{
text: 'Acai',
value: 'acai'
},
{
text: 'African cherry orange',
value: 'african cherry orange'
},
{
text: 'Banana',
value: 'banana'
},
{
text: 'Bilberry',
value: 'bilberry'
},
{
text: 'Cantaloupe',
value: 'cantaloupe'
},
{
text: 'Ceylon gooseberry',
value: 'ceylon gooseberry'
},
{
text: 'Dragonfruit',
value: 'dragonfruit'
},
{
text: 'Dead Man\'s Fingers',
value: 'dead man\'s fingers'
},
{
text: 'Fig',
value: 'fig'
},
{
text: 'Forest strawberries',
value: 'forest strawberries'
},
{
text: 'Governor’s Plum',
value: 'governor’s plum'
},
{
text: 'Grapefruit',
value: 'grapefruit'
},
{
text: 'Guava',
value: 'guava'
},
{
text: 'Honeysuckle',
value: 'honeysuckle'
},
{
text: 'Huckleberry',
value: 'huckleberry'
},
{
text: 'Jackfruit',
value: 'jackfruit'
},
{
text: 'Japanese Persimmon',
value: 'japanese persimmon'
},
{
text: 'Key Lime',
value: 'key lime'
},
{
text: 'Kiwi',
value: 'kiwi'
},
{
text: 'Lemon',
value: 'lemon'
},
{
text: 'Lillypilly',
value: 'lillypilly'
},
{
text: 'Mandarin',
value: 'mandarin'
},
{
text: 'Miracle Fruit',
value: 'miracle fruit'
},
{
text: 'Orange',
value: 'orange'
},
{
text: 'Oregon grape',
value: 'oregon grape'
},
{
text: 'Persimmon',
value: 'persimmon'
},
{
text: 'Pomegranate',
value: 'pomegranate'
},
{
text: 'Rhubarb',
value: 'rhubarb'
},
{
text: 'Rose hip',
value: 'rose hip'
},
{
text: 'Soursop',
value: 'soursop'
},
{
text: 'Starfruit',
value: 'starfruit'
},
{
text: 'Tamarind',
value: 'tamarind'
},
{
text: 'Thimbleberry',
value: 'thimbleberry'
},
{
text: 'Wineberry',
value: 'wineberry'
},
{
text: 'Wongi',
value: 'wongi'
},
{
text: 'Youngberry',
value: 'youngberry'
}
]
});
}
});
var $input = $pillbox.find('.pillbox-add-item');
$input.trigger($.Event('keydown', {
keyCode: 97
})); // numpad 1
$pillbox.find('.suggest > li').trigger('mousedown');
deepEqual($pillbox.pillbox('items')[0], {
text: 'Acai',
value: 'acai'
}, 'pillbox returns item added after user clicks suggestion');
$input.val('');
$input.trigger($.Event('keydown', {
keyCode: 97
})); // numpad 1
$input.trigger($.Event('keydown', {
keyCode: 40
})); // down
$input.trigger($.Event('keydown', {
keyCode: 13
})); // enter
deepEqual($pillbox.pillbox('items')[1], {
text: 'Acai',
value: 'acai'
}, 'pillbox returns item added after user keys down to suggestions');
$input.val('');
$input.trigger($.Event('keydown', {
keyCode: 97
})); // numpad 1
$input.trigger($.Event('keydown', {
keyCode: 38
})); // up
$input.trigger($.Event('keydown', {
keyCode: 13
})); // enter
deepEqual($pillbox.pillbox('items')[2], {
text: 'Acai',
value: 'acai'
}, 'pillbox returns item added after user keys up to suggestion');
$input.val('');
$input.trigger($.Event('keydown', {
keyCode: 97
})); // numpad 1
$input.trigger($.Event('keydown', {
keyCode: 9
})); // tab
$input.trigger($.Event('keydown', {
keyCode: 13
})); // enter
deepEqual($pillbox.pillbox('items')[3], {
text: 'Acai',
value: 'acai'
}, 'pillbox returns item added after user tabs down to suggestion');
equal($pillbox.pillbox('items').length, 4, 'pillbox removed an item');
});
test('Edit functionality should behave as designed', function() {
var $pillbox = $(html).find('#MyPillbox').pillbox({
edit: true
});
var $ul = $pillbox.find('.pill-group');
var $input = $pillbox.find('.pillbox-add-item');
$pillbox.find('.pill-group > li:first span:first').click();
equal($ul.children().eq(0).hasClass('pillbox-input-wrap'), true, 'pillbox item enters edit mode');
$input.trigger('blur');
equal($ul.children().eq(0).hasClass('pillbox-input-wrap'), false, 'pillbox item exits edit mode');
$pillbox.find('.pill-group > li:first span:first').click();
$input.val('test edit');
$input.trigger($.Event('keydown', {
keyCode: 13
}));
deepEqual($pillbox.pillbox('items')[0], {
text: 'test edit',
value: 'test edit'
}, 'pillbox item was able to be edited');
});
test('Triggers behave as designed', function() {
var $pillbox = $(html).find('#MyPillbox').pillbox({
edit: true
});
var $input = $pillbox.find('.pillbox-add-item');
$pillbox.on('clicked.fu.pillbox', function(ev, item) {
deepEqual(item, {
text: 'Item 1',
value: 'foo'
}, 'clicked event is triggered');
});
$pillbox.find('> ul > li:first span:first').click();
$pillbox.off('clicked.fu.pillbox');
$pillbox.on('added.fu.pillbox', function(ev, item) {
deepEqual(item, {
text: 'added test',
value: 'added test'
}, 'added event is triggered');
});
$input.val('added test');
$input.trigger($.Event('keydown', {
keyCode: 13
}));
$pillbox.off('added.fu.pillbox');
$pillbox.on('removed.fu.pillbox', function(ev, item) {
deepEqual(item, {
text: 'added test',
value: 'added test'
}, 'removed event is triggered');
});
$pillbox.find('> ul > li:first > span:last').click();
$pillbox.off('removed.fu.pillbox');
$pillbox = $(html).pillbox({
edit: true
});
$pillbox.on('edited.fu.pillbox', function(ev, item) {
deepEqual(item, {
text: 'edit test',
value: 'edit test'
}, 'edit event is triggered');
});
$pillbox.find('> ul > li:first').click();
$input.val('edit test');
$input.trigger($.Event('keydown', {
keyCode: 13
}));
});
test('Readonly behaves as designed', function() {
var $pillbox;
$pillbox = $(html).find('#MyPillbox');
$pillbox.attr('data-readonly', 'readonly');
$pillbox.pillbox();
$pillbox.find('.pill:last > span:last').click();
equal($pillbox.pillbox('items').length, 5, 'pillbox correctly in readonly mode via data api');
$pillbox = $(html).find('#MyPillbox');
$pillbox.pillbox({
readonly: true
});
$pillbox.find('.pill:last > span:last').click();
equal($pillbox.pillbox('items').length, 5, 'pillbox correctly in readonly mode via init option');
$pillbox.pillbox('readonly', false);
$pillbox.find('.pill:last > span:last').click();
equal($pillbox.pillbox('items').length, 4, 'pillbox readonly mode disabled via method as appropriate');
$pillbox.pillbox('readonly', true);
$pillbox.find('.pill:last > span:last').click();
equal($pillbox.pillbox('items').length, 4, 'pillbox readonly mode enabled via method as appropriate');
});
//TODO: how can I test this one properly? O.o
test('Truncate behaves as designed', function() {
var $pillbox;
$pillbox = $(html).find('#MyPillbox');
$pillbox.width(100);
$('body').append($pillbox);
$pillbox.pillbox({
readonly: true,
truncate: true
});
equal($pillbox.find('.pill.truncated').length, 5, 'pillbox truncate functioning correctly while in readonly');
$pillbox.pillbox('readonly', false);
equal($pillbox.find('.pill.truncated').length, 0, 'pillbox truncate not enabled while not readonly');
$pillbox.remove();
});
test('should destroy control', function() {
var $el = $(html).find('#MyPillbox');
equal(typeof ($el.pillbox('destroy')), 'string', 'returns string (markup)');
equal($el.parent().length, false, 'control has been removed from DOM');
});
});