github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/integration/components/list-pagination-test.js (about)

     1  import { findAll, find, render } from '@ember/test-helpers';
     2  import { module, skip, test } from 'qunit';
     3  import { setupRenderingTest } from 'ember-qunit';
     4  import hbs from 'htmlbars-inline-precompile';
     5  import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
     6  
     7  module('Integration | Component | list pagination', function(hooks) {
     8    setupRenderingTest(hooks);
     9  
    10    const defaults = {
    11      source: [],
    12      size: 25,
    13      page: 1,
    14      spread: 2,
    15    };
    16  
    17    const list100 = Array(100)
    18      .fill(null)
    19      .map((_, i) => i);
    20  
    21    test('the source property', async function(assert) {
    22      this.set('source', list100);
    23      await render(hbs`
    24        <ListPagination @source={{source}} as |p|>
    25          <span class="page-info">{{p.currentPage}} of {{p.totalPages}}</span>
    26          <p.first><span class="first">first</span></p.first>
    27          <p.prev><span class="prev">prev</span></p.prev>
    28          {{#each p.pageLinks as |link|}}
    29            <span class="link page-{{link.pageNumber}}">{{link.pageNumber}}</span>
    30          {{/each}}
    31          <p.next><span class="next">next</span></p.next>
    32          <p.last><span class="last">last</span></p.last>
    33  
    34          {{#each p.list as |item|}}
    35            <div class="item">{{item}}</div>
    36          {{/each}}
    37        </ListPagination>
    38      `);
    39  
    40      assert.ok(!findAll('.first').length, 'On the first page, there is no first link');
    41      assert.ok(!findAll('.prev').length, 'On the first page, there is no prev link');
    42      await componentA11yAudit(this.element, assert);
    43  
    44      assert.equal(
    45        findAll('.link').length,
    46        defaults.spread + 1,
    47        'Pages links spread to the right by the spread amount'
    48      );
    49  
    50      for (var pageNumber = 1; pageNumber <= defaults.spread + 1; pageNumber++) {
    51        assert.ok(findAll(`.link.page-${pageNumber}`).length, `Page link includes ${pageNumber}`);
    52      }
    53  
    54      assert.ok(findAll('.next').length, 'While not on the last page, there is a next link');
    55      assert.ok(findAll('.last').length, 'While not on the last page, there is a last link');
    56      await componentA11yAudit(this.element, assert);
    57  
    58      assert.ok(
    59        findAll('.item').length,
    60        defaults.size,
    61        `Only ${defaults.size} (the default) number of items are rendered`
    62      );
    63  
    64      for (var item = 0; item < defaults.size; item++) {
    65        assert.equal(
    66          findAll('.item')[item].textContent,
    67          item,
    68          'Rendered items are in the current page'
    69        );
    70      }
    71    });
    72  
    73    test('the size property', async function(assert) {
    74      this.setProperties({
    75        size: 5,
    76        source: list100,
    77      });
    78      await render(hbs`
    79        <ListPagination @source={{source}} @size={{size}} as |p|>
    80          <span class="page-info">{{p.currentPage}} of {{p.totalPages}}</span>
    81        </ListPagination>
    82      `);
    83  
    84      const totalPages = Math.ceil(this.source.length / this.size);
    85      assert.equal(find('.page-info').textContent, `1 of ${totalPages}`, `${totalPages} total pages`);
    86    });
    87  
    88    test('the spread property', async function(assert) {
    89      this.setProperties({
    90        source: list100,
    91        spread: 1,
    92        size: 10,
    93        currentPage: 5,
    94      });
    95  
    96      await render(hbs`
    97        <ListPagination @source={{source}} @spread={{spread}} @size={{size}} @page={{currentPage}} as |p|>
    98          {{#each p.pageLinks as |link|}}
    99            <span class="link page-{{link.pageNumber}}">{{link.pageNumber}}</span>
   100          {{/each}}
   101        </ListPagination>
   102      `);
   103  
   104      testSpread.call(this, assert);
   105      this.set('spread', 4);
   106      testSpread.call(this, assert);
   107    });
   108  
   109    test('page property', async function(assert) {
   110      this.setProperties({
   111        source: list100,
   112        size: 5,
   113        currentPage: 5,
   114      });
   115  
   116      await render(hbs`
   117        <ListPagination @source={{source}} @size={{size}} @page={{currentPage}} as |p|>
   118          {{#each p.list as |item|}}
   119            <div class="item">{{item}}</div>
   120          {{/each}}
   121        </ListPagination>
   122      `);
   123  
   124      testItems.call(this, assert);
   125      this.set('currentPage', 2);
   126      testItems.call(this, assert);
   127    });
   128  
   129    // Ember doesn't support query params (or controllers or routes) in integration tests,
   130    // so links can only be tested in acceptance tests.
   131    // Leaving this test here for posterity.
   132    skip('pagination links link with query params', function() {});
   133  
   134    test('there are no pagination links when source is less than page size', async function(assert) {
   135      this.set('source', list100.slice(0, 10));
   136      await render(hbs`
   137        <ListPagination @source={{source}} as |p|>
   138          <span class="page-info">{{p.currentPage}} of {{p.totalPages}}</span>
   139          <p.first><span class="first">first</span></p.first>
   140          <p.prev><span class="prev">prev</span></p.prev>
   141          {{#each p.pageLinks as |link|}}
   142            <span class="link page-{{link.pageNumber}}">{{link.pageNumber}}</span>
   143          {{/each}}
   144          <p.next><span class="next">next</span></p.next>
   145          <p.last><span class="last">last</span></p.last>
   146  
   147          {{#each p.list as |item|}}
   148            <div class="item">{{item}}</div>
   149          {{/each}}
   150        </ListPagination>
   151      `);
   152  
   153      assert.ok(!findAll('.first').length, 'No first link');
   154      assert.ok(!findAll('.prev').length, 'No prev link');
   155      assert.ok(!findAll('.next').length, 'No next link');
   156      assert.ok(!findAll('.last').length, 'No last link');
   157  
   158      assert.equal(find('.page-info').textContent, '1 of 1', 'Only one page');
   159      assert.equal(
   160        findAll('.item').length,
   161        this.get('source.length'),
   162        'Number of items equals length of source'
   163      );
   164    });
   165  
   166    // when there is less pages than the total spread amount
   167    test('when there is less pages than the total spread amount', async function(assert) {
   168      this.setProperties({
   169        source: list100,
   170        spread: 4,
   171        size: 20,
   172        page: 3,
   173      });
   174  
   175      const totalPages = Math.ceil(this.get('source.length') / this.size);
   176  
   177      await render(hbs`
   178        <ListPagination @source={{source}} @page={{page}} @spread={{spread}} @size={{size}} as |p|>
   179          <span class="page-info">{{p.currentPage}} of {{p.totalPages}}</span>
   180          <p.first><span class="first">first</span></p.first>
   181          <p.prev><span class="prev">prev</span></p.prev>
   182          {{#each p.pageLinks as |link|}}
   183            <span class="link page-{{link.pageNumber}}">{{link.pageNumber}}</span>
   184          {{/each}}
   185          <p.next><span class="next">next</span></p.next>
   186          <p.last><span class="last">last</span></p.last>
   187        </ListPagination>
   188      `);
   189  
   190      assert.ok(findAll('.first').length, 'First page still exists');
   191      assert.ok(findAll('.prev').length, 'Prev page still exists');
   192      assert.ok(findAll('.next').length, 'Next page still exists');
   193      assert.ok(findAll('.last').length, 'Last page still exists');
   194      assert.equal(findAll('.link').length, totalPages, 'Every page gets a page link');
   195      for (var pageNumber = 1; pageNumber < totalPages; pageNumber++) {
   196        assert.ok(findAll(`.link.page-${pageNumber}`).length, `Page link for ${pageNumber} exists`);
   197      }
   198    });
   199  
   200    function testSpread(assert) {
   201      const { spread, currentPage } = this.getProperties('spread', 'currentPage');
   202      for (var pageNumber = currentPage - spread; pageNumber <= currentPage + spread; pageNumber++) {
   203        assert.ok(
   204          findAll(`.link.page-${pageNumber}`).length,
   205          `Page links for currentPage (${currentPage}) +/- spread of ${spread} (${pageNumber})`
   206        );
   207      }
   208    }
   209  
   210    function testItems(assert) {
   211      const { currentPage, size } = this.getProperties('currentPage', 'size');
   212      for (var item = 0; item < size; item++) {
   213        assert.equal(
   214          findAll('.item')[item].textContent,
   215          item + (currentPage - 1) * size,
   216          `Rendered items are in the current page, ${currentPage} (${item +
   217            (currentPage - 1) * size})`
   218        );
   219      }
   220    }
   221  });