test(selector): add tests with multiple attributes

Fixes angular#1025 Closes angular#1117

Author: marclaval

modules/angular2/test/core/compiler/pipeline/directive_parser_spec.js

@@ -25,6 +25,7 @@ export function main() {
  SomeViewport2,
  SomeComponent,
  SomeComponent2,
+ SomeComponent3,
  SomeDynamicComponent,
  SomeDynamicComponent2
  ];
@@ -105,6 +106,13 @@ export function main() {
  );
  }).toThrowError('Only template directives are allowed on template elements - check <template some-comp>');
  });
+
+ it('should detect them with multiple attributes', () => {
+ var results = createPipeline().process(el('<input type=text control=one></input>'));
+ var dirs = results[0].getAllDirectives();
+ expect(dirs.length).toEqual(1);
+ expect(dirs[0]).toEqual(reader.read(SomeComponent3));
+ });
  });
 
  describe("dynamic component directives", () => {
@@ -261,6 +269,9 @@ class SomeComponent {}
 @Component({selector: '[some-comp2]'})
 class SomeComponent2 {}
 
+@Component({selector: 'input[type=text][control]'})
+class SomeComponent3 {}
+
 @DynamicComponent({selector: '[some-dynamic-comp]'})
 class SomeDynamicComponent {}
 
@@ -270,7 +281,7 @@ class SomeDynamicComponent2 {}
 @Component()
 @Template({
  directives: [SomeDecorator, SomeViewport, SomeViewport2,
- SomeComponent, SomeComponent2,
+ SomeComponent, SomeComponent2, SomeComponent3,
  SomeDynamicComponent, SomeDynamicComponent2
  ]
 })

modules/angular2/test/core/compiler/selector_spec.js

@@ -106,6 +106,18 @@ export function main() {
  expect(matched).toEqual([s1[0],1]);
  });
 
+ it('should select by many attributes and independent of the value', () => {
+ matcher.addSelectables(s1 = CssSelector.parse('input[type=text][control]'), 1);
+
+ var cssSelector = new CssSelector();
+ cssSelector.setElement('input');
+ cssSelector.addAttribute('type', 'text');
+ cssSelector.addAttribute('control', 'one');
+
+ expect(matcher.match(cssSelector, selectableCollector)).toEqual(true);
+ expect(matched).toEqual([s1[0], 1]);
+ });
+
  it('should select independent of the order in the css selector', () => {
  matcher.addSelectables(s1 = CssSelector.parse('[someAttr].someClass'), 1);
  matcher.addSelectables(s2 = CssSelector.parse('.someClass[someAttr]'), 2);
@@ -205,6 +217,14 @@ export function main() {
  expect(cssSelector.toString()).toEqual('sometag.someclass[attrname=attrvalue]');
  });
 
+ it('should detect multiple attributes', () => {
+ var cssSelector = CssSelector.parse('input[type=text][control]')[0];
+ expect(cssSelector.element).toEqual('input');
+ expect(cssSelector.attrs).toEqual(['type', 'text', 'control', '']);
+
+ expect(cssSelector.toString()).toEqual('input[type=text][control]');
+ });
+
  it('should detect :not', () => {
  var cssSelector = CssSelector.parse('sometag:not([attrname=attrvalue].someclass)')[0];
  expect(cssSelector.element).toEqual('sometag');

modules/angular2/test/render/dom/compiler/directive_parser_spec.js

@@ -17,6 +17,7 @@ export function main() {
  annotatedDirectives = [
  someComponent,
  someComponent2,
+ someComponent3,
  someViewport,
  someViewport2,
  someDecorator,
@@ -57,6 +58,13 @@ export function main() {
  );
  });
 
+ it('should detect directives with multiple attributes', () => {
+ var results = process(el('<input type=text control=one></input>'));
+ expect(results[0].directives[0].directiveIndex).toBe(
+ annotatedDirectives.indexOf(someComponent3)
+ );
+ });
+
  it('should compile children by default', () => {
  var results = createPipeline().process(el('<div some-decor></div>'));
  expect(results[0].compileChildren).toEqual(true);
@@ -190,6 +198,12 @@ var someComponent2 = new DirectiveMetadata({
  type: DirectiveMetadata.COMPONENT_TYPE
 });
 
+var someComponent3 = new DirectiveMetadata({
+ selector: 'input[type=text][control]',
+ id: 'someComponent3',
+ type: DirectiveMetadata.COMPONENT_TYPE
+});
+
 var someViewport = new DirectiveMetadata({
  selector: '[some-vp]',
  id: 'someViewport',

modules/angular2/test/render/dom/compiler/selector_spec.js

@@ -106,6 +106,18 @@ export function main() {
  expect(matched).toEqual([s1[0],1]);
  });
 
+ it('should select by many attributes and independent of the value', () => {
+ matcher.addSelectables(s1 = CssSelector.parse('input[type=text][control]'), 1);
+
+ var cssSelector = new CssSelector();
+ cssSelector.setElement('input');
+ cssSelector.addAttribute('type', 'text');
+ cssSelector.addAttribute('control', 'one');
+
+ expect(matcher.match(cssSelector, selectableCollector)).toEqual(true);
+ expect(matched).toEqual([s1[0], 1]);
+ });
+
  it('should select independent of the order in the css selector', () => {
  matcher.addSelectables(s1 = CssSelector.parse('[someAttr].someClass'), 1);
  matcher.addSelectables(s2 = CssSelector.parse('.someClass[someAttr]'), 2);
@@ -205,6 +217,14 @@ export function main() {
  expect(cssSelector.toString()).toEqual('sometag.someclass[attrname=attrvalue]');
  });
 
+ it('should detect multiple attributes', () => {
+ var cssSelector = CssSelector.parse('input[type=text][control]')[0];
+ expect(cssSelector.element).toEqual('input');
+ expect(cssSelector.attrs).toEqual(['type', 'text', 'control', '']);
+
+ expect(cssSelector.toString()).toEqual('input[type=text][control]');
+ });
+
  it('should detect :not', () => {
  var cssSelector = CssSelector.parse('sometag:not([attrname=attrvalue].someclass)')[0];
  expect(cssSelector.element).toEqual('sometag');