From 552d728e35e509b465416ef8aef5d460ba441138 Mon Sep 17 00:00:00 2001 From: Jmeas Date: Wed, 4 Feb 2015 11:13:29 -0500 Subject: [PATCH] Remove Regions from Application. --- docs/marionette.application.md | 140 +----- docs/marionette.layoutview.md | 4 +- src/application.js | 91 +--- test/unit/application.app-regions.spec.js | 529 -------------------- test/unit/item-view.dynamic-regions.spec.js | 22 +- test/unit/region.spec.js | 20 +- 6 files changed, 27 insertions(+), 779 deletions(-) delete mode 100644 test/unit/application.app-regions.spec.js diff --git a/docs/marionette.application.md b/docs/marionette.application.md index 2eadfee15a..22aec53acc 100644 --- a/docs/marionette.application.md +++ b/docs/marionette.application.md @@ -20,14 +20,6 @@ var MyApp = new Backbone.Marionette.Application(); * [initialize](#initialize) * [Application Events](#application-events) * [Starting An Application](#starting-an-application) -* [Application Regions (deprecated)](#application-regions) - * [jQuery Selector](#jquery-selector) - * [Custom Region Class](#custom-region-class) - * [Custom Region Class And Selector](#custom-region-class-and-selector) - * [Region Options](#region-options) - * [Overriding the default RegionManager](#overriding-the-default-regionmanager) - * [Get Region By Name](#get-region-by-name) - * [Removing Regions](#removing-regions) * [Application.getOption](#applicationgetoption) * [Adding Initializers (deprecated)](#adding-initializers) @@ -93,136 +85,6 @@ var options = { MyApp.start(options); ``` -## Application Regions - -> Warning: deprecated -> This feature is deprecated. Instead of using the Application as the root -> of your view tree, you should use a Layout View. To scope your Layout View to the entire -> document, you could set its `el` to 'body'. This might look something like the following: -> -> -> var RootView = Marionette.LayoutView.extend({ -> el: 'body' -> }); -> - -Application instances have an API that allow you to manage [Regions](./marionette.region.md). -These Regions are typically the means through which your views become attached to the `document`. - -You can create Regions through the `addRegions` method by passing in an object -literal or a function that returns an object literal. - -There are three syntax forms for adding a region to an application object. - -### jQuery Selector - -The first is to specify a jQuery selector as the value of the region -definition. This will create an instance of a Marionette.Region directly, -and assign it to the selector: - -```js -MyApp.addRegions({ - someRegion: "#some-div", - anotherRegion: "#another-div" -}); -``` - -### Custom Region Class - -The second is to specify a custom region class, where the region class has -already specified a selector: - -```js -var MyCustomRegion = Marionette.Region.extend({ - el: "#foo" -}); - -MyApp.addRegions(function() { - return { - someRegion: MyCustomRegion - }; -}); -``` - -### Custom Region Class And Selector - -The third method is to specify a custom region class, and a jQuery selector -for this region instance, using an object literal: - -```js -var MyCustomRegion = Marionette.Region.extend({}); - -MyApp.addRegions({ - - someRegion: { - selector: "#foo", - regionClass: MyCustomRegion - }, - - anotherRegion: { - selector: "#bar", - regionClass: MyCustomRegion - } - -}); -``` - -### Region Options - -You can also specify regions per `Application` instance. - -```js -new Marionette.Application({ - regions: { - fooRegion: '#foo-region' - } -}); -``` - -### Overriding the default `RegionManager` - -If you need the `RegionManager`'s class chosen dynamically, specify `getRegionManager`: - -```js -Marionette.Application.extend({ - // ... - - getRegionManager: function() { - // custom logic - return new MyRegionManager(); - } -``` - -This can be useful if you want to attach `Application`'s regions to your own instance of `RegionManager`. - -### Get Region By Name - -A region can be retrieved by name, using the `getRegion` method: - -```js -var app = new Marionette.Application(); -app.addRegions({ r1: "#region1" }); - -var myRegion = app.getRegion('r1'); -``` - -Regions are also attached directly to the Application instance, **but this is not recommended usage**. - -### Removing Regions - -Regions can also be removed with the `removeRegion` method, passing in -the name of the region to remove as a string value: - -```js -MyApp.removeRegion('someRegion'); -``` - -Removing a region will properly empty it before removing it from the -application object. - -For more information on regions, see [the region documentation](./marionette.region.md) Also, the API that Applications use to -manage regions comes from the RegionManager Class, which is documented [over here](./marionette.regionmanager.md). - ### Application.getOption Retrieve an object's attribute either directly from the object, or from the object's this.options, with this.options taking precedence. @@ -255,7 +117,7 @@ MyApp.addInitializer(function(options){ var myView = new MyView({ model: options.someModel }); - MyApp.mainRegion.show(myView); + MyApp.rootView.mainRegion.show(myView); }); MyApp.addInitializer(function(options){ diff --git a/docs/marionette.layoutview.md b/docs/marionette.layoutview.md index df31357db9..eae8ee2f20 100644 --- a/docs/marionette.layoutview.md +++ b/docs/marionette.layoutview.md @@ -222,7 +222,7 @@ var layoutView = new Marionette.LayoutView({ }); // Lastly, show the LayoutView in the App's mainRegion -MyApp.getRegion('main').show(layoutView); +MyApp.rootView.getRegion('main').show(layoutView); ``` You can nest LayoutViews as deeply as you want. This provides for a well organized, @@ -235,7 +235,7 @@ var layout1 = new Layout1(); var layout2 = new Layout2(); var layout3 = new Layout3(); -MyApp.getRegion('main').show(layout1); +MyApp.rootView.getRegion('main').show(layout1); layout1.showChildView('region1', layout2); layout2.showChildView('region2', layout3); diff --git a/src/application.js b/src/application.js index c2945397b2..9192e695db 100644 --- a/src/application.js +++ b/src/application.js @@ -1,12 +1,9 @@ // Application // ----------- -// Contain and manage the composite application as a whole. -// Stores and starts up `Region` objects, includes an -// event aggregator as `app.vent` +// A container for a Marionette application. Marionette.Application = Marionette.Object.extend({ constructor: function(options) { - this._initializeRegions(options); this._initCallbacks = new Marionette.Callbacks(); this.submodules = {}; _.extend(this, options); @@ -39,38 +36,6 @@ Marionette.Application = Marionette.Object.extend({ this.triggerMethod('start', options); }, - // Add regions to your app. - // Accepts a hash of named strings or Region objects - // addRegions({something: "#someRegion"}) - // addRegions({something: Region.extend({el: "#someRegion"}) }); - addRegions: function(regions) { - return this._regionManager.addRegions(regions); - }, - - // Empty all regions in the app, without removing them - emptyRegions: function() { - return this._regionManager.emptyRegions(); - }, - - // Removes a region from your app, by name - // Accepts the regions name - // removeRegion('myRegion') - removeRegion: function(region) { - return this._regionManager.removeRegion(region); - }, - - // Provides alternative access to regions - // Accepts the region name - // getRegion('main') - getRegion: function(region) { - return this._regionManager.get(region); - }, - - // Get all the regions from the region manager - getRegions: function(){ - return this._regionManager.getRegions(); - }, - // Create a module, attached to the application module: function(moduleNames, moduleDefinition) { @@ -82,59 +47,5 @@ Marionette.Application = Marionette.Object.extend({ // see the Marionette.Module object for more information return ModuleClass.create.apply(ModuleClass, args); - }, - - // Enable easy overriding of the default `RegionManager` - // for customized region interactions and business-specific - // view logic for better control over single regions. - getRegionManager: function() { - return new Marionette.RegionManager(); - }, - - // Internal method to initialize the regions that have been defined in a - // `regions` attribute on the application instance - _initializeRegions: function(options) { - var regions = _.isFunction(this.regions) ? this.regions(options) : this.regions || {}; - - this._initRegionManager(); - - // Enable users to define `regions` in instance options. - var optionRegions = Marionette.getOption(options, 'regions'); - - // Enable region options to be a function - if (_.isFunction(optionRegions)) { - optionRegions = optionRegions.call(this, options); - } - - // Overwrite current regions with those passed in options - _.extend(regions, optionRegions); - - this.addRegions(regions); - - return this; - }, - - // Internal method to set up the region manager - _initRegionManager: function() { - this._regionManager = this.getRegionManager(); - this._regionManager._parent = this; - - this.listenTo(this._regionManager, 'before:add:region', function() { - Marionette._triggerMethod(this, 'before:add:region', arguments); - }); - - this.listenTo(this._regionManager, 'add:region', function(name, region) { - this[name] = region; - Marionette._triggerMethod(this, 'add:region', arguments); - }); - - this.listenTo(this._regionManager, 'before:remove:region', function() { - Marionette._triggerMethod(this, 'before:remove:region', arguments); - }); - - this.listenTo(this._regionManager, 'remove:region', function(name) { - delete this[name]; - Marionette._triggerMethod(this, 'remove:region', arguments); - }); } }); diff --git a/test/unit/application.app-regions.spec.js b/test/unit/application.app-regions.spec.js deleted file mode 100644 index 8eadd8b8a1..0000000000 --- a/test/unit/application.app-regions.spec.js +++ /dev/null @@ -1,529 +0,0 @@ -describe('application regions', function() { - 'use strict'; - - describe('when adding region selectors to an app, and starting the app', function() { - beforeEach(function() { - this.app = new Marionette.Application(); - - this.beforeAddRegionStub = this.sinon.stub(); - this.addRegionStub = this.sinon.stub(); - this.app.on('before:add:region', this.beforeAddRegionStub); - this.app.on('add:region', this.addRegionStub); - - this.fooRegion = new Marionette.Region({ el: '#foo-region' }); - this.barRegion = new Marionette.Region({ el: '#bar-region' }); - - this.fooRegion._parent = this.app._regionManager; - this.barRegion._parent = this.app._regionManager; - - this.app.addRegions({ - fooRegion: '#foo-region', - barRegion: '#bar-region' - }); - this.app.start(); - }); - - it('should initialize the regions', function() { - expect(this.app.fooRegion).to.deep.equal(this.fooRegion); - expect(this.app.barRegion).to.deep.equal(this.barRegion); - }); - - it('should create backlink to regionManager', function() { - expect(this.app._regionManager._parent).to.deep.equal(this.app); - }); - - it('should trigger a before:add:region event', function() { - expect(this.beforeAddRegionStub).to.have.been.calledWith('fooRegion', this.fooRegion); - }); - - it('should trigger a add:region event', function() { - expect(this.addRegionStub).to.have.been.calledWith('barRegion', this.barRegion); - }); - }); - - describe('when adding region objects to an app', function() { - beforeEach(function() { - this.app = new Marionette.Application(); - this.FooRegion = Marionette.Region.extend({ el: '#foo-region' }); - this.BarRegion = Marionette.Region.extend({ el: '#bar-region' }); - - this.app.addRegions({ - fooRegion: this.FooRegion, - barRegion: this.BarRegion - }); - }); - - it('should initialize the regions, immediately', function() { - expect(this.app.fooRegion).to.be.instanceof(this.FooRegion); - expect(this.app.barRegion).to.be.instanceof(this.BarRegion); - }); - }); - - describe('when adding custom region classes to an app, with selectors', function() { - beforeEach(function() { - this.fooOption = 'bar'; - this.fooSelector = '#foo-region'; - this.app = new Marionette.Application(); - this.FooRegion = Marionette.Region.extend(); - - this.fooRegion = new this.FooRegion({ - el: this.fooSelector, - fooOption: this.fooOption - }); - - this.fooRegion._parent = this.app._regionManager; - - this.app.addRegions({ - fooRegion: { - selector: this.fooSelector, - regionClass: this.FooRegion, - fooOption: this.fooOption - } - }); - }); - - it('should initialize the regions, immediately', function() { - expect(this.app.fooRegion).to.deep.equal(this.fooRegion); - }); - - it('should create an instance of the specified region class', function() { - expect(this.app.fooRegion).to.be.instanceof(this.FooRegion); - }); - - it('should set the specified selector', function() { - expect(this.app.fooRegion.$el.selector).to.equal('#foo-region'); - }); - - it('should pass extra options to the custom regionClass', function() { - expect(this.app.fooRegion).to.have.deep.property('options.fooOption', this.fooOption); - }); - }); - - describe('when adding regions as an option', function() { - beforeEach(function() { - this.fooSelector = '#foo-region'; - this.barSelector = '#bar-region'; - this.bazSelector = '#baz-region'; - this.quuxSelector = '#quux-selector'; - - this.BarRegion = Marionette.Region.extend(); - this.BazRegion = Marionette.Region.extend({ el: this.bazSelector }); - }); - - describe('and when regions is an object', function() { - beforeEach(function() { - this.app = new Marionette.Application({ - regions: { - fooRegion: this.fooSelector, - barRegion: { - selector: this.barSelector, - regionClass: this.BarRegion - }, - bazRegion: this.BazRegion - } - }); - }); - - it('should initialize the regions immediately', function() { - expect(this.app.fooRegion).to.exist; - expect(this.app.barRegion).to.exist; - expect(this.app.bazRegion).to.exist; - }); - - it('should use the custom region class', function() { - expect(this.app.barRegion).to.be.an.instanceof(this.BarRegion); - expect(this.app.bazRegion).to.be.an.instanceof(this.BazRegion); - }); - }); - - describe('and when regions is an object and the application has predefined regions', function() { - beforeEach(function() { - this.App = Marionette.Application.extend({ - regions: { - fooRegion: this.fooSelector, - barRegion: { - selector: this.barSelector, - regionClass: this.BarRegion - } - } - }); - - this.app = new this.App({ - regions: { - barRegion: this.BazRegion, - quuxRegion: this.quuxSelector - } - }); - }); - - it('should initialize the regions immediately', function() { - expect(this.app.fooRegion).to.exist; - expect(this.app.barRegion).to.exist; - expect(this.app.quuxRegion).to.exist; - }); - - it('should overwrite regions from the instance options', function() { - expect(this.app.barRegion).to.be.an.instanceof(this.BazRegion); - expect(this.app.quuxRegion.el).to.equal(this.quuxSelector); - }); - }); - - describe('and when regions is a function', function() { - beforeEach(function() { - this.regionOptionsStub = this.sinon.stub().returns({ - fooRegion: this.fooSelector, - barRegion: { - selector: this.barSelector, - regionClass: this.BarRegion - }, - bazRegion: this.BazRegion - }); - - this.options = { - regions: this.regionOptionsStub - }; - - this.app = new Marionette.Application(this.options); - }); - - it('should initialize the regions immediately', function() { - expect(this.app.fooRegion).to.exist; - expect(this.app.barRegion).to.exist; - expect(this.app.bazRegion).to.exist; - }); - - it('should use the custom region class', function() { - expect(this.app.barRegion).to.be.an.instanceof(this.BarRegion); - expect(this.app.bazRegion).to.be.an.instanceof(this.BazRegion); - }); - - it('should call the regions function on the application context', function() { - expect(this.regionOptionsStub) - .to.have.been.calledOnce - .and.have.been.calledOn(this.app); - }); - - it('should call the regions function with the options', function() { - expect(this.regionOptionsStub).to.have.been.calledWith(this.options); - }); - }); - - describe('and when regions is a function and the application has predefined regions', function() { - beforeEach(function() { - this.App = Marionette.Application.extend({ - regions: { - fooRegion: this.fooSelector, - barRegion: { - selector: this.barSelector, - regionClass: this.BarRegion - } - } - }); - - this.regionOptionsStub = this.sinon.stub().returns({ - barRegion: this.BazRegion, - quuxRegion: this.quuxSelector - }); - - this.options = { - regions: this.regionOptionsStub - }; - - this.app = new this.App(this.options); - }); - - it('should initialize the regions immediately', function() { - expect(this.app.fooRegion).to.exist; - expect(this.app.barRegion).to.exist; - expect(this.app.quuxRegion).to.exist; - }); - - it('should overwrite regions from the instance options', function() { - expect(this.app.barRegion).to.be.an.instanceof(this.BazRegion); - expect(this.app.quuxRegion.el).to.equal(this.quuxSelector); - }); - - it('should call the regions function on the application context', function() { - expect(this.regionOptionsStub) - .to.have.been.calledOnce - .and.have.been.calledOn(this.app); - }); - - it('should call the regions function with the options', function() { - expect(this.regionOptionsStub).to.have.been.calledWith(this.options); - }); - }); - }); - - describe('when defining regions in a class definition', function() { - beforeEach(function() { - this.fooSelector = '#foo-region'; - this.barSelector = '#bar-region'; - this.bazSelector = '#baz-region'; - - this.BarRegion = Marionette.Region.extend(); - this.BazRegion = Marionette.Region.extend({ el: this.bazSelector }); - - this.regions = { - fooRegion: this.fooSelector, - barRegion: { - selector: this.barSelector, - regionClass: this.BarRegion - }, - bazRegion: this.BazRegion - }; - }); - - describe('and when regions is an object', function() { - beforeEach(function() { - this.App = Marionette.Application.extend({ - regions: this.regions - }); - - this.app = new this.App(); - }); - - it('should initialize the regions immediately', function() { - expect(this.app.fooRegion).to.exist; - expect(this.app.barRegion).to.exist; - expect(this.app.bazRegion).to.exist; - }); - - it('should use the custom region class', function() { - expect(this.app.barRegion).to.be.an.instanceof(this.BarRegion); - expect(this.app.bazRegion).to.be.an.instanceof(this.BazRegion); - }); - }); - - describe('and when regions is a function', function() { - beforeEach(function() { - this.regionOptionsStub = this.sinon.stub().returns(this.regions); - - this.options = { foo: 'bar' }; - - this.App = Marionette.Application.extend({ - regions: this.regionOptionsStub - }); - - this.app = new this.App(this.options); - }); - - it('should initialize the regions immediately', function() { - expect(this.app.fooRegion).to.exist; - expect(this.app.barRegion).to.exist; - expect(this.app.bazRegion).to.exist; - }); - - it('should use the custom region class', function() { - expect(this.app.barRegion).to.be.an.instanceof(this.BarRegion); - expect(this.app.bazRegion).to.be.an.instanceof(this.BazRegion); - }); - - it('should call the regions function on the application context', function() { - expect(this.regionOptionsStub) - .to.have.been.calledOnce - .and.have.been.calledOn(this.app); - }); - - it('should call the regions function with the options', function() { - expect(this.regionOptionsStub).to.have.been.calledWith(this.options); - }); - }); - }); - - describe('when adding custom region classes to an app', function() { - beforeEach(function() { - this.fooSelector = '#foo-region'; - this.app = new Marionette.Application(); - this.FooRegion = Marionette.Region.extend({ el: this.fooSelector }); - - this.fooRegion = new this.FooRegion(); - this.fooRegion._parent = this.app._regionManager; - - this.app.addRegions({ - fooRegion: this.FooRegion - }); - }); - - it('should initialize the regions, immediately', function() { - expect(this.app.fooRegion).to.deep.equal(this.fooRegion); - }); - - it('should create an instance of the specified region class', function() { - expect(this.app.fooRegion).to.be.instanceof(this.FooRegion); - }); - - it('should set the specified selector', function() { - expect(this.app.fooRegion.$el.selector).to.equal('#foo-region'); - }); - }); - - describe('when adding regions with a function', function() { - beforeEach(function() { - this.app = new Marionette.Application(); - - this.fooSelector = '#foo-region'; - this.barSelector = '#bar-region'; - - this.fooRegion = new Marionette.Region({ - el: this.fooSelector - }); - this.fooRegion._parent = this.app._regionManager; - - - this.BarRegion = Marionette.Region.extend(); - this.barRegion = new this.BarRegion({ - el: this.barSelector - }); - this.barRegion._parent = this.app._regionManager; - - this.regionDefinition = this.sinon.stub().returns({ - fooRegion: this.fooSelector, - barRegion: { - selector: this.barSelector, - regionClass: this.BarRegion - } - }); - - this.regions = this.app.addRegions(this.regionDefinition); - }); - - it('calls the regions definition function', function() { - expect(this.regionDefinition) - .to.have.been.calledOnce - .and.have.been.calledWith(this.regionDefinition); - }); - - it('returns all the created regions on an object literal', function() { - expect(this.app.fooRegion).to.deep.equal(this.fooRegion); - expect(this.app.barRegion).to.deep.equal(this.barRegion); - }); - - it('initializes all the regions immediately', function() { - expect(this.app.getRegion('fooRegion')).to.deep.equal(this.fooRegion); - expect(this.app.getRegion('barRegion')).to.deep.equal(this.barRegion); - }); - - it('uses the custom regionClass', function() { - expect(this.app.getRegion('barRegion')).to.be.an.instanceof(this.BarRegion); - }); - }); - - describe('when an app has a region', function() { - beforeEach(function() { - this.app = new Marionette.Application(); - this.fooRegion = new Marionette.Region({ el: '#foo-region' }); - this.fooRegion._parent = this.app._regionManager; - - this.app.addRegions({ - fooRegion: '#foo-region' - }); - }); - - it('should make the region available as a named attribute', function() { - expect(this.app.fooRegion).to.deep.equal(this.fooRegion); - }); - - it('should be able to retrieve the region', function() { - expect(this.app.getRegion('fooRegion')).to.equal(this.app.fooRegion); - }); - }); - - describe('when destroying all regions in the app', function() { - beforeEach(function() { - this.app = new Marionette.Application(); - this.app.addRegions({ - fooRegion: '#foo-region', - barRegion: '#bar-region' - }); - this.regions = this.app.getRegions(); - - this.sinon.spy(this.app.fooRegion, 'empty'); - this.sinon.spy(this.app.barRegion, 'empty'); - - this.sinon.spy(this.app, 'emptyRegions'); - this.app.emptyRegions(); - }); - - it('should empty the regions', function() { - expect(this.app.fooRegion.empty).to.have.been.called; - expect(this.app.barRegion.empty).to.have.been.called; - }); - - it('should return the regions', function() { - expect(this.app.emptyRegions).to.have.returned(this.regions); - }); - }); - - describe("when an app has multiple regions", function(){ - beforeEach(function(){ - this.App = new Marionette.Application(); - this.App.addRegions({ - r1: "#region1", - r2: "#region2" - }); - - this.regions = this.App.getRegions(); - }); - - it("should be able to retrieve all regions", function(){ - expect(this.regions.r1).to.equal(this.App.getRegion("r1")); - expect(this.regions.r2).to.equal(this.App.getRegion("r2")); - }); - }); - - describe('when removing a region', function() { - beforeEach(function() { - this.app = new Marionette.Application(); - this.app.addRegions({ - fooRegion: '#foo-region', - barRegion: '#bar-region' - }); - this.fooRegion = this.app.fooRegion; - - this.beforeRemoveRegionStub = this.sinon.stub(); - this.removeRegionStub = this.sinon.stub(); - this.app.on('before:remove:region', this.beforeRemoveRegionStub); - this.app.on('remove:region', this.removeRegionStub); - - this.app.start(); - - this.sinon.spy(this.app, 'removeRegion'); - this.app.removeRegion('fooRegion'); - }); - - it('should remove the region', function() { - expect(this.app.fooRegion).to.be.undefined; - }); - - it('should trigger a before:remove:region event', function() { - expect(this.beforeRemoveRegionStub).to.have.been.calledWith('fooRegion', this.fooRegion); - }); - - it('should trigger a remove:region event', function() { - expect(this.removeRegionStub).to.have.been.calledWith('fooRegion', this.fooRegion); - }); - - it('should return the region', function() { - expect(this.app.removeRegion).to.have.returned(this.fooRegion); - }); - }); - - describe('overriding default regionManager', function() { - beforeEach(function() { - this.getRegionManagerStub = this.sinon.stub().returns(new Marionette.RegionManager()); - - this.App = Marionette.Application.extend({ - getRegionManager: this.getRegionManagerStub - }); - - this.app = new this.App(); - }); - - it('should call into the custom regionManager lookup', function() { - expect(this.app.getRegionManager) - .to.have.been.calledOnce - .and.have.been.calledOn(this.app); - }); - }); -}); diff --git a/test/unit/item-view.dynamic-regions.spec.js b/test/unit/item-view.dynamic-regions.spec.js index a102bc67d5..0933c06be7 100644 --- a/test/unit/item-view.dynamic-regions.spec.js +++ b/test/unit/item-view.dynamic-regions.spec.js @@ -9,17 +9,17 @@ describe('itemView - dynamic regions', function() { describe('when adding regions with a function', function() { beforeEach(function() { - this.app = new Marionette.Application(); + this.view = new Marionette.ItemView(); this.fooSelector = '#foo-region'; this.barSelector = '#bar-region'; this.fooRegion = new Marionette.Region({ el: this.fooSelector }); - this.fooRegion._parent = this.app._regionManager; + this.fooRegion._parent = this.view._regionManager; this.BarRegion = Marionette.Region.extend(); this.barRegion = new this.BarRegion({ el: this.barSelector }); - this.barRegion._parent = this.app._regionManager; + this.barRegion._parent = this.view._regionManager; this.regionDefinition = this.sinon.stub().returns({ fooRegion: this.fooSelector, @@ -29,7 +29,7 @@ describe('itemView - dynamic regions', function() { } }); - this.regions = this.app.addRegions(this.regionDefinition); + this.regions = this.view.addRegions(this.regionDefinition); }); it('calls the regions definition function', function() { @@ -38,18 +38,22 @@ describe('itemView - dynamic regions', function() { .and.have.been.calledWith(this.regionDefinition); }); + // We compare the most unique thing about the regions: the element, because + // the regions themselves are circular objects that can't be serialized into + // JSON. In the future, we should compare cids. it('returns all the created regions on an object literal', function() { - expect(this.app.fooRegion).to.deep.equal(this.fooRegion); - expect(this.app.barRegion).to.deep.equal(this.barRegion); + expect(this.view.fooRegion.el).to.deep.equal(this.fooRegion.el); + expect(this.view.barRegion.el).to.deep.equal(this.barRegion.el); }); + // Same as above. it('initializes all the regions immediately', function() { - expect(this.app.getRegion('fooRegion')).to.deep.equal(this.fooRegion); - expect(this.app.getRegion('barRegion')).to.deep.equal(this.barRegion); + expect(this.view.getRegion('fooRegion').el).to.deep.equal(this.fooRegion.el); + expect(this.view.getRegion('barRegion').el).to.deep.equal(this.barRegion.el); }); it('uses the custom regionClass', function() { - expect(this.app.getRegion('barRegion')).to.be.an.instanceof(this.BarRegion); + expect(this.view.getRegion('barRegion')).to.be.an.instanceof(this.BarRegion); }); }); diff --git a/test/unit/region.spec.js b/test/unit/region.spec.js index aa6e5d56cb..b7b20e9297 100644 --- a/test/unit/region.spec.js +++ b/test/unit/region.spec.js @@ -924,20 +924,20 @@ describe('region', function() { beforeEach(function() { this.setFixtures('
'); - this.myApp = new Backbone.Marionette.Application(); - this.myApp.addRegions({ + this.itemView = new Backbone.Marionette.ItemView(); + this.itemView.addRegions({ MyRegion: '#region', anotherRegion: '#region2' }); - this.region = this.myApp.MyRegion; + this.region = this.itemView.MyRegion; this.sinon.spy(this.region, 'empty'); - this.myApp.removeRegion('MyRegion'); + this.itemView.removeRegion('MyRegion'); }); - it('should be removed from the app', function() { - expect(this.myApp.MyRegion).to.be.undefined; + it('should be removed from the view', function() { + expect(this.itemView.MyRegion).to.be.undefined; }); it('should call "empty" of the region', function() { @@ -947,17 +947,17 @@ describe('region', function() { describe('when getting a region', function() { beforeEach(function() { - this.MyApp = new Backbone.Marionette.Application(); - this.MyApp.addRegions({ + this.itemView = new Backbone.Marionette.ItemView(); + this.itemView.addRegions({ MyRegion: '#region', anotherRegion: '#region2' }); - this.region = this.MyApp.MyRegion; + this.region = this.itemView.MyRegion; }); it('should return the region', function() { - expect(this.MyApp.getRegion('MyRegion')).to.equal(this.region); + expect(this.itemView.getRegion('MyRegion')).to.equal(this.region); }); });