From f71be55c909a1d6a04d850ded0d92c711235d07f Mon Sep 17 00:00:00 2001
From: Kyle Bishop <kybishop@gmail.com>
Date: Wed, 30 Aug 2017 21:15:48 -0700
Subject: [PATCH] feat(attach-tooltip component) has expected tooltip defaults

---
 addon/components/attach-tooltip.js            |  24 ++++
 addon/components/ember-attacher.js            |   1 +
 app/components/attach-tooltip.js              |   1 +
 tests/dummy/app/styles/app.scss               |  77 ++++++------
 .../components/attachment-example.hbs         | 116 ++++++++++--------
 .../components/attach-tooltip-test.js         |  43 +++++++
 6 files changed, 173 insertions(+), 89 deletions(-)
 create mode 100644 addon/components/attach-tooltip.js
 create mode 100644 app/components/attach-tooltip.js
 create mode 100644 tests/integration/components/attach-tooltip-test.js

diff --git a/addon/components/attach-tooltip.js b/addon/components/attach-tooltip.js
new file mode 100644
index 00000000..a4833eb8
--- /dev/null
+++ b/addon/components/attach-tooltip.js
@@ -0,0 +1,24 @@
+import EmberAttacher from './ember-attacher';
+import { computed } from '@ember/object';
+
+const DEFAULT_TOOLTIP_CLASS = 'ember-attacher-popper ember-attacher-tooltip';
+
+export default EmberAttacher.extend({
+  actions: {
+    onFoundTarget(target) {
+      this._super(...arguments);
+
+      target.setAttribute('aria-describedby', this.id);
+    }
+  },
+
+  class: computed({
+    get() {
+      return DEFAULT_TOOLTIP_CLASS;
+    },
+
+    set(_key, value) {
+      return `${DEFAULT_TOOLTIP_CLASS} ${value}`;
+    }
+  })
+});
diff --git a/addon/components/ember-attacher.js b/addon/components/ember-attacher.js
index c8a075d5..5320ad21 100644
--- a/addon/components/ember-attacher.js
+++ b/addon/components/ember-attacher.js
@@ -62,6 +62,7 @@ export default Component.extend({
   interactive: DEFAULTS.interactive,
   isOffset: DEFAULTS.isOffset,
   isShown: DEFAULTS.isShown,
+  onChange: null,
   placement: DEFAULTS.placement,
   popperContainer: DEFAULTS.popperContainer,
   popperOptions: DEFAULTS.popperOptions,
diff --git a/app/components/attach-tooltip.js b/app/components/attach-tooltip.js
new file mode 100644
index 00000000..e6e328bb
--- /dev/null
+++ b/app/components/attach-tooltip.js
@@ -0,0 +1 @@
+export { default } from 'ember-attacher/components/attach-tooltip';
\ No newline at end of file
diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
index 9330dedb..776531c6 100644
--- a/tests/dummy/app/styles/app.scss
+++ b/tests/dummy/app/styles/app.scss
@@ -2,12 +2,12 @@
 
 body {
   color: #fcfcfc;
-  margin: 0;
   font-family: helvetica;
   font-size: 18px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  max-height:100vh;
+  margin: 0;
+  max-height: 100vh;
   overflow: auto;
 }
 
@@ -45,50 +45,51 @@ p {
 .nav {
   background-color: #eee;
   color: #333;
+  cursor: pointer;
   font-size: 16px;
   padding: 8px;
-}
 
-.nav.active {
-  background-color: #ddd;
-  font-weight: bold;
+  &.active {
+    background-color: #ddd;
+    font-weight: bold;
+  }
 }
 
-.edit-section, .section {
+.edit-section,
+.section {
   padding: 18px;
   padding-bottom: 0;
 }
 
 .button {
-  position: relative;
-  border-top: 1px solid #aaaaaa;
+  background-color: #fff;
   border-bottom: 1px solid #aaaaaa;
-  border-right: 1px solid #aaaaaa;
   border-left: 1px solid #aaaaaa;
   border-radius: 4px;
-  background-color: #ffffff;
-  line-height: 1.75;
+  border-right: 1px solid #aaaaaa;
+  border-top: 1px solid #aaaaaa;
   color: #333;
-  background-color: #fff;
-  font-size: inherit;
   font-family: monospace;
+  font-size: inherit;
+  line-height: 1.75;
   margin: 1px;
+  position: relative;
   text-align: center;
-}
 
-.button.medium {
-  min-width: 80px;
-  width: 80px;
-}
+  &.medium {
+    min-width: 80px;
+    width: 80px;
+  }
 
-.button.large {
-  min-width: 145px;
-  width: 145px;
-}
+  &.large {
+    min-width: 145px;
+    width: 145px;
+  }
 
-.button.xlarge {
-  min-width: 185px;
-  width: 185px;
+  &.xlarge {
+    min-width: 185px;
+    width: 185px;
+  }
 }
 
 .edit-me {
@@ -122,26 +123,26 @@ p {
   background-color: #fff;
   border: 1px solid #ddd;
   color: #333;
-  padding: 0.5rem 1rem;
+  padding: .5rem 1rem;
   position: relative;
 
   &.ember-attacher-fill {
-    overflow: hidden;
     background-color: transparent;
+    overflow: hidden;
   }
 
   > div[x-circle] {
     background-color: #fff;
-    position: absolute;
-    will-change: transform;
     border-radius: 50%;
-    width: 120%;
-    width: calc(100% + 2rem);
     left: 50%;
-    transition: all ease-out;
-    z-index: -1;
     opacity: 0;
     overflow: hidden;
+    position: absolute;
+    transition: all ease-out;
+    width: 120%;
+    width: calc(100% + 2rem);
+    will-change: transform;
+    z-index: -1;
 
     &::before {
       content: '';
@@ -178,7 +179,8 @@ p {
     width: 160px;
   }
 
-  .edit-me, .nav {
+  .edit-me,
+  .nav {
     font-size: 15px;
   }
 
@@ -188,8 +190,9 @@ p {
   }
 }
 
-@media(max-width: 330px) {
-  .edit-me, .nav {
+@media(max-width: 331px) {
+  .edit-me,
+  .nav {
     font-size: 14px;
   }
 }
diff --git a/tests/dummy/app/templates/components/attachment-example.hbs b/tests/dummy/app/templates/components/attachment-example.hbs
index f78790a4..b5e6ec90 100644
--- a/tests/dummy/app/templates/components/attachment-example.hbs
+++ b/tests/dummy/app/templates/components/attachment-example.hbs
@@ -1,13 +1,12 @@
 <centered class="section">
-  <p>Drop an \{{#ember-attacher}} in any element or component to get started.</p>
+  <p>Drop an <span class="no-wrap">\{{#attach-tooltip}}</span> or <span class="no-wrap">\{{#ember-attacher}}</span> in any element or component to get started.</p>
 </centered>
 <centered class="section">
   <centered xs="12" lm="10" sm="8" md="6" lg="5" justify="around" class="popper-area">
     <button class="hover-me">
       Tooltip me, captain!
-      {{#ember-attacher animation=tooltipData.animation
+      {{#attach-tooltip animation=tooltipData.animation
                         arrow=tooltipData.arrow
-                        class="ember-attacher-popper ember-attacher-tooltip"
                         hideDelay=tooltipData.hideDelay
                         hideDuration=tooltipData.hideDuration
                         hideOn=tooltipData.hideOn
@@ -20,7 +19,7 @@
                         showDuration=tooltipData.showDuration
                         showOn=tooltipData.showOn}}
         Hello world!
-      {{/ember-attacher}}
+      {{/attach-tooltip}}
     </button>
 
     <button class="hover-me target-plz">
@@ -64,31 +63,40 @@
   <vbox lm="fit">
     <hbox class="nav-bar">
       <centered fit class="nav{{if isConfiguringTooltip ' active'}}" {{action 'setIsConfiguringTooltip' true}}>
-        Tooltip in a parent
+        \{{#attach-tooltip}}
       </centered>
       <centered fit class="nav{{unless isConfiguringTooltip ' active'}}" {{action 'setIsConfiguringTooltip' false}}>
-        Popover with a target
+        \{{#ember-attacher}}
       </centered>
     </hbox>
 
   <vbox class="edit-me">
     <hbox><centered fit>&lt;button class="hover-me"></centered></hbox>
-    <hbox><centered fit>&nbsp;&nbsp;{{if isConfiguringTooltip 'Tooltip me, captain!' 'Click me, captain!'}}</centered></hbox>
+    <hbox>
+      <centered fit>
+        &nbsp;&nbsp;
+        {{if isConfiguringTooltip 'Tooltip me, captain!' 'Click me, captain!'}}
+      </centered>
+    </hbox>
+    <hbox>&nbsp;</hbox>
     <box lm="horizontal" fit>
       <hbox fit class="no-wrap">
         <centered fit>
           &nbsp;&nbsp;\{{
           <span class="underlined">
-            #ember-attacher
-              {{#ember-attacher class="ember-attacher-popper ember-attacher-tooltip"}}
-                {{#if isConfiguringTooltip}}
-                  The "Tooltip in a parent" ember-attacher is initially set to the default settings.
-                  Twiddle some knobs to see what ember-attacher can do!
-                {{else}}
-                  The "Popover with a target" ember-attacher is triggered by clicking, and has
-                  a custom hide action.
-                {{/if}}
-              {{/ember-attacher}}
+            {{if isConfiguringTooltip '#attach-tooltip' '#ember-attacher'}}
+
+            {{#attach-tooltip animation='shift'}}
+              {{#if isConfiguringTooltip}}
+                This component has the default settings. The \{{attach-tooltip}} component
+                automatically gains the ember-attacher-popper and ember-attacher-tooltip classes.
+                It also modifies the target element's aria-describedby to point to the tooltip.
+                For manual control, use \{{ember-attacher}} instead.
+              {{else}}
+                This is a click-triggered \{{ember-attacher}}. Unlike \{{attach-tooltip}}, it does
+                not modify the target's aria-describedby, or have any default classes.
+              {{/if}}
+            {{/attach-tooltip}}
           </span>
           &nbsp;
         </centered>
@@ -131,11 +139,11 @@
         <span class="underlined">
           hideOn
 
-          {{#ember-attacher class="ember-attacher-popper ember-attacher-tooltip"}}
+          {{#attach-tooltip animation='shift'}}
             Any combination of "blur", "click", "clickout", "escapekey", and "mouseleave".
             <p>clickout: hides the attachment when the user clicks outside the target. When interactive=true, clicking the attachment will not trigger a hide event.</p>
             <p>escapekey: hides the attachment when the user presses the escape key</p>
-          {{/ember-attacher}}
+          {{/attach-tooltip}}
         </span>
         ="{{#power-select onchange=(action (mut service.hideOn))
                           options=hideOnOptions
@@ -153,9 +161,9 @@
         <span class="underlined">
           hideDuration
 
-          {{#ember-attacher class="ember-attacher-popper ember-attacher-tooltip"}}
+          {{#attach-tooltip}}
             How long the hide animation will take.
-          {{/ember-attacher}}
+          {{/attach-tooltip}}
         </span>
         ={{input class="button medium"
                  min="0"
@@ -172,9 +180,9 @@
         <span class="underlined">
           interactive
 
-          {{#ember-attacher class="ember-attacher-popper ember-attacher-tooltip"}}
+          {{#attach-tooltip}}
             Interactive tooltips will not close when clicked or hovered over.
-          {{/ember-attacher}}
+          {{/attach-tooltip}}
         </span>
         =
         <button class="button medium" {{action "toggleInteractive"}}>
@@ -188,9 +196,9 @@
         <span class="underlined">
           isShown
 
-          {{#ember-attacher class="ember-attacher-popper ember-attacher-tooltip"}}
+          {{#attach-tooltip}}
             Manually controls whether or not the attacher should be open or closed.
-          {{/ember-attacher}}
+          {{/attach-tooltip}}
         </span>
         =
         <button class="button medium" {{action "toggleIsShown"}}>{{service.isShown}}</button>
@@ -202,11 +210,11 @@
         <span class="underlined">
           onChange
 
-          {{#ember-attacher class="ember-attacher-popper ember-attacher-tooltip"}}
+          {{#attach-tooltip}}
             An action to be fired when the attachment's visibility changes.
-          {{/ember-attacher}}
+          {{/attach-tooltip}}
         </span>
-        =(action (mut service.isShown))
+        =(action (mut isShown))
       </centered>
     </hbox>
     <hbox>
@@ -228,7 +236,7 @@
         <span class="underlined">
           renderInPlace
 
-          {{#ember-attacher animation="shift" class="ember-attacher-popper ember-attacher-tooltip"}}
+          {{#attach-tooltip animation="shift"}}
             Elements that exist deep within the document tree are given an implicitly lower z-index
             value than elements that aren't as deep in the tree; this has the effect of hiding our
             popper behind less-nested elements. Due to the way z-indexing works, we cannot simply
@@ -236,7 +244,7 @@
             on the document body, giving it the highest default z-index value. Toggling
             renderInPlace will prevent the popper from being rendered elsewhere, but may cause the
             aforementioned z-index issues.
-          {{/ember-attacher}}
+          {{/attach-tooltip}}
         </span>
         =
         <button class="button medium" {{action "toggleRenderInPlace"}}>
@@ -262,9 +270,9 @@
         <span class="underlined">
           showDuration
 
-          {{#ember-attacher class="ember-attacher-popper ember-attacher-tooltip"}}
+          {{#attach-tooltip}}
             How long the show animation will take.
-          {{/ember-attacher}}
+          {{/attach-tooltip}}
         </span>
         ={{input class="button medium"
                  min="0"
@@ -281,10 +289,10 @@
         <span class="underlined">
           showOn
 
-          {{#ember-attacher class="ember-attacher-popper ember-attacher-tooltip"}}
+          {{#attach-tooltip}}
             For performance reasons, we recommend using some combination of "mouseenter", "focus",
             and "click", though you can use any event listener you want.
-          {{/ember-attacher}}
+          {{/attach-tooltip}}
         </span>
         ="{{#power-select onchange=(action (mut service.showOn))
                           options=showOnOptions
@@ -296,31 +304,33 @@
                           {{/power-select}}"
       </centered>
     </hbox>
-    {{#unless isConfiguringTooltip}}
-      <hbox>
-        &nbsp;&nbsp;&nbsp;&nbsp;<box xs="hidden" lm="visible fit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</box>
-        <centered fit>
-          target=".target-plz"
-        </centered>
-      </hbox>
-    {{/unless}}
     <hbox>
       &nbsp;&nbsp;&nbsp;&nbsp;<box xs="hidden" lm="visible fit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</box>
       <centered fit>
         <vbox>
           {{#if isConfiguringTooltip}}
-            <hbox><centered fit>class=</centered></hbox>
-            <hbox><centered fit>&nbsp;&nbsp;"ember-attacher-popper</centered></hbox>
-            <hbox><centered fit>&nbsp;&nbsp;&nbsp;ember-attacher-tooltip"}}</centered></hbox>
+            <hbox>
+              <centered fit>
+                <span class="underlined">
+                  class
+
+                  {{#attach-tooltip}}
+                    The \{{attach-tooltip}} component automatically adds
+                    ember-attacher-popper and ember-attacher-tooltip to the class string.
+                  {{/attach-tooltip}}
+                </span>
+                ='optional-class-here'}}
+              </centered>
+            </hbox>
           {{else}}
             <hbox><centered fit>class=</centered></hbox>
             <hbox><centered fit>&nbsp;&nbsp;"ember-attacher-popper</centered></hbox>
             <hbox><centered fit>
-              &nbsp;&nbsp;&nbsp;<a href="https://github.com/kybishop/ember-attacher/blob/master/tests/dummy/app/styles/app.scss#L120"
+              &nbsp;&nbsp;&nbsp;<a href="https://github.com/kybishop/ember-attacher/blob/master/tests/dummy/app/styles/app.scss"
                                          target="_blank"
                                          rel="noopener">custom-popover-css</a>"
             </centered></hbox>
-            <hbox><centered fit>as |emberAttacher|}}</centered></hbox>
+            <hbox><centered fit>as |attacher|}}</centered></hbox>
           {{/if}}
         </vbox>
       </centered>
@@ -329,13 +339,15 @@
       <hbox>&nbsp;&nbsp;&nbsp;&nbsp;Hello world!</hbox>
     {{else}}
       <vbox>
-        <hbox>
-          &nbsp;&nbsp;&nbsp;&nbsp;<centered fit>&lt;p>Popovers and tooltips, oh my!&lt;/p></centered>
-        </hbox>
+        <hbox fit><centered fit>&nbsp;&nbsp;&nbsp;&nbsp;&lt;p></centered></hbox>
+        <hbox fit><centered fit>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Popovers and tooltips, oh my!
+        </centered></hbox>
+        <hbox fit><centered fit>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p></centered></hbox>
         <hbox>
           &nbsp;&nbsp;&nbsp;&nbsp;
           <centered fit>
-            &lt;button \{{action emberAttacher.hide}}>
+            &lt;button \{{action attacher.hide}}>
           </centered>
         </hbox>
         <hbox>
@@ -353,7 +365,7 @@
       </vbox>
     {{/if}}
     <hbox>
-      &nbsp;&nbsp;\{{/ember-attacher}}
+      &nbsp;&nbsp;\{{/{{if isConfiguringTooltip 'attach-tooltip}}' 'ember-attacher}}'}}
     </hbox>
     <hbox>
       <centered fit>&lt;\button></centered>
diff --git a/tests/integration/components/attach-tooltip-test.js b/tests/integration/components/attach-tooltip-test.js
new file mode 100644
index 00000000..fb0fe94f
--- /dev/null
+++ b/tests/integration/components/attach-tooltip-test.js
@@ -0,0 +1,43 @@
+import hbs from 'htmlbars-inline-precompile';
+import { find } from 'ember-native-dom-helpers';
+import { moduleForComponent, test } from 'ember-qunit';
+
+moduleForComponent('attach-tooltip', 'Integration | Component | attach tooltip', {
+  integration: true
+});
+
+test('it adds aria-describedby to the target and has the default classes', function(assert) {
+  this.render(hbs`
+    <div id="target">
+      {{#attach-tooltip id='attachment' class='some-class'}}
+        tooltip text
+      {{/attach-tooltip}}
+    </div>
+
+    <div id="other-target">
+      {{#attach-tooltip class='tooltip-with-no-initial-id'}}
+        tooltip text
+      {{/attach-tooltip}}
+    </div>
+  `);
+
+  const target = find('#target');
+  const tooltip = find('#attachment');
+
+  assert.ok(
+    tooltip.className.startsWith('ember-attacher-popper ember-attacher-tooltip some-class'),
+    'it adds the default classes'
+  );
+
+  assert.equal(target.getAttribute('aria-describedby'),
+               tooltip.id,
+               "target receives aria-describedby with tooltip's ID");
+
+  const tooltipWithNoInitialId = find('.tooltip-with-no-initial-id');
+
+  assert.ok(tooltipWithNoInitialId.id, 'tooltip gets generated ID when no ID is supplied');
+
+  assert.equal(find('#other-target').getAttribute('aria-describedby'),
+               tooltipWithNoInitialId.id,
+               "target receives aria-describedby with tooltip's generated ID");
+});