github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/tests/integration/components/job-page/parts/children-test.js (about)

     1  import { assign } from '@ember/polyfills';
     2  import hbs from 'htmlbars-inline-precompile';
     3  import { findAll, find, render } from '@ember/test-helpers';
     4  import { module, test } from 'qunit';
     5  import { setupRenderingTest } from 'ember-qunit';
     6  import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
     7  import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
     8  
     9  module('Integration | Component | job-page/parts/children', function (hooks) {
    10    setupRenderingTest(hooks);
    11  
    12    hooks.beforeEach(function () {
    13      window.localStorage.clear();
    14      this.store = this.owner.lookup('service:store');
    15      this.server = startMirage();
    16      this.server.create('namespace');
    17    });
    18  
    19    hooks.afterEach(function () {
    20      this.server.shutdown();
    21      window.localStorage.clear();
    22    });
    23  
    24    const props = (job, options = {}) =>
    25      assign(
    26        {
    27          job,
    28          sortProperty: 'name',
    29          sortDescending: true,
    30          currentPage: 1,
    31        },
    32        options
    33      );
    34  
    35    test('lists each child', async function (assert) {
    36      this.server.create('job', 'periodic', {
    37        id: 'parent',
    38        childrenCount: 3,
    39        createAllocations: false,
    40      });
    41  
    42      await this.store.findAll('job');
    43  
    44      const parent = this.store.peekAll('job').findBy('plainId', 'parent');
    45  
    46      this.setProperties(props(parent));
    47  
    48      await render(hbs`
    49        <JobPage::Parts::Children
    50          @job={{job}}
    51          @sortProperty={{sortProperty}}
    52          @sortDescending={{sortDescending}}
    53          @currentPage={{currentPage}}
    54          @gotoJob={{gotoJob}} />
    55      `);
    56  
    57      assert.equal(
    58        findAll('[data-test-job-name]').length,
    59        parent.get('children.length'),
    60        'A row for each child'
    61      );
    62    });
    63  
    64    test('eventually paginates', async function (assert) {
    65      assert.expect(5);
    66  
    67      const pageSize = 10;
    68      window.localStorage.nomadPageSize = pageSize;
    69  
    70      this.server.create('job', 'periodic', {
    71        id: 'parent',
    72        childrenCount: 11,
    73        createAllocations: false,
    74      });
    75  
    76      await this.store.findAll('job');
    77  
    78      const parent = this.store.peekAll('job').findBy('plainId', 'parent');
    79  
    80      this.setProperties(props(parent));
    81  
    82      await render(hbs`
    83        <JobPage::Parts::Children
    84          @job={{job}}
    85          @sortProperty={{sortProperty}}
    86          @sortDescending={{sortDescending}}
    87          @currentPage={{currentPage}}
    88        />
    89      `);
    90  
    91      const childrenCount = parent.get('children.length');
    92      assert.ok(
    93        childrenCount > pageSize,
    94        'Parent has more children than one page size'
    95      );
    96      assert.equal(
    97        findAll('[data-test-job-name]').length,
    98        pageSize,
    99        'Table length maxes out at 10'
   100      );
   101      assert.ok(find('.pagination-next'), 'Next button is rendered');
   102  
   103      assert
   104        .dom('.pagination-numbers')
   105        .includesText(
   106          '1 – 10 of 11',
   107          'Formats pagination to follow formula `startingIdx - endingIdx of totalTableCount'
   108        );
   109  
   110      await componentA11yAudit(this.element, assert);
   111    });
   112  
   113    test('is sorted based on the sortProperty and sortDescending properties', async function (assert) {
   114      assert.expect(6);
   115  
   116      this.server.create('job', 'periodic', {
   117        id: 'parent',
   118        childrenCount: 3,
   119        createAllocations: false,
   120      });
   121  
   122      await this.store.findAll('job');
   123  
   124      const parent = this.store.peekAll('job').findBy('plainId', 'parent');
   125  
   126      this.setProperties(props(parent));
   127  
   128      await render(hbs`
   129        <JobPage::Parts::Children
   130          @job={{job}}
   131          @sortProperty={{sortProperty}}
   132          @sortDescending={{sortDescending}}
   133          @currentPage={{currentPage}}
   134          @gotoJob={{gotoJob}} />
   135      `);
   136  
   137      const sortedChildren = parent.get('children').sortBy('name');
   138      const childRows = findAll('[data-test-job-name]');
   139  
   140      sortedChildren.reverse().forEach((child, index) => {
   141        assert.equal(
   142          childRows[index].textContent.trim(),
   143          child.get('name'),
   144          `Child ${index} is ${child.get('name')}`
   145        );
   146      });
   147  
   148      await this.set('sortDescending', false);
   149  
   150      sortedChildren.forEach((child, index) => {
   151        assert.equal(
   152          childRows[index].textContent.trim(),
   153          child.get('name'),
   154          `Child ${index} is ${child.get('name')}`
   155        );
   156      });
   157    });
   158  });