Skip to content

Commit

Permalink
refactor and reorganize onAttach, onDomRefresh, onDomRemove, and prec…
Browse files Browse the repository at this point in the history 
…ompiled template unit tests
  • Loading branch information
@wesmangum
wesmangum committed Nov 9, 2017
1 parent 2b33e64 commit f37d4da
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 70 deletions.
50 changes: 27 additions & 23 deletions test/unit/on-attach.spec.js
View file
Original file line number Diff line number Diff line change
@@ -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)
Expand Down Expand Up @@ -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('<header></header><main></main><footer></footer>'),
regions: {
header: 'header',
Expand All @@ -54,15 +58,15 @@ describe('onAttach', function() {
// A Region to show our View within
this.setFixtures('<div id="region"></div>');
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() {
let layoutView;
let view;

beforeEach(function() {
const LayoutView = Marionette.View.extend({
const LayoutView = View.extend({
monitorViewEvents: false,
el: '#region',
template: _.template('<div id="child"></div>'),
Expand All @@ -74,7 +78,7 @@ describe('onAttach', function() {
layoutView = new LayoutView();
layoutView.render();

view = new View();
view = new testView();
layoutView.showChildView('child', view);
});

Expand Down Expand Up @@ -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);
});

Expand All @@ -146,7 +150,7 @@ describe('onAttach', function() {
let view;

beforeEach(function() {
view = new View();
view = new testView();
region.show(view);
});

Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
}
Expand All @@ -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);
}
});
Expand Down Expand Up @@ -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);
});
Expand All @@ -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();
Expand Down
53 changes: 36 additions & 17 deletions test/unit/on-dom-refresh.spec.js
View file
Original file line number Diff line number Diff line change
@@ -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($('<div id="region"></div>'));
this.attachedRegion = new Marionette.Region({el: '#region'});
this.detachedRegion = new Marionette.Region({el: $('<div></div>')});
this.BbView = Backbone.View.extend({
attachedRegion = new Region({el: '#region'});
detachedRegion = new Region({el: $('<div></div>')});
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;
});
});

Expand Down
67 changes: 43 additions & 24 deletions test/unit/on-dom-remove.spec.js
View file
Original file line number Diff line number Diff line change
@@ -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($('<div id="region"></div>'));
this.attachedRegion = new Marionette.Region({el: '#region'});
this.detachedRegion = new Marionette.Region({el: $('<div></div>')});
this.BbView = Backbone.View.extend({
attachedRegion = new Region({el: '#region'});
detachedRegion = new Region({el: $('<div></div>')});
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);
});
});
});
Expand Down
Loading

0 comments on commit f37d4da

Please sign in to comment.