diff --git a/test/data/mvttest.pbf b/test/data/mvttest.pbf
new file mode 100644
index 0000000000..63858a7a95
Binary files /dev/null and b/test/data/mvttest.pbf differ
diff --git a/test/index.html b/test/index.html
index 188b9084c0..e89eaa1c3f 100644
--- a/test/index.html
+++ b/test/index.html
@@ -115,6 +115,7 @@
+
diff --git a/test/spec/svg/mvt.js b/test/spec/svg/mvt.js
new file mode 100644
index 0000000000..e5ab522aa4
--- /dev/null
+++ b/test/spec/svg/mvt.js
@@ -0,0 +1,97 @@
+describe('iD.svgMvt', function () {
+ var context;
+ var surface;
+ var dispatch = d3.dispatch('change');
+ var projection = iD.geoRawMercator()
+ .translate([6934098.868981334, 4092682.5519805425])
+ .scale(iD.geoZoomToScale(17))
+ .clipExtent([[0, 0], [1000, 1000]]);
+
+
+ var gj = {
+ 'type': 'FeatureCollection',
+ 'features': [
+ {
+ 'type': 'Feature',
+ 'id': 316973311,
+ 'geometry': {
+ 'type': 'Point',
+ 'coordinates': [
+ -74.38928604125977,
+ 40.150275473401365
+ ]
+ },
+ 'properties': {
+ 'abbr': 'N.J.',
+ 'area': 19717.8,
+ 'name': 'New Jersey',
+ 'name_en': 'New Jersey',
+ 'osm_id': 316973311
+ }
+ }
+ ]
+ };
+
+ beforeEach(function () {
+ context = iD.coreContext();
+ d3.select(document.createElement('div'))
+ .attr('id', 'map')
+ .call(context.map().centerZoom([-74.389286, 40.1502754], 17));
+
+ surface = context.surface();
+ });
+
+ it('creates layer-mvt', function () {
+ var render = iD.svgMvt(projection, context, dispatch);
+ surface.call(render);
+
+ var layers = surface.selectAll('g.layer-mvt').nodes();
+ expect(layers.length).to.eql(1);
+ });
+
+ it('draws geojson', function () {
+ var render = iD.svgMvt(projection, context, dispatch).geojson(gj);
+ surface.call(render);
+
+ var path = surface.selectAll('path.mvt');
+ expect(path.nodes().length).to.eql(1);
+ expect(path.attr('d')).to.match(/^M.*z$/);
+ });
+
+ describe('#url', function() {
+ it('handles pbf url', function () {
+ var url = '../../data/mvttest.pbf';
+ var render = iD.svgMvt(projection, context, dispatch).url(url);
+ surface.call(render);
+
+ var path = surface.selectAll('path.mvt');
+ expect(path.nodes().length).to.eql(1);
+ expect(path.attr('d')).to.match(/^M.*z$/);
+ });
+ });
+
+ describe('#showLabels', function() {
+ it('shows labels by default', function () {
+ var render = iD.svgMvt(projection, context, dispatch).geojson(gj);
+ surface.call(render);
+
+ var label = surface.selectAll('text.mvtlabel');
+ expect(label.nodes().length).to.eql(1);
+ expect(label.text()).to.eql('New Jersey');
+
+ var halo = surface.selectAll('text.mvtlabel-halo');
+ expect(halo.nodes().length).to.eql(1);
+ expect(halo.text()).to.eql('New Jersey');
+ });
+
+
+ it('hides labels with showLabels(false)', function () {
+ var render = iD.svgMvt(projection, context, dispatch).geojson(gj).showLabels(false);
+ surface.call(render);
+
+ expect(surface.selectAll('text.mvtlabel').empty()).to.be.ok;
+ expect(surface.selectAll('text.mvtlabel-halo').empty()).to.be.ok;
+ });
+ });
+
+});