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

     1  import { findAll, find } from 'ember-native-dom-helpers';
     2  import { module, skip, test } from 'qunit';
     3  import { setupRenderingTest } from 'ember-qunit';
     4  import { render } from '@ember/test-helpers';
     5  import hbs from 'htmlbars-inline-precompile';
     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        {{#list-pagination 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        {{/list-pagination}}
    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  
    43      assert.equal(
    44        findAll('.link').length,
    45        defaults.spread + 1,
    46        'Pages links spread to the right by the spread amount'
    47      );
    48  
    49      for (var pageNumber = 1; pageNumber <= defaults.spread + 1; pageNumber++) {
    50        assert.ok(findAll(`.link.page-${pageNumber}`).length, `Page link includes ${pageNumber}`);
    51      }
    52  
    53      assert.ok(findAll('.next').length, 'While not on the last page, there is a next link');
    54      assert.ok(findAll('.last').length, 'While not on the last page, there is a last link');
    55  
    56      assert.ok(
    57        findAll('.item').length,
    58        defaults.size,
    59        `Only ${defaults.size} (the default) number of items are rendered`
    60      );
    61  
    62      for (var item = 0; item < defaults.size; item++) {
    63        assert.equal(
    64          findAll('.item')[item].textContent,
    65          item,
    66          'Rendered items are in the current page'
    67        );
    68      }
    69    });
    70  
    71    test('the size property', async function(assert) {
    72      this.setProperties({
    73        size: 5,
    74        source: list100,
    75      });
    76      await render(hbs`
    77        {{#list-pagination source=source size=size as |p|}}
    78          <span class="page-info">{{p.currentPage}} of {{p.totalPages}}</span>
    79        {{/list-pagination}}
    80      `);
    81  
    82      const totalPages = Math.ceil(this.get('source').length / this.get('size'));
    83      assert.equal(find('.page-info').textContent, `1 of ${totalPages}`, `${totalPages} total pages`);
    84    });
    85  
    86    test('the spread property', async function(assert) {
    87      this.setProperties({
    88        source: list100,
    89        spread: 1,
    90        size: 10,
    91        currentPage: 5,
    92      });
    93  
    94      await render(hbs`
    95        {{#list-pagination source=source spread=spread size=size page=currentPage as |p|}}
    96          {{#each p.pageLinks as |link|}}
    97            <span class="link page-{{link.pageNumber}}">{{link.pageNumber}}</span>
    98          {{/each}}
    99        {{/list-pagination}}
   100      `);
   101  
   102      testSpread.call(this, assert);
   103      this.set('spread', 4);
   104      testSpread.call(this, assert);
   105    });
   106  
   107    test('page property', async function(assert) {
   108      this.setProperties({
   109        source: list100,
   110        size: 5,
   111        currentPage: 5,
   112      });
   113  
   114      await render(hbs`
   115        {{#list-pagination source=source size=size page=currentPage as |p|}}
   116          {{#each p.list as |item|}}
   117            <div class="item">{{item}}</div>
   118          {{/each}}
   119        {{/list-pagination}}
   120      `);
   121  
   122      testItems.call(this, assert);
   123      this.set('currentPage', 2);
   124      testItems.call(this, assert);
   125    });
   126  
   127    // Ember doesn't support query params (or controllers or routes) in integration tests,
   128    // so links can only be tested in acceptance tests.
   129    // Leaving this test here for posterity.
   130    skip('pagination links link with query params', function() {});
   131  
   132    test('there are no pagination links when source is less than page size', async function(assert) {
   133      this.set('source', list100.slice(0, 10));
   134      await render(hbs`
   135        {{#list-pagination source=source as |p|}}
   136          <span class="page-info">{{p.currentPage}} of {{p.totalPages}}</span>
   137          {{#p.first}}<span class="first">first</span>{{/p.first}}
   138          {{#p.prev}}<span class="prev">prev</span>{{/p.prev}}
   139          {{#each p.pageLinks as |link|}}
   140            <span class="link page-{{link.pageNumber}}">{{link.pageNumber}}</span>
   141          {{/each}}
   142          {{#p.next}}<span class="next">next</span>{{/p.next}}
   143          {{#p.last}}<span class="last">last</span>{{/p.last}}
   144  
   145          {{#each p.list as |item|}}
   146            <div class="item">{{item}}</div>
   147          {{/each}}
   148        {{/list-pagination}}
   149      `);
   150  
   151      assert.ok(!findAll('.first').length, 'No first link');
   152      assert.ok(!findAll('.prev').length, 'No prev link');
   153      assert.ok(!findAll('.next').length, 'No next link');
   154      assert.ok(!findAll('.last').length, 'No last link');
   155  
   156      assert.equal(find('.page-info').textContent, '1 of 1', 'Only one page');
   157      assert.equal(
   158        findAll('.item').length,
   159        this.get('source.length'),
   160        'Number of items equals length of source'
   161      );
   162    });
   163  
   164    // when there are no items in source
   165    test('when there are no items in source', async function(assert) {
   166      this.set('source', []);
   167      await render(hbs`
   168        {{#list-pagination source=source as |p|}}
   169          <span class="page-info">{{p.currentPage}} of {{p.totalPages}}</span>
   170          {{#p.first}}<span class="first">first</span>{{/p.first}}
   171          {{#p.prev}}<span class="prev">prev</span>{{/p.prev}}
   172          {{#each p.pageLinks as |link|}}
   173            <span class="link page-{{link.pageNumber}}">{{link.pageNumber}}</span>
   174          {{/each}}
   175          {{#p.next}}<span class="next">next</span>{{/p.next}}
   176          {{#p.last}}<span class="last">last</span>{{/p.last}}
   177  
   178          {{#each p.list as |item|}}
   179            <div class="item">{{item}}</div>
   180          {{/each}}
   181        {{else}}
   182          <div class="empty-state">Empty State</div>
   183        {{/list-pagination}}
   184      `);
   185  
   186      assert.ok(
   187        !findAll('.page-info, .first, .prev, .link, .next, .last, .item').length,
   188        'Nothing in the yield renders'
   189      );
   190      assert.ok(findAll('.empty-state').length, 'Empty state is rendered');
   191    });
   192  
   193    // when there is less pages than the total spread amount
   194    test('when there is less pages than the total spread amount', async function(assert) {
   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.get('size'));
   203  
   204      await render(hbs`
   205        {{#list-pagination 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        {{/list-pagination}}
   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(findAll('.link').length, totalPages, 'Every page gets a page link');
   222      for (var pageNumber = 1; pageNumber < totalPages; pageNumber++) {
   223        assert.ok(findAll(`.link.page-${pageNumber}`).length, `Page link for ${pageNumber} exists`);
   224      }
   225    });
   226  
   227    function testSpread(assert) {
   228      const { spread, currentPage } = this.getProperties('spread', 'currentPage');
   229      for (var pageNumber = currentPage - spread; pageNumber <= currentPage + spread; pageNumber++) {
   230        assert.ok(
   231          findAll(`.link.page-${pageNumber}`).length,
   232          `Page links for currentPage (${currentPage}) +/- spread of ${spread} (${pageNumber})`
   233        );
   234      }
   235    }
   236  
   237    function testItems(assert) {
   238      const { currentPage, size } = this.getProperties('currentPage', 'size');
   239      for (var item = 0; item < size; item++) {
   240        assert.equal(
   241          findAll('.item')[item].textContent,
   242          item + (currentPage - 1) * size,
   243          `Rendered items are in the current page, ${currentPage} (${item + (currentPage - 1) * size})`
   244        );
   245      }
   246    }
   247  });