html-pipeline-task_list 0.0.1

data/test/run-qunit.js

@@ -0,0 +1,168 @@
+/* global phantom:false, require:false, console:false, window:false, QUnit:false */
+
+(function () {
+    'use strict';
+
+    var url, page, timeout,
+        args = require('system').args;
+
+    // arg[0]: scriptName, args[1...]: arguments
+    if (args.length < 2) {
+        console.error('Usage:\n  phantomjs [phantom arguments] runner.js [url-of-your-qunit-testsuite] [timeout-in-seconds] [page-properties]');
+        exit(1);
+    }
+
+    url = args[1];
+
+    if (args[2] !== undefined) {
+        timeout = parseInt(args[2], 10);
+    }
+
+    page = require('webpage').create();
+
+    if (args[3] !== undefined) {
+        try {
+            var pageProperties = JSON.parse(args[3]);
+
+            if (pageProperties) {
+                for (var prop in pageProperties) {
+                    if (pageProperties.hasOwnProperty(prop)) {
+                        page[prop] = pageProperties[prop];
+                    }
+                }
+            }
+        } catch (e) {
+            console.error('Error parsing "' + args[3] + '": ' + e);
+        }
+    }
+
+    // Route `console.log()` calls from within the Page context to the main Phantom context (i.e. current `this`)
+    page.onConsoleMessage = function (msg) {
+        console.log(msg);
+    };
+
+    page.onInitialized = function () {
+        page.evaluate(addLogging);
+    };
+
+    page.onCallback = function (message) {
+        var result,
+            failed;
+
+        if (message) {
+            if (message.name === 'QUnit.done') {
+                result = message.data;
+                failed = !result || !result.total || result.failed;
+
+                if (!result.total) {
+                    console.error('No tests were executed. Are you loading tests asynchronously?');
+                }
+
+                exit(failed ? 1 : 0);
+            }
+        }
+    };
+
+    page.open(url, function (status) {
+        if (status !== 'success') {
+            console.error('Unable to access network: ' + status);
+            exit(1);
+        } else {
+            // Cannot do this verification with the 'DOMContentLoaded' handler because it
+            // will be too late to attach it if a page does not have any script tags.
+            var qunitMissing = page.evaluate(function () {
+                return (typeof QUnit === 'undefined' || !QUnit);
+            });
+
+            if (qunitMissing) {
+                console.error('The `QUnit` object is not present on this page.');
+                exit(1);
+            }
+
+            // Set a default timeout value if the user does not provide one
+            if (typeof timeout === 'undefined') {
+                timeout = 5;
+            }
+
+            // Set a timeout on the test running, otherwise tests with async problems will hang forever
+            setTimeout(function () {
+                console.error('The specified timeout of ' + timeout + ' seconds has expired. Aborting...');
+                exit(1);
+            }, timeout * 1000);
+
+            // Do nothing... the callback mechanism will handle everything!
+        }
+    });
+
+    function addLogging() {
+        window.document.addEventListener('DOMContentLoaded', function () {
+            var currentTestAssertions = [];
+
+            QUnit.log(function (details) {
+                var response;
+
+                // Ignore passing assertions
+                if (details.result) {
+                    return;
+                }
+
+                response = details.message || '';
+
+                if (typeof details.expected !== 'undefined') {
+                    if (response) {
+                        response += ', ';
+                    }
+
+                    response += 'expected: ' + details.expected + ', but was: ' + details.actual;
+                }
+
+                if (details.source) {
+                    response += '\n' + details.source;
+                }
+
+                currentTestAssertions.push('Failed assertion: ' + response);
+            });
+
+            QUnit.testDone(function (result) {
+                var i,
+                    len,
+                    name = '';
+
+                if (result.module) {
+                    name += result.module + ': ';
+                }
+                name += result.name;
+
+                if (result.failed) {
+                    console.log('\n' + 'Test failed: ' + name);
+
+                    for (i = 0, len = currentTestAssertions.length; i < len; i++) {
+                        console.log('    ' + currentTestAssertions[i]);
+                    }
+                }
+
+                currentTestAssertions.length = 0;
+            });
+
+            QUnit.done(function (result) {
+                console.log('\n' + 'Took ' + result.runtime + 'ms to run ' + result.total + ' tests. ' + result.passed + ' passed, ' + result.failed + ' failed.');
+
+                if (typeof window.callPhantom === 'function') {
+                    window.callPhantom({
+                        'name': 'QUnit.done',
+                        'data': result
+                    });
+                }
+            });
+        }, false);
+    }
+
+    function exit(code) {
+        if (page) {
+            page.close();
+        }
+        setTimeout(function () {
+            phantom.exit(code);
+        }, 0);
+    }
+})();

