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