UI/InfoTableRow testing (#12811)

* updates storybook

* adds computed property valueIsEmpty

* adds tests to info table row

ui/lib/core/addon/components/info-table-row.js

@@ -44,4 +44,21 @@ export default Component.extend({
   valueIsBoolean: computed('value', function() {
     return typeOf(this.value) === 'boolean';
   }),
+
+  valueIsEmpty: computed('value', function() {
+    let { value } = this;
+    if (typeOf(value) === 'array' && value.length === 0) {
+      return true;
+    }
+    switch (value) {
+      case undefined:
+        return true;
+      case null:
+        return true;
+      case '':
+        return true;
+      default:
+        return false;
+    }
+  }),
 });

ui/lib/core/addon/templates/components/info-table-row.hbs

@@ -34,7 +34,7 @@
     {{!-- alwaysRender is still true --}}
     {{else if (and (not value) defaultShown)}}
       <span data-test-row-value="{{label}}">{{defaultShown}}</span>
-    {{else if (eq value "")}} 
+    {{else if valueIsEmpty}} 
       <Icon @size="s" @glyph="minus-plain"/>
     {{else}}
       {{#if (eq type 'array')}}

ui/lib/core/stories/info-table-row.md

@@ -12,6 +12,14 @@ that the value breaks under the label on smaller viewports.
 | label | <code>string</code> | <code>null</code> | The display name for the value. |
 | helperText | <code>string</code> | <code>null</code> | Text to describe the value displayed beneath the label. |
 | alwaysRender | <code>Boolean</code> | <code>false</code> | Indicates if the component content should be always be rendered.  When false, the value of `value` will be used to determine if the component should render. |
+| [type] | <code>string</code> | <code>&quot;array&quot;</code> | The type of value being passed in.  This is used for when you want to trim an array.  For example, if you have an array value that can equal length 15+ this will trim to show 5 and count how many more are there |
+| [isLink] | <code>Boolean</code> | <code>true</code> | Passed through to InfoTableItemArray. Indicates if the item should contain a link-to component.  Only setup for arrays, but this could be changed if needed. |
+| [modelType] | <code>string</code> | <code>null</code> | Passed through to InfoTableItemArray. Tells what model you want data for the allOptions to be returned from.  Used in conjunction with the the isLink. |
+| [queryParam] | <code>String</code> |  | Passed through to InfoTableItemArray. If you want to specific a tab for the View All XX to display to.  Ex: role |
+| [backend] | <code>String</code> |  | Passed through to InfoTableItemArray. To specify secrets backend to point link to  Ex: transformation |
+| [viewAll] | <code>String</code> |  | Passed through to InfoTableItemArray. Specify the word at the end of the link View all. |
+| [tooltipText] | <code>String</code> |  | Text if a tooltip should display over the value. |
+| [defaultShown] | <code>String</code> |  | Text that renders as value if alwaysRender=true. Eg. "Vault default" |
 
 **Example**
 

ui/lib/core/stories/info-table-row.stories.js

@@ -11,13 +11,19 @@ storiesOf('InfoTable/InfoTableRow', module)
     () => ({
       template: hbs`
       <h5 class="title is-5">Info Table Row</h5>
-      <InfoTableRow @value={{value}} @label={{label}} @helperText={{helperText}} @alwaysRender={{alwaysRender}} />
+      <InfoTableRow 
+        @value={{value}} 
+        @label={{label}} 
+        @helperText={{helperText}} 
+        @alwaysRender={{alwaysRender}} 
+        @tooltipText={{tooltipText}} />
     `,
       context: {
         label: text('Label', 'TTL'),
-        value: text('Value', '30m'),
-        helperText: text('helperText', 'A short description'),
+        value: text('Value', '30m (hover to see the tooltip!)'),
+        helperText: text('helperText', 'This is helperText - for a short description'),
         alwaysRender: boolean('Always render?', false),
+        tooltipText: text('tooltipText', 'This is tooltipText'),
       },
     }),
     { notes }
@@ -27,12 +33,16 @@ storiesOf('InfoTable/InfoTableRow', module)
     () => ({
       template: hbs`
       <h5 class="title is-5">Info Table Row</h5>
-      <InfoTableRow @value={{value}} @label={{label}} @helperText={{helperText}} @alwaysRender={{alwaysRender}} />
+      <InfoTableRow 
+        @value={{value}} 
+        @label={{label}} 
+        @helperText={{helperText}} 
+        @alwaysRender={{alwaysRender}} />
     `,
       context: {
         label: 'Local mount?',
         value: boolean('Value', true),
-        helperText: text('helperText', 'A short description'),
+        helperText: text('helperText', 'This is helperText - for a short description'),
         alwaysRender: boolean('Always render?', true),
       },
     }),

ui/tests/integration/components/info-table-row-test.js

@@ -2,12 +2,13 @@ import { module, test } from 'qunit';
 import { resolve } from 'rsvp';
 import Service from '@ember/service';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, settled, triggerEvent } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-const VALUE = 'testing';
-const LABEL = 'item';
+const VALUE = 'test value';
+const LABEL = 'test label';
 const TYPE = 'array';
+const DEFAULT = 'some default value';
 
 const routerService = Service.extend({
   transitionTo() {
@@ -22,13 +23,14 @@ const routerService = Service.extend({
   },
 });
 
-module('Integration | Component | InfoTableItem', function(hooks) {
+module('Integration | Component | InfoTableRow', function(hooks) {
   setupRenderingTest(hooks);
 
   hooks.beforeEach(function() {
     this.set('value', VALUE);
     this.set('label', LABEL);
     this.set('type', TYPE);
+    this.set('default', DEFAULT);
     this.owner.register('service:router', routerService);
     this.router = this.owner.lookup('service:router');
   });
@@ -38,19 +40,35 @@ module('Integration | Component | InfoTableItem', function(hooks) {
   });
 
   test('it renders', async function(assert) {
-    this.set('alwaysRender', true);
-
     await render(hbs`<InfoTableRow
         @value={{value}}
         @label={{label}}
+        @defaultShown={{default}}
       />`);
 
     assert.dom('[data-test-component="info-table-row"]').exists();
     let string = document.querySelector('code').textContent;
     assert.equal(string, VALUE, 'renders value as passed through');
 
     this.set('value', '');
-    assert.dom('[data-test-label-div]').doesNotExist('does not render if no value and alwaysRender is false');
+    assert
+      .dom('[data-test-label-div]')
+      .doesNotExist('does not render if no value and alwaysRender is false (even if default exists)');
+  });
+
+  test('it renders a tooltip', async function(assert) {
+    this.set('tooltipText', 'Tooltip text!');
+
+    await render(hbs`<InfoTableRow
+        @value={{value}}
+        @label={{label}}
+        @tooltipText={{tooltipText}}
+      />`);
+
+    await triggerEvent('[data-test-value-div="test label"] .ember-basic-dropdown-trigger', 'mouseenter');
+    await settled();
+    let tooltip = document.querySelector('div.box').textContent.trim();
+    assert.equal(tooltip, 'Tooltip text!', 'renders tooltip text');
   });
 
   test('it renders a string with no link if isLink is true and the item type is not an array.', async function(assert) {
@@ -76,27 +94,38 @@ module('Integration | Component | InfoTableItem', function(hooks) {
     assert.dom('[data-test-item="array"]').hasText('valueArray', 'Confirm link with item value exist');
   });
 
-  test('it renders a dash (-) if a label and/or value do not exist', async function(assert) {
+  test('it renders as expected if a label and/or value do not exist', async function(assert) {
     this.set('value', VALUE);
     this.set('label', '');
+    this.set('default', '');
 
     await render(hbs`<InfoTableRow
       @value={{value}}
       @label={{label}}
       @alwaysRender={{true}}
+      @defaultShown={{default}}
     />`);
-    assert.dom('[data-test-label-div]').exists('renders label div');
-    assert.dom('[data-test-value-div]').exists('renders value div');
+
     assert.dom('div.column span').hasClass('hs-icon-s', 'Renders a dash (-) for the label');
 
     this.set('value', '');
     this.set('label', LABEL);
-    assert.dom('div.column.is-flex span').hasClass('hs-icon-s', 'Renders a dash (-) for the value');
+    assert.dom('div.column.is-flex span').hasClass('hs-icon-s', 'Renders a dash (-) for empty string value');
+
+    this.set('value', null);
+    assert.dom('div.column.is-flex span').hasClass('hs-icon-s', 'Renders a dash (-) for null value');
+
+    this.set('value', undefined);
+    assert.dom('div.column.is-flex span').hasClass('hs-icon-s', 'Renders a dash (-) for undefined value');
+
+    this.set('default', DEFAULT);
+    assert.dom('[data-test-value-div]').hasText(DEFAULT, 'Renders default text if value is empty');
 
     this.set('value', '');
     this.set('label', '');
+    this.set('default', '');
     let dashCount = document.querySelectorAll('.hs-icon-s').length;
-    assert.equal(dashCount, 2, 'Renders dash (-) when both label and value do not exist');
+    assert.equal(dashCount, 2, 'Renders dash (-) when both label and value do not exist (and no defaults)');
   });
 
   test('block content overrides any passed in value content', async function(assert) {