Merge pull request #8255 from michaelchadwick/frontend-5868-fadetext-button-edit-tooltip

Add title tooltip to objective buttons

Author: dartajax

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/editable-field.js

@@ -0,0 +1,32 @@
+import {
+  attribute,
+  clickable,
+  count,
+  create,
+  isVisible,
+  text,
+  triggerable,
+} from 'ember-cli-page-object';
+import { hasFocus } from 'ilios-common';
+import fadeText from './fade-text.js';
+
+const definition = {
+  scope: '[data-test-editable-field]',
+  value: text(),
+  hasEditIcon: isVisible('[data-test-edit-icon]'),
+  editable: {
+    scope: '[data-test-edit]',
+    edit: clickable(),
+    iconCount: count(),
+    title: attribute('title'),
+  },
+  enter: triggerable('keyup', 'input', { eventProperties: { key: 'Enter' } }),
+  escape: triggerable('keyup', 'input', { eventProperties: { key: 'Escape' } }),
+  cancel: clickable('[data-test-cancel]'),
+  inputHasFocus: hasFocus('input'),
+  textareaHasFocus: hasFocus('textarea'),
+  fadeText,
+};
+
+export default definition;
+export const component = create(definition);

packages/ilios-common/addon/components/course/objective-list-item-parents.hbs

