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

fix(Compiler): allow "." in attribute selectors (#13653)

Browse Source 
fixes #13645
This commit is contained in:
Victor Berchet
2016-12-27 15:23:49 -08:00
committed by Hans
parent 0eca960494
commit 881eb894bc
6 changed files with 193 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
modules/@angular/compiler/test/integration_spec.ts Normal file
View File

@ -0,0 +1,51 @@
/**
* @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, Directive, Input} from '@angular/core';
import {ComponentFixture, TestBed, async} from '@angular/core/testing';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {expect} from '@angular/platform-browser/testing/matchers';
export function main() {
describe('integration tests', () => {
let fixture: ComponentFixture<TestComponent>;
describe('directives', () => {
it('should support dotted selectors', async(() => {
@Directive({selector: '[dot.name]'})
class MyDir {
@Input('dot.name') value: string;
}
TestBed.configureTestingModule({
declarations: [
MyDir,
TestComponent,
],
});
const template = `<div [dot.name]="'foo'"></div>`;
fixture = createTestComponent(template);
fixture.detectChanges();
const myDir = fixture.debugElement.query(By.directive(MyDir)).injector.get(MyDir);
expect(myDir.value).toEqual('foo');
}));
});
});
}
@Component({selector: 'test-cmp', template: ''})
class TestComponent {
}
function createTestComponent(template: string): ComponentFixture<TestComponent> {
return TestBed.overrideComponent(TestComponent, {set: {template: template}})
.createComponent(TestComponent);
}

131
modules/@angular/compiler/test/selector_spec.ts
View File

@ -7,6 +7,7 @@
*/
import {CssSelector, SelectorMatcher} from '@angular/compiler/src/selector';
import {createElementCssSelector} from '@angular/compiler/src/template_parser/template_parser';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {el} from '@angular/platform-browser/testing/browser_util';
@ -30,14 +31,14 @@ export function main() {
it('should select by element name case sensitive', () => {
matcher.addSelectables(s1 = CssSelector.parse('someTag'), 1);
expect(matcher.match(CssSelector.parse('SOMEOTHERTAG')[0], selectableCollector))
expect(matcher.match(getSelectorFor({tag: 'SOMEOTHERTAG'}), selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
expect(matcher.match(CssSelector.parse('SOMETAG')[0], selectableCollector)).toEqual(false);
expect(matcher.match(getSelectorFor({tag: 'SOMETAG'}), selectableCollector)).toEqual(false);
expect(matched).toEqual([]);
expect(matcher.match(CssSelector.parse('someTag')[0], selectableCollector)).toEqual(true);
expect(matcher.match(getSelectorFor({tag: 'someTag'}), selectableCollector)).toEqual(true);
expect(matched).toEqual([s1[0], 1]);
});
@ -45,21 +46,22 @@ export function main() {
matcher.addSelectables(s1 = CssSelector.parse('.someClass'), 1);
matcher.addSelectables(s2 = CssSelector.parse('.someClass.class2'), 2);
expect(matcher.match(CssSelector.parse('.SOMEOTHERCLASS')[0], selectableCollector))
expect(matcher.match(getSelectorFor({classes: 'SOMEOTHERCLASS'}), selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
expect(matcher.match(CssSelector.parse('.SOMECLASS')[0], selectableCollector)).toEqual(true);
expect(matcher.match(getSelectorFor({classes: 'SOMECLASS'}), selectableCollector))
.toEqual(true);
expect(matched).toEqual([s1[0], 1]);
reset();
expect(matcher.match(CssSelector.parse('.someClass.class2')[0], selectableCollector))
expect(matcher.match(getSelectorFor({classes: 'someClass class2'}), selectableCollector))
.toEqual(true);
expect(matched).toEqual([s1[0], 1, s2[0], 2]);
});
it('should not throw for class name "constructor"', () => {
expect(matcher.match(CssSelector.parse('.constructor')[0], selectableCollector))
expect(matcher.match(getSelectorFor({classes: 'constructor'}), selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
});
@ -68,36 +70,43 @@ export function main() {
matcher.addSelectables(s1 = CssSelector.parse('[someAttr]'), 1);
matcher.addSelectables(s2 = CssSelector.parse('[someAttr][someAttr2]'), 2);
expect(matcher.match(CssSelector.parse('[SOMEOTHERATTR]')[0], selectableCollector))
expect(matcher.match(getSelectorFor({attrs: [['SOMEOTHERATTR', '']]}), selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
expect(matcher.match(CssSelector.parse('[SOMEATTR]')[0], selectableCollector)).toEqual(false);
expect(matched).toEqual([]);
expect(matcher.match(CssSelector.parse('[SOMEATTR=someValue]')[0], selectableCollector))
expect(matcher.match(getSelectorFor({attrs: [['SOMEATTR', '']]}), selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
expect(matcher.match(CssSelector.parse('[someAttr][someAttr2]')[0], selectableCollector))
expect(
matcher.match(getSelectorFor({attrs: [['SOMEATTR', 'someValue']]}), selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
expect(
matcher.match(
getSelectorFor({attrs: [['someAttr', ''], ['someAttr2', '']]}), selectableCollector))
.toEqual(true);
expect(matched).toEqual([s1[0], 1, s2[0], 2]);
reset();
expect(matcher.match(
CssSelector.parse('[someAttr=someValue][someAttr2]')[0], selectableCollector))
getSelectorFor({attrs: [['someAttr', 'someValue'], ['someAttr2', '']]}),
selectableCollector))
.toEqual(true);
expect(matched).toEqual([s1[0], 1, s2[0], 2]);
reset();
expect(matcher.match(
CssSelector.parse('[someAttr2][someAttr=someValue]')[0], selectableCollector))
getSelectorFor({attrs: [['someAttr2', ''], ['someAttr', 'someValue']]}),
selectableCollector))
.toEqual(true);
expect(matched).toEqual([s1[0], 1, s2[0], 2]);
reset();
expect(matcher.match(
CssSelector.parse('[someAttr2=someValue][someAttr]')[0], selectableCollector))
getSelectorFor({attrs: [['someAttr2', 'someValue'], ['someAttr', '']]}),
selectableCollector))
.toEqual(true);
expect(matched).toEqual([s1[0], 1, s2[0], 2]);
});
@ -105,11 +114,13 @@ export function main() {
it('should support "." in attribute names', () => {
matcher.addSelectables(s1 = CssSelector.parse('[foo.bar]'), 1);
expect(matcher.match(CssSelector.parse('[barfoo]')[0], selectableCollector)).toEqual(false);
expect(matcher.match(getSelectorFor({attrs: [['barfoo', '']]}), selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
reset();
expect(matcher.match(CssSelector.parse('[foo.bar]')[0], selectableCollector)).toEqual(true);
expect(matcher.match(getSelectorFor({attrs: [['foo.bar', '']]}), selectableCollector))
.toEqual(true);
expect(matched).toEqual([s1[0], 1]);
});
@ -127,15 +138,18 @@ export function main() {
it('should select by attr name case sensitive and value case insensitive', () => {
matcher.addSelectables(s1 = CssSelector.parse('[someAttr=someValue]'), 1);
expect(matcher.match(CssSelector.parse('[SOMEATTR=SOMEOTHERATTR]')[0], selectableCollector))
expect(matcher.match(
getSelectorFor({attrs: [['SOMEATTR', 'SOMEOTHERATTR']]}), selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
expect(matcher.match(CssSelector.parse('[SOMEATTR=SOMEVALUE]')[0], selectableCollector))
expect(
matcher.match(getSelectorFor({attrs: [['SOMEATTR', 'SOMEVALUE']]}), selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
expect(matcher.match(CssSelector.parse('[someAttr=SOMEVALUE]')[0], selectableCollector))
expect(
matcher.match(getSelectorFor({attrs: [['someAttr', 'SOMEVALUE']]}), selectableCollector))
.toEqual(true);
expect(matched).toEqual([s1[0], 1]);
});
@ -143,31 +157,38 @@ export function main() {
it('should select by element name, class name and attribute name with value', () => {
matcher.addSelectables(s1 = CssSelector.parse('someTag.someClass[someAttr=someValue]'), 1);
expect(
matcher.match(
getSelectorFor(
{tag: 'someOtherTag', classes: 'someOtherClass', attrs: [['someOtherAttr', '']]}),
selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
expect(matcher.match(
CssSelector.parse('someOtherTag.someOtherClass[someOtherAttr]')[0],
getSelectorFor(
{tag: 'someTag', classes: 'someOtherClass', attrs: [['someOtherAttr', '']]}),
selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
expect(
matcher.match(
CssSelector.parse('someTag.someOtherClass[someOtherAttr]')[0], selectableCollector))
expect(matcher.match(
getSelectorFor(
{tag: 'someTag', classes: 'someClass', attrs: [['someOtherAttr', '']]}),
selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
expect(matcher.match(
CssSelector.parse('someTag.someClass[someOtherAttr]')[0], selectableCollector))
getSelectorFor({tag: 'someTag', classes: 'someClass', attrs: [['someAttr', '']]}),
selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
expect(
matcher.match(CssSelector.parse('someTag.someClass[someAttr]')[0], selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
expect(
matcher.match(
CssSelector.parse('someTag.someClass[someAttr=someValue]')[0], selectableCollector))
expect(matcher.match(
getSelectorFor(
{tag: 'someTag', classes: 'someClass', attrs: [['someAttr', 'someValue']]}),
selectableCollector))
.toEqual(true);
expect(matched).toEqual([s1[0], 1]);
});
@ -217,7 +238,9 @@ export function main() {
matcher.addSelectables(CssSelector.parse(':not(p)'), 4);
matcher.addSelectables(CssSelector.parse(':not(p[someAttr])'), 5);
expect(matcher.match(CssSelector.parse('p.someClass[someAttr]')[0], selectableCollector))
expect(matcher.match(
getSelectorFor({tag: 'p', classes: 'someClass', attrs: [['someAttr', '']]}),
selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
});
@ -228,32 +251,38 @@ export function main() {
matcher.addSelectables(s3 = CssSelector.parse(':not(.someClass)'), 3);
matcher.addSelectables(s4 = CssSelector.parse(':not(.someOtherClass[someAttr])'), 4);
expect(matcher.match(
CssSelector.parse('p[someOtherAttr].someOtherClass')[0], selectableCollector))
expect(
matcher.match(
getSelectorFor({tag: 'p', attrs: [['someOtherAttr', '']], classes: 'someOtherClass'}),
selectableCollector))
.toEqual(true);
expect(matched).toEqual([s1[0], 1, s2[0], 2, s3[0], 3, s4[0], 4]);
});
it('should match * with :not selector', () => {
matcher.addSelectables(CssSelector.parse(':not([a])'), 1);
expect(matcher.match(CssSelector.parse('div')[0], () => {})).toEqual(true);
expect(matcher.match(getSelectorFor({tag: 'div'}), () => {})).toEqual(true);
});
it('should match with multiple :not selectors', () => {
matcher.addSelectables(s1 = CssSelector.parse('div:not([a]):not([b])'), 1);
expect(matcher.match(CssSelector.parse('div[a]')[0], selectableCollector)).toBe(false);
expect(matcher.match(CssSelector.parse('div[b]')[0], selectableCollector)).toBe(false);
expect(matcher.match(CssSelector.parse('div[c]')[0], selectableCollector)).toBe(true);
expect(matcher.match(getSelectorFor({tag: 'div', attrs: [['a', '']]}), selectableCollector))
.toBe(false);
expect(matcher.match(getSelectorFor({tag: 'div', attrs: [['b', '']]}), selectableCollector))
.toBe(false);
expect(matcher.match(getSelectorFor({tag: 'div', attrs: [['c', '']]}), selectableCollector))
.toBe(true);
});
it('should select with one match in a list', () => {
matcher.addSelectables(s1 = CssSelector.parse('input[type=text], textbox'), 1);
expect(matcher.match(CssSelector.parse('textbox')[0], selectableCollector)).toEqual(true);
expect(matcher.match(getSelectorFor({tag: 'textbox'}), selectableCollector)).toEqual(true);
expect(matched).toEqual([s1[1], 1]);
reset();
expect(matcher.match(CssSelector.parse('input[type=text]')[0], selectableCollector))
expect(matcher.match(
getSelectorFor({tag: 'input', attrs: [['type', 'text']]}), selectableCollector))
.toEqual(true);
expect(matched).toEqual([s1[0], 1]);
});
@ -261,7 +290,8 @@ export function main() {
it('should not select twice with two matches in a list', () => {
matcher.addSelectables(s1 = CssSelector.parse('input, .someClass'), 1);
expect(matcher.match(CssSelector.parse('input.someclass')[0], selectableCollector))
expect(
matcher.match(getSelectorFor({tag: 'input', classes: 'someclass'}), selectableCollector))
.toEqual(true);
expect(matched.length).toEqual(2);
expect(matched).toEqual([s1[0], 1]);
@ -404,3 +434,16 @@ export function main() {
});
});
}
function getSelectorFor(
{tag = '', attrs = [], classes = ''}: {tag?: string, attrs?: any[], classes?: string} = {}):
CssSelector {
const selector = new CssSelector();
selector.setElement(tag);
attrs.forEach(nameValue => { selector.addAttribute(nameValue[0], nameValue[1]); });
classes.trim().split(/\s+/g).forEach(cName => { selector.addClassName(cName); });
return selector;
}

28
modules/@angular/compiler/test/template_parser/template_parser_spec.ts
View File

@ -623,6 +623,23 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
]);
});
it('should parse directive dotted properties', () => {
const dirA =
CompileDirectiveMetadata
.create({
selector: '[dot.name]',
type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
inputs: ['localName: dot.name'],
})
.toSummary();
expect(humanizeTplAst(parse('<div [dot.name]="expr"></div>', [dirA]))).toEqual([
[ElementAst, 'div'],
[DirectiveAst, dirA],
[BoundDirectivePropertyAst, 'localName', 'expr'],
]);
});
it('should locate directives in property bindings', () => {
const dirA =
CompileDirectiveMetadata
@ -1244,8 +1261,15 @@ Reference "#a" is defined several times ("<div #a></div><div [ERROR ->]#a></div>
});
it('should parse variables via let ...', () => {
expect(humanizeTplAst(parse('<div *ngIf="let a=b">', [
]))).toEqual([[EmbeddedTemplateAst], [VariableAst, 'a', 'b'], [ElementAst, 'div']]);
const targetAst = [
[EmbeddedTemplateAst],
[VariableAst, 'a', 'b'],
[ElementAst, 'div'],
];
expect(humanizeTplAst(parse('<div *ngIf="let a=b">', []))).toEqual(targetAst);
expect(humanizeTplAst(parse('<div data-*ngIf="let a=b">', []))).toEqual(targetAst);
});
describe('directives', () => {