From 37a9dc18f7e4d39316447f7cd2cfc15812e916fd 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 | 60 ++++++++--------- test/unit/on-dom-refresh.spec.js | 53 ++++++++++----- test/unit/on-dom-remove.spec.js | 67 ++++++++++++------- .../precompiled-template-rendering.spec.js | 17 +++-- 4 files changed, 120 insertions(+), 77 deletions(-) diff --git a/test/unit/on-attach.spec.js b/test/unit/on-attach.spec.js index e5c0582c82..333519d2a5 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,12 @@ describe('onAttach', function() { }); let sinon; - let View; - let regionEl; + let TestView; 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', @@ -53,8 +56,8 @@ describe('onAttach', function() { })); // A Region to show our View within this.setFixtures('
'); - regionEl = document.getElementById('region'); - region = new Marionette.Region({el: regionEl}); + const regionEl = document.getElementById('region'); + region = new Region({el: regionEl}); }); describe('when showing a view into a region of a view without events monitored', function() { @@ -62,7 +65,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 +77,7 @@ describe('onAttach', function() { layoutView = new LayoutView(); layoutView.render(); - view = new View(); + view = new TestView(); layoutView.showChildView('child', view); }); @@ -120,8 +123,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 +149,7 @@ describe('onAttach', function() { let view; beforeEach(function() { - view = new View(); + view = new TestView(); region.show(view); }); @@ -193,21 +196,20 @@ describe('onAttach', function() { describe('when the parent view is initially detached', function() { describe('When showing a View with a single level of nested views', function() { - let parentView; let mainView; 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); } }); - parentView = new ParentView(); + const parentView = new ParentView(); region.show(parentView); }); @@ -239,21 +241,20 @@ describe('onAttach', function() { }); describe('When showing a View with a single level of nested views in onAttach', function() { - let parentView; let mainView; 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); } }); - parentView = new ParentView(); + const parentView = new ParentView(); region.show(parentView); }); @@ -274,16 +275,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); } }); @@ -332,16 +333,15 @@ describe('onAttach', function() { describe('when the parent view is initially attached', function() { describe('When showing a View with a single level of nested views', function() { - let parentView; let mainView; let footerView; beforeEach(function() { - parentView = new View(); + const 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 +363,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..b416916292 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 BackboneViewMixin from '../../src/mixins/backboneview'; +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, 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 BbView(); + 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..e73d30550d 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 BackboneViewMixin from '../../src/mixins/backboneview'; +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, 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 BbView(); + 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..882b831b8f 100644 --- a/test/unit/precompiled-template-rendering.spec.js +++ b/test/unit/precompiled-template-rendering.spec.js @@ -1,18 +1,23 @@ +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 view; + beforeEach(function() { - this.template = 'foobar'; - this.View = Backbone.Marionette.View.extend({ - template: _.template(this.template) + template = 'foobar'; + const 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); }); }); });