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