@@ -33,7 +33,14 @@
       >
         {{#if @editable}}
           <span data-test-parent>
-            <button type="button" class="link-button" {{on "click" @manage}} data-test-manage>
+            <button
+              type="button"
+              class="link-button"
+              aria-label={{t "general.edit"}}
+              title={{t "general.edit"}}
+              {{on "click" @manage}}
+              data-test-manage
+            >
               <div class="display-text-wrapper{{if shouldFade ' faded'}}">
                 <div class="display-text" {{on-resize updateTextDims}}>
                   {{displayText}}
@@ -63,7 +70,6 @@
             <button
               class="expand-text-button"
               type="button"
-              aria-label={{t "general.expand"}}
               title={{t "general.expand"}}
               data-test-expand
               {{on "click" expand}}
@@ -75,7 +81,6 @@
           {{#if expanded}}
             <button
               class="expand-text-button"
-              aria-label={{t "general.collapse"}}
               title={{t "general.collapse"}}
               type="button"
               data-test-collapse

packages/ilios-common/addon/components/course/objective-list-item.hbs

@@ -16,6 +16,7 @@
         @close={{this.revertTitleChanges}}
         @fadeTextExpanded={{this.fadeTextExpanded}}
         @onExpandAllFadeText={{this.expandAllFadeText}}
+        @showTitle={{true}}
       >
         <HtmlEditor
           @content={{@courseObjective.title}}

packages/ilios-common/addon/components/editable-field.hbs

@@ -1,4 +1,4 @@
-<div class="editinplace{{if this.isEditing ' is-editing'}}" ...attributes>
+<div class="editinplace{{if this.isEditing ' is-editing'}}" data-test-editable-field ...attributes>
   <span class="content">
     {{#if this.isEditing}}
       <span
@@ -55,6 +55,7 @@
               <button
                 class="link-button editable"
                 aria-label={{t "general.edit"}}
+                title={{if @showTitle (t "general.edit")}}
                 data-test-edit
                 type="button"
                 {{on "click" (fn this.setIsEditing true)}}

packages/ilios-common/addon/components/session/objective-list-item-parents.hbs

@@ -33,7 +33,14 @@
       >
         {{#if @editable}}
           <span data-test-parent>
-            <button type="button" class="link-button" {{on "click" @manage}} data-test-manage>
+            <button
+              type="button"
+              class="link-button"
+              aria-label={{t "general.edit"}}
+              title={{t "general.edit"}}
+              {{on "click" @manage}}
+              data-test-manage
+            >
               <div class="display-text-wrapper{{if shouldFade ' faded'}}">
                 <div class="display-text" {{on-resize updateTextDims}}>
                   {{displayText}}
@@ -63,7 +70,6 @@
             <button
               class="expand-text-button"
               type="button"
-              aria-label={{t "general.expand"}}
               title={{t "general.expand"}}
               data-test-expand
               {{on "click" expand}}
@@ -75,7 +81,6 @@
           {{#if expanded}}
             <button
               class="expand-text-button"
-              aria-label={{t "general.collapse"}}
               title={{t "general.collapse"}}
               type="button"
               data-test-collapse

packages/ilios-common/addon/components/session/objective-list-item.hbs

@@ -16,6 +16,7 @@
         @close={{this.revertTitleChanges}}
         @fadeTextExpanded={{this.fadeTextExpanded}}
         @onExpandAllFadeText={{this.expandAllFadeText}}
+        @showTitle={{true}}
       >
         <HtmlEditor
           @content={{@sessionObjective.title}}

packages/ilios-common/translations/en-us.yaml

@@ -124,7 +124,7 @@ general:
   etAl: et al.
   eventNotFoundTitle: Event Not Found
   eventNotFoundExplanation: "The event you have tried to reach is either no longer available, or you have followed a personalized user link which is not shareable. If you continue to encounter issues, please contact your Ilios help desk."
-  expand: expand
+  expand: Expand
   expandDetail: Show Details
   externalId: Course ID
   file: File

packages/ilios-common/translations/es.yaml

@@ -124,7 +124,7 @@ general:
   etAl: et al.
   eventNotFoundTitle: Evento no encontrado
   eventNotFoundExplanation: "El evento al que ha intentado acceder ya no está disponible o ha seguido un enlace de usuario personalizado que no se puede compartir. Si sigue teniendo problemas, póngase en contacto con el servicio de asistencia de Ilios."
-  expand: expandir
+  expand: Expandir
   expandDetail: Enseñar Detalles
   externalId: Identificación del Curso
   file: Archivo

packages/ilios-common/translations/fr.yaml

@@ -122,7 +122,7 @@ general:
   ends: Terminé
   endTime: Heure Terminé
   etAl: et al.
-  expand: étendre
+  expand: Étendre
   eventNotFoundTitle: Evénement introuvable
   eventNotFoundExplanation: "L'événement que vous avez essayé d'atteindre n'est plus disponible ou vous avez suivi un lien utilisateur personnalisé qui n'est pas partageable. Si vous continuez à rencontrer des problèmes, veuillez contacter votre service d'assistance Ilios."
   expandDetail: Afficher Détails

packages/test-app/tests/integration/components/editable-field-test.js

@@ -1,42 +1,42 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'test-app/tests/helpers';
-import { render, click, triggerKeyEvent, waitFor } from '@ember/test-helpers';
+import { render, waitFor } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+import { component } from 'ilios-common/page-objects/components/editable-field';
 
 module('Integration | Component | editable field', function (hooks) {
   setupRenderingTest(hooks);
+  setupIntl(hooks, 'en-us');
 
   test('it renders value', async function (assert) {
     await render(hbs`<EditableField @value='woot!' />`);
-    assert.dom(this.element).hasText('woot!');
-    assert.dom('[data-test-edit-icon]', this.element).isNotVisible();
+    assert.strictEqual(component.value, 'woot!');
+    assert.notOk(component.hasEditIcon);
   });
 
   test('edit icon is present', async function (assert) {
     await render(hbs`<EditableField @value='woot!' @showIcon={{true}} />`);
-    assert.dom(this.element).hasText('woot!');
-    assert.dom('[data-test-edit-icon]', this.element).isVisible();
+    assert.strictEqual(component.value, 'woot!');
+    assert.ok(component.hasEditIcon);
   });
 
   test('it renders clickPrompt', async function (assert) {
     await render(hbs`<EditableField @clickPrompt='click me!' />`);
-
-    assert.dom(this.element).hasText('click me!');
+    assert.strictEqual(component.value, 'click me!');
   });
 
   test('it renders content', async function (assert) {
     this.set('content', 'template block text');
     await render(hbs`<EditableField @value='text'>
   {{this.content}}
 </EditableField>`);
-
-    assert.dom(this.element).hasText('text');
-    await click('[data-test-edit]');
-    assert.dom(this.element).hasText('template block text');
+    assert.strictEqual(component.value, 'text');
+    await component.editable.edit();
+    assert.strictEqual(component.value, 'template block text');
   });
 
   test('it renders an edit icon when it looks empty', async function (assert) {
-    const icon = '.fa-pen-to-square';
     this.set(
       'value',
       `
@@ -46,9 +46,8 @@ module('Integration | Component | editable field', function (hooks) {
     `,
     );
     await render(hbs`<EditableField @value={{this.value}} />`);
-
-    assert.dom(this.element).hasText('');
-    assert.dom(icon).exists({ count: 1 });
+    assert.strictEqual(component.value, '');
+    assert.strictEqual(component.editable.iconCount, 1);
   });
 
   test('save on enter', async function (assert) {
@@ -66,8 +65,8 @@ module('Integration | Component | editable field', function (hooks) {
   </label>
 </EditableField>`,
     );
-    await click('[data-test-edit]');
-    await triggerKeyEvent('.editinplace input', 'keyup', 13);
+    await component.editable.edit();
+    await component.enter();
   });
 
   test('close on escape', async function (assert) {
@@ -85,8 +84,8 @@ module('Integration | Component | editable field', function (hooks) {
   </label>
 </EditableField>`,
     );
-    await click('[data-test-edit]');
-    await triggerKeyEvent('.editinplace input', 'keyup', 27);
+    await component.editable.edit();
+    await component.escape();
   });
 
   test('focus when editor opens on input', async function (assert) {
@@ -97,8 +96,8 @@ module('Integration | Component | editable field', function (hooks) {
   <label><input />{{this.label}}</label>
 </EditableField>`,
     );
-    await click('[data-test-edit]');
-    assert.dom('input', this.element).isFocused();
+    await component.editable.edit();
+    assert.ok(component.inputHasFocus);
   });
 
   test('focus when editor opens on textarea', async function (assert) {
@@ -108,16 +107,14 @@ module('Integration | Component | editable field', function (hooks) {
   <label for='textarea'>{{this.label}}</label>
   <textarea id='textarea'></textarea>
 </EditableField>`);
-    await click('[data-test-edit]');
-
-    assert.dom('textarea', this.element).isFocused();
+    await component.editable.edit();
+    assert.ok(component.textareaHasFocus);
   });
 
   test('expand/collapse overlong html', async function (assert) {
     const text = `
       <p>A long list:</p><ol><li>One</li><li>two</li><li>Five!</li><li>Six</li><li>Seven but with extra text to make long</li><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li><li>f</li><li>g</li><li>h</li><li>iii</li><li>Jjjjjj</li><li>k</li><li>lLLLLLLlll</li><li>mmmmmMMMMMmm</li><li>nnnnnOPE</li><li>ohno</li><li>pppppPowerbook</li></ol>
     `;
-    const fadedClass = 'faded';
     const fadedSelector = '.faded';
     this.set('value', text);
     this.set('fadeTextIsExpanded', false);
@@ -134,16 +131,17 @@ module('Integration | Component | editable field', function (hooks) {
 
     await waitFor(fadedSelector);
 
-    assert.dom('.display-text-wrapper', this.element).hasClass(fadedClass);
-    await click('[data-test-expand]');
+    assert.ok(component.fadeText.enabled);
+    assert.ok(component.fadeText.displayText.isFaded);
 
-    assert.dom('.display-text-wrapper', this.element).doesNotHaveClass(fadedClass);
+    await component.fadeText.control.expand.click();
 
-    await click('[data-test-collapse]');
+    assert.notOk(component.fadeText.displayText.isFaded);
 
+    await component.fadeText.control.collapse.click();
     await waitFor(fadedSelector);
 
-    assert.dom('.display-text-wrapper', this.element).hasClass(fadedClass);
+    assert.ok(component.fadeText.displayText.isFaded);
   });
 
   test('sends status info', async function (assert) {
@@ -152,9 +150,20 @@ module('Integration | Component | editable field', function (hooks) {
       hbs`<EditableField @close={{(noop)}} @value='lorem' @onEditingStatusChange={{set this 'status'}} />`,
     );
     assert.notOk(this.status);
-    await click('[data-test-edit]');
+    await component.editable.edit();
     assert.ok(this.status);
-    await click('[data-test-cancel]');
+    await component.cancel();
     assert.notOk(this.status);
   });
+
+  test('it has title property value only if @showTitle is true', async function (assert) {
+    await render(hbs`<EditableField @value='lorem' />`);
+
+    assert.strictEqual(component.editable.title, undefined);
+
+    this.set('showTitle', true);
+    await render(hbs`<EditableField @value='lorem' @showTitle={{this.showTitle}} />`);
+
+    assert.strictEqual(component.editable.title, 'Edit');
+  });
 });