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');