Apply tag classes to vertices and points

While here, introduce a `classed` matcher for Chai.

js/id/svg/points.js

@@ -8,7 +8,7 @@ iD.svg.Points = function() {
             }
         }
         return 'icons/unknown.png';
-    };
+    }
 
     return function(surface, graph, entities, filter, projection) {
         var points = [];
@@ -40,7 +40,8 @@ iD.svg.Points = function() {
             .attr({ width: 16, height: 16 })
             .attr('transform', 'translate(-8, -8)');
 
-        groups.attr('transform', iD.svg.PointTransform(projection));
+        groups.attr('transform', iD.svg.PointTransform(projection))
+            .call(iD.svg.TagClasses());
 
         // Selecting the following implicitly
         // sets the data (point entity) on the element

js/id/svg/vertices.js

@@ -26,6 +26,7 @@ iD.svg.Vertices = function() {
             .attr('r', 4);
 
         groups.attr('transform', iD.svg.PointTransform(projection))
+            .call(iD.svg.TagClasses())
             .classed('shared', function(entity) { return graph.parentWays(entity).length > 1; });
 
         // Selecting the following implicitly

test/index.html

@@ -106,6 +106,8 @@
         var expect = chai.expect;
     </script>
 
+    <script src="spec/spec_helpers.js"></script>
+
     <!-- include spec files here... -->
     <script src="spec/actions/add_node.js"></script>
     <script src="spec/actions/add_way.js"></script>
@@ -139,6 +141,7 @@
     <script src="spec/renderer/hash.js"></script>
     <script src="spec/renderer/map.js"></script>
 
+    <script src="spec/svg/points.js"></script>
     <script src="spec/svg/vertices.js"></script>
     <script src="spec/svg/tag_classes.js"></script>
 

test/index_packaged.html

@@ -24,6 +24,8 @@
         var expect = chai.expect;
     </script>
 
+    <script src="spec/spec_helpers.js"></script>
+
     <!-- include spec files here... -->
     <script src="spec/actions/add_node.js"></script>
     <script src="spec/actions/add_way.js"></script>
@@ -57,6 +59,7 @@
     <script src="spec/renderer/hash.js"></script>
     <script src="spec/renderer/map.js"></script>
 
+    <script src="spec/svg/points.js"></script>
     <script src="spec/svg/vertices.js"></script>
     <script src="spec/svg/tag_classes.js"></script>
 

test/spec/spec_helpers.js

@@ -0,0 +1,12 @@
+chai.use(function (chai, utils) {
+    var flag = utils.flag;
+
+    chai.Assertion.addMethod('classed', function (className) {
+        this.assert(
+            flag(this, 'object').classed(className)
+            , 'expected #{this} to be classed #{exp}'
+            , 'expected #{this} not to be classed #{exp}'
+            , className
+        );
+    });
+});

test/spec/svg/points.js

@@ -0,0 +1,22 @@
+describe("iD.svg.Points", function () {
+    var surface,
+        projection = d3.geo.mercator(),
+        filter = d3.functor(true);
+
+    beforeEach(function () {
+        surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
+
+        surface.append('g')
+            .attr('class', 'layer-hit');
+    });
+
+    it("adds tag classes", function () {
+        var node = iD.Node({tags: {amenity: "cafe"}, loc: [0, 0], _poi: true}),
+            graph = iD.Graph([node]);
+
+        surface.call(iD.svg.Points(), graph, [node], filter, projection);
+
+        expect(surface.select('.point')).to.be.classed('tag-amenity');
+        expect(surface.select('.point')).to.be.classed('tag-amenity-cafe');
+    });
+});

test/spec/svg/vertices.js

@@ -10,7 +10,15 @@ describe("iD.svg.Vertices", function () {
             .attr('class', 'layer-hit');
     });
 
-    // TODO: fill out
+    it("adds tag classes", function () {
+        var node = iD.Node({tags: {highway: "traffic_signals"}, loc: [0, 0]}),
+            graph = iD.Graph([node]);
+
+        surface.call(iD.svg.Vertices(), graph, [node], filter, projection);
+
+        expect(surface.select('.vertex')).to.be.classed('tag-highway');
+        expect(surface.select('.vertex')).to.be.classed('tag-highway-traffic_signals');
+    });
 
     it("adds the .shared class to vertices that are members of two or more ways", function () {
         var node = iD.Node({loc: [0, 0]}),
@@ -20,6 +28,6 @@ describe("iD.svg.Vertices", function () {
 
         surface.call(iD.svg.Vertices(), graph, [node], filter, projection);
 
-        expect(surface.select('.vertex').classed('shared')).to.equal(true);
+        expect(surface.select('.vertex')).to.be.classed('shared');
     });
 });