data/test/server.js

@@ -0,0 +1,51 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+
+process.on('uncaughtException', err => console.error('uncaughtException', err))
+process.on('unhandledRejection', err => console.error('unhandledRejection', err))
+
+const publicFolder = process.argv.length > 2 ? process.argv[2] : '.'
+const port = process.argv.length > 3 ? process.argv[3] : 3000
+
+const mediaTypes = {
+    css: 'text/css',
+    html: 'text/html',
+    js: 'text/javascript'
+  }
+
+  const server = http.createServer(function(request, response) {
+    console.log(request.method + ' ' + request.url)
+
+    if (request.url == '/update') {
+      response.statusCode = 200;
+      response.setHeader('Access-Control-Allow-Origin', '*');
+      response.setHeader('Content-Type', 'application/json');
+      return response.end('{}');
+    }
+    const filepath = path.join(publicFolder, request.url)
+    fs.readFile(filepath, function(err, data) {
+      if (err) {
+        response.statusCode = 404
+        return response.end('File not found or you made an invalid request.')
+      }
+
+      let mediaType = 'text/html'
+      const ext = path.extname(filepath)
+      if (ext.length > 0 && mediaTypes.hasOwnProperty(ext.slice(1))) {
+        mediaType = mediaTypes[ext.slice(1)]
+      }
+
+      response.setHeader('Content-Type', mediaType)
+      response.end(data)
+    })
+  })
+
+  server.on('clientError', function onClientError(err, socket) {
+    console.log('clientError', err)
+    socket.end('HTTP/1.1 400 Bad Request\r\n\r\n')
+  })
+
+  server.listen(port, '127.0.0.1', function() {
+    console.log('👨‍🔧 Development server is online.')
+  })

data/test/test_helper.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+$LOAD_PATH.unshift 'lib'
+require 'minitest/autorun'
+require 'html/pipeline/task_list'

data/test/unit/events_test.js

@@ -0,0 +1,106 @@
+// ./test/unit/test_events.js
+
+QUnit.module("TaskList events", {
+  beforeEach: function() {
+    this.container = $('<div>', {
+      "class": 'js-task-list-container'
+    });
+    this.list = $('<ul>', {
+      "class": 'task-list'
+    });
+    this.item = $('<li>', {
+      "class": 'task-list-item'
+    });
+    this.checkbox = $('<input>', {
+      type: 'checkbox',
+      "class": 'task-list-item-checkbox',
+      disabled: true,
+      checked: false
+    });
+    this.field = $('<textarea>', {
+      "class": 'js-task-list-field'
+    }, "- [ ] text");
+    this.item.append(this.checkbox);
+    this.list.append(this.item);
+    this.container.append(this.list);
+    this.container.append(this.field);
+    $('#qunit-fixture').append(this.container);
+    return this.container.taskList();
+  },
+  afterEach: function() {
+    $(document).off('tasklist:enabled');
+    $(document).off('tasklist:disabled');
+    $(document).off('tasklist:change');
+    return $(document).off('tasklist:changed');
+  }
+});
+
+QUnit.test("triggers a tasklist:change event before making task list item changes", function( assert ) {
+  var done = assert.async();
+  assert.expect(1);
+  this.field.on('tasklist:change', function(event, index, checked) {
+    return assert.ok(true);
+  });
+  setTimeout(function() {
+    done();
+  }, 20);
+  return this.checkbox.click();
+});
+
+QUnit.test("triggers a tasklist:changed event once a task list item changes", function( assert ) {
+  var done = assert.async();
+  assert.expect(1);
+  this.field.on('tasklist:changed', function(event, index, checked) {
+    return assert.ok(true);
+  });
+  setTimeout(function() {
+    done();
+  }, 20);
+  return this.checkbox.click();
+});
+
+QUnit.test("can cancel a tasklist:changed event", function( assert ) {
+  var initial;
+  var done = assert.async();
+  assert.expect(2);
+  this.field.on('tasklist:change', function(event, index, checked) {
+    assert.ok(true);
+    return event.preventDefault();
+  });
+  this.field.on('tasklist:changed', function(event, index, checked) {
+    return assert.ok(false);
+  });
+  initial = this.checkbox.val();
+  setTimeout((function(_this) {
+    return function() {
+      assert.equal(initial, _this.checkbox.val());
+      done();
+    };
+  })(this), 20);
+  return this.checkbox.click();
+});
+
+QUnit.test("enables task list items when a .js-task-list-field is present", function( assert ) {
+  var done = assert.async();
+  assert.expect(1);
+  $(document).on('tasklist:enabled', function(event) {
+    return assert.ok(true);
+  });
+  this.container.taskList();
+  return setTimeout(function() {
+    done();
+  }, 20);
+});
+
+QUnit.test("doesn't enable task list items when a .js-task-list-field is absent", function( assert ) {
+  var done = assert.async();
+  assert.expect(0);
+  $(document).on('tasklist:enabled', function(event) {
+    return assert.ok(true);
+  });
+  this.field.remove();
+  this.container.taskList();
+  return setTimeout(function() {
+    done();
+  }, 20);
+});

