Add Test Cases and Continuous Integration

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - "6.1"
+
+before_script:
+  - npm install phantomjs
+
+script:
+  - phantomjs runner_test.js

README.md

@@ -1,5 +1,7 @@
 # YPet
 
+[![Build Status](https://travis-ci.org/AnoXDD/YPet.svg?branch=master)](https://travis-ci.org/AnoXDD/YPet)
+
 [YPet](https://github.com/SuLab/YPet) is a Javascript library built in [Marionette.js](http://marionettejs.com/) to rapidly annotate paragraphs of text on websites. The project aims to rethink HTML text annotation, primarily focused on biocuration and adheres to the following rules:
 
 * Limit the possibility for damaged annotations, individual letters are not desired.
@@ -17,8 +19,49 @@ Example of behavior:
 
 ## How to Use
 
+The latest version of YPet (`ypet-new.js`) is built based on Marionette V3, but a older version of YPet (`ypet.js`) supports V2. 
+
+The build badge at the beginning of this file indicates the status of the **latest** version. 
+
+We recommend working with Marionette V3, because the older version of YPet does not process special characters like &, <, > properly. You will get `&amp;`, `&lt;`, `&gt;` instead of the characters. 
+
 ### Setup
 
+For Marionette V3:
+
+```javascript
+/* Setup the paragraphs with a string to tokenize */
+var p1 = new Paragraph({'text': $('p#some-paragraph').html()});
+var p2 = new Paragraph({'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt tempus lorem, quis sollicitudin lectus pretium nec. Ut non enim.'});
+
+/* Configure the # and colors of Annotation types (minimum 1 required) */
+YPet.AnnotationTypes = new AnnotationTypeList([
+{name: 'Person', color: '#A4DEAB'},
+{name: 'Place', color: 'PowderBlue'},
+{name: 'Thing', color: 'rgb(0, 180, 200)'}
+]);
+
+YPet = new Backbone.Marionette.Application({
+    region: "#doc" // where p1 and p2 are placed
+});
+
+/* Assign views to Region */
+YPet.showView(new (Mn.View.extend({
+    el: ".container-to-hold-p1p2",
+    regions: {
+        'p1': '#container-to-place-p1',
+        'p2': '#container-to-place-p2'
+    }
+}))());
+
+/* Put the new Annotation views on the page */
+YPet.getView().getRegion(1).show( new WordCollectionView({collection: p1.get('words')}) );
+YPet.getView().getRegion(2).show( new WordCollectionView({collection: p2.get('words')}) );
+
+YPet.start();
+```
+For Marionette V2:
+
 ```javascript
 YPet.addInitializer(function(options) {
   /* Setup the paragraphs with a string to tokenize */
@@ -47,12 +90,29 @@ YPet.start();
 
 ```
 
-### Events
+#### Events
 
 If you want to live track annotations as they're put on the paragraph (to save, send to a server, or do something else with) the following callbacks and serialization methods are available.
 
 Each annotation is returned as an object with a `start` and `text` attribute, as well as an array of children words.
 
+For Marionette V3:
+
+```javascript
+YPet.getView().getRegion(1).currentView.collection.parentDocument.get('annotations').on('add', function(model, collection) {
+  console.log('Add:', model.toJSON(), collection.toJSON());
+});
+
+YPet.getView().getRegion(1).currentView.collection.parentDocument.get('annotations').on('remove', function(model, collection) {
+  console.log('Remove:', model.toJSON(), collection.toJSON());
+});
+
+YPet.getView().getRegion(1).currentView.collection.parentDocument.get('annotations').on('change', function(model) {
+  console.log('Change:', model.toJSON());
+});
+```
+
+For Marionette V2:
 
 ```javascript
 YPet['p1'].currentView.collection.parentDocument.get('annotations').on('add', function(model, collection) {
@@ -70,7 +130,7 @@ YPet['p1'].currentView.collection.parentDocument.get('annotations').on('change',
 
 ## About
 
-[YPet](https://github.com/SuLab/YPet) was developed to rapidly annotate bio-medical literature for [Mark2Cure](http://mark2cure.org) at [The Su Lab](http://sulab.org/) by [Max Nanis](http://twitter.com/x0xMaximus).
+[YPet](https://github.com/SuLab/YPet) was developed to rapidly annotate bio-medical literature for [Mark2Cure](http://mark2cure.org) at [The Su Lab](http://sulab.org/) by [Max Nanis](http://twitter.com/x0xMaximus). The testing script is written by [Runjie Guan](http://anoxic.me).
 
 
 ![The Scripps Research Institute](http://www.scripps.edu/files/images/logo120.png "The Scripps Research Institute")

runner_test.js

@@ -0,0 +1,96 @@
+/* phantomjs page setup */
+
+var page = require('webpage').create();
+
+page.onConsoleMessage = function(msg) {
+    console.log(msg);
+};
+
+page.viewportSize = {
+    width: 800,
+    height: 800
+};
+
+var test_suites = {
+    "./test/test_page.html": [
+        "_testClickOnValidWords",
+        "_testClickOnInvalidWords",
+
+        "_testDragSameLine",
+        "_testDragDifferentLine",
+        "_testDragOverSelectedWord",
+        "_testDragFromSelectedWord",
+        "_testDragToSelectedWord",
+
+        "_testDragInvalidWord",
+        "_testSubmitResults"
+    ],
+    "./test/test_page_special_char.html": [
+        "_testClickOnInvalidWords",
+
+        "_testSelectAll",
+        "_testClickOnEachValidWord",
+    ],
+    "./test/test_page_fixed.html": [
+        "_testClickOnValidWordsFixed",
+
+        "_testDragFixed",
+        "_testDragSelectedFixed",
+
+        "_testDragInvalidWordFixed"
+    ]
+};
+
+/* test runner */
+var htmls = Object.keys(test_suites);
+var running_html = "";
+for (var i = 0; i < htmls.length; ++i) {
+    (function(i) {
+        var interval = setInterval(function() {
+            if (running_html === htmls[i]) {
+                clearInterval(interval);
+                page.open(running_html, function(status) {
+                    if (status !== "success") {
+                        console.log("Error loading page");
+                        phantom.exit(1);
+                    } else {
+                        console.log("\n===========Page loaded: " + running_html + "===========");
+                    }
+
+                    page.evaluate(function() {
+                        return document.testInit();
+                    });
+
+                    test_suites[running_html].forEach(function(test_function) {
+                        var msg = page.evaluate("document." + test_function);
+                        if (msg && msg != "") {
+                            throw new Error("Error: " + msg);
+                        }
+                    });
+
+                    console.log(test_suites[running_html].length + " tests PASSED");
+                    // Pass to the next test suite
+                    if (!(running_html = htmls[++i])) {
+                        phantom.exit(0);
+                    }
+                });
+
+            }
+        }, 1000);
+    })(i);
+}
+running_html = htmls[0];
+
+
+page.onError = function(msg, trace) {
+    console.error("An error occured");
+    console.error(JSON.stringify(trace));
+    /* inject a line number into the error message raised by assert() */
+    if (trace.length > 1) {
+        console.log(msg.replace(/: in /,
+            " in line " + (parseInt(trace[1].line) - 1) + " of "));
+    } else {
+        console.log("line " + (parseInt(trace[0].line) - 1) + ": " + msg);
+    }
+    phantom.exit(1);
+};

src/demo.js

@@ -63,3 +63,4 @@ YPet.addInitializer(function(options) {
 });
 
 YPet.start();
+