github.com/ferranbt/nomad@v0.9.3-0.20190607002617-85c449b7667c/ui/tests/integration/attributes-table-test.js (about)

     1  import { find, findAll } from 'ember-native-dom-helpers';
     2  import { module, test } from 'qunit';
     3  import { setupRenderingTest } from 'ember-qunit';
     4  import { render } from '@ember/test-helpers';
     5  import hbs from 'htmlbars-inline-precompile';
     6  import flat from 'flat';
     7  
     8  const { flatten } = flat;
     9  
    10  module('Integration | Component | attributes table', function(hooks) {
    11    setupRenderingTest(hooks);
    12  
    13    const commonAttributes = {
    14      key: 'value',
    15      nested: {
    16        props: 'are',
    17        supported: 'just',
    18        fine: null,
    19      },
    20      so: {
    21        are: {
    22          deeply: {
    23            nested: 'properties',
    24            like: 'these ones',
    25          },
    26        },
    27      },
    28    };
    29  
    30    test('should render a row for each key/value pair in a deep object', async function(assert) {
    31      this.set('attributes', commonAttributes);
    32      await render(hbs`{{attributes-table attributes=attributes}}`);
    33  
    34      const rowsCount = Object.keys(flatten(commonAttributes)).length;
    35      assert.equal(
    36        this.$('[data-test-attributes-section]').has('[data-test-value]').length,
    37        rowsCount,
    38        `Table has ${rowsCount} rows with values`
    39      );
    40    });
    41  
    42    test('should render the full path of key/value pair from the root of the object', async function(assert) {
    43      this.set('attributes', commonAttributes);
    44      await render(hbs`{{attributes-table attributes=attributes}}`);
    45  
    46      assert.equal(find('[data-test-key]').textContent.trim(), 'key', 'Row renders the key');
    47      assert.equal(find('[data-test-value]').textContent.trim(), 'value', 'Row renders the value');
    48  
    49      const deepRow = findAll('[data-test-attributes-section]')[8];
    50      assert.equal(
    51        deepRow.querySelector('[data-test-key]').textContent.trim(),
    52        'so.are.deeply.nested',
    53        'Complex row renders the full path to the key'
    54      );
    55      assert.equal(
    56        deepRow.querySelector('[data-test-prefix]').textContent.trim(),
    57        'so.are.deeply.',
    58        'The prefix is faded to put emphasis on the attribute'
    59      );
    60      assert.equal(deepRow.querySelector('[data-test-value]').textContent.trim(), 'properties');
    61    });
    62  
    63    test('should render a row for key/value pairs even when the value is another object', async function(assert) {
    64      this.set('attributes', commonAttributes);
    65      await render(hbs`{{attributes-table attributes=attributes}}`);
    66  
    67      const countOfParentRows = countOfParentKeys(commonAttributes);
    68      assert.equal(
    69        findAll('[data-test-heading]').length,
    70        countOfParentRows,
    71        'Each key for a nested object gets a row with no value'
    72      );
    73    });
    74  
    75    function countOfParentKeys(obj) {
    76      return Object.keys(obj).reduce((count, key) => {
    77        const value = obj[key];
    78        return isObject(value) ? count + 1 + countOfParentKeys(value) : count;
    79      }, 0);
    80    }
    81  
    82    function isObject(value) {
    83      return !Array.isArray(value) && value != null && typeof value === 'object';
    84    }
    85  });