Add tests for detecting added and removed options

This adds tests for ea79a197e0ffe55aa600eed6d18cbd1c804c3176.

tests/integration.html

@@ -14,6 +14,7 @@
 
     <script src="helpers.js" type="text/javascript"></script>
 
+    <script src="integration/dom-changes.js" type="text/javascript"></script>
     <script src="integration/jquery-calls.js" type="text/javascript"></script>
     <script src="integration/select2-methods.js" type="text/javascript"></script>
   </body>

tests/integration/dom-changes.js

@@ -0,0 +1,257 @@
+module('DOM integration');
+
+test('adding a new unselected option changes nothing', function (assert) {
+  // Any browsers which support mutation observers will not trigger the event
+  var expected = 4;
+  if (window.MutationObserver) {
+    expected = 2;
+  } else if (!window.addEventListener) {
+    expected = 2;
+  }
+
+  assert.expect(expected);
+
+  var asyncDone = null;
+  var syncDone = assert.async();
+
+  if (expected != 2) {
+    asyncDone = assert.async();
+  }
+
+  var $ = require('jquery');
+  var Options = require('select2/options');
+  var Select2 = require('select2/core');
+
+  var $select = $(
+    '<select>' +
+      '<option>One</option>' +
+      '<option>Two</option>' +
+    '</select>'
+  );
+
+  $('#qunit-fixture').append($select);
+
+  var select = new Select2($select);
+
+  select.on('selection:update', function (args) {
+    assert.equal(
+      args.data.length,
+      1,
+      'There was more than one selection'
+    );
+
+    assert.equal(
+      args.data[0].id,
+      'One',
+      'The selection changed to something other than One'
+    );
+
+    if (expected != 2) {
+      asyncDone();
+    }
+  });
+
+  assert.equal(
+    $select.val(),
+    'One'
+  );
+
+  var $option = $('<option>Three</option>');
+
+  $select.append($option);
+
+  assert.equal(
+    $select.val(),
+    'One'
+  );
+
+  syncDone();
+});
+
+test('adding a new selected option changes the value', function (assert) {
+  // handle IE 8 not being supported
+  var expected = 4;
+  if (!window.MutationObserver && !window.addEventListener) {
+    expected = 2;
+  }
+
+  assert.expect(expected);
+
+  var asyncDone = null;
+  var syncDone = assert.async();
+
+  if (expected != 2) {
+    asyncDone = assert.async();
+  }
+
+  var $ = require('jquery');
+  var Options = require('select2/options');
+  var Select2 = require('select2/core');
+
+  var $select = $(
+    '<select>' +
+      '<option>One</option>' +
+      '<option>Two</option>' +
+    '</select>'
+  );
+
+  $('#qunit-fixture').append($select);
+
+  var select = new Select2($select);
+
+  select.on('selection:update', function (args) {
+    assert.equal(
+      args.data.length,
+      1,
+      'There was more than one selection'
+    );
+
+    assert.equal(
+      args.data[0].id,
+      'Three',
+      'The selection did not change to Three'
+    );
+
+    if (expected != 2) {
+      asyncDone();
+    }
+  });
+
+  assert.equal(
+    $select.val(),
+    'One'
+  );
+
+  var $option = $('<option selected>Three</option>');
+
+  $select.append($option);
+
+  assert.equal(
+    $select.val(),
+    'Three'
+  );
+
+  syncDone();
+});
+
+test('removing an unselected option changes nothing', function (assert) {
+  // Any browsers which support mutation observers will not trigger the event
+  var expected = 4;
+  if (!window.MutationObserver && !window.addEventListener) {
+    expected = 2;
+  }
+
+  assert.expect(expected);
+
+  var asyncDone = null;
+  var syncDone = assert.async();
+
+  if (expected != 2) {
+    asyncDone = assert.async();
+  }
+
+  var $ = require('jquery');
+  var Options = require('select2/options');
+  var Select2 = require('select2/core');
+
+  var $select = $(
+    '<select>' +
+      '<option>One</option>' +
+      '<option>Two</option>' +
+    '</select>'
+  );
+
+  $('#qunit-fixture').append($select);
+
+  var select = new Select2($select);
+
+  select.on('selection:update', function (args) {
+    assert.equal(
+      args.data.length,
+      1,
+      'There was more than one selection'
+    );
+
+    assert.equal(
+      args.data[0].id,
+      'One',
+      'The selection changed to something other than One'
+    );
+
+    if (expected != 2) {
+      asyncDone();
+    }
+  });
+
+  assert.equal(
+    $select.val(),
+    'One'
+  );
+
+  $select.children().eq(1).remove();
+
+  assert.equal(
+    $select.val(),
+    'One'
+  );
+
+  syncDone();
+});
+
+test('removing a selected option changes the value', function (assert) {
+  // handle IE 8 not being supported
+  var expected = 3;
+  if (!window.MutationObserver && !window.addEventListener) {
+    expected = 2;
+  }
+
+  assert.expect(expected);
+
+  var asyncDone = null;
+  var syncDone = assert.async();
+
+  if (expected != 2) {
+    asyncDone = assert.async();
+  }
+
+  var $ = require('jquery');
+  var Options = require('select2/options');
+  var Select2 = require('select2/core');
+
+  var $select = $(
+    '<select>' +
+      '<option>One</option>' +
+      '<option>Two</option>' +
+    '</select>'
+  );
+
+  $('#qunit-fixture').append($select);
+
+  var select = new Select2($select);
+
+  select.on('selection:update', function (args) {
+    assert.equal(
+      args.data.length,
+      1,
+      'There was more than one selection'
+    );
+
+    if (expected != 2) {
+      asyncDone();
+    }
+  });
+
+  assert.equal(
+    $select.val(),
+    'One'
+  );
+
+  $select.children().eq(0).remove();
+
+  assert.equal(
+    $select.val(),
+    'Two'
+  );
+
+  syncDone();
+});

tests/integration/jquery-calls.js

@@ -1,3 +1,5 @@
+module('select2(val)');
+
 test('multiple elements with arguments works', function (assert) {
   var $ = require('jquery');
   require('jquery.select2');