bolded the section titles and added unittest skeleton for module

common/lib/xmodule/xmodule/annotatable_module.py

@@ -63,26 +63,29 @@ class AnnotatableModule(XModule):
 
         return data_attrs
 
+    def _render_annotation(self, index, el):
+        """ Renders an annotation element for HTML output.  """
+        attr = {}
+        attr.update(self._get_annotation_class_attr(index, el))
+        attr.update(self._get_annotation_data_attr(index, el))
+
+        el.tag = 'span'
+
+        for key in attr.keys():
+            el.set(key, attr[key]['value'])
+            if '_delete' in attr[key] and attr[key]['_delete'] is not None:
+                delete_key = attr[key]['_delete']
+                del el.attrib[delete_key]
+
+
     def _render_content(self):
         """ Renders annotatable content with annotation spans and returns HTML. """
-
         xmltree = etree.fromstring(self.content)
         xmltree.tag = 'div'
 
         index = 0
         for el in xmltree.findall('.//annotation'):
-            el.tag = 'span'
-
-            attr = {}
-            attr.update(self._get_annotation_class_attr(index, el))
-            attr.update(self._get_annotation_data_attr(index, el))
-
-            for key in attr.keys():
-                el.set(key, attr[key]['value'])
-                if '_delete' in attr[key] and attr[key]['_delete'] is not None:
-                    delete_key = attr[key]['_delete']
-                    del el.attrib[delete_key]
-
+            self._render_annotation(index, el)
             index += 1
 
         return etree.tostring(xmltree, encoding='unicode')

common/lib/xmodule/xmodule/css/annotatable/display.scss

@@ -14,7 +14,10 @@
   border-radius: .5em;
   margin-bottom: .5em;
 
-  .annotatable-section-title {}
+  .annotatable-section-title {
+    font-weight: bold;
+    a { font-weight: normal; }
+  }
   .annotatable-section-body {
     border-top: 1px solid $border-color;
     margin-top: .5em;

common/lib/xmodule/xmodule/tests/test_annotatable_module.py

@@ -1,7 +1,47 @@
 """Module annotatable tests"""
 
 import unittest
-from xmodule import annotatable
+
+from lxml import etree
+from mock import Mock
+
+from xmodule.annotatable_module import AnnotatableModule
+from xmodule.modulestore import Location
+
+from . import test_system
 
 class AnnotatableModuleTestCase(unittest.TestCase):
+    location = Location(["i4x", "edX", "toy", "annotatable", "guided_discussion"])
+    sample_text = '''
+        <annotatable display_name="Iliad">
+            <instructions>Read the text.</instructions>
+            <p>
+                <annotation body="first">Sing</annotation>,
+                <annotation title="goddess" body="second">O goddess</annotation>,
+                <annotation title="anger" body="third" highlight="blue">the anger of Achilles son of Peleus</annotation>,
+                that brought <i>countless</i> ills upon the Achaeans. Many a brave soul did it send
+                hurrying down to Hades, and many a hero did it yield a prey to dogs and
+                <div style="font-weight:bold"><annotation body="fourth" problem="4">vultures</annotation>, for so were the counsels
+                of Jove fulfilled from the day on which the son of Atreus, king of men, and great
+                Achilles, first fell out with one another.</div>
+            </p>
+            <annotation title="footnote" body="the end">The Iliad of Homer by Samuel Butler</annotation>
+        </annotatable>
+    '''
+    definition = { 'data': sample_text }
+    descriptor = Mock()
+    instance_state = None
+    shared_state = None
 
+    annotation_el = {
+        'tag': 'annotation',
+        'attrib': [
+            'title',
+            'body', # required
+            'problem',
+            'highlight'
+        ]
+    }
+
+    def setUp(self):
+        self.annotatable = AnnotatableModule(test_system, self.location, self.definition, self.descriptor, self.instance_state, self.shared_state)

lms/templates/annotatable.html

@@ -18,8 +18,10 @@
     % endif
 
     <div class="annotatable-section">
-        Guided Discussion
-        <a class="annotatable-toggle annotatable-toggle-annotations" href="javascript:void(0)">Hide Annotations</a>
+        <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">${content_html}</div>