Render ListSections and ListItems

fixes #4
bustle · Sep 1, 2015 · a838960 · a838960
1 parent 455b8e7
commit a838960
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 6 deletions.
diff --git a/lib/dom-renderer.js b/lib/dom-renderer.js
@@ -51,15 +51,19 @@ export default class DOMRenderer {
     const [type] = section;
     let rendered;
     switch (type) {
-      case 1:
+      case 1: // markup section
         rendered = this.renderMarkupSection(section);
         appendChild(this.root, rendered);
         break;
       case 2:
         rendered = this.renderImageSection(section);
         appendChild(this.root, rendered);
         break;
-      case 10:
+      case 3: // list section
+        rendered = this.renderListSection(section);
+        appendChild(this.root, rendered);
+        break;
+      case 10: // card section
         rendered = this.renderCardSection(section);
         appendChild(this.root, rendered);
         break;
@@ -68,6 +72,20 @@ export default class DOMRenderer {
     }
   }
 
+  renderListSection([type, tagName, listItems]) {
+    const element = createElement(tagName);
+    listItems.forEach(li => {
+      element.appendChild(this.renderListItem(li));
+    });
+    return element;
+  }
+
+  renderListItem(markers) {
+    const element = createElement('li');
+    this._renderMarkersOnElement(element, markers);
+    return element;
+  }
+
   renderImageSection([type, src]) {
     let element = createElement('img');
     element.src = src;
@@ -85,7 +103,12 @@ export default class DOMRenderer {
   }
 
   renderMarkupSection([type, tagName, markers]) {
-    let element = createElement(tagName);
+    const element = createElement(tagName);
+    this._renderMarkersOnElement(element, markers);
+    return element;
+  }
+
+  _renderMarkersOnElement(element, markers) {
     let elements = [element];
     let currentElement = element;
 
@@ -108,7 +131,5 @@ export default class DOMRenderer {
         currentElement = elements[elements.length - 1];
       }
     }
-
-    return element;
   }
 }
diff --git a/tests/unit/dom-renderer-test.js b/tests/unit/dom-renderer-test.js
@@ -1,7 +1,7 @@
 /* global QUnit */
 
 const { test } = QUnit;
-const MOBILEDOC_VERSION = '0.1';
+const MOBILEDOC_VERSION = '0.2.0';
 
 import DOMRenderer from 'mobiledoc-dom-renderer';
 
@@ -199,3 +199,34 @@ test('renders a mobiledoc with default image section', (assert) => {
   assert.equal(sectionEl.firstChild.tagName, 'IMG');
   assert.equal(sectionEl.firstChild.src, 'http://example.org/foo.jpg');
 });
+
+test('renders mobiledoc with lists', (assert) => {
+  const mobiledoc = {
+    version: MOBILEDOC_VERSION,
+    sections: [
+      [],
+      [
+        [3, 'ul', [
+          [[[], 0, 'first item']],
+          [[[], 0, 'second item']],
+        ]]
+      ]
+    ]
+  };
+  const rendered = renderer.render(mobiledoc, document.createElement('div'));
+  assert.equal(rendered.childNodes.length, 1, 'renders 1 section');
+
+  const section = rendered.childNodes[0];
+  assert.equal(section.tagName, 'UL');
+
+  const items = section.childNodes;
+  assert.equal(items.length, 2, '2 list items');
+
+  assert.equal(items[0].tagName, 'LI', 'correct tagName for item 1');
+  assert.equal(items[0].childNodes[0].textContent, 'first item',
+               'correct text node for item 1');
+
+  assert.equal(items[1].tagName, 'LI', 'correct tagName for item 2');
+  assert.equal(items[1].childNodes[0].textContent, 'second item',
+               'correct text node for item 2');
+});