module('Selection containers - Placeholders - Allow clear');

var Placeholder = require('select2/selection/placeholder'); var AllowClear = require('select2/selection/allowClear');

var SingleSelection = require('select2/selection/single');

var $ = require('jquery'); var Options = require('select2/options'); var Utils = require('select2/utils');

var AllowClearPlaceholder = Utils.Decorate(

Utils.Decorate(SingleSelection, Placeholder),
AllowClear

);

var allowClearOptions = new Options({

placeholder: {
  id: 'placeholder',
  text: 'This is the placeholder'
},
allowClear: true

});

test('clear is not displayed for single placeholder', function (assert) {

var selection = new AllowClearPlaceholder(
  $('#qunit-fixture .single-with-placeholder'),
  allowClearOptions
);

var $selection = selection.render();

selection.update([{
  id: 'placeholder'
}]);

assert.equal(
  $selection.find('.select2-selection__clear').length,
  0,
  'The clear icon should not be displayed'
);

});

test('clear is not displayed for multiple placeholder', function (assert) {

var selection = new AllowClearPlaceholder(
  $('#qunit-fixture .single-with-placeholder'),
  allowClearOptions
);

var $selection = selection.render();

selection.update([]);

assert.equal(
  $selection.find('.select2-selection__clear').length,
  0,
  'The clear icon should not be displayed'
);

});

test('clear is displayed for placeholder', function (assert) {

var selection = new AllowClearPlaceholder(
  $('#qunit-fixture .single-with-placeholder'),
  allowClearOptions
);

var $selection = selection.render();

selection.update([{
  id: 'one',
  test: 'one'
}]);

assert.equal(
  $selection.find('.select2-selection__clear').length,
  1,
  'The clear icon should be displayed'
);

});

test('clicking clear will set the placeholder value', function (assert) {

var $element = $('#qunit-fixture .single-with-placeholder');

var selection = new AllowClearPlaceholder(
  $element,
  allowClearOptions
);
var container = new MockContainer();

var $selection = selection.render();

selection.bind(container, $('<div></div'));

$element.val('One');
selection.update([{
  id: 'One',
  text: 'One'
}]);

var $remove = $selection.find('.select2-selection__clear');
$remove.trigger('mousedown');

assert.equal(
  $element.val(),
  'placeholder',
  'The value should have been reset to the placeholder'
);

});

test('clicking clear will trigger the unselect event', function (assert) {

assert.expect(3);

var $element = $('#qunit-fixture .single-with-placeholder');

var selection = new AllowClearPlaceholder(
  $element,
  allowClearOptions
);
var container = new MockContainer();

var $selection = selection.render();

selection.bind(container, $('<div></div'));

$element.val('One');
selection.update([{
  id: 'One',
  text: 'One'
}]);

selection.on('unselect', function (ev) {
  assert.ok(
    'data' in ev && ev.data,
    'The event should have been triggered with the data property'
  );

  assert.ok(
    $.isPlainObject(ev.data),
    'The data should be an object'
  );

  assert.equal(
    ev.data.id,
    'One',
    'The previous object should be unselected'
  );
});

var $remove = $selection.find('.select2-selection__clear');
$remove.trigger('mousedown');

});

test('preventing the unselect event cancels the clearing', function (assert) {

var $element = $('#qunit-fixture .single-with-placeholder');

var selection = new AllowClearPlaceholder(
  $element,
  allowClearOptions
);
var container = new MockContainer();

var $selection = selection.render();

selection.bind(container, $('<div></div'));

$element.val('One');
selection.update([{
  id: 'One',
  text: 'One'
}]);

selection.on('unselect', function (ev) {
  ev.prevented = true;
});

var $remove = $selection.find('.select2-selection__clear');
$remove.trigger('mousedown');

assert.equal(
  $element.val(),
  'One',
  'The placeholder should not have been set'
);

});

test('clear does not work when disabled', function (assert) {

var $element = $('#qunit-fixture .single-with-placeholder');

var selection = new AllowClearPlaceholder(
  $element,
  allowClearOptions
);
var container = new MockContainer();

var $selection = selection.render();

selection.bind(container, $('<div></div'));

selection.update([{
  id: 'One',
  text: 'One'
}]);

$element.val('One');
selection.options.set('disabled', true);

var $remove = $selection.find('.select2-selection__clear');
$remove.trigger('mousedown');

assert.equal(
  $element.val(),
  'One',
  'The placeholder should not have been set'
);

});