[BUGFIX] Create anchor for “Properties” tab items

Fixes #546

Author: Tony Ward

app/controllers/properties.js

@@ -4,5 +4,11 @@ import AnchorControllerSupport from "ember-anchor/mixins/controller-support";
 
 export default Controller.extend(AnchorControllerSupport, {
   filterData: service(),
-  queryParams: ['anchor']
+  queryParams: ['anchor'],
+
+  actions: {
+    updateAnchor(fieldName) {
+      this.set('anchor', fieldName);
+    }
+  }
 });

app/templates/properties.hbs

@@ -1,6 +1,6 @@
 {{ember-anchor a=anchor}}
 {{#api-index-filter model=model filterData=filterData as |filteredModel|}}
   {{#each filteredModel.properties as |property|}}
-    {{class-field-description type="property" field=property model=model}}
+    {{class-field-description type="property" field=property model=model updateAnchor=(action 'updateAnchor')}}
   {{/each}}
 {{/api-index-filter}}

tests/acceptance/anchors-test.js

@@ -0,0 +1,12 @@
+import moduleForAcceptance from 'ember-api-docs/tests/helpers/module-for-acceptance';
+import { test } from 'qunit';
+import { visit, click, findAll} from 'ember-native-dom-helpers';
+
+moduleForAcceptance('Acceptance | Creating Anchors');
+
+test('Can create a link from the "Properties" tab', async function(assert) {
+  await visit('/ember/1.0/classes/Container/properties');
+  let [ element ] = findAll('.class-field-description--link');
+  await click(element);
+  assert.equal(currentURL(), `/ember/1.0/classes/Container/properties?anchor=${element.innerText}`);
+});

tests/integration/components/class-field-description-test.js

@@ -1,7 +1,7 @@
 import EmberObject from '@ember/object';
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
-import { findAll, triggerEvent } from 'ember-native-dom-helpers';
+import { click, findAll, triggerEvent } from 'ember-native-dom-helpers';
 
 moduleForComponent('class-field-description', 'Integration | Component | class field description', {
   integration: true
@@ -41,3 +41,22 @@ test('On hover -- the link icon shows up', async function(assert) {
   await triggerEvent('.class-field-description--link', 'mouseenter');
   assert.dom('.class-field-description--link-hover').exists('The link icon appears when hovering on the method text');
 });
+
+test('it calls the provided action on link-click with the field name as an arg', async function(assert) {
+  this.set('updateAnchor', (name) => {
+    assert.equal(name, 'field-name', 'expected the field name to be passed into the action');
+    assert.step('updateAnchorAction');
+  });
+
+  this.set('field', EmberObject.create({
+    name: "field-name",
+  }));
+
+  this.render(hbs`{{class-field-description field=field updateAnchor=updateAnchor}}`);
+
+  await click('.class-field-description--link');
+
+  assert.verifySteps([
+    'updateAnchorAction'
+  ]);
+});