backbone modal view renders articles view

mdb · Feb 5, 2014 · 0c21dcf · 0c21dcf
1 parent 76d4661
commit 0c21dcf
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 4 deletions.
diff --git a/app/assets/javascripts/views/modal.js b/app/assets/javascripts/views/modal.js
@@ -1,9 +1,11 @@
 define('views/modal', [
   'views/templates/modal',
+  'views/articles',
   'underscore',
   'backbone'
 ], function(
   ModalTemplate,
+  ArticlesView,
   _,
   Backbone
 ) {
@@ -21,6 +23,15 @@ define('views/modal', [
 
     render: function () {
       this.modalContainer().append(this.template);
+      this.renderArticles();
+    },
+
+    renderArticles: function () {
+      this.articles = new ArticlesView({
+        model: this.model
+      });
+
+      this.articles.render();
     }
   });
 

diff --git a/app/assets/javascripts/views/templates/modal.js b/app/assets/javascripts/views/templates/modal.js
@@ -10,7 +10,7 @@ define('views/templates/modal', [
     '<div class="modal" id="modal-{{= term }}">',
       '<div>',
         '<a class="close" href="#">x</a>',
-        '<ul class="articles"></ul>',
+        '<ul class="articles-{{= term }} articles"></ul>',
       '</div>',
     '</div>'
   ];

diff --git a/spec/javascripts/views/modal_spec.js b/spec/javascripts/views/modal_spec.js
@@ -1,9 +1,11 @@
 define('views/modal_spec', [
   'views/modal',
-  'models/times_query'
+  'models/times_query',
+  'views/articles'
 ], function(
   ModalView,
-  TimesQuery
+  TimesQuery,
+  ArticlesView
 ) {
 
   describe("ModalView", function () {
@@ -40,7 +42,7 @@ define('views/modal_spec', [
         });
 
         it("contains an articles list", function () {
-          expect(template.find('ul.articles').length).toEqual(1);
+          expect(template.find('ul').attr('class')).toEqual('articles-foo articles');
         });
       });
     });
@@ -53,12 +55,38 @@ define('views/modal_spec', [
 
     describe("#render", function () {
       beforeEach(function () {
+        spyOn(modal, 'renderArticles');
         modal.render();
       });
 
       it("appends the template to the modal container", function () {
         expect($('.modal-container').html()).toEqual(modal.template);
       });
+
+      it("renders the articles list", function () {
+        expect(modal.renderArticles).toHaveBeenCalled();
+      });
+    });
+
+    describe("#renderArticles", function () {
+      beforeEach(function () {
+        spyOn(ArticlesView.prototype, 'render');
+        modal.renderArticles();
+      });
+
+      describe("the '.articles' property it declares on the modal", function () {
+        it("is an instance of an ArticlesView", function () {
+          expect(modal.articles instanceof ArticlesView).toEqual(true);
+        });
+
+        it("is instantiated with the modal's model", function () {
+          expect(modal.articles.model).toEqual(modal.model);
+        });
+      });
+
+      it("renders the articles view", function () {
+        expect(ArticlesView.prototype.render).toHaveBeenCalled();
+      });
     });
   });
 });