Render list sections and items, bump mobiledoc version to 0.2.0

bustle · Sep 1, 2015 · dc765c2 · dc765c2
1 parent 76609d8
commit dc765c2
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 7 deletions.
diff --git a/lib/html-renderer.js b/lib/html-renderer.js
@@ -48,15 +48,19 @@ export default class DOMRenderer {
     const [type] = section;
     let rendered;
     switch (type) {
-      case 1:
+      case 1: // markup section
         rendered = this.renderMarkupSection(section);
         utils.appendChild(this.root, rendered);
         break;
       case 2:
         rendered = this.renderImageSection(section);
         utils.appendChild(this.root, rendered);
         break;
-      case 10:
+      case 3: // list section
+        rendered = this.renderListSection(section);
+        utils.appendChild(this.root, rendered);
+        break;
+      case 10: // card section
         rendered = this.renderCardSection(section);
         utils.appendChild(this.root, rendered);
         break;
@@ -65,6 +69,20 @@ export default class DOMRenderer {
     }
   }
 
+  renderListSection([type, tagName, items]) {
+    const element = utils.createElement(tagName);
+    items.forEach(li => {
+      utils.appendChild(element, this.renderListItem(li));
+    });
+    return element;
+  }
+
+  renderListItem(markers) {
+    const element = utils.createElement('li');
+    this._renderMarkersOnElement(element, markers);
+    return element;
+  }
+
   renderImageSection([type, url]) {
     let element = utils.createElement('img');
     utils.setAttribute(element, 'src', url);
@@ -90,7 +108,12 @@ export default class DOMRenderer {
   }
 
   renderMarkupSection([type, tagName, markers]) {
-    let element = utils.createElement(tagName);
+    const element = utils.createElement(tagName);
+    this._renderMarkersOnElement(element, markers);
+    return element;
+  }
+
+  _renderMarkersOnElement(element, markers) {
     let elements = [element];
     let currentElement = element;
 
@@ -113,7 +136,5 @@ export default class DOMRenderer {
         currentElement = elements[elements.length - 1];
       }
     }
-
-    return element;
   }
 }
diff --git a/tests/index.html b/tests/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>mobiledoc dom renderer tests</title>
+  <title>mobiledoc html renderer tests</title>
 
   @@QUNIT_CSS
 </head>

diff --git a/tests/unit/dom-renderer-test.js b/tests/unit/dom-renderer-test.js
@@ -3,7 +3,7 @@
 const { test } = QUnit;
 
 import Renderer from 'mobiledoc-html-renderer';
-const MOBILEDOC_VERSION = '0.1';
+const MOBILEDOC_VERSION = '0.2.0';
 
 let renderer;
 QUnit.module('Unit: Mobiledoc HTML Renderer', {
@@ -210,3 +210,22 @@ test('renders a mobiledoc with default image section', (assert) => {
 
   assert.equal(rendered, '<div><div><img src="example.org/foo.jpg"></div></div>');
 });
+
+test('render mobiledoc with list section and list items', (assert) => {
+  const mobiledoc = {
+    version: MOBILEDOC_VERSION,
+    sections: [
+      [],
+      [
+        [3, 'ul', [
+          [[[], 0, 'first item']],
+          [[[], 0, 'second item']]
+        ]]
+      ]
+    ]
+  };
+  const rendered = renderer.render(mobiledoc);
+
+  assert.equal(rendered,
+               '<div><ul><li>first item</li><li>second item</li></ul></div>');
+});