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