start adding jasmine tests to module

common/lib/xmodule/xmodule/js/fixtures/annotatable.html

 <section class='xmodule_display xmodule_AnnotatableModule' data-type='Annotatable'>
-    <div class="annotatable-wrapper" id="annotatable_1">
-        <div class="annotatable-header"></div>
+    <div class="annotatable-wrapper">
+        <div class="annotatable-header">
+              <div class="annotatable-title">First Annotation Exercise</div>
+        </div>
+        <div class="annotatable-section">
+            <div class="annotatable-section-title">
+                Instructions
+                <a class="annotatable-toggle annotatable-toggle-instructions expanded" href="javascript:void(0)">Collapse Instructions</a>
+            </div>
+            <div class="annotatable-section-body annotatable-instructions">
+                <div><p>The main goal of this exercise is to start practicing the art of slow reading.</p>
+            </div>
+        </div>
+        <div class="annotatable-section">
+            <div class="annotatable-section-title">
+                Guided Discussion
+                <a class="annotatable-toggle annotatable-toggle-annotations" href="javascript:void(0)">Hide Annotations</a>
+            </div>
+        </div>
         <div class="annotatable-content">
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada pellentesque posuere. 
-              <div class="annotatable-span highlight" data-discussion-anchor="1">
-                  Ut urna magna, fringilla porta ultricies a, molestie sollicitudin tellus. 
-                  <div class="annotatable-comment">Curabitur tellus lorem tempus et dolor.</div>
-              </div>
-              Duis condimentum, sapien porttitor commodo elementum, ligula dui tempus mauris, sed ultricies
-              lectus elit ut nunc. Duis dictum tempus dui tristique pharetra.  Vivamus sit amet odio
-              ac tellus blandit viverra.  
-            </p>
-            
-            <p>
-              <div class="annotatable-span highlight" data-discussion-anchor="2">
-                <div class="annotatable-comment">Curabitur elementum pretium egestas.</div>
-                Praesent nec eros sem, id fermentum ipsum. Pellentesque egestas cursus lacus non commodo. 
-              </div>
-              Phasellus elementum, diam volutpat auctor posuere, tellus urna blandit orci, ac lacinia justo nisi
-              ac diam. Pellentesque rutrum leo id nulla eleifend porttitor. Pellentesque habitant
-              morbi tristique senectus et netus et malesuada fames ac turpis egestas.  Aliquam
-              tristique, ante vitae porttitor hendrerit, tellus quam condimentum magna, nec semper
-              arcu orci nec erat. 
-              <div class="annotatable-span highlight" data-discussion-anchor="3">
-                  Sed dictum bibendum nibh, nec feugiat metus porttitor sed.
-                  <div class="annotatable-comment">Test.</div>
-              </div>
-              Aliquam dictum suscipit arcu mollis hendrerit.
-            </p>
+            |87 No, those who are really responsible are Zeus and Fate [Moira] and the Fury [Erinys] who roams in the mist. <br/>
+            |88 <span data-problem-id="0" data-comment-body="Agamemnon says..." class="annotatable-span highlight" data-comment-title="Your Title Here">They are the ones who</span><br/>
+            |100 He [= Zeus], making a formal declaration [eukhesthai], spoke up at a meeting of all the gods and said: <br/>
+            |101 <span data-problem-id="1" data-comment-body="When Zeus speaks..." class="annotatable-span highlight">“hear me, all gods and all goddesses,</span><br/>
+            |113 but he swore a great oath.
+            <span data-problem-id="2" data-comment-body="How is the ‘veering off-course’ ..." class="annotatable-span highlight">And right then and there</span><br/>
         </div>
     </div>
 </section>
-<section>
-    <a name="1">First Discussion</a><br/>
-    <a name="2">Second Discussion</a><br/>
-    <a name="2">Third Discussion</a><br/>
-</section>
+
+<section class="problem"><a class="annotation-return" href="javascript:void(0)">Return to Annotation</a></section>
+<section class="problem"><a class="annotation-return" href="javascript:void(0)">Return to Annotation</a></section>
+<section class="problem"><a class="annotation-return" href="javascript:void(0)">Return to Annotation</a></section>
+

common/lib/xmodule/xmodule/js/spec/annotatable/display_spec.coffee

@@ -2,7 +2,14 @@ describe 'Annotatable', ->
     beforeEach ->
         loadFixtures 'annotatable.html'
     describe 'constructor', ->
+        el = $('.xmodule_display.xmodule_AnnotatableModule')
         beforeEach ->
-            @annotatable = new Annotatable $('.xmodule_display')
-        it 'initializes tooltips', ->
-            expect(1).toBe 2
+            @annotatable = new Annotatable(el)
+        it 'binds module to element', ->
+            expect(@annotatable.el).toBe(el)
+        it 'initializes toggle states to be false', ->
+            toggleStates = ['annotationsHidden', 'instructionsHidden']
+            expect(@annotatable[toggleState]).toBeFalsy() for toggleState in toggleStates
+        it 'initializes event handlers', ->
+            eventHandlers = [ 'onClickToggleAnnotations', 'onClickToggleInstructions', 'onClickReply', 'onCLickReturn']
+            expect(@annotatable[eventHandler]).toBeDefined() for handler in handlers