github.com/hernad/nomad@v1.6.112/ui/tests/integration/components/list-pagination-test.js (about)

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