add tests

modules/ui/field.js

@@ -28,7 +28,7 @@ export function uiField(context, presetField, entityIDs, options) {
     var _show = options.show;
     var _state = '';
     var _tags = {};
-    
+
     options.source = field.source !== undefined ? field.source : true;
 
     var _entityExtent;
@@ -128,6 +128,9 @@ export function uiField(context, presetField, entityIDs, options) {
     }
 
     field.render = function(selection) {
+
+        var sourceSubfield = uiSourceSubfield(context, field, _tags, dispatch);
+
         var container = selection.selectAll('.form-field')
             .data([field]);
 
@@ -171,17 +174,16 @@ export function uiField(context, presetField, entityIDs, options) {
                     .attr('title', t('icons.undo'))
                     .call(svgIcon((localizer.textDirection() === 'rtl') ? '#iD-icon-redo' : '#iD-icon-undo'));
             }
+
+            if (options.source){
+                sourceSubfield.button(labelEnter, container);
+            }
         }
 
-        var sourceSubfield = uiSourceSubfield(field, _tags, dispatch);
 
         // Update
         container = container
         .merge(enter);
-
-        if(options.source){
-            sourceSubfield.button(labelEnter, container);
-        }
 
         container.select('.field-label > .remove-icon')  // propagate bound data
             .on('click', remove);
@@ -266,7 +268,7 @@ export function uiField(context, presetField, entityIDs, options) {
 
             container.call(_locked ? _lockedTip : _lockedTip.destroy);
 
-            if(options.source){
+            if (options.source){
                 sourceSubfield.body(selection);
             }
     };

modules/ui/source_subfield.js

@@ -7,7 +7,7 @@ import { svgIcon } from '../svg/icon';
 import { uiTooltip } from './tooltip';
 import { utilGetSetValue, utilUniqueDomId } from '../util';
 
-export function uiSourceSubfield(field, tags, dispatch) {
+export function uiSourceSubfield(context, field, tags, dispatch) {
 
     var sourceSubfield = {};
 
@@ -126,28 +126,31 @@ export function uiSourceSubfield(field, tags, dispatch) {
         dispatch.call('change', this, t);
     }
 
-    function addSource(d3_event, d) {
+    function addSource(d3_event) {
         d3_event.preventDefault();
-        
+
         if (typeof _sourceValue !== 'string' && !Array.isArray(_sourceValue)) {
             _sourceValue = '';
         }
         sourceInput.call(renderSourceInput);
-        
+
     }
 
     sourceSubfield.button = function(labelEnter, container) {
         let sourceButtonTip = uiTooltip()
                 .title(() => t.append('inspector.field_source'))
                 .placement('left');
-    
+
         labelEnter
         .append('button')
         .attr('class', 'source-icon')
         .attr('title', 'source-button')
         .call(sourceButtonTip)
         .call(svgIcon('#fas-at', 'inline'));
 
+        container = container
+        .merge(labelEnter);
+
         container.select('.field-label > .source-icon')  // propagate bound data
         .on('click', addSource);
     };

test/spec/ui/fields/source_subfield.js

@@ -0,0 +1,65 @@
+describe('iD.uiSourceSubfield', function() {
+  let entity, context, selection, field;
+
+  beforeEach(function() {
+        entity = iD.osmNode({id: 'n12345'});
+        context = iD.coreContext().assetPath('../dist/').init();
+        context.history().merge([entity]);
+        selection = d3.select(document.createElement('div'));
+        field = iD.presetField('name', { key: 'name', type: 'text' });
+    });
+
+    it('adds an source subfield when the @ button is clicked', function(done) {
+        var uiField = iD.uiField(context, field, ['n12345'], {show: true, wrap: true});
+        window.setTimeout(function() {   // async, so data will be available
+            selection.call(uiField.render);
+            happen.click(selection.selectAll('.source-icon').node());
+            expect(selection.selectAll('.field-source').nodes().length).to.equal(1);
+            done();
+        }, 20);
+    });
+
+    it('creates field:source tag after setting the value', function(done) {
+      var uiField = iD.uiField(context, field, ['n12345'], {show: true, wrap: true});
+      window.setTimeout(function() {   // async, so data will be available
+          selection.call(uiField.render);
+          happen.click(selection.selectAll('.source-icon').node());
+
+          iD.utilGetSetValue(selection.selectAll('.field-source-value'), 'Book 1');
+
+          uiField.on('change', function(tags) {
+            expect(tags).to.eql({'name:source': 'Book 1'});
+          });
+          happen.once(selection.selectAll('.field-source-value').node(), {type: 'change'});
+          done();
+
+      }, 20);
+  });
+
+
+it('removes the tag when the value is emptied', function(done) {
+    var uiField = iD.uiField(context, field, ['n12345'], {show: true, wrap: true});
+    window.setTimeout(function() {   // async, so data will be available
+        selection.call(uiField.render);
+        happen.click(selection.selectAll('.source-icon').node());
+        iD.utilGetSetValue(selection.selectAll('.field-source-value'), 'abc');
+
+        uiField.on('change', function(tags) {
+            expect(tags).to.eql({'name:source': undefined});
+        });
+
+        iD.utilGetSetValue(selection.selectAll('.field-source-value'), '');
+        happen.once(selection.selectAll('.field-source-value').node(), {type: 'change'});
+        done();
+    }, 20);
+  });
+
+  it('there is no @ button on main source field', function(done) {
+    var uiField = iD.uiField(context, {...field, source: false}, ['n12345'], {show: true, wrap: true});
+    window.setTimeout(function() {   // async, so data will be available
+        selection.call(uiField.render);
+        expect(selection.selectAll('.source-icon').nodes().length).to.equal(0);
+        done();
+    }, 20);
+  });
+});