Bugfix: Autotracking -- make the model property on the controller 'tr…

…acked'

packages/@ember/controller/lib/controller_mixin.js

@@ -1,5 +1,6 @@
-import { Mixin } from '@ember/-internals/metal';
+import { Mixin, tracked } from '@ember/-internals/metal';
 import { ActionHandler } from '@ember/-internals/runtime';
+import { EMBER_METAL_TRACKED_PROPERTIES } from '@ember/canary-features';
 
 /**
 @module ember
@@ -42,5 +43,5 @@ export default Mixin.create(ActionHandler, {
     @property model
     @public
   */
-  model: null,
+  model: EMBER_METAL_TRACKED_PROPERTIES ? tracked() : null,
 });

packages/ember/tests/routing/route_controller_integration_test.js

@@ -0,0 +1,56 @@
+import {
+  EMBER_NATIVE_DECORATOR_SUPPORT,
+  EMBER_METAL_TRACKED_PROPERTIES,
+} from '@ember/canary-features';
+import { Route } from '@ember/-internals/routing';
+import Controller from '@ember/controller';
+import { moduleFor, ApplicationTestCase } from 'internal-test-helpers';
+
+if (EMBER_METAL_TRACKED_PROPERTIES && EMBER_NATIVE_DECORATOR_SUPPORT) {
+  moduleFor(
+    'Route <-> Controller Integration',
+    class extends ApplicationTestCase {
+      ['@test properties that autotrack the model update when the model changes'](assert) {
+        assert.expect(2);
+
+        this.router.map(function() {
+          this.route('home', { path: '/home/:id' });
+        });
+
+        class HomeRoute extends Route {
+          async model({ id }) {
+            return { value: id };
+          }
+        }
+
+        class HomeController extends Controller {
+          get derivedProperty() {
+            return this.model.value || 'value is unset';
+          }
+        }
+
+        this.add('route:home', HomeRoute);
+        this.add('controller:home', HomeController);
+        this.addTemplate('home', '<h3 class="derivedProperty">{{this.derivedProperty}}</h3>');
+
+        return this.visit('/home/2')
+          .then(() => {
+            assert.equal(
+              document.querySelector('h3').innerText,
+              '2',
+              'the derived property matches the id'
+            );
+          })
+          .then(() => {
+            return this.visit('/home/3').then(() => {
+              assert.equal(
+                document.querySelector('h3').innerText,
+                '3',
+                'the derived property matches the id'
+              );
+            });
+          });
+      }
+    }
+  );
+}