diff --git a/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts b/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts index 166fde44465..6a8b96a050e 100644 --- a/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts +++ b/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts @@ -33,28 +33,6 @@ import { OutletState } from '../utils/outlet'; ``` - You may also specify a name for the `{{outlet}}`, which is useful when using more than one - `{{outlet}}` in a template: - - ```app/templates/application.hbs - {{outlet "menu"}} - {{outlet "sidebar"}} - {{outlet "main"}} - ``` - - Your routes can then render into a specific one of these `outlet`s by specifying the `outlet` - attribute in your `renderTemplate` function: - - ```app/routes/menu.js - import Route from '@ember/routing/route'; - - export default class MenuRoute extends Route { - renderTemplate() { - this.render({ outlet: 'menu' }); - } - } - ``` - See the [routing guide](https://guides.emberjs.com/release/routing/rendering-a-template/) for more information on how your `route` interacts with the `{{outlet}}` helper. Note: Your content __will not render__ if there isn't an `{{outlet}}` for it. diff --git a/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts b/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts index 85f9683711c..c376688c0ca 100644 --- a/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts +++ b/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts @@ -1,6 +1,5 @@ import { ApplicationTestCase, - expectDeprecation, ModuleBasedTestResolver, moduleFor, strip, @@ -180,117 +179,6 @@ if (ENV._DEBUG_RENDER_TREE) { ]); } - async '@test named outlets'() { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.addTemplate( - 'application', - strip` - - {{outlet}} - ` - ); - this.addTemplate('header', 'header'); - this.addTemplate('index', 'index'); - - this.add( - 'controller:index', - class extends Controller { - queryParams = ['showHeader']; - showHeader = false; - } - ); - - interface Model { - showHeader: boolean; - } - - this.add( - 'route:index', - class extends Route { - queryParams = { - showHeader: { - refreshModel: true, - }, - }; - - model({ showHeader }: Model): Model { - return { showHeader }; - } - - setupController(controller: Controller, { showHeader }: Model): void { - controller.setProperties({ showHeader }); - } - - renderTemplate(_: Controller, { showHeader }: Model): void { - expectDeprecation(() => this.render(), /Usage of `render` is deprecated/); - - if (showHeader) { - expectDeprecation( - () => this.render('header', { outlet: 'header' }), - /Usage of `render` is deprecated/ - ); - } else { - expectDeprecation( - () => this.disconnectOutlet('header'), - 'The usage of `disconnectOutlet` is deprecated.' - ); - } - } - } - ); - - await this.visit('/'); - - this.assertRenderTree([ - this.outlet({ - type: 'route-template', - name: 'index', - args: { positional: [], named: { model: { showHeader: false } } }, - instance: this.controllerFor('index'), - template: 'my-app/templates/index.hbs', - bounds: this.nodeBounds(this.element.lastChild), - children: [], - }), - ]); - - await this.visit('/?showHeader'); - - this.assertRenderTree([ - this.outlet('header', { - type: 'route-template', - name: 'header', - args: { positional: [], named: { model: { showHeader: true } } }, - instance: this.controllerFor('index'), - template: 'my-app/templates/header.hbs', - bounds: this.elementBounds(this.element.firstChild), - children: [], - }), - this.outlet({ - type: 'route-template', - name: 'index', - args: { positional: [], named: { model: { showHeader: true } } }, - instance: this.controllerFor('index'), - template: 'my-app/templates/index.hbs', - bounds: this.nodeBounds(this.element.lastChild), - children: [], - }), - ]); - - await this.visit('/'); - - this.assertRenderTree([ - this.outlet({ - type: 'route-template', - name: 'index', - args: { positional: [], named: { model: { showHeader: false } } }, - instance: this.controllerFor('index'), - template: 'my-app/templates/index.hbs', - bounds: this.nodeBounds(this.element.lastChild), - children: [], - }), - ]); - } - async '@test {{mount}}'() { this.addTemplate( 'application', diff --git a/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js b/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js index ec4ff535dbb..ba43210274c 100644 --- a/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js +++ b/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js @@ -439,78 +439,6 @@ moduleFor( }); } - ['@test it can render into named outlets']() { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.router.map(function () { - this.route('colors'); - }); - - this.addTemplate( - 'application', - strip` - -
{{outlet}}
- ` - ); - - this.addTemplate( - 'nav', - strip` - Ember - ` - ); - - this.add( - 'route:application', - Route.extend({ - renderTemplate() { - expectDeprecation(() => { - this.render(); - this.render('nav', { - into: 'application', - outlet: 'nav', - }); - }, /Usage of `render` is deprecated/); - }, - }) - ); - - this.add( - 'route:colors', - Route.extend({ - model() { - return ['red', 'yellow', 'blue']; - }, - }) - ); - - this.addTemplate( - 'colors', - strip` - - ` - ); - - return this.visit('/colors').then(() => { - this.assertInnerHTML(strip` - -
- -
- `); - }); - } - ['@test it should update the outlets when switching between routes']() { this.router.map(function () { this.route('a'); @@ -601,114 +529,6 @@ moduleFor( .then(() => this.assertText('b')); } - ['@test it should update correctly when the controller changes']() { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.router.map(function () { - this.route('color', { path: '/colors/:color' }); - }); - - this.add( - 'route:color', - Route.extend({ - model(params) { - return { color: params.color }; - }, - - renderTemplate(controller, model) { - expectDeprecation( - () => this.render({ controller: model.color, model }), - /Usage of `render` is deprecated/ - ); - }, - }) - ); - - this.add( - 'controller:red', - Controller.extend({ - color: 'red', - }) - ); - - this.add( - 'controller:green', - Controller.extend({ - color: 'green', - }) - ); - - this.addTemplate('color', 'model color: {{@model.color}}, controller color: {{this.color}}'); - - return this.visit('/colors/red') - .then(() => { - this.assertInnerHTML('model color: red, controller color: red'); - return this.visit('/colors/green'); - }) - .then(() => { - this.assertInnerHTML('model color: green, controller color: green'); - }); - } - - ['@test it should produce a stable DOM when two routes render the same template']() { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.router.map(function () { - this.route('a'); - this.route('b'); - }); - - this.add( - 'route:a', - Route.extend({ - model() { - return 'A'; - }, - - renderTemplate(controller, model) { - expectDeprecation( - () => this.render('common', { controller: 'common', model }), - /Usage of `render` is deprecated/ - ); - }, - }) - ); - - this.add( - 'route:b', - Route.extend({ - model() { - return 'B'; - }, - - renderTemplate(controller, model) { - expectDeprecation( - () => this.render('common', { controller: 'common', model }), - /Usage of `render` is deprecated/ - ); - }, - }) - ); - - this.add( - 'controller:common', - Controller.extend({ - prefix: 'common', - }) - ); - - this.addTemplate('common', '{{this.prefix}} {{@model}}'); - - return this.visit('/a') - .then(() => { - this.assertInnerHTML('common A'); - this.takeSnapshot(); - return this.visit('/b'); - }) - .then(() => { - this.assertInnerHTML('common B'); - this.assertInvariants(); - }); - } - // Regression test, glimmer child outlets tried to assume the first element. // but the if put-args clobbered the args used by did-create-element. // I wish there was a way to assert that the OutletComponentManager did not diff --git a/packages/@ember/-internals/routing/lib/system/route.ts b/packages/@ember/-internals/routing/lib/system/route.ts index 3b4aeb58992..52f243340dc 100644 --- a/packages/@ember/-internals/routing/lib/system/route.ts +++ b/packages/@ember/-internals/routing/lib/system/route.ts @@ -1137,20 +1137,7 @@ class Route extends EmberObject.extend(ActionHandler, Evented) implements IRoute this.setupController(controller, context, transition); if (this._environment.options.shouldRender) { - deprecate( - 'Usage of `renderTemplate` is deprecated.', - this.renderTemplate === Route.prototype.renderTemplate, - { - id: 'route-render-template', - until: '4.0.0', - url: 'https://deprecations.emberjs.com/v3.x/#toc_route-render-template', - for: 'ember-source', - since: { - enabled: '3.27.0', - }, - } - ); - this.renderTemplate(controller, context); + this[RENDER](); } // Setup can cause changes to QPs which need to be propogated immediately in @@ -1657,312 +1644,6 @@ class Route extends EmberObject.extend(ActionHandler, Evented) implements IRoute once(this._router, '_setOutlets'); } - /** - A hook you can use to render the template for the current route. - - This method is called with the controller for the current route and the - model supplied by the `model` hook. By default, it renders the route's - template, configured with the controller for the route. - - This method can be overridden to set up and render additional or - alternative templates. - - ```app/routes/posts.js - import Route from '@ember/routing/route'; - - export default class PostsRoute extends Route { - renderTemplate(controller, model) { - let favController = this.controllerFor('favoritePost'); - - // Render the `favoritePost` template into - // the outlet `posts`, and display the `favoritePost` - // controller. - this.render('favoritePost', { - outlet: 'posts', - controller: favController - }); - } - } - ``` - - @method renderTemplate - @param {Object} controller the route's controller - @param {Object} model the route's model - @since 1.0.0 - @public - */ - renderTemplate(_controller: any, _model: {}) { - // eslint-disable-line no-unused-vars - this[RENDER](); - } - - /** - `render` is used to render a template into a region of another template - (indicated by an `{{outlet}}`). `render` is used both during the entry - phase of routing (via the `renderTemplate` hook) and later in response to - user interaction. - - For example, given the following minimal router and templates: - - ```app/router.js - // ... - - Router.map(function() { - this.route('photos'); - }); - - export default Router; - ``` - - ```handlebars - -
- {{outlet "anOutletName"}} -
- ``` - - ```handlebars - -

Photos

- ``` - - You can render `photos.hbs` into the `"anOutletName"` outlet of - `application.hbs` by calling `render`: - - ```app/routes/post.js - import Route from '@ember/routing/route'; - - export default class PostRoute extends Route { - renderTemplate() { - this.render('photos', { - into: 'application', - outlet: 'anOutletName' - }) - } - } - ``` - - `render` additionally allows you to supply which `controller` and - `model` objects should be loaded and associated with the rendered template. - - ```app/routes/posts.js - import Route from '@ember/routing/route'; - - export default class PostsRoute extends Route { - renderTemplate(controller, model) { - this.render('posts', { // the template to render, referenced by name - into: 'application', // the template to render into, referenced by name - outlet: 'anOutletName', // the outlet inside `options.into` to render into. - controller: 'someControllerName', // the controller to use for this template, referenced by name - model: model // the model to set on `options.controller`. - }) - } - } - ``` - - The string values provided for the template name, and controller - will eventually pass through to the resolver for lookup. See - Resolver for how these are mapped to JavaScript objects in your - application. The template to render into needs to be related to either the - current route or one of its ancestors. - - Not all options need to be passed to `render`. Default values will be used - based on the name of the route specified in the router or the Route's - `controllerName` and `templateName` properties. - - For example: - - ```app/router.js - // ... - - Router.map(function() { - this.route('index'); - this.route('post', { path: '/posts/:post_id' }); - }); - - export default Router; - ``` - - ```app/routes/post.js - import Route from '@ember/routing/route'; - - export default class PostRoute extends Route { - renderTemplate() { - this.render(); // all defaults apply - } - } - ``` - - The name of the route, defined by the router, is `post`. - - The following equivalent default options will be applied when - the Route calls `render`: - - ```javascript - this.render('post', { // the template name associated with 'post' Route - into: 'application', // the parent route to 'post' Route - outlet: 'main', // {{outlet}} and {{outlet 'main'}} are synonymous, - controller: 'post', // the controller associated with the 'post' Route - }) - ``` - - By default the controller's `model` will be the route's model, so it does not - need to be passed unless you wish to change which model is being used. - - @method render - @param {String} name the name of the template to render - @param {Object} [options] the options - @param {String} [options.into] the template to render into, - referenced by name. Defaults to the parent template - @param {String} [options.outlet] the outlet inside `options.into` to render into. - Defaults to 'main' - @param {String|Object} [options.controller] the controller to use for this template, - referenced by name or as a controller instance. Defaults to the Route's paired controller - @param {Object} [options.model] the model object to set on `options.controller`. - Defaults to the return value of the Route's model hook - @since 1.0.0 - @public - */ - render(name?: string, options?: PartialRenderOptions) { - deprecate(`Usage of \`render\` is deprecated. Route: \`${this.routeName}\``, false, { - id: 'route-render-template', - until: '4.0.0', - url: 'https://deprecations.emberjs.com/v3.x/#toc_route-render-template', - for: 'ember-source', - since: { - enabled: '3.27.0', - }, - }); - this[RENDER](name, options); - } - - /** - Disconnects a view that has been rendered into an outlet. - - You may pass any or all of the following options to `disconnectOutlet`: - - * `outlet`: the name of the outlet to clear (default: 'main') - * `parentView`: the name of the view containing the outlet to clear - (default: the view rendered by the parent route) - - Example: - - ```app/routes/application.js - import Route from '@ember/routing/route'; - import { action } from '@ember/object'; - - export default class ApplicationRoute extends Route { - @action - showModal(evt) { - this.render(evt.modalName, { - outlet: 'modal', - into: 'application' - }); - } - - @action - hideModal() { - this.disconnectOutlet({ - outlet: 'modal', - parentView: 'application' - }); - } - } - ``` - - Alternatively, you can pass the `outlet` name directly as a string. - - Example: - - ```app/routes/application.js - import Route from '@ember/routing/route'; - import { action } from '@ember/object'; - - export default class ApplicationRoute extends Route { - @action - showModal(evt) { - // ... - } - - @action - hideModal(evt) { - this.disconnectOutlet('modal'); - } - } - ``` - - @method disconnectOutlet - @param {Object|String} options the options hash or outlet name - @since 1.0.0 - @public - */ - disconnectOutlet(options: string | { outlet: string; parentView?: string }) { - deprecate('The usage of `disconnectOutlet` is deprecated.', false, { - id: 'route-disconnect-outlet', - until: '4.0.0', - url: 'https://deprecations.emberjs.com/v3.x/#toc_route-disconnect-outlet', - for: 'ember-source', - since: { - enabled: '3.27.0', - }, - }); - let outletName; - let parentView; - if (options) { - if (typeof options === 'string') { - outletName = options; - } else { - outletName = options.outlet; - parentView = options.parentView ? options.parentView.replace(/\//g, '.') : undefined; - - assert( - 'You passed undefined as the outlet name.', - !('outlet' in options && options.outlet === undefined) - ); - } - } - - outletName = outletName || 'main'; - this._disconnectOutlet(outletName, parentView); - let routeInfos = this._router._routerMicrolib.currentRouteInfos!; - for (let i = 0; i < routeInfos.length; i++) { - // This non-local state munging is sadly necessary to maintain - // backward compatibility with our existing semantics, which allow - // any route to disconnectOutlet things originally rendered by any - // other route. This should all get cut in 2.0. - routeInfos[i].route!._disconnectOutlet(outletName, parentView); - } - } - - _disconnectOutlet(outletName: string, parentView: string | undefined) { - let parent = parentRoute(this) as any; - if (parent && parentView === parent.routeName) { - parentView = undefined; - } - let connections = ROUTE_CONNECTIONS.get(this); - for (let i = 0; i < connections.length; i++) { - let connection = connections[i]; - if (connection.outlet === outletName && connection.into === parentView) { - // This neuters the disconnected outlet such that it doesn't - // render anything, but it leaves an entry in the outlet - // hierarchy so that any existing other renders that target it - // don't suddenly blow up. They will still stick themselves - // into its outlets, which won't render anywhere. All of this - // statefulness should get the machete in 2.0. - connections[i] = { - owner: connection.owner, - into: connection.into, - outlet: connection.outlet, - name: connection.name, - controller: undefined, - template: undefined, - model: undefined, - }; - once(this._router, '_setOutlets'); - } - } - } - willDestroy() { this.teardownViews(); } diff --git a/packages/ember-testing/tests/acceptance_test.js b/packages/ember-testing/tests/acceptance_test.js index c58f7ecac6a..c8d5f8bb171 100644 --- a/packages/ember-testing/tests/acceptance_test.js +++ b/packages/ember-testing/tests/acceptance_test.js @@ -50,7 +50,7 @@ if (!jQueryDisabled) { this.add( 'route:posts', Route.extend({ - renderTemplate() { + setupController() { testContext.currentRoute = 'posts'; this._super(...arguments); }, @@ -72,7 +72,7 @@ if (!jQueryDisabled) { this.add( 'route:comments', Route.extend({ - renderTemplate() { + setupController() { testContext.currentRoute = 'comments'; this._super(...arguments); }, @@ -125,8 +125,7 @@ if (!jQueryDisabled) { } [`@test helpers can be chained with then`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - assert.expect(7); + assert.expect(6); window .visit('/posts') @@ -165,8 +164,7 @@ if (!jQueryDisabled) { } [`@test helpers can be chained to each other (legacy)`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - assert.expect(8); + assert.expect(7); window .visit('/posts') @@ -194,8 +192,7 @@ if (!jQueryDisabled) { } [`@test helpers don't need to be chained`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - assert.expect(6); + assert.expect(5); window.visit('/posts'); @@ -222,8 +219,7 @@ if (!jQueryDisabled) { } [`@test Nested async helpers`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - assert.expect(6); + assert.expect(5); window.visit('/posts'); @@ -251,8 +247,7 @@ if (!jQueryDisabled) { } [`@test Multiple nested async helpers`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - assert.expect(4); + assert.expect(3); window.visit('/posts'); @@ -275,8 +270,7 @@ if (!jQueryDisabled) { } [`@test Helpers nested in thens`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - assert.expect(6); + assert.expect(5); window.visit('/posts').then(() => { window.click('a:first', '#comments-link'); @@ -317,8 +311,7 @@ if (!jQueryDisabled) { } [`@test Unhandled exceptions are logged via Ember.Test.adapter#exception`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - assert.expect(3); + assert.expect(2); console.error = () => {}; // eslint-disable-line no-console let asyncHandled; @@ -350,8 +343,7 @@ if (!jQueryDisabled) { [`@test Unhandled exceptions in 'andThen' are logged via Ember.Test.adapter#exception`]( assert ) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - assert.expect(2); + assert.expect(1); console.error = () => {}; // eslint-disable-line no-console Test.adapter = QUnitAdapter.create({ @@ -372,8 +364,7 @@ if (!jQueryDisabled) { } [`@test should not start routing on the root URL when visiting another`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - assert.expect(5); + assert.expect(4); window.visit('/posts'); @@ -436,8 +427,7 @@ if (!jQueryDisabled) { } [`@test visiting a URL that causes another transition should yield the correct URL`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - assert.expect(3); + assert.expect(2); window.visit('/redirect'); @@ -449,8 +439,7 @@ if (!jQueryDisabled) { [`@test visiting a URL and then visiting a second URL with a transition should yield the correct URL`]( assert ) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - assert.expect(4); + assert.expect(3); window.visit('/posts'); diff --git a/packages/ember/tests/routing/decoupled_basic_test.js b/packages/ember/tests/routing/decoupled_basic_test.js index 9851ff0ccf5..33d1bb89897 100644 --- a/packages/ember/tests/routing/decoupled_basic_test.js +++ b/packages/ember/tests/routing/decoupled_basic_test.js @@ -919,7 +919,6 @@ moduleFor( } ['@test Router accounts for rootURL on page load when using history location'](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); let rootURL = window.location.pathname + '/app'; let postsTemplateRendered = false; let setHistory; @@ -962,8 +961,9 @@ moduleFor( 'route:posts', Route.extend({ model() {}, - renderTemplate() { + setupController() { postsTemplateRendered = true; + this._super(...arguments); }, }) ); diff --git a/packages/ember/tests/routing/model_loading_test.js b/packages/ember/tests/routing/model_loading_test.js index 0f71d5c5fe1..afced00f49c 100644 --- a/packages/ember/tests/routing/model_loading_test.js +++ b/packages/ember/tests/routing/model_loading_test.js @@ -203,53 +203,6 @@ moduleFor( }); } - [`@test The route controller specified via controllerName is used in render`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.router.map(function () { - this.route('home', { path: '/' }); - }); - - this.add( - 'route:home', - Route.extend({ - controllerName: 'myController', - renderTemplate() { - expectDeprecation( - () => this.render('alternative_home'), - /Usage of `render` is deprecated/ - ); - }, - }) - ); - - this.add( - 'controller:myController', - Controller.extend({ - myValue: 'foo', - }) - ); - - this.addTemplate('alternative_home', '

alternative home: {{this.myValue}}

'); - - return this.visit('/').then(() => { - let homeRoute = this.applicationInstance.lookup('route:home'); - let myController = this.applicationInstance.lookup('controller:myController'); - let text = this.$('p').text(); - - assert.equal( - homeRoute.controller, - myController, - 'route controller is set by controllerName' - ); - - assert.equal( - text, - 'alternative home: foo', - 'The homepage template was rendered with data from the custom controller' - ); - }); - } - [`@test The route controller specified via controllerName is used in render even when a controller with the routeName is available`]( assert ) { @@ -488,9 +441,7 @@ moduleFor( } ['@test Nested callbacks are not exited when moving to siblings'](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); let rootSetup = 0; - let rootRender = 0; let rootModel = 0; let rootSerialize = 0; let menuItem; @@ -525,10 +476,6 @@ moduleFor( rootSetup++; }, - renderTemplate() { - rootRender++; - }, - serialize() { rootSerialize++; return this._super(...arguments); @@ -563,7 +510,6 @@ moduleFor( 'The app is now in the initial state' ); assert.equal(rootSetup, 1, 'The root setup was triggered'); - assert.equal(rootRender, 1, 'The root render was triggered'); assert.equal(rootSerialize, 0, 'The root serialize was not called'); assert.equal(rootModel, 1, 'The root model was called'); @@ -572,7 +518,6 @@ moduleFor( return router.transitionTo('special', menuItem).then(function () { assert.equal(rootSetup, 1, 'The root setup was not triggered again'); - assert.equal(rootRender, 1, 'The root render was not triggered again'); assert.equal(rootSerialize, 0, 'The root serialize was not called'); // TODO: Should this be changed? diff --git a/packages/ember/tests/routing/template_rendering_test.js b/packages/ember/tests/routing/template_rendering_test.js index f33f0c72dfc..842eb0e5540 100644 --- a/packages/ember/tests/routing/template_rendering_test.js +++ b/packages/ember/tests/routing/template_rendering_test.js @@ -2,7 +2,7 @@ import { Route } from '@ember/-internals/routing'; import Controller from '@ember/controller'; import { Object as EmberObject, A as emberA } from '@ember/-internals/runtime'; -import { moduleFor, ApplicationTestCase, getTextOf, runTask } from 'internal-test-helpers'; +import { moduleFor, ApplicationTestCase, getTextOf } from 'internal-test-helpers'; import { run } from '@ember/runloop'; import { Component } from '@ember/-internals/glimmer'; @@ -70,182 +70,6 @@ moduleFor( await assert.rejects(this.visit('/what-is-this-i-dont-even'), /\/what-is-this-i-dont-even/); } - [`@test The Homepage with explicit template name in renderTemplate`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.add( - 'route:home', - Route.extend({ - renderTemplate() { - expectDeprecation(() => this.render('homepage'), /Usage of `render` is deprecated/); - }, - }) - ); - - return this.visit('/').then(() => { - let text = this.$('#troll').text(); - assert.equal(text, 'Megatroll', 'the homepage template was rendered'); - }); - } - - async [`@test an alternate template will pull in an alternate controller`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.add( - 'route:home', - Route.extend({ - renderTemplate() { - expectDeprecation(() => this.render('homepage'), /Usage of `render` is deprecated/); - }, - }) - ); - this.add( - 'controller:homepage', - Controller.extend({ - init() { - this._super(...arguments); - this.name = 'Comes from homepage'; - }, - }) - ); - - await this.visit('/'); - - assert.equal(this.$('p').text(), 'Comes from homepage', 'the homepage template was rendered'); - } - - async [`@test An alternate template will pull in an alternate controller instead of controllerName`]( - assert - ) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.add( - 'route:home', - Route.extend({ - controllerName: 'foo', - renderTemplate() { - expectDeprecation(() => this.render('homepage'), /Usage of `render` is deprecated/); - }, - }) - ); - this.add( - 'controller:foo', - Controller.extend({ - init() { - this._super(...arguments); - this.name = 'Comes from foo'; - }, - }) - ); - this.add( - 'controller:homepage', - Controller.extend({ - init() { - this._super(...arguments); - this.name = 'Comes from homepage'; - }, - }) - ); - - await this.visit('/'); - - assert.equal(this.$('p').text(), 'Comes from homepage', 'the homepage template was rendered'); - } - - async [`@test The template will pull in an alternate controller via key/value`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.router.map(function () { - this.route('homepage', { path: '/' }); - }); - - this.add( - 'route:homepage', - Route.extend({ - renderTemplate() { - expectDeprecation( - () => this.render({ controller: 'home' }), - /Usage of `render` is deprecated/ - ); - }, - }) - ); - this.add( - 'controller:home', - Controller.extend({ - init() { - this._super(...arguments); - this.name = 'Comes from home.'; - }, - }) - ); - - await this.visit('/'); - - assert.equal( - this.$('p').text(), - 'Comes from home.', - 'the homepage template was rendered from data from the HomeController' - ); - } - - async [`@test The Homepage with explicit template name in renderTemplate and controller`]( - assert - ) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.add( - 'controller:home', - Controller.extend({ - init() { - this._super(...arguments); - this.name = 'YES I AM HOME'; - }, - }) - ); - this.add( - 'route:home', - Route.extend({ - renderTemplate() { - expectDeprecation(() => this.render('homepage'), /Usage of `render` is deprecated/); - }, - }) - ); - - await this.visit('/'); - - assert.equal(this.$('p').text(), 'YES I AM HOME', 'The homepage template was rendered'); - } - - async [`@test Model passed via renderTemplate model is set as controller's model`](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.addTemplate( - 'bio', - '

Model: {{@model.name}}

Controller: {{this.model.name}}

' - ); - this.add( - 'route:home', - Route.extend({ - renderTemplate() { - expectDeprecation(() => { - this.render('bio', { - model: { name: 'emberjs' }, - }); - }, /Usage of `render` is deprecated/); - }, - }) - ); - - await this.visit('/'); - - let text = this.$('p').text(); - - assert.ok( - text.indexOf('Model: emberjs') > -1, - 'Passed model was available as the `@model` argument' - ); - - assert.ok( - text.indexOf('Controller: emberjs') > -1, - "Passed model was set as controller's `model` property" - ); - } - ['@test render uses templateName from route'](assert) { this.addTemplate('the_real_home_template', '

THIS IS THE REAL HOME

'); this.add( @@ -262,65 +86,8 @@ moduleFor( }); } - ['@test defining templateName allows other templates to be rendered'](assert) { - this.addTemplate('alert', `
Invader!
`); - this.addTemplate('the_real_home_template', `

THIS IS THE REAL HOME

{{outlet 'alert'}}`); - this.add( - 'route:home', - Route.extend({ - templateName: 'the_real_home_template', - actions: { - showAlert() { - expectDeprecation(() => { - this.render('alert', { - into: 'home', - outlet: 'alert', - }); - }, /Usage of `render` is deprecated/); - }, - }, - }) - ); - - return this.visit('/') - .then(() => { - let text = this.$('p').text(); - assert.equal(text, 'THIS IS THE REAL HOME', 'the homepage template was rendered'); - - return runTask(() => this.appRouter.send('showAlert')); - }) - .then(() => { - let text = this.$('.alert-box').text(); - - assert.equal(text, 'Invader!', 'Template for alert was rendered into the outlet'); - }); - } - - ['@test templateName is still used when calling render with no name and options'](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.addTemplate('alert', `
Invader!
`); - this.addTemplate('home', `

THIS IS THE REAL HOME

{{outlet 'alert'}}`); - - this.add( - 'route:home', - Route.extend({ - templateName: 'alert', - renderTemplate() { - expectDeprecation(() => this.render({}), /Usage of `render` is deprecated/); - }, - }) - ); - - return this.visit('/').then(() => { - let text = this.$('.alert-box').text(); - - assert.equal(text, 'Invader!', 'default templateName was rendered into outlet'); - }); - } - ['@test Generated names can be customized when providing routes with dot notation'](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - assert.expect(5); + assert.expect(4); this.addTemplate('index', '
Index
'); this.addTemplate('application', "

Home

{{outlet}}
"); @@ -339,7 +106,7 @@ moduleFor( this.add( 'route:foo', Route.extend({ - renderTemplate() { + setupController() { assert.ok(true, 'FooBarRoute was called'); return this._super(...arguments); }, @@ -349,7 +116,7 @@ moduleFor( this.add( 'route:bar.baz', Route.extend({ - renderTemplate() { + setupController() { assert.ok(true, 'BarBazRoute was called'); return this._super(...arguments); }, @@ -407,123 +174,6 @@ moduleFor( }); } - ['@test Child routes render into specified template'](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.addTemplate('index', '
Index
'); - this.addTemplate('application', "

Home

{{outlet}}
"); - this.addTemplate('top', "
{{outlet}}
"); - this.addTemplate('middle', "
{{outlet}}
"); - this.addTemplate('middle.bottom', '

Bottom!

'); - - this.router.map(function () { - this.route('top', function () { - this.route('middle', { resetNamespace: true }, function () { - this.route('bottom'); - }); - }); - }); - - this.add( - 'route:middle.bottom', - Route.extend({ - renderTemplate() { - expectDeprecation( - () => this.render('middle/bottom', { into: 'top' }), - /Usage of `render` is deprecated/ - ); - }, - }) - ); - - return this.visit('/top/middle/bottom').then(() => { - assert.ok(true, '/top/middle/bottom has been handled'); - let rootElement = document.getElementById('qunit-fixture'); - assert.equal( - rootElement.querySelectorAll('.main .middle .bottom p').length, - 0, - 'should not render into the middle template' - ); - assert.equal( - getTextOf(rootElement.querySelector('.main .middle > p')), - 'Bottom!', - 'The template was rendered into the top template' - ); - }); - } - - ['@test Rendering into specified template with slash notation'](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.addTemplate('person.profile', 'profile {{outlet}}'); - this.addTemplate('person.details', 'details!'); - - this.router.map(function () { - this.route('home', { path: '/' }); - }); - - this.add( - 'route:home', - Route.extend({ - renderTemplate() { - expectDeprecation(() => { - this.render('person/profile'); - this.render('person/details', { into: 'person/profile' }); - }, /Usage of `render` is deprecated/); - }, - }) - ); - - return this.visit('/').then(() => { - let rootElement = document.getElementById('qunit-fixture'); - assert.equal( - rootElement.textContent.trim(), - 'profile details!', - 'The templates were rendered' - ); - }); - } - - ['@test Only use route rendered into main outlet for default into property on child'](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.addTemplate('application', "{{outlet 'menu'}}{{outlet}}"); - this.addTemplate('posts', '{{outlet}}'); - this.addTemplate('posts.index', '

postsIndex

'); - this.addTemplate('posts.menu', '
postsMenu
'); - - this.router.map(function () { - this.route('posts', function () {}); - }); - - this.add( - 'route:posts', - Route.extend({ - renderTemplate() { - expectDeprecation(() => { - this.render(); - this.render('posts/menu', { - into: 'application', - outlet: 'menu', - }); - }, /Usage of `render` is deprecated/); - }, - }) - ); - - return this.visit('/posts').then(() => { - assert.ok(true, '/posts has been handled'); - let rootElement = document.getElementById('qunit-fixture'); - assert.equal( - getTextOf(rootElement.querySelector('div.posts-menu')), - 'postsMenu', - 'The posts/menu template was rendered' - ); - assert.equal( - getTextOf(rootElement.querySelector('p.posts-index')), - 'postsIndex', - 'The posts/index template was rendered' - ); - }); - } - ['@test Application template does not duplicate when re-rendered'](assert) { this.addTemplate('application', '

I render once

{{outlet}}'); @@ -622,830 +272,33 @@ moduleFor( assert.equal(insertionCount, 1, 'view should still have inserted only once'); } - ['@test The template is not re-rendered when two routes present the exact same template & controller']( - assert - ) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); + ['@test {{outlet}} works when created after initial render'](assert) { + this.addTemplate('sample', 'Hi{{#if this.showTheThing}}{{outlet}}{{/if}}Bye'); + this.addTemplate('sample.inner', 'Yay'); + this.addTemplate('sample.inner2', 'Boo'); this.router.map(function () { - this.route('first'); - this.route('second'); - this.route('third'); - this.route('fourth'); - }); - - // Note add a component to test insertion - - let insertionCount = 0; - this.add( - 'component:x-input', - Component.extend({ - didInsertElement() { - insertionCount += 1; - }, - }) - ); - - let SharedRoute = Route.extend({ - setupController() { - this.controllerFor('shared').set('message', 'This is the ' + this.routeName + ' message'); - }, - - renderTemplate() { - expectDeprecation( - () => this.render('shared', { controller: 'shared' }), - /Usage of `render` is deprecated/ - ); - }, + this.route('sample', { path: '/' }, function () { + this.route('inner', { path: '/' }); + this.route('inner2', { path: '/2' }); + }); }); - this.add('route:shared', SharedRoute); - this.add('route:first', SharedRoute.extend()); - this.add('route:second', SharedRoute.extend()); - this.add('route:third', SharedRoute.extend()); - this.add('route:fourth', SharedRoute.extend()); - - this.add('controller:shared', Controller.extend()); + let rootElement; + return this.visit('/') + .then(() => { + rootElement = document.getElementById('qunit-fixture'); + assert.equal(rootElement.textContent.trim(), 'HiBye', 'initial render'); - this.addTemplate('shared', '

{{this.message}}{{x-input}}

'); + run(() => this.applicationInstance.lookup('controller:sample').set('showTheThing', true)); - let rootElement = document.getElementById('qunit-fixture'); - return this.visit('/first') - .then(() => { - assert.ok(true, '/first has been handled'); - assert.equal(getTextOf(rootElement.querySelector('p')), 'This is the first message'); - assert.equal(insertionCount, 1, 'expected one assertion'); - return this.visit('/second'); - }) - .then(() => { - assert.ok(true, '/second has been handled'); - assert.equal(getTextOf(rootElement.querySelector('p')), 'This is the second message'); - assert.equal(insertionCount, 1, 'expected one assertion'); - return run(() => { - this.applicationInstance - .lookup('router:main') - .transitionTo('third') - .then( - function () { - assert.ok(true, 'expected transition'); - }, - function (reason) { - assert.ok(false, 'unexpected transition failure: ', QUnit.jsDump.parse(reason)); - } - ); - }); - }) - .then(() => { - assert.equal(getTextOf(rootElement.querySelector('p')), 'This is the third message'); - assert.equal(insertionCount, 1, 'expected one assertion'); - return this.visit('fourth'); + assert.equal(rootElement.textContent.trim(), 'HiYayBye', 'second render'); + return this.visit('/2'); }) .then(() => { - assert.ok(true, '/fourth has been handled'); - assert.equal(insertionCount, 1, 'expected one assertion'); - assert.equal(getTextOf(rootElement.querySelector('p')), 'This is the fourth message'); + assert.equal(rootElement.textContent.trim(), 'HiBooBye', 'third render'); }); } - ['@test Route should tear down multiple outlets'](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.addTemplate('application', "{{outlet 'menu'}}{{outlet}}{{outlet 'footer'}}"); - this.addTemplate('posts', '{{outlet}}'); - this.addTemplate('users', 'users'); - this.addTemplate('posts.index', '

postsIndex

'); - this.addTemplate('posts.menu', '
postsMenu
'); - this.addTemplate('posts.footer', ''); - - this.router.map(function () { - this.route('posts', function () {}); - this.route('users', function () {}); - }); - - this.add( - 'route:posts', - Route.extend({ - renderTemplate() { - expectDeprecation(() => { - this.render('posts/menu', { - into: 'application', - outlet: 'menu', - }); - - this.render(); - - this.render('posts/footer', { - into: 'application', - outlet: 'footer', - }); - }, /Usage of `render` is deprecated/); - }, - }) - ); - - let rootElement = document.getElementById('qunit-fixture'); - return this.visit('/posts') - .then(() => { - assert.ok(true, '/posts has been handled'); - assert.equal( - getTextOf(rootElement.querySelector('div.posts-menu')), - 'postsMenu', - 'The posts/menu template was rendered' - ); - assert.equal( - getTextOf(rootElement.querySelector('p.posts-index')), - 'postsIndex', - 'The posts/index template was rendered' - ); - assert.equal( - getTextOf(rootElement.querySelector('div.posts-footer')), - 'postsFooter', - 'The posts/footer template was rendered' - ); - - return this.visit('/users'); - }) - .then(() => { - assert.ok(true, '/users has been handled'); - assert.equal( - rootElement.querySelector('div.posts-menu'), - null, - 'The posts/menu template was removed' - ); - assert.equal( - rootElement.querySelector('p.posts-index'), - null, - 'The posts/index template was removed' - ); - assert.equal( - rootElement.querySelector('div.posts-footer'), - null, - 'The posts/footer template was removed' - ); - }); - } - - ['@test Route supports clearing outlet explicitly'](assert) { - this.addTemplate('application', "{{outlet}}{{outlet 'modal'}}"); - this.addTemplate('posts', '{{outlet}}'); - this.addTemplate('users', 'users'); - this.addTemplate('posts.index', '
postsIndex {{outlet}}
'); - this.addTemplate('posts.modal', '
postsModal
'); - this.addTemplate('posts.extra', '
postsExtra
'); - - this.router.map(function () { - this.route('posts', function () {}); - this.route('users', function () {}); - }); - - this.add( - 'route:posts', - Route.extend({ - actions: { - showModal() { - expectDeprecation(() => { - this.render('posts/modal', { - into: 'application', - outlet: 'modal', - }); - }, /Usage of `render` is deprecated/); - }, - hideModal() { - expectDeprecation( - () => - this.disconnectOutlet({ - outlet: 'modal', - parentView: 'application', - }), - 'The usage of `disconnectOutlet` is deprecated.' - ); - }, - }, - }) - ); - - this.add( - 'route:posts.index', - Route.extend({ - actions: { - showExtra() { - expectDeprecation(() => { - this.render('posts/extra', { - into: 'posts/index', - }); - }, /Usage of `render` is deprecated/); - }, - hideExtra() { - expectDeprecation( - () => this.disconnectOutlet({ parentView: 'posts/index' }), - 'The usage of `disconnectOutlet` is deprecated.' - ); - }, - }, - }) - ); - - let rootElement = document.getElementById('qunit-fixture'); - - return this.visit('/posts') - .then(() => { - let router = this.applicationInstance.lookup('router:main'); - - assert.equal( - getTextOf(rootElement.querySelector('div.posts-index')), - 'postsIndex', - 'The posts/index template was rendered' - ); - run(() => router.send('showModal')); - assert.equal( - getTextOf(rootElement.querySelector('div.posts-modal')), - 'postsModal', - 'The posts/modal template was rendered' - ); - run(() => router.send('showExtra')); - - assert.equal( - getTextOf(rootElement.querySelector('div.posts-extra')), - 'postsExtra', - 'The posts/extra template was rendered' - ); - run(() => router.send('hideModal')); - - assert.equal( - rootElement.querySelector('div.posts-modal'), - null, - 'The posts/modal template was removed' - ); - run(() => router.send('hideExtra')); - - assert.equal( - rootElement.querySelector('div.posts-extra'), - null, - 'The posts/extra template was removed' - ); - run(function () { - router.send('showModal'); - }); - assert.equal( - getTextOf(rootElement.querySelector('div.posts-modal')), - 'postsModal', - 'The posts/modal template was rendered' - ); - run(function () { - router.send('showExtra'); - }); - assert.equal( - getTextOf(rootElement.querySelector('div.posts-extra')), - 'postsExtra', - 'The posts/extra template was rendered' - ); - return this.visit('/users'); - }) - .then(() => { - assert.equal( - rootElement.querySelector('div.posts-index'), - null, - 'The posts/index template was removed' - ); - assert.equal( - rootElement.querySelector('div.posts-modal'), - null, - 'The posts/modal template was removed' - ); - assert.equal( - rootElement.querySelector('div.posts-extra'), - null, - 'The posts/extra template was removed' - ); - }); - } - - ['@test Route supports clearing outlet using string parameter'](assert) { - this.addTemplate('application', "{{outlet}}{{outlet 'modal'}}"); - this.addTemplate('posts', '{{outlet}}'); - this.addTemplate('users', 'users'); - this.addTemplate('posts.index', '
postsIndex {{outlet}}
'); - this.addTemplate('posts.modal', '
postsModal
'); - - this.router.map(function () { - this.route('posts', function () {}); - this.route('users', function () {}); - }); - - this.add( - 'route:posts', - Route.extend({ - actions: { - showModal() { - expectDeprecation(() => { - this.render('posts/modal', { - into: 'application', - outlet: 'modal', - }); - }, /Usage of `render` is deprecated/); - }, - hideModal() { - expectDeprecation( - () => this.disconnectOutlet('modal'), - 'The usage of `disconnectOutlet` is deprecated.' - ); - }, - }, - }) - ); - - let rootElement = document.getElementById('qunit-fixture'); - return this.visit('/posts') - .then(() => { - let router = this.applicationInstance.lookup('router:main'); - assert.equal( - getTextOf(rootElement.querySelector('div.posts-index')), - 'postsIndex', - 'The posts/index template was rendered' - ); - run(() => router.send('showModal')); - assert.equal( - getTextOf(rootElement.querySelector('div.posts-modal')), - 'postsModal', - 'The posts/modal template was rendered' - ); - run(() => router.send('hideModal')); - assert.equal( - rootElement.querySelector('div.posts-modal'), - null, - 'The posts/modal template was removed' - ); - return this.visit('/users'); - }) - .then(() => { - assert.equal( - rootElement.querySelector('div.posts-index'), - null, - 'The posts/index template was removed' - ); - assert.equal( - rootElement.querySelector('div.posts-modal'), - null, - 'The posts/modal template was removed' - ); - }); - } - - ['@test Route silently fails when cleaning an outlet from an inactive view'](assert) { - assert.expect(4); // handleURL - - this.addTemplate('application', '{{outlet}}'); - this.addTemplate('posts', "{{outlet 'modal'}}"); - this.addTemplate('modal', 'A Yo.'); - - this.router.map(function () { - this.route('posts'); - }); - - this.add( - 'route:posts', - Route.extend({ - actions: { - hideSelf() { - expectDeprecation( - () => - this.disconnectOutlet({ - outlet: 'main', - parentView: 'application', - }), - 'The usage of `disconnectOutlet` is deprecated.' - ); - }, - showModal() { - expectDeprecation( - () => this.render('modal', { into: 'posts', outlet: 'modal' }), - /Usage of `render` is deprecated/ - ); - }, - hideModal() { - expectDeprecation( - () => this.disconnectOutlet({ outlet: 'modal', parentView: 'posts' }), - 'The usage of `disconnectOutlet` is deprecated.' - ); - }, - }, - }) - ); - - return this.visit('/posts').then(() => { - assert.ok(true, '/posts has been handled'); - let router = this.applicationInstance.lookup('router:main'); - run(() => router.send('showModal')); - run(() => router.send('hideSelf')); - run(() => router.send('hideModal')); - }); - } - - ['@test Specifying non-existent controller name in route#render throws'](assert) { - expectDeprecation( - /(Usage of `renderTemplate` is deprecated|Usage of `render` is deprecated)/ - ); - assert.expect(2); - - this.router.map(function () { - this.route('home', { path: '/' }); - }); - - this.add( - 'route:home', - Route.extend({ - renderTemplate() { - expectAssertion(() => { - this.render('homepage', { - controller: 'stefanpenneristhemanforme', - }); - }, "You passed `controller: 'stefanpenneristhemanforme'` into the `render` method, but no such controller could be found."); - }, - }) - ); - - return this.visit('/'); - } - - ['@test {{outlet}} works when created after initial render'](assert) { - this.addTemplate('sample', 'Hi{{#if this.showTheThing}}{{outlet}}{{/if}}Bye'); - this.addTemplate('sample.inner', 'Yay'); - this.addTemplate('sample.inner2', 'Boo'); - this.router.map(function () { - this.route('sample', { path: '/' }, function () { - this.route('inner', { path: '/' }); - this.route('inner2', { path: '/2' }); - }); - }); - - let rootElement; - return this.visit('/') - .then(() => { - rootElement = document.getElementById('qunit-fixture'); - assert.equal(rootElement.textContent.trim(), 'HiBye', 'initial render'); - - run(() => this.applicationInstance.lookup('controller:sample').set('showTheThing', true)); - - assert.equal(rootElement.textContent.trim(), 'HiYayBye', 'second render'); - return this.visit('/2'); - }) - .then(() => { - assert.equal(rootElement.textContent.trim(), 'HiBooBye', 'third render'); - }); - } - - ['@test Can render into a named outlet at the top level'](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.addTemplate('application', 'A-{{outlet}}-B-{{outlet "other"}}-C'); - this.addTemplate('modal', 'Hello world'); - this.addTemplate('index', 'The index'); - this.router.map(function () { - this.route('index', { path: '/' }); - }); - this.add( - 'route:application', - Route.extend({ - renderTemplate() { - expectDeprecation(() => { - this.render(); - this.render('modal', { - into: 'application', - outlet: 'other', - }); - }, /Usage of `render` is deprecated/); - }, - }) - ); - - return this.visit('/').then(() => { - let rootElement = document.getElementById('qunit-fixture'); - assert.equal( - rootElement.textContent.trim(), - 'A-The index-B-Hello world-C', - 'initial render' - ); - }); - } - - ['@test Can disconnect a named outlet at the top level'](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.addTemplate('application', 'A-{{outlet}}-B-{{outlet "other"}}-C'); - this.addTemplate('modal', 'Hello world'); - this.addTemplate('index', 'The index'); - this.router.map(function () { - this.route('index', { path: '/' }); - }); - this.add( - 'route:application', - Route.extend({ - renderTemplate() { - expectDeprecation(() => { - this.render(); - this.render('modal', { - into: 'application', - outlet: 'other', - }); - }, /Usage of `render` is deprecated/); - }, - actions: { - banish() { - expectDeprecation( - () => - this.disconnectOutlet({ - parentView: 'application', - outlet: 'other', - }), - 'The usage of `disconnectOutlet` is deprecated.' - ); - }, - }, - }) - ); - - return this.visit('/').then(() => { - let rootElement = document.getElementById('qunit-fixture'); - assert.equal( - rootElement.textContent.trim(), - 'A-The index-B-Hello world-C', - 'initial render' - ); - - run(this.applicationInstance.lookup('router:main'), 'send', 'banish'); - - assert.equal(rootElement.textContent.trim(), 'A-The index-B--C', 'second render'); - }); - } - - ['@test Can render into a named outlet at the top level, with empty main outlet'](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.addTemplate('application', 'A-{{outlet}}-B-{{outlet "other"}}-C'); - this.addTemplate('modal', 'Hello world'); - - this.router.map(function () { - this.route('hasNoTemplate', { path: '/' }); - }); - - this.add( - 'route:application', - Route.extend({ - renderTemplate() { - expectDeprecation(() => { - this.render(); - this.render('modal', { - into: 'application', - outlet: 'other', - }); - }, /Usage of `render` is deprecated/); - }, - }) - ); - - return this.visit('/').then(() => { - let rootElement = document.getElementById('qunit-fixture'); - assert.equal(rootElement.textContent.trim(), 'A--B-Hello world-C', 'initial render'); - }); - } - - ['@test Can render into a named outlet at the top level, later'](assert) { - this.addTemplate('application', 'A-{{outlet}}-B-{{outlet "other"}}-C'); - this.addTemplate('modal', 'Hello world'); - this.addTemplate('index', 'The index'); - this.router.map(function () { - this.route('index', { path: '/' }); - }); - this.add( - 'route:application', - Route.extend({ - actions: { - launch() { - expectDeprecation(() => { - this.render('modal', { - into: 'application', - outlet: 'other', - }); - }, /Usage of `render` is deprecated/); - }, - }, - }) - ); - - return this.visit('/').then(() => { - let rootElement = document.getElementById('qunit-fixture'); - assert.equal(rootElement.textContent.trim(), 'A-The index-B--C', 'initial render'); - run(this.applicationInstance.lookup('router:main'), 'send', 'launch'); - assert.equal( - rootElement.textContent.trim(), - 'A-The index-B-Hello world-C', - 'second render' - ); - }); - } - - ["@test Can render routes with no 'main' outlet and their children"](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.addTemplate('application', '
{{outlet "app"}}
'); - this.addTemplate( - 'app', - '
{{outlet "common"}}
{{outlet "sub"}}
' - ); - this.addTemplate('common', '
'); - this.addTemplate('sub', '
'); - - this.router.map(function () { - this.route('app', { path: '/app' }, function () { - this.route('sub', { path: '/sub', resetNamespace: true }); - }); - }); - - this.add( - 'route:app', - Route.extend({ - renderTemplate() { - expectDeprecation(() => { - this.render('app', { - outlet: 'app', - into: 'application', - }); - this.render('common', { - outlet: 'common', - into: 'app', - }); - }, /Usage of `render` is deprecated/); - }, - }) - ); - - this.add( - 'route:sub', - Route.extend({ - renderTemplate() { - expectDeprecation(() => { - this.render('sub', { - outlet: 'sub', - into: 'app', - }); - }, /Usage of `render` is deprecated/); - }, - }) - ); - - let rootElement; - return this.visit('/app') - .then(() => { - rootElement = document.getElementById('qunit-fixture'); - assert.equal( - rootElement.querySelectorAll('#app-common #common').length, - 1, - 'Finds common while viewing /app' - ); - return this.visit('/app/sub'); - }) - .then(() => { - assert.equal( - rootElement.querySelectorAll('#app-common #common').length, - 1, - 'Finds common while viewing /app/sub' - ); - assert.equal( - rootElement.querySelectorAll('#app-sub #sub').length, - 1, - 'Finds sub while viewing /app/sub' - ); - }); - } - - ['@test Tolerates stacked renders'](assert) { - this.addTemplate('application', '{{outlet}}{{outlet "modal"}}'); - this.addTemplate('index', 'hi'); - this.addTemplate('layer', 'layer'); - this.router.map(function () { - this.route('index', { path: '/' }); - }); - this.add( - 'route:application', - Route.extend({ - actions: { - openLayer() { - expectDeprecation(() => { - this.render('layer', { - into: 'application', - outlet: 'modal', - }); - }, /Usage of `render` is deprecated/); - }, - close() { - expectDeprecation( - () => - this.disconnectOutlet({ - outlet: 'modal', - parentView: 'application', - }), - 'The usage of `disconnectOutlet` is deprecated.' - ); - }, - }, - }) - ); - - return this.visit('/').then(() => { - let rootElement = document.getElementById('qunit-fixture'); - let router = this.applicationInstance.lookup('router:main'); - assert.equal(rootElement.textContent.trim(), 'hi'); - run(router, 'send', 'openLayer'); - assert.equal(rootElement.textContent.trim(), 'hilayer'); - run(router, 'send', 'openLayer'); - assert.equal(rootElement.textContent.trim(), 'hilayer'); - run(router, 'send', 'close'); - assert.equal(rootElement.textContent.trim(), 'hi'); - }); - } - - ['@test Renders child into parent with non-default template name'](assert) { - expectDeprecation('Usage of `renderTemplate` is deprecated.'); - this.addTemplate('application', '
{{outlet}}
'); - this.addTemplate('exports.root', '
{{outlet}}
'); - this.addTemplate('exports.index', '
'); - - this.router.map(function () { - this.route('root', function () {}); - }); - - this.add( - 'route:root', - Route.extend({ - renderTemplate() { - expectDeprecation(() => this.render('exports/root'), /Usage of `render` is deprecated/); - }, - }) - ); - - this.add( - 'route:root.index', - Route.extend({ - renderTemplate() { - expectDeprecation( - () => this.render('exports/index'), - /Usage of `render` is deprecated/ - ); - }, - }) - ); - - return this.visit('/root').then(() => { - let rootElement = document.getElementById('qunit-fixture'); - assert.equal(rootElement.querySelectorAll('.a .b .c').length, 1); - }); - } - - ["@test Allows any route to disconnectOutlet another route's templates"](assert) { - this.addTemplate('application', '{{outlet}}{{outlet "modal"}}'); - this.addTemplate('index', 'hi'); - this.addTemplate('layer', 'layer'); - this.router.map(function () { - this.route('index', { path: '/' }); - }); - this.add( - 'route:application', - Route.extend({ - actions: { - openLayer() { - expectDeprecation(() => { - this.render('layer', { - into: 'application', - outlet: 'modal', - }); - }, /Usage of `render` is deprecated/); - }, - }, - }) - ); - this.add( - 'route:index', - Route.extend({ - actions: { - close() { - expectDeprecation( - () => - this.disconnectOutlet({ - parentView: 'application', - outlet: 'modal', - }), - 'The usage of `disconnectOutlet` is deprecated.' - ); - }, - }, - }) - ); - - return this.visit('/').then(() => { - let rootElement = document.getElementById('qunit-fixture'); - let router = this.applicationInstance.lookup('router:main'); - assert.equal(rootElement.textContent.trim(), 'hi'); - run(router, 'send', 'openLayer'); - assert.equal(rootElement.textContent.trim(), 'hilayer'); - run(router, 'send', 'close'); - assert.equal(rootElement.textContent.trim(), 'hi'); - }); - } - ['@test Components inside an outlet have their didInsertElement hook invoked when the route is displayed']( assert ) { @@ -1522,44 +375,5 @@ moduleFor( ); }); } - - ['@test Exception if outlet name is undefined in render and disconnectOutlet']() { - this.add( - 'route:application', - Route.extend({ - actions: { - showModal() { - expectDeprecation(() => { - this.render({ - outlet: undefined, - parentView: 'application', - }); - }, /Usage of `render` is deprecated/); - }, - hideModal() { - expectDeprecation( - () => - this.disconnectOutlet({ - outlet: undefined, - parentView: 'application', - }), - 'The usage of `disconnectOutlet` is deprecated.' - ); - }, - }, - }) - ); - - return this.visit('/').then(() => { - let router = this.applicationInstance.lookup('router:main'); - expectAssertion(() => { - run(() => router.send('showModal')); - }, /You passed undefined as the outlet name/); - - expectAssertion(() => { - run(() => router.send('hideModal')); - }, /You passed undefined as the outlet name/); - }); - } } ); diff --git a/tests/docs/expected.js b/tests/docs/expected.js index 354287d995e..22a5d583f58 100644 --- a/tests/docs/expected.js +++ b/tests/docs/expected.js @@ -192,7 +192,6 @@ module.exports = { 'didUpdateAttrs', 'disabled', 'disabledClass', - 'disconnectOutlet', 'document', 'domReady', 'each-in', @@ -468,8 +467,6 @@ module.exports = { 'removeObjects', 'removeObserver', 'removeTestHelpers', - 'render', - 'renderTemplate', 'reopen', 'reopenClass', 'replace',