From f37d4dad11aa0050f29f987b5460bac1f7d88ce8 Mon Sep 17 00:00:00 2001 From: wesmangum Date: Thu, 9 Nov 2017 12:09:31 -0600 Subject: [PATCH] refactor and reorganize onAttach, onDomRefresh, onDomRemove, and precompiled template unit tests --- test/unit/on-attach.spec.js | 50 +++++++------- test/unit/on-dom-refresh.spec.js | 53 ++++++++++----- test/unit/on-dom-remove.spec.js | 67 ++++++++++++------- .../precompiled-template-rendering.spec.js | 18 +++-- 4 files changed, 118 insertions(+), 70 deletions(-) diff --git a/test/unit/on-attach.spec.js b/test/unit/on-attach.spec.js index e5c0582c82..27dc4cc477 100644 --- a/test/unit/on-attach.spec.js +++ b/test/unit/on-attach.spec.js @@ -1,3 +1,7 @@ +import _ from 'underscore'; +import View from '../../src/view'; +import Region from '../../src/region'; + describe('onAttach', function() { const expectTriggerMethod = (method, target, retval, before = null) => { expect(method) @@ -37,13 +41,13 @@ describe('onAttach', function() { }); let sinon; - let View; + let testView; let regionEl; let region; // A Region to show our View within beforeEach(function() { sinon = this.sinon; - View = Marionette.View.extend(extendAttachMethods(Marionette.View)({ + testView = View.extend(extendAttachMethods(View)({ template: _.template('
'), regions: { header: 'header', @@ -54,7 +58,7 @@ describe('onAttach', function() { // A Region to show our View within this.setFixtures('
'); regionEl = document.getElementById('region'); - region = new Marionette.Region({el: regionEl}); + region = new Region({el: regionEl}); }); describe('when showing a view into a region of a view without events monitored', function() { @@ -62,7 +66,7 @@ describe('onAttach', function() { let view; beforeEach(function() { - const LayoutView = Marionette.View.extend({ + const LayoutView = View.extend({ monitorViewEvents: false, el: '#region', template: _.template('
'), @@ -74,7 +78,7 @@ describe('onAttach', function() { layoutView = new LayoutView(); layoutView.render(); - view = new View(); + view = new testView(); layoutView.showChildView('child', view); }); @@ -120,8 +124,8 @@ describe('onAttach', function() { let view; beforeEach(function() { - view = new View(); - detachedRegion = new Marionette.Region({el: document.createElement('div')}); + view = new testView(); + detachedRegion = new Region({el: document.createElement('div')}); detachedRegion.show(view); }); @@ -146,7 +150,7 @@ describe('onAttach', function() { let view; beforeEach(function() { - view = new View(); + view = new testView(); region.show(view); }); @@ -198,10 +202,10 @@ describe('onAttach', function() { let footerView; beforeEach(function() { - const ParentView = View.extend({ + const ParentView = testView.extend({ onRender: function() { - mainView = new View(); - footerView = new View(); + mainView = new testView(); + footerView = new testView(); this.showChildView('main', mainView); this.showChildView('footer', footerView); } @@ -244,10 +248,10 @@ describe('onAttach', function() { let footerView; beforeEach(function() { - const ParentView = View.extend({ + const ParentView = testView.extend({ onAttach: function() { - mainView = new View(); - footerView = new View(); + mainView = new testView(); + footerView = new testView(); this.showChildView('main', mainView); this.showChildView('footer', footerView); } @@ -274,16 +278,16 @@ describe('onAttach', function() { let childView; beforeEach(function() { - const GrandparentView = View.extend({ + const GrandparentView = testView.extend({ onRender: function() { parentView = new ParentView(); this.showChildView('main', parentView); } }); - const ParentView = View.extend({ + const ParentView = testView.extend({ onRender: function() { - childView = new View(); + childView = new testView(); this.showChildView('main', childView); } }); @@ -337,11 +341,11 @@ describe('onAttach', function() { let footerView; beforeEach(function() { - parentView = new View(); + parentView = new testView(); region.show(parentView); - mainView = new View(); - footerView = new View(); + mainView = new testView(); + footerView = new testView(); parentView.showChildView('main', mainView); parentView.showChildView('footer', footerView); }); @@ -363,14 +367,14 @@ describe('onAttach', function() { let childView; beforeEach(function() { - const ParentView = View.extend({ + const ParentView = testView.extend({ onRender: function() { - childView = new View(); + childView = new testView(); this.showChildView('main', childView); } }); - grandparentView = new View(); + grandparentView = new testView(); region.show(grandparentView); parentView = new ParentView(); diff --git a/test/unit/on-dom-refresh.spec.js b/test/unit/on-dom-refresh.spec.js index fe23e3dc38..03c83b285e 100644 --- a/test/unit/on-dom-refresh.spec.js +++ b/test/unit/on-dom-refresh.spec.js @@ -1,61 +1,80 @@ +import _ from 'underscore'; +import Backbone from 'backbone'; +import Marionette from '../../src/backbone.marionette'; +import View from '../../src/view'; +import Region from '../../src/region'; + describe('onDomRefresh', function() { 'use strict'; + let attachedRegion; + let detachedRegion; + let BbView; + let MnView; + beforeEach(function() { this.setFixtures($('
')); - this.attachedRegion = new Marionette.Region({el: '#region'}); - this.detachedRegion = new Marionette.Region({el: $('
')}); - this.BbView = Backbone.View.extend({ + attachedRegion = new Region({el: '#region'}); + detachedRegion = new Region({el: $('
')}); + BbView = Backbone.View.extend({ onDomRefresh: this.sinon.stub() }); - _.extend(this.BbView.prototype, Marionette.BackboneViewMixin); - this.MnView = Marionette.View.extend({ + _.extend(BbView.prototype, Marionette.BackboneViewMixin); + MnView = View.extend({ template: _.noop, onDomRefresh: this.sinon.stub() }); }); describe('when a Backbone view is shown detached from the DOM', function() { + let bbView; + beforeEach(function() { - this.bbView = new this.BbView(); - this.detachedRegion.show(this.bbView); + bbView = new BbView(); + detachedRegion.show(bbView); }); it('should never trigger onDomRefresh', function() { - expect(this.bbView.onDomRefresh).not.to.have.been.calledOnce; + expect(bbView.onDomRefresh).not.to.have.been.calledOnce; }); }); describe('when a Marionette view is shown detached from the DOM', function() { + let mnView; + beforeEach(function() { - this.mnView = new this.MnView(); - this.detachedRegion.show(this.mnView); + mnView = new MnView(); + detachedRegion.show(mnView); }); it('should never trigger onDomRefresh', function() { - expect(this.mnView.onDomRefresh).not.to.have.been.calledOnce; + expect(mnView.onDomRefresh).not.to.have.been.calledOnce; }); }); describe('when a Backbone view is shown attached to the DOM', function() { + let bbView; + beforeEach(function() { - this.bbView = new this.MnView(); - this.attachedRegion.show(this.bbView); + bbView = new MnView(); + attachedRegion.show(bbView); }); it('should trigger onDomRefresh on the view', function() { - expect(this.bbView.onDomRefresh).to.have.been.calledOnce; + expect(bbView.onDomRefresh).to.have.been.calledOnce; }); }); describe('when a Marionette view is shown attached to the DOM', function() { + let mnView; + beforeEach(function() { - this.mnView = new this.MnView(); - this.attachedRegion.show(this.mnView); + mnView = new MnView(); + attachedRegion.show(mnView); }); it('should trigger onDomRefresh on the view', function() { - expect(this.mnView.onDomRefresh).to.have.been.calledOnce; + expect(mnView.onDomRefresh).to.have.been.calledOnce; }); }); diff --git a/test/unit/on-dom-remove.spec.js b/test/unit/on-dom-remove.spec.js index 1fb0f14214..6b62b1abe6 100644 --- a/test/unit/on-dom-remove.spec.js +++ b/test/unit/on-dom-remove.spec.js @@ -1,76 +1,95 @@ +import _ from 'underscore'; +import Backbone from 'backbone'; +import Marionette from '../../src/backbone.marionette'; +import View from '../../src/view'; +import Region from '../../src/region'; + describe('onDomRemove', function() { 'use strict'; + let attachedRegion; + let detachedRegion; + let BbView; + let MnView; + beforeEach(function() { this.setFixtures($('
')); - this.attachedRegion = new Marionette.Region({el: '#region'}); - this.detachedRegion = new Marionette.Region({el: $('
')}); - this.BbView = Backbone.View.extend({ + attachedRegion = new Region({el: '#region'}); + detachedRegion = new Region({el: $('
')}); + BbView = Backbone.View.extend({ onDomRemove: this.sinon.stub() }); - _.extend(this.BbView.prototype, Marionette.BackboneViewMixin); - this.MnView = Marionette.View.extend({ + _.extend(BbView.prototype, Marionette.BackboneViewMixin); + MnView = View.extend({ template: _.noop, onDomRemove: this.sinon.stub() }); }); describe('when a Backbone view is shown detached from the DOM', function() { + let bbView; + beforeEach(function() { - this.bbView = new this.BbView(); - this.detachedRegion.show(this.bbView); - this.detachedRegion.empty(); + bbView = new BbView(); + detachedRegion.show(bbView); + detachedRegion.empty(); }); it('should never trigger onDomRemove', function() { - expect(this.bbView.onDomRemove).not.to.have.been.called; + expect(bbView.onDomRemove).not.to.have.been.called; }); }); describe('when a Marionette view is shown detached from the DOM', function() { + let mnView; + beforeEach(function() { - this.mnView = new this.MnView(); - this.detachedRegion.show(this.mnView); - this.mnView.render(); - this.detachedRegion.empty(); + mnView = new MnView(); + detachedRegion.show(mnView); + mnView.render(); + detachedRegion.empty(); }); it('should never trigger onDomRemove', function() { - expect(this.mnView.onDomRemove).not.to.have.been.called; + expect(mnView.onDomRemove).not.to.have.been.called; }); }); describe('when a Backbone view is shown attached to the DOM', function() { + let bbView; + beforeEach(function() { - this.bbView = new this.MnView(); - this.attachedRegion.show(this.bbView); + bbView = new MnView(); + attachedRegion.show(bbView); }); describe('when the region is emptied', function() { it('should trigger onDomRemove on the view', function() { - this.attachedRegion.empty(); - expect(this.bbView.onDomRemove).to.have.been.calledOnce.and.calledWith(this.bbView); + attachedRegion.empty(); + expect(bbView.onDomRemove).to.have.been.calledOnce.and.calledWith(bbView); }); }); }); describe('when a Marionette view is shown attached to the DOM', function() { + let mnView; + beforeEach(function() { - this.mnView = new this.MnView(); - this.attachedRegion.show(this.mnView); + mnView = new MnView(); + attachedRegion.show(mnView); }); describe('when the region is emptied', function() { it('should trigger onDomRemove on the view', function() { - this.attachedRegion.empty(); - expect(this.mnView.onDomRemove).to.have.been.calledOnce.and.calledWith(this.mnView); + attachedRegion.empty(); + expect(mnView.onDomRemove).to.have.been.calledOnce.and.calledWith(mnView); }); }); describe('when the view is re-rendered', function() { it('should trigger onDomRemove on the view', function() { - this.mnView.render(); - expect(this.mnView.onDomRemove).to.have.been.calledOnce.and.calledWith(this.mnView); + mnView.render(); + expect(mnView.onDomRemove).to.have.been.calledOnce.and.calledWith(mnView); }); }); }); diff --git a/test/unit/precompiled-template-rendering.spec.js b/test/unit/precompiled-template-rendering.spec.js index 97fb30eb35..802e52d0fc 100644 --- a/test/unit/precompiled-template-rendering.spec.js +++ b/test/unit/precompiled-template-rendering.spec.js @@ -1,18 +1,24 @@ +import View from '../../src/view'; + describe('pre-compiled template rendering', function() { 'use strict'; describe('when rendering views with pre-compiled template functions', function() { + let template; + let testView; + let view; + beforeEach(function() { - this.template = 'foobar'; - this.View = Backbone.Marionette.View.extend({ - template: _.template(this.template) + template = 'foobar'; + testView = View.extend({ + template: _.template(template) }); - this.view = new this.View(); - this.view.render(); + view = new testView(); + view.render(); }); it('should render the pre-compiled template', function() { - expect(this.view.$el).to.contain.$text(this.template); + expect(view.$el).to.contain.$text(template); }); }); });