github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/integration/components/job-page/parts/children-test.js (about) 1 import { assign } from '@ember/polyfills'; 2 import hbs from 'htmlbars-inline-precompile'; 3 import { findAll, find, click, render } from '@ember/test-helpers'; 4 import sinon from 'sinon'; 5 import { module, test } from 'qunit'; 6 import { setupRenderingTest } from 'ember-qunit'; 7 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage'; 8 import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; 9 10 module('Integration | Component | job-page/parts/children', function(hooks) { 11 setupRenderingTest(hooks); 12 13 hooks.beforeEach(function() { 14 window.localStorage.clear(); 15 this.store = this.owner.lookup('service:store'); 16 this.server = startMirage(); 17 this.server.create('namespace'); 18 }); 19 20 hooks.afterEach(function() { 21 this.server.shutdown(); 22 window.localStorage.clear(); 23 }); 24 25 const props = (job, options = {}) => 26 assign( 27 { 28 job, 29 sortProperty: 'name', 30 sortDescending: true, 31 currentPage: 1, 32 gotoJob: () => {}, 33 }, 34 options 35 ); 36 37 test('lists each child', async function(assert) { 38 this.server.create('job', 'periodic', { 39 id: 'parent', 40 childrenCount: 3, 41 createAllocations: false, 42 }); 43 44 await this.store.findAll('job'); 45 46 const parent = this.store.peekAll('job').findBy('plainId', 'parent'); 47 48 this.setProperties(props(parent)); 49 50 await render(hbs` 51 <JobPage::Parts::Children 52 @job={{job}} 53 @sortProperty={{sortProperty}} 54 @sortDescending={{sortDescending}} 55 @currentPage={{currentPage}} 56 @gotoJob={{gotoJob}} /> 57 `); 58 59 assert.equal( 60 findAll('[data-test-job-name]').length, 61 parent.get('children.length'), 62 'A row for each child' 63 ); 64 }); 65 66 test('eventually paginates', async function(assert) { 67 const pageSize = 10; 68 window.localStorage.nomadPageSize = pageSize; 69 70 this.server.create('job', 'periodic', { 71 id: 'parent', 72 childrenCount: 11, 73 createAllocations: false, 74 }); 75 76 await this.store.findAll('job'); 77 78 const parent = this.store.peekAll('job').findBy('plainId', 'parent'); 79 80 this.setProperties(props(parent)); 81 82 await render(hbs` 83 <JobPage::Parts::Children 84 @job={{job}} 85 @sortProperty={{sortProperty}} 86 @sortDescending={{sortDescending}} 87 @currentPage={{currentPage}} 88 @gotoJob={{gotoJob}} /> 89 `); 90 91 const childrenCount = parent.get('children.length'); 92 assert.ok(childrenCount > pageSize, 'Parent has more children than one page size'); 93 assert.equal(findAll('[data-test-job-name]').length, pageSize, 'Table length maxes out at 10'); 94 assert.ok(find('.pagination-next'), 'Next button is rendered'); 95 96 assert.ok( 97 new RegExp(`1.10.+?${childrenCount}`).test(find('.pagination-numbers').textContent.trim()) 98 ); 99 100 await componentA11yAudit(this.element, assert); 101 }); 102 103 test('is sorted based on the sortProperty and sortDescending properties', async function(assert) { 104 this.server.create('job', 'periodic', { 105 id: 'parent', 106 childrenCount: 3, 107 createAllocations: false, 108 }); 109 110 await this.store.findAll('job'); 111 112 const parent = this.store.peekAll('job').findBy('plainId', 'parent'); 113 114 this.setProperties(props(parent)); 115 116 await render(hbs` 117 <JobPage::Parts::Children 118 @job={{job}} 119 @sortProperty={{sortProperty}} 120 @sortDescending={{sortDescending}} 121 @currentPage={{currentPage}} 122 @gotoJob={{gotoJob}} /> 123 `); 124 125 const sortedChildren = parent.get('children').sortBy('name'); 126 const childRows = findAll('[data-test-job-name]'); 127 128 sortedChildren.reverse().forEach((child, index) => { 129 assert.equal( 130 childRows[index].textContent.trim(), 131 child.get('name'), 132 `Child ${index} is ${child.get('name')}` 133 ); 134 }); 135 136 await this.set('sortDescending', false); 137 138 sortedChildren.forEach((child, index) => { 139 assert.equal( 140 childRows[index].textContent.trim(), 141 child.get('name'), 142 `Child ${index} is ${child.get('name')}` 143 ); 144 }); 145 }); 146 147 test('gotoJob is called when a job row is clicked', async function(assert) { 148 const gotoJobSpy = sinon.spy(); 149 150 this.server.create('job', 'periodic', { 151 id: 'parent', 152 childrenCount: 1, 153 createAllocations: false, 154 }); 155 156 await this.store.findAll('job'); 157 158 const parent = this.store.peekAll('job').findBy('plainId', 'parent'); 159 160 this.setProperties( 161 props(parent, { 162 gotoJob: gotoJobSpy, 163 }) 164 ); 165 166 await render(hbs` 167 <JobPage::Parts::Children 168 @job={{job}} 169 @sortProperty={{sortProperty}} 170 @sortDescending={{sortDescending}} 171 @currentPage={{currentPage}} 172 @gotoJob={{gotoJob}} /> 173 `); 174 175 await click('tr.job-row'); 176 177 assert.ok( 178 gotoJobSpy.withArgs(parent.get('children.firstObject')).calledOnce, 179 'Clicking the job row calls the gotoJob action' 180 ); 181 }); 182 });