feat(upgrade): use ComponentFactory.inputs/outputs/ngContentSelectors

DEPRECATION: - the arguments `inputs` / `outputs` / `ngContentSelectors` of `downgradeComponent` are no longer used as Angular calculates these automatically now. - Compiler.getNgContentSelectors is deprecated. Use ComponentFactory.ngContentSelectors instead.
2017-03-14 14:55:37 -07:00
parent 1171f91a80
commit a3e32fb7e1
22 changed files with 94 additions and 418 deletions
--- a/packages/upgrade/test/common/component_info_spec.ts
+++ b/packages/upgrade/test/common/component_info_spec.ts
@ -11,8 +11,7 @@ import {PropertyBinding} from '@angular/upgrade/src/common/component_info';
 export function main() {
  describe('PropertyBinding', () => {
    it('should process a simple binding', () => {
-      const binding = new PropertyBinding('someBinding');
-      expect(binding.binding).toEqual('someBinding');
+      const binding = new PropertyBinding('someBinding', 'someBinding');
      expect(binding.prop).toEqual('someBinding');
      expect(binding.attr).toEqual('someBinding');
      expect(binding.bracketAttr).toEqual('[someBinding]');
@ -24,21 +23,7 @@ export function main() {
    });

    it('should process a two-part binding', () => {
-      const binding = new PropertyBinding('someProp:someAttr');
-      expect(binding.binding).toEqual('someProp:someAttr');
-      expect(binding.prop).toEqual('someProp');
-      expect(binding.attr).toEqual('someAttr');
-      expect(binding.bracketAttr).toEqual('[someAttr]');
-      expect(binding.bracketParenAttr).toEqual('[(someAttr)]');
-      expect(binding.parenAttr).toEqual('(someAttr)');
-      expect(binding.onAttr).toEqual('onSomeAttr');
-      expect(binding.bindAttr).toEqual('bindSomeAttr');
-      expect(binding.bindonAttr).toEqual('bindonSomeAttr');
-    });
-
-    it('should cope with whitespace', () => {
-      const binding = new PropertyBinding(' someProp : someAttr ');
-      expect(binding.binding).toEqual(' someProp : someAttr ');
+      const binding = new PropertyBinding('someProp', 'someAttr');
      expect(binding.prop).toEqual('someProp');
      expect(binding.attr).toEqual('someAttr');
      expect(binding.bracketAttr).toEqual('[someAttr]');
--- a/packages/upgrade/test/common/downgrade_component_adapter_spec.ts
+++ b/packages/upgrade/test/common/downgrade_component_adapter_spec.ts
@ -6,25 +6,13 @@
 * found in the LICENSE file at https://angular.io/license
 */
 import * as angular from '@angular/upgrade/src/common/angular1';
-import {DowngradeComponentAdapter} from '@angular/upgrade/src/common/downgrade_component_adapter';
-import {NgContentSelectorHelper} from '@angular/upgrade/src/common/ng_content_selector_helper';
+import {groupNodesBySelector} from '@angular/upgrade/src/common/downgrade_component_adapter';
 import {nodes} from './test_helpers';


 export function main() {
  describe('DowngradeComponentAdapter', () => {
    describe('groupNodesBySelector', () => {
-      function createAdapter(selectors: string[], contentNodes: Node[]): DowngradeComponentAdapter {
-        const selectorHelper = new NgContentSelectorHelper();
-        const fakeInjector = {get: function() { return selectorHelper; }};
-        const fakeScope = { $new: function() {} } as any;
-        const element = angular.element('<div></div>');
-        element.append(contentNodes);
-        return new DowngradeComponentAdapter(
-            'id', {component: null, selectors}, element, null, fakeScope, null, fakeInjector, null,
-            null, null, null);
-      }
-
      it('should return an array of node collections for each selector', () => {
        const contentNodes = nodes(
            '<div class="x"><span>div-1 content</span></div>' +
@ -34,8 +22,7 @@ export function main() {
            '<div class="x"><span>div-2 content</span></div>');

        const selectors = ['input[type=date]', 'span', '.x'];
-        const adapter = createAdapter(selectors, contentNodes);
-        const projectableNodes = adapter.groupProjectableNodes();
+        const projectableNodes = groupNodesBySelector(selectors, contentNodes);

        expect(projectableNodes[0]).toEqual(nodes('<input type="date" name="myDate">'));
        expect(projectableNodes[1]).toEqual(nodes('<span>span content</span>'));
@ -54,8 +41,7 @@ export function main() {
            '<div class="x"><span>div-2 content</span></div>');

        const selectors = ['.x', '*', 'input[type=date]'];
-        const adapter = createAdapter(selectors, contentNodes);
-        const projectableNodes = adapter.groupProjectableNodes();
+        const projectableNodes = groupNodesBySelector(selectors, contentNodes);

        expect(projectableNodes[0])
            .toEqual(nodes(
@ -70,8 +56,7 @@ export function main() {

      it('should return an array of empty arrays if there are no nodes passed in', () => {
        const selectors = ['.x', '*', 'input[type=date]'];
-        const adapter = createAdapter(selectors, []);
-        const projectableNodes = adapter.groupProjectableNodes();
+        const projectableNodes = groupNodesBySelector(selectors, []);
        expect(projectableNodes).toEqual([[], [], []]);
      });

@ -83,12 +68,10 @@ export function main() {
            '<span>span content</span>' +
            '<div class="x"><span>div-2 content</span></div>');

-        const adapter1 = createAdapter([], contentNodes);
-        const projectableNodes = adapter1.groupProjectableNodes();
+        const projectableNodes = groupNodesBySelector([], contentNodes);
        expect(projectableNodes).toEqual([]);

-        const adapter2 = createAdapter(['.not-there'], contentNodes);
-        const noMatchSelectorNodes = adapter2.groupProjectableNodes();
+        const noMatchSelectorNodes = groupNodesBySelector(['.not-there'], contentNodes);
        expect(noMatchSelectorNodes).toEqual([[]]);
      });
    });
--- a/packages/upgrade/test/dynamic/group_projectable_nodes_spec.ts
+++ b/packages/upgrade/test/dynamic/group_projectable_nodes_spec.ts
@ -1,85 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {DynamicContentProjectionHelper} from '@angular/upgrade/src/dynamic/content_projection_helper';
-import {nodes} from './test_helpers';
-
-
-export function main() {
-  describe('groupNodesBySelector', () => {
-    let groupNodesBySelector: (ngContentSelectors: string[], nodes: Node[]) => Node[][];
-
-    beforeEach(() => {
-      const projectionHelper = new DynamicContentProjectionHelper();
-      groupNodesBySelector = projectionHelper.groupNodesBySelector.bind(projectionHelper);
-    });
-
-
-    it('should return an array of node collections for each selector', () => {
-      const contentNodes = nodes(
-          '<div class="x"><span>div-1 content</span></div>' +
-          '<input type="number" name="myNum">' +
-          '<input type="date" name="myDate">' +
-          '<span>span content</span>' +
-          '<div class="x"><span>div-2 content</span></div>');
-
-      const selectors = ['input[type=date]', 'span', '.x'];
-      const projectableNodes = groupNodesBySelector(selectors, contentNodes);
-
-      expect(projectableNodes[0]).toEqual(nodes('<input type="date" name="myDate">'));
-      expect(projectableNodes[1]).toEqual(nodes('<span>span content</span>'));
-      expect(projectableNodes[2])
-          .toEqual(nodes(
-              '<div class="x"><span>div-1 content</span></div>' +
-              '<div class="x"><span>div-2 content</span></div>'));
-    });
-
-    it('should collect up unmatched nodes for the wildcard selector', () => {
-      const contentNodes = nodes(
-          '<div class="x"><span>div-1 content</span></div>' +
-          '<input type="number" name="myNum">' +
-          '<input type="date" name="myDate">' +
-          '<span>span content</span>' +
-          '<div class="x"><span>div-2 content</span></div>');
-
-      const selectors = ['.x', '*', 'input[type=date]'];
-      const projectableNodes = groupNodesBySelector(selectors, contentNodes);
-
-      expect(projectableNodes[0])
-          .toEqual(nodes(
-              '<div class="x"><span>div-1 content</span></div>' +
-              '<div class="x"><span>div-2 content</span></div>'));
-      expect(projectableNodes[1])
-          .toEqual(nodes(
-              '<input type="number" name="myNum">' +
-              '<span>span content</span>'));
-      expect(projectableNodes[2]).toEqual(nodes('<input type="date" name="myDate">'));
-    });
-
-    it('should return an array of empty arrays if there are no nodes passed in', () => {
-      const selectors = ['.x', '*', 'input[type=date]'];
-      const projectableNodes = groupNodesBySelector(selectors, []);
-      expect(projectableNodes).toEqual([[], [], []]);
-    });
-
-    it('should return an empty array for each selector that does not match', () => {
-      const contentNodes = nodes(
-          '<div class="x"><span>div-1 content</span></div>' +
-          '<input type="number" name="myNum">' +
-          '<input type="date" name="myDate">' +
-          '<span>span content</span>' +
-          '<div class="x"><span>div-2 content</span></div>');
-
-      const noSelectorNodes = groupNodesBySelector([], contentNodes);
-      expect(noSelectorNodes).toEqual([]);
-
-      const noMatchSelectorNodes = groupNodesBySelector(['.not-there'], contentNodes);
-      expect(noMatchSelectorNodes).toEqual([[]]);
-    });
-  });
-}
--- a/packages/upgrade/test/static/integration/change_detection_spec.ts
+++ b/packages/upgrade/test/static/integration/change_detection_spec.ts
@ -73,7 +73,7 @@ export function main() {
         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
           expect(document.body.textContent).toEqual('1A;2A;ng1a;2B;ng1b;2C;1C;');
           // https://github.com/angular/angular.js/issues/12983
-           expect(log).toEqual(['1A', '1B', '1C', '2A', '2B', '2C', 'ng1a', 'ng1b']);
+           expect(log).toEqual(['1A', '1C', '2A', '2B', '2C', 'ng1a', 'ng1b']);
         });
       }));

--- a/packages/upgrade/test/static/integration/content_projection_spec.ts
+++ b/packages/upgrade/test/static/integration/content_projection_spec.ts
@ -72,16 +72,14 @@ export function main() {
           ngDoBootstrap() {}
         }

-         const ng1Module =
-             angular.module('ng1', [])
-                 .directive(
-                     'ng2', downgradeComponent({component: Ng2Component, inputs: ['itemId']}))
-                 .run(($rootScope: angular.IRootScopeService) => {
-                   $rootScope['items'] = [
-                     {id: 'a', subitems: [1, 2, 3]}, {id: 'b', subitems: [4, 5, 6]},
-                     {id: 'c', subitems: [7, 8, 9]}
-                   ];
-                 });
+         const ng1Module = angular.module('ng1', [])
+                               .directive('ng2', downgradeComponent({component: Ng2Component}))
+                               .run(($rootScope: angular.IRootScopeService) => {
+                                 $rootScope['items'] = [
+                                   {id: 'a', subitems: [1, 2, 3]}, {id: 'b', subitems: [4, 5, 6]},
+                                   {id: 'c', subitems: [7, 8, 9]}
+                                 ];
+                               });

         const element = html(`
           <ng2 ng-repeat="item in items" [item-id]="item.id">
@ -162,7 +160,7 @@ export function main() {
         }

         const ng1Module = angular.module('ng1', []).directive(
-             'ng2', downgradeComponent({component: Ng2Component, selectors: ['.ng1a', '.ng1b']}));
+             'ng2', downgradeComponent({component: Ng2Component}));

         // The ng-if on one of the projected children is here to make sure
         // the correct slot is targeted even with structural directives in play.
--- a/packages/upgrade/test/static/integration/downgrade_component_spec.ts
+++ b/packages/upgrade/test/static/integration/downgrade_component_spec.ts
@ -108,15 +108,9 @@ export function main() {
           };
         }

-         ng1Module.directive(
-             'ng2', downgradeComponent({
-               component: Ng2Component,
-               inputs: ['literal', 'interpolate', 'oneWayA', 'oneWayB', 'twoWayA', 'twoWayB'],
-               outputs: [
-                 'eventA', 'eventB', 'twoWayAEmitter: twoWayAChange',
-                 'twoWayBEmitter: twoWayBChange'
-               ]
-             }));
+         ng1Module.directive('ng2', downgradeComponent({
+                               component: Ng2Component,
+                             }));

         @NgModule({
           declarations: [Ng2Component],
--- a/packages/upgrade/test/static/integration/examples_spec.ts
+++ b/packages/upgrade/test/static/integration/examples_spec.ts
@ -71,9 +71,7 @@ export function main() {
                       };
                     })
                 // This is wrapping (downgrading) an Angular component to be used in AngularJS
-                 .directive(
-                     'ng2',
-                     downgradeComponent({component: Ng2Component, inputs: ['nameProp: name']}));
+                 .directive('ng2', downgradeComponent({component: Ng2Component}));

         // This is the (AngularJS) application bootstrap element
         // Notice that it is actually a downgraded Angular component
--- a/packages/upgrade/test/static/integration/upgrade_component_spec.ts
+++ b/packages/upgrade/test/static/integration/upgrade_component_spec.ts
@ -2627,12 +2627,10 @@ export function main() {
           }

           // Define `ng1Module`
-           const ng1Module =
-               angular.module('ng1Module', [])
-                   .directive('ng1A', () => ng1DirectiveA)
-                   .directive('ng1B', () => ng1DirectiveB)
-                   .directive(
-                       'ng2', downgradeComponent({component: Ng2Component, inputs: ['show']}));
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));

           // Define `Ng2Module`
           @NgModule({
@ -2729,12 +2727,10 @@ export function main() {
           }

           // Define `ng1Module`
-           const ng1Module =
-               angular.module('ng1Module', [])
-                   .directive('ng1A', () => ng1DirectiveA)
-                   .directive('ng1B', () => ng1DirectiveB)
-                   .directive(
-                       'ng2', downgradeComponent({component: Ng2Component, inputs: ['show']}));
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));

           // Define `Ng2Module`
           @NgModule({
@ -3086,11 +3082,7 @@ export function main() {
         const ng1Module = angular.module('ng1', [])
                               .component('ng1X', ng1Component)
                               .directive('ng2A', downgradeComponent({component: Ng2ComponentA}))
-                               .directive('ng2B', downgradeComponent({
-                                            component: Ng2ComponentB,
-                                            inputs: ['ng2BInputA: ng2BInput1', 'ng2BInputC'],
-                                            outputs: ['ng2BOutputC']
-                                          }));
+                               .directive('ng2B', downgradeComponent({component: Ng2ComponentB}));

         // Define `Ng2Module`
         @NgModule({