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 });