fix(views): Allow same views object to be reused in multiple states

Closes #3353

Author: christopherthielen

src/statebuilders/views.ts

@@ -48,6 +48,9 @@ export function ng1ViewsBuilder(state: StateObject) {
     // Account for views: { header: "headerComponent" }
     if (isString(config)) config = { component: <string> config };
 
+    // Make a shallow copy of the config object
+    config = extend({}, config);
+
     if (hasAnyKey(compKeys, config) && hasAnyKey(nonCompKeys, config)) {
       throw new Error(`Cannot combine: ${compKeys.join("|")} with: ${nonCompKeys.join("|")} in stateview: '${name}@${state.name}'`);
     }

test/ng1StateBuilderSpec.ts

@@ -15,17 +15,19 @@ describe('Ng1 StateBuilder', function() {
     builder.builder('views', ng1ViewsBuilder);
   });
 
-  it('should return a new views object, and copy keys from state def, if no `views` is defined in the state def', function() {
+  it('should use the state object to build a default view, when no `views` property is found', function() {
     var config = { url: "/foo", templateUrl: "/foo.html", controller: "FooController", parent: parent };
     var built = builder.builder('views')(config);
 
     expect(built.$default).not.toEqualData(config);
     expect(built.$default).toEqualData({ templateUrl: "/foo.html", controller: "FooController", resolveAs: '$resolve' });
   });
 
-  it("should return modified view config object if `views` is defined in the state def", function() {
+  it('It should use the views object to build views, when defined, function() {
     var config = { a: { foo: "bar", controller: "FooController" } };
-    expect(builder.builder('views')({ parent: parent, views: config })).toEqual(config);
+    let builtViews = builder.builder('views')({ parent: parent, views: config });
+    expect(builtViews.a.foo).toEqualData(config.a.foo);
+    expect(builtViews.a.controller).toEqualData(config.a.controller);
   });
 
   it("should not allow a view config with both component and template keys", inject(function($injector) {

test/viewDirectiveSpec.ts

@@ -1,6 +1,6 @@
-import * as angular from "angular";
-import "./util/matchers";
-import { extend } from "ui-router-core";
+import * as angular from 'angular';
+import './util/matchers';
+import { extend } from 'ui-router-core';
 
 declare let inject, jasmine;
 
@@ -1372,6 +1372,20 @@ describe('angular 1.5+ style .component()', function() {
         expect(header.textContent).toBe('#awesome#');
         expect(content.textContent).toBe('-DATA!-');
       });
+
+      // Test for https://github.com/angular-ui/ui-router/issues/3353
+      it('should allow different states to reuse view declaration', function () {
+        let views = {
+          header: { component: 'header' },
+          content: { component: 'ngComponent' },
+        };
+
+        let stateDef1 = { name: 'def1', url: '/def1', views: views, };
+        let stateDef2 = { name: 'def2', url: '/def2', views: views, };
+
+        $stateProvider.state(stateDef1);
+        $stateProvider.state(stateDef2);
+      });
     });
   }