Add support for image sections

bustle · Jul 13, 2015 · 5fd6d81 · 5fd6d81
1 parent 079e0c1
commit 5fd6d81
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/lib/dom-renderer.js b/lib/dom-renderer.js
@@ -48,17 +48,28 @@ export default class DOMRenderer {
 
   renderSection(section) {
     const [type] = section;
+    let rendered;
     switch (type) {
       case 1:
-        let rendered = this.renderParagraphSection(section);
+        rendered = this.renderMarkupSection(section);
+        utils.appendChild(this.root, rendered);
+        break;
+      case 2:
+        rendered = this.renderImageSection(section);
         utils.appendChild(this.root, rendered);
         break;
       default:
         throw new Error('Unimplement renderer for type ' + type);
     }
   }
 
-  renderParagraphSection([type, tagName, markers]) {
+  renderImageSection([type, src]) {
+    let element = utils.createElement('img');
+    element.src = src;
+    return element;
+  }
+
+  renderMarkupSection([type, tagName, markers]) {
     let element = utils.createElement(tagName);
     let elements = [element];
     let currentElement = element;

diff --git a/tests/unit/dom-renderer-test.js b/tests/unit/dom-renderer-test.js
@@ -51,7 +51,7 @@ test('renders a mobiledoc with simple (no attributes) marker', (assert) => {
     [        // markers
       ['B'],
     ],
-    [   // sections
+    [        // sections
       [1, 'P', [
         [[0], 1, 'hello world']]
       ]
@@ -70,7 +70,7 @@ test('renders a mobiledoc with complex (has attributes) marker', (assert) => {
     [        // markers
       ['A', ['href', 'http://google.com']],
     ],
-    [   // sections
+    [        // sections
       [1, 'P', [
           [[0], 1, 'hello world']
       ]]
@@ -90,7 +90,7 @@ test('renders a mobiledoc with multiple markups in a section', (assert) => {
       ['B'],
       ['I']
     ],
-    [   // sections
+    [        // sections
       [1, 'P', [
         [[0], 0, 'hello '], // b
         [[1], 0, 'brave '], // b+i
@@ -106,3 +106,19 @@ test('renders a mobiledoc with multiple markups in a section', (assert) => {
 
   assert.equal(sectionEl.innerHTML, '<b>hello <i>brave new </i>world</b>');
 });
+
+test('renders a mobiledoc with image section', (assert) => {
+  let url = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=";
+  let mobiledoc = [
+    [],      // markers
+    [        // sections
+      [2, url]
+    ]
+  ];
+  let rendered = renderer.render(mobiledoc);
+  assert.equal(rendered.childNodes.length, 1,
+               'renders 1 section');
+  let sectionEl = rendered.childNodes[0];
+
+  assert.equal(sectionEl.src, url);
+});