test(fastboot): Add fastboot tests for cards and atoms (#44)

.gitignore

@@ -15,3 +15,4 @@
 /libpeerconnection.log
 npm-debug.log*
 testem.log
+.vscode

README.md

@@ -58,6 +58,8 @@ To pass atom names to the renderer, use the `atomNames` property, e.g.:
 {{render-mobiledoc mobiledoc=myMobileDoc atomNames=myAtomNames}}
 ```
 
+The component will be passed a `payload` and `value` property.
+
 To customize atom lookup, extend the `render-mobiledoc` component and override
 its `atomNameToComponentName` method.
 

fastboot-tests/fixtures/fastboot/app/components/test-atom.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+});

fastboot-tests/fixtures/fastboot/app/components/test-card.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+});

fastboot-tests/fixtures/fastboot/app/controllers/index.js

@@ -1,25 +1,47 @@
 import Ember from 'ember';
 import {
   createSimpleMobiledoc,
-  createMobiledocWithMarkup
+  createMobiledocWithMarkup,
+  createMobiledocWithCard,
+  createMobiledocWithAtom
 } from '../utils/mobiledoc';
 
 const mobiledocs = [
   {
     name: 'simple',
-    mobiledoc: createSimpleMobiledoc('hello world')
+    mobiledoc: createSimpleMobiledoc('hello world'),
+    cardNames: [],
+    atomNames: []
   },
   {
     name: 'with-markup',
-    mobiledoc: createMobiledocWithMarkup('markup text', ['em'])
+    mobiledoc: createMobiledocWithMarkup('markup text', ['em']),
+    cardNames: [],
+    atomNames: []
   },
   {
     name: 'with-link',
-    mobiledoc: createMobiledocWithMarkup('linked', ['a', ['href', 'http://example.com/with-link']])
+    mobiledoc: createMobiledocWithMarkup('linked', ['a', ['href', 'http://example.com/with-link']]),
+    cardNames: [],
+    atomNames: []
   },
   {
     name: 'with-unsafe-link',
-    mobiledoc: createMobiledocWithMarkup('linked unsafe', ['a', ['href', 'javascript:evil']])
+    mobiledoc: createMobiledocWithMarkup('linked unsafe', ['a', ['href', 'javascript:evil']]),
+    cardNames: [],
+    atomNames: []
+  },
+  {
+    name: 'card',
+    mobiledoc: createMobiledocWithCard('test-card'),
+    cardNames: ['test-card'],
+    atomNames: []
+  },
+  {
+    name: 'atom',
+    mobiledoc: createMobiledocWithAtom('test-atom'),
+    cardNames: [],
+    atomNames: ['test-atom']
   }
 ];
 

fastboot-tests/fixtures/fastboot/app/templates/components/test-atom.hbs

@@ -0,0 +1,4 @@
+<span class='test-atom-component'>
+  payload.foo = <span class='test-atom-component-payload'>{{payload.foo}}</span>
+  value: <span class='test-atom-component-value'>{{value}}</span>
+</span>

fastboot-tests/fixtures/fastboot/app/templates/components/test-card.hbs

@@ -0,0 +1,3 @@
+<div class='test-card-component'>
+  payload.foo = <span class='test-card-component-payload'>{{payload.foo}}</span>
+</div>

fastboot-tests/fixtures/fastboot/app/templates/index.hbs

@@ -3,7 +3,7 @@
 <div id="mobiledocs">
   {{#each mobiledocs as |mobiledocInfo|}}
     <div class="render-mobiledoc-wrapper {{mobiledocInfo.name}}">
-      {{render-mobiledoc mobiledoc=mobiledocInfo.mobiledoc}}
+      {{render-mobiledoc mobiledoc=mobiledocInfo.mobiledoc cardNames=mobiledocInfo.cardNames atomNames=mobiledocInfo.atomNames}}
     </div>
   {{/each}}
 </div>

fastboot-tests/index-test.js

@@ -84,4 +84,52 @@ describe('index', function() {
       });
   });
 
+  it('renders mobiledoc with card', function() {
+    let name = 'card';
+    let componentClassName = 'test-card-component';
+    let payloadClassName   = 'test-card-component-payload';
+
+    return this.visit('/')
+      .then(function(res) {
+        let $ = res.jQuery;
+        let response = res.response;
+        expect(response.statusCode).to.equal(200);
+
+        let wrapper = $(`.render-mobiledoc-wrapper.${name}`);
+        expect(wrapper.length, 'rendered mobiledoc').to.equal(1);
+
+        let component = $(`.render-mobiledoc-wrapper.${name} .${componentClassName}`);
+        expect(component.length, 'rendered component').to.equal(1);
+
+        let payload = $(`.render-mobiledoc-wrapper.${name} .${payloadClassName}`);
+        expect(payload.text().trim(), 'payload').to.equal('bar');
+      });
+  });
+
+  it('renders mobiledoc with atom', function() {
+    let name = 'atom';
+    let componentClassName = 'test-atom-component';
+    let payloadClassName   = 'test-atom-component-payload';
+    let valueClassName     = 'test-atom-component-value';
+
+    return this.visit('/')
+      .then(function(res) {
+        let $ = res.jQuery;
+        let response = res.response;
+        expect(response.statusCode).to.equal(200);
+
+        let wrapper = $(`.render-mobiledoc-wrapper.${name}`);
+        expect(wrapper.length, 'rendered mobiledoc').to.equal(1);
+
+        let component = $(`.render-mobiledoc-wrapper.${name} .${componentClassName}`);
+        expect(component.length, 'rendered component').to.equal(1);
+
+        let payload = $(`.render-mobiledoc-wrapper.${name} .${payloadClassName}`);
+        expect(payload.text().trim(), 'payload').to.equal('bar');
+
+        let value = $(`.render-mobiledoc-wrapper.${name} .${valueClassName}`);
+        expect(value.text().trim(), 'value').to.equal('value');
+      });
+  });
+
 });