cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(upgrade): use shared code in downgradeNg2Component() (#14037)

Browse Source 
This unified the implementations of dynamic's `downgradeNg2Component()` and
static's `downgradeComponent()`.
This commit is contained in:
Georgios Kalpakas
2017-01-19 13:04:24 +02:00
committed by Miško Hevery
parent 1367cd9569
commit ea63676970
16 changed files with 247 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
modules/@angular/upgrade/test/dynamic/group_projectable_nodes_spec.ts Normal file
View File

@ -0,0 +1,85 @@
/**
* @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([[]]);
});
});
}

65
modules/@angular/upgrade/test/dynamic/metadata_spec.ts
View File

@ -1,65 +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 {Component} from '@angular/core';
import {getComponentInfo, parseFields} from '@angular/upgrade/src/dynamic/metadata';
export function main() {
describe('upgrade metadata', () => {
it('should extract component selector', () => {
expect(getComponentInfo(ElementNameComponent).selector).toBe('element-name-dashed');
});
describe('errors', () => {
it('should throw on missing selector', () => {
expect(() => getComponentInfo(NoAnnotationComponent))
.toThrowError('No Directive annotation found on NoAnnotationComponent');
});
});
describe('parseFields', () => {
it('should process nulls', () => { expect(parseFields(null)).toEqual([]); });
it('should process values', () => {
expect(parseFields([' name ', ' prop : attr '])).toEqual([
jasmine.objectContaining({
prop: 'name',
attr: 'name',
bracketAttr: '[name]',
parenAttr: '(name)',
bracketParenAttr: '[(name)]',
onAttr: 'onName',
bindAttr: 'bindName',
bindonAttr: 'bindonName'
}),
jasmine.objectContaining({
prop: 'prop',
attr: 'attr',
bracketAttr: '[attr]',
parenAttr: '(attr)',
bracketParenAttr: '[(attr)]',
onAttr: 'onAttr',
bindAttr: 'bindAttr',
bindonAttr: 'bindonAttr'
})
]);
});
});
});
}
@Component({selector: 'element-name-dashed', template: ``})
class ElementNameComponent {
}
@Component({selector: '[attr-name]', template: ``})
class AttributeNameComponent {
}
class NoAnnotationComponent {}

6
modules/@angular/upgrade/test/dynamic/test_helpers.ts
View File

@ -7,3 +7,9 @@
*/
export * from '../common/test_helpers';
export function nodes(html: string) {
const div = document.createElement('div');
div.innerHTML = html.trim();
return Array.prototype.slice.call(div.childNodes);
}

75
modules/@angular/upgrade/test/dynamic/upgrade_spec.ts
View File

@ -11,7 +11,7 @@ import {async, fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import * as angular from '@angular/upgrade/src/common/angular1';
import {UpgradeAdapter, UpgradeAdapterRef, sortProjectableNodes} from '@angular/upgrade/src/dynamic/upgrade_adapter';
import {UpgradeAdapter, UpgradeAdapterRef} from '@angular/upgrade/src/dynamic/upgrade_adapter';
import {html, multiTrim} from './test_helpers';
export function main() {
@ -95,9 +95,7 @@ export function main() {
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
adapter.bootstrap(element, ['ng1']).ready((ref) => {
expect((platformRef as any)._bootstrapModuleWithZone)
.toHaveBeenCalledWith(
jasmine.any(Function), {providers: []}, jasmine.any(Object),
jasmine.any(Function));
.toHaveBeenCalledWith(jasmine.any(Function), {providers: []}, jasmine.any(Object));
ref.dispose();
});
}));
@ -1876,73 +1874,4 @@ export function main() {
}));
});
});
describe('sortProjectableNodes', () => {
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 = sortProjectableNodes(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 = sortProjectableNodes(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 = sortProjectableNodes(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 = sortProjectableNodes([], contentNodes);
expect(noSelectorNodes).toEqual([]);
const noMatchSelectorNodes = sortProjectableNodes(['.not-there'], contentNodes);
expect(noMatchSelectorNodes).toEqual([[]]);
});
});
}
function nodes(html: string) {
const element = document.createElement('div');
element.innerHTML = html;
return Array.prototype.slice.call(element.childNodes);