data/test/unit/updates_test.js

@@ -0,0 +1,476 @@
+// ./test/unit/test_updates.js
+
+QUnit.module("TaskList updates", {
+  beforeEach: function() {
+    this.container = $('<div>', {
+      "class": 'js-task-list-container'
+    });
+    this.list = $('<ul>', {
+      "class": 'task-list'
+    });
+    this.completeItem = $('<li>', {
+      "class": 'task-list-item'
+    });
+    this.completeCheckbox = $('<input>', {
+      type: 'checkbox',
+      "class": 'task-list-item-checkbox',
+      disabled: true,
+      checked: true
+    });
+    this.incompleteItem = $('<li>', {
+      "class": 'task-list-item'
+    });
+    this.incompleteCheckbox = $('<input>', {
+      type: 'checkbox',
+      "class": 'task-list-item-checkbox',
+      disabled: true,
+      checked: false
+    });
+    this.nbsp = String.fromCharCode(160);
+    this.incompleteNBSPItem = $('<li>', {
+      "class": 'task-list-item'
+    });
+    this.incompleteNBSPCheckbox = $('<input>', {
+      type: 'checkbox',
+      "class": 'task-list-item-checkbox',
+      disabled: true,
+      checked: false
+    });
+    this.blockquote = $('<blockquote>');
+    this.quotedList = $('<ul>', {
+      "class": 'task-list'
+    });
+    this.quotedCompleteItem = $('<li>', {
+      "class": 'task-list-item'
+    });
+    this.quotedCompleteCheckbox = $('<input>', {
+      type: 'checkbox',
+      "class": 'task-list-item-checkbox',
+      disabled: true,
+      checked: true
+    });
+    this.quotedIncompleteItem = $('<li>', {
+      "class": 'task-list-item'
+    });
+    this.quotedIncompleteCheckbox = $('<input>', {
+      type: 'checkbox',
+      "class": 'task-list-item-checkbox',
+      disabled: true,
+      checked: false
+    });
+    this.innerBlockquote = $('<blockquote>');
+    this.innerList = $('<ul>', {
+      "class": 'task-list'
+    });
+    this.innerCompleteItem = $('<li>', {
+      "class": 'task-list-item'
+    });
+    this.innerCompleteCheckbox = $('<input>', {
+      type: 'checkbox',
+      "class": 'task-list-item-checkbox',
+      disabled: true,
+      checked: true
+    });
+    this.innerIncompleteItem = $('<li>', {
+      "class": 'task-list-item'
+    });
+    this.innerIncompleteCheckbox = $('<input>', {
+      type: 'checkbox',
+      "class": 'task-list-item-checkbox',
+      disabled: true,
+      checked: false
+    });
+    this.orderedList = $('<ol>', {
+      "class": 'task-list'
+    });
+    this.orderedCompleteItem = $('<li>', {
+      "class": 'task-list-item'
+    });
+    this.orderedCompleteCheckbox = $('<input>', {
+      type: 'checkbox',
+      "class": 'task-list-item-checkbox',
+      disabled: true,
+      checked: true
+    });
+    this.orderedIncompleteItem = $('<li>', {
+      "class": 'task-list-item'
+    });
+    this.orderedIncompleteCheckbox = $('<input>', {
+      type: 'checkbox',
+      "class": 'task-list-item-checkbox',
+      disabled: true,
+      checked: false
+    });
+    this.field = $('<textarea>', {
+      "class": 'js-task-list-field',
+      text: "- [x] complete\n- [ ] incomplete\n- [" + this.nbsp + "] incompleteNBSP\n> - [x] quoted complete\n> - [ ] quoted incomplete\n>> - [x] inner complete\n> > - [ ] inner incomplete\n> 0. [x] ordered complete\n> 0. [ ] ordered incomplete"
+    });
+    this.changes = {
+      toComplete: "- [ ] complete\n- [ ] incomplete\n- [" + this.nbsp + "] incompleteNBSP\n> - [x] quoted complete\n> - [ ] quoted incomplete\n>> - [x] inner complete\n> > - [ ] inner incomplete\n> 0. [x] ordered complete\n> 0. [ ] ordered incomplete",
+      toQuotedComplete: "- [x] complete\n- [ ] incomplete\n- [" + this.nbsp + "] incompleteNBSP\n> - [ ] quoted complete\n> - [ ] quoted incomplete\n>> - [x] inner complete\n> > - [ ] inner incomplete\n> 0. [x] ordered complete\n> 0. [ ] ordered incomplete",
+      toInnerComplete: "- [x] complete\n- [ ] incomplete\n- [" + this.nbsp + "] incompleteNBSP\n> - [x] quoted complete\n> - [ ] quoted incomplete\n>> - [ ] inner complete\n> > - [ ] inner incomplete\n> 0. [x] ordered complete\n> 0. [ ] ordered incomplete",
+      toOrderedComplete: "- [x] complete\n- [ ] incomplete\n- [" + this.nbsp + "] incompleteNBSP\n> - [x] quoted complete\n> - [ ] quoted incomplete\n>> - [x] inner complete\n> > - [ ] inner incomplete\n> 0. [ ] ordered complete\n> 0. [ ] ordered incomplete",
+      toIncomplete: "- [x] complete\n- [x] incomplete\n- [" + this.nbsp + "] incompleteNBSP\n> - [x] quoted complete\n> - [ ] quoted incomplete\n>> - [x] inner complete\n> > - [ ] inner incomplete\n> 0. [x] ordered complete\n> 0. [ ] ordered incomplete",
+      toQuotedIncomplete: "- [x] complete\n- [ ] incomplete\n- [" + this.nbsp + "] incompleteNBSP\n> - [x] quoted complete\n> - [x] quoted incomplete\n>> - [x] inner complete\n> > - [ ] inner incomplete\n> 0. [x] ordered complete\n> 0. [ ] ordered incomplete",
+      toInnerIncomplete: "- [x] complete\n- [ ] incomplete\n- [" + this.nbsp + "] incompleteNBSP\n> - [x] quoted complete\n> - [ ] quoted incomplete\n>> - [x] inner complete\n> > - [x] inner incomplete\n> 0. [x] ordered complete\n> 0. [ ] ordered incomplete",
+      toOrderedIncomplete: "- [x] complete\n- [ ] incomplete\n- [" + this.nbsp + "] incompleteNBSP\n> - [x] quoted complete\n> - [ ] quoted incomplete\n>> - [x] inner complete\n> > - [ ] inner incomplete\n> 0. [x] ordered complete\n> 0. [x] ordered incomplete",
+      toIncompleteNBSP: "- [x] complete\n- [ ] incomplete\n- [x] incompleteNBSP\n> - [x] quoted complete\n> - [ ] quoted incomplete\n>> - [x] inner complete\n> > - [ ] inner incomplete\n> 0. [x] ordered complete\n> 0. [ ] ordered incomplete"
+    };
+    this.completeItem.append(this.completeCheckbox);
+    this.list.append(this.completeItem);
+    this.completeItem.expectedIndex = 1;
+    this.incompleteItem.append(this.incompleteCheckbox);
+    this.list.append(this.incompleteItem);
+    this.incompleteItem.expectedIndex = 2;
+    this.incompleteNBSPItem.append(this.incompleteNBSPCheckbox);
+    this.list.append(this.incompleteNBSPItem);
+    this.incompleteNBSPItem.expectedIndex = 3;
+    this.container.append(this.list);
+    this.container.append(this.field);
+    this.quotedCompleteItem.append(this.quotedCompleteCheckbox);
+    this.quotedList.append(this.quotedCompleteItem);
+    this.quotedCompleteItem.expectedIndex = 4;
+    this.quotedIncompleteItem.append(this.quotedIncompleteCheckbox);
+    this.quotedList.append(this.quotedIncompleteItem);
+    this.quotedIncompleteItem.expectedIndex = 5;
+    this.blockquote.append(this.quotedList);
+    this.innerCompleteItem.append(this.innerCompleteCheckbox);
+    this.innerList.append(this.innerCompleteItem);
+    this.innerCompleteItem.expectedIndex = 6;
+    this.innerIncompleteItem.append(this.innerIncompleteCheckbox);
+    this.innerList.append(this.innerIncompleteItem);
+    this.innerIncompleteItem.expectedIndex = 7;
+    this.innerBlockquote.append(this.innerList);
+    this.innerBlockquote.append(this.innerField);
+    this.blockquote.append(this.innerBlockquote);
+    this.container.append(this.blockquote);
+    this.orderedCompleteItem.append(this.orderedCompleteCheckbox);
+    this.orderedList.append(this.orderedCompleteItem);
+    this.orderedCompleteItem.expectedIndex = 8;
+    this.orderedIncompleteItem.append(this.orderedIncompleteCheckbox);
+    this.orderedList.append(this.orderedIncompleteItem);
+    this.orderedIncompleteItem.expectedIndex = 9;
+    this.container.append(this.orderedList);
+    this.blockquote.append(this.field);
+    $('#qunit-fixture').append(this.container);
+    return this.container.taskList();
+  },
+  afterEach: function() {
+    return $(document).off('tasklist:changed');
+  }
+});
+
+QUnit.test("updates the source, marking the incomplete item as complete", function( assert ) {
+  var done = assert.async();
+  assert.expect(3);
+  this.field.on('tasklist:changed', (function(_this) {
+    return function(event, index, checked) {
+      assert.ok(checked);
+      assert.equal(index, _this.incompleteItem.expectedIndex);
+      return assert.equal(_this.field.val(), _this.changes.toIncomplete);
+    };
+  })(this));
+  setTimeout(function() {
+    done();
+  }, 20);
+  return this.incompleteCheckbox.click();
+});
+
+QUnit.test("updates the source, marking the complete item as incomplete", function( assert ) {
+  var done = assert.async();
+  assert.expect(3);
+  this.field.on('tasklist:changed', (function(_this) {
+    return function(event, index, checked) {
+      assert.ok(!checked);
+      assert.equal(index, _this.completeItem.expectedIndex);
+      return assert.equal(_this.field.val(), _this.changes.toComplete);
+    };
+  })(this));
+  setTimeout(function() {
+    done();
+  }, 20);
+  return this.completeCheckbox.click();
+});
+
+QUnit.test("updates the source for items with non-breaking spaces", function( assert ) {
+  var done = assert.async();
+  assert.expect(3);
+  this.field.on('tasklist:changed', (function(_this) {
+    return function(event, index, checked) {
+      assert.ok(checked);
+      assert.equal(index, _this.incompleteNBSPItem.expectedIndex);
+      return assert.equal(_this.field.val(), _this.changes.toIncompleteNBSP);
+    };
+  })(this));
+  setTimeout(function() {
+    done();
+  }, 20);
+  return this.incompleteNBSPCheckbox.click();
+});
+
+QUnit.test("updates the source of a quoted item, marking the incomplete item as complete", function( assert ) {
+  var done = assert.async();
+  assert.expect(3);
+  this.field.on('tasklist:changed', (function(_this) {
+    return function(event, index, checked) {
+      assert.ok(checked);
+      assert.equal(index, _this.quotedIncompleteItem.expectedIndex);
+      return assert.equal(_this.field.val(), _this.changes.toQuotedIncomplete);
+    };
+  })(this));
+  setTimeout(function() {
+    done();
+  }, 20);
+  return this.quotedIncompleteCheckbox.click();
+});
+
+QUnit.test("updates the source of a quoted item, marking the complete item as incomplete", function( assert ) {
+  var done = assert.async();
+  assert.expect(3);
+  this.field.on('tasklist:changed', (function(_this) {
+    return function(event, index, checked) {
+      assert.ok(!checked);
+      assert.equal(index, _this.quotedCompleteItem.expectedIndex);
+      return assert.equal(_this.field.val(), _this.changes.toQuotedComplete);
+    };
+  })(this));
+  setTimeout(function() {
+    done();
+  }, 20);
+  return this.quotedCompleteCheckbox.click();
+});
+
+QUnit.test("updates the source of a quoted quoted item, marking the incomplete item as complete", function( assert ) {
+  var done = assert.async();
+  assert.expect(3);
+  this.field.on('tasklist:changed', (function(_this) {
+    return function(event, index, checked) {
+      assert.ok(checked);
+      assert.equal(index, _this.innerIncompleteItem.expectedIndex);
+      return assert.equal(_this.field.val(), _this.changes.toInnerIncomplete);
+    };
+  })(this));
+  setTimeout(function() {
+    done();
+  }, 20);
+  return this.innerIncompleteCheckbox.click();
+});
+
+QUnit.test("updates the source of a quoted quoted item, marking the complete item as incomplete", function( assert ) {
+  var done = assert.async();
+  assert.expect(3);
+  this.field.on('tasklist:changed', (function(_this) {
+    return function(event, index, checked) {
+      assert.ok(!checked);
+      assert.equal(index, _this.innerCompleteItem.expectedIndex);
+      return assert.equal(_this.field.val(), _this.changes.toInnerComplete);
+    };
+  })(this));
+  setTimeout(function() {
+    done();
+  }, 20);
+  return this.innerCompleteCheckbox.click();
+});
+
+QUnit.test("updates the source of an ordered list item, marking the incomplete item as complete", function( assert ) {
+  var done = assert.async();
+  assert.expect(3);
+  this.field.on('tasklist:changed', (function(_this) {
+    return function(event, index, checked) {
+      assert.ok(checked);
+      assert.equal(index, _this.orderedIncompleteItem.expectedIndex);
+      return assert.equal(_this.field.val(), _this.changes.toOrderedIncomplete);
+    };
+  })(this));
+  setTimeout(function() {
+    done();
+  }, 20);
+  return this.orderedIncompleteCheckbox.click();
+});
+
+QUnit.test("updates the source of an ordered list item, marking the complete item as incomplete", function( assert ) {
+  var done = assert.async();
+  assert.expect(3);
+  this.field.on('tasklist:changed', (function(_this) {
+    return function(event, index, checked) {
+      assert.ok(!checked);
+      assert.equal(index, _this.orderedCompleteItem.expectedIndex);
+      return assert.equal(_this.field.val(), _this.changes.toOrderedComplete);
+    };
+  })(this));
+  setTimeout(function() {
+    done();
+  }, 20);
+  return this.orderedCompleteCheckbox.click();
+});
+
+QUnit.test("update ignores items that look like Task List items but lack list prefix", function( assert ) {
+  var done = assert.async();
+  var changes, container, field, item1, item1Checkbox, item2, item2Checkbox, list;
+  assert.expect(3);
+  $('#qunit-fixture').empty();
+  container = $('<div>', {
+    "class": 'js-task-list-container'
+  });
+  list = $('<ul>', {
+    "class": 'task-list'
+  });
+  item1 = $('<li>', {
+    "class": 'task-list-item'
+  });
+  item1Checkbox = $('<input>', {
+    type: 'checkbox',
+    "class": 'task-list-item-checkbox',
+    disabled: true,
+    checked: false
+  });
+  item2 = $('<li>', {
+    "class": 'task-list-item'
+  });
+  item2Checkbox = $('<input>', {
+    type: 'checkbox',
+    "class": 'task-list-item-checkbox',
+    disabled: true,
+    checked: false
+  });
+  field = $('<textarea>', {
+    "class": 'js-task-list-field',
+    text: "[ ] one\n[ ] two\n- [ ] three\n- [ ] four"
+  });
+  changes = "[ ] one\n[ ] two\n- [ ] three\n- [x] four";
+  item1.append(item1Checkbox);
+  list.append(item1);
+  item1.expectedIndex = 1;
+  item2.append(item2Checkbox);
+  list.append(item2);
+  item2.expectedIndex = 2;
+  container.append(list);
+  container.append(field);
+  $('#qunit-fixture').append(container);
+  container.taskList();
+  field.on('tasklist:changed', (function(_this) {
+    return function(event, index, checked) {
+      assert.ok(checked);
+      assert.equal(index, item2.expectedIndex);
+      return assert.equal(field.val(), changes);
+    };
+  })(this));
+  setTimeout(function() {
+    done();
+  }, 20);
+  return item2Checkbox.click();
+});
+
+QUnit.test("update ignores items that look like Task List items but are links", function( assert ) {
+  var done = assert.async();
+  var changes, container, field, item1, item1Checkbox, item2, item2Checkbox, list;
+  assert.expect(3);
+  $('#qunit-fixture').empty();
+  container = $('<div>', {
+    "class": 'js-task-list-container'
+  });
+  list = $('<ul>', {
+    "class": 'task-list'
+  });
+  item1 = $('<li>', {
+    "class": 'task-list-item'
+  });
+  item1Checkbox = $('<input>', {
+    type: 'checkbox',
+    "class": 'task-list-item-checkbox',
+    disabled: true,
+    checked: false
+  });
+  item2 = $('<li>', {
+    "class": 'task-list-item'
+  });
+  item2Checkbox = $('<input>', {
+    type: 'checkbox',
+    "class": 'task-list-item-checkbox',
+    disabled: true,
+    checked: false
+  });
+  field = $('<textarea>', {
+    "class": 'js-task-list-field',
+    text: "- [ ] (link)\n- [ ] [reference]\n- [ ] () collapsed\n- [ ] [] collapsed reference\n- [ ] \\(escaped item)\n- [ ] item"
+  });
+  changes = "- [ ] (link)\n- [ ] [reference]\n- [ ] () collapsed\n- [ ] [] collapsed reference\n- [ ] \\(escaped item)\n- [x] item";
+  item1.append(item1Checkbox);
+  list.append(item1);
+  item1.expectedIndex = 1;
+  item2.append(item2Checkbox);
+  list.append(item2);
+  item2.expectedIndex = 2;
+  container.append(list);
+  container.append(field);
+  $('#qunit-fixture').append(container);
+  container.taskList();
+  field.on('tasklist:changed', (function(_this) {
+    return function(event, index, checked) {
+      assert.ok(checked);
+      assert.equal(index, item2.expectedIndex);
+      return assert.equal(field.val(), changes);
+    };
+  })(this));
+  setTimeout(function() {
+    done();
+  }, 20);
+  return item2Checkbox.click();
+});
+
+QUnit.test("updates items followed by links", function( assert ) {
+  var done = assert.async();
+  var changes, container, field, item1, item1Checkbox, item2, item2Checkbox, list;
+  assert.expect(3);
+  $('#qunit-fixture').empty();
+  container = $('<div>', {
+    "class": 'js-task-list-container'
+  });
+  list = $('<ul>', {
+    "class": 'task-list'
+  });
+  item1 = $('<li>', {
+    "class": 'task-list-item'
+  });
+  item1Checkbox = $('<input>', {
+    type: 'checkbox',
+    "class": 'task-list-item-checkbox',
+    disabled: true,
+    checked: false
+  });
+  item2 = $('<li>', {
+    "class": 'task-list-item'
+  });
+  item2Checkbox = $('<input>', {
+    type: 'checkbox',
+    "class": 'task-list-item-checkbox',
+    disabled: true,
+    checked: false
+  });
+  field = $('<textarea>', {
+    "class": 'js-task-list-field',
+    text: "- [ ] [link label](link)\n- [ ] [reference label][reference]"
+  });
+  changes = "- [ ] [link label](link)\n- [x] [reference label][reference]";
+  item1.append(item1Checkbox);
+  list.append(item1);
+  item1.expectedIndex = 1;
+  item2.append(item2Checkbox);
+  list.append(item2);
+  item2.expectedIndex = 2;
+  container.append(list);
+  container.append(field);
+  $('#qunit-fixture').append(container);
+  container.taskList();
+  field.on('tasklist:changed', (function(_this) {
+    return function(event, index, checked) {
+      assert.ok(checked);
+      assert.equal(index, item2.expectedIndex);
+      return assert.equal(field.val(), changes);
+    };
+  })(this));
+  setTimeout(function() {
+    done();
+  }, 20);
+  return item2Checkbox.click();
+});