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