github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/integration/components/flex-masonry-test.js (about) 1 import { htmlSafe } from '@ember/template'; 2 import { click, find, findAll, settled } from '@ember/test-helpers'; 3 import { module, test } from 'qunit'; 4 import { setupRenderingTest } from 'ember-qunit'; 5 import hbs from 'htmlbars-inline-precompile'; 6 import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; 7 8 // Used to prevent XSS warnings in console 9 const h = height => htmlSafe(`height:${height}px`); 10 11 module('Integration | Component | FlexMasonry', function(hooks) { 12 setupRenderingTest(hooks); 13 14 test('presents as a single div when @items is empty', async function(assert) { 15 this.setProperties({ 16 items: [], 17 }); 18 19 await this.render(hbs` 20 <FlexMasonry 21 @items={{this.items}} 22 @columns={{this.columns}}> 23 </FlexMasonry> 24 `); 25 26 const div = find('[data-test-flex-masonry]'); 27 assert.ok(div); 28 assert.equal(div.tagName.toLowerCase(), 'div'); 29 assert.equal(div.children.length, 0); 30 31 await componentA11yAudit(this.element, assert); 32 }); 33 34 test('each item in @items gets wrapped in a flex-masonry-item wrapper', async function(assert) { 35 this.setProperties({ 36 items: ['one', 'two', 'three'], 37 columns: 2, 38 }); 39 40 await this.render(hbs` 41 <FlexMasonry 42 @items={{this.items}} 43 @columns={{this.columns}} as |item|> 44 <p>{{item}}</p> 45 </FlexMasonry> 46 `); 47 48 assert.equal(findAll('[data-test-flex-masonry-item]').length, this.items.length); 49 }); 50 51 test('the @withSpacing arg adds the with-spacing class', async function(assert) { 52 await this.render(hbs` 53 <FlexMasonry 54 @items={{this.items}} 55 @columns={{this.columns}} 56 @withSpacing={{true}}> 57 </FlexMasonry> 58 `); 59 60 assert.ok(find('[data-test-flex-masonry]').classList.contains('with-spacing')); 61 }); 62 63 test('individual items along with the reflow action are yielded', async function(assert) { 64 this.setProperties({ 65 items: ['one', 'two'], 66 columns: 2, 67 height: h(50), 68 }); 69 70 await this.render(hbs` 71 <FlexMasonry 72 @items={{this.items}} 73 @columns={{this.columns}} as |item reflow|> 74 <div style={{this.height}} {{on "click" reflow}}>{{item}}</div> 75 </FlexMasonry> 76 `); 77 78 const div = find('[data-test-flex-masonry]'); 79 assert.equal(div.style.maxHeight, '51px'); 80 assert.ok(div.textContent.includes('one')); 81 assert.ok(div.textContent.includes('two')); 82 83 this.set('height', h(500)); 84 await settled(); 85 assert.equal(div.style.maxHeight, '51px'); 86 87 // The height of the div changes when reflow is called 88 await click('[data-test-flex-masonry-item]:first-child div'); 89 await settled(); 90 assert.equal(div.style.maxHeight, '501px'); 91 }); 92 93 test('items are rendered to the DOM in the order they were passed into the component', async function(assert) { 94 this.setProperties({ 95 items: [ 96 { text: 'One', height: h(20) }, 97 { text: 'Two', height: h(100) }, 98 { text: 'Three', height: h(20) }, 99 { text: 'Four', height: h(20) }, 100 ], 101 columns: 2, 102 }); 103 104 await this.render(hbs` 105 <FlexMasonry 106 @items={{this.items}} 107 @columns={{this.columns}} as |item|> 108 <div style={{item.height}}>{{item.text}}</div> 109 </FlexMasonry> 110 `); 111 112 findAll('[data-test-flex-masonry-item]').forEach((el, index) => { 113 assert.equal(el.textContent.trim(), this.items[index].text); 114 }); 115 }); 116 117 test('each item gets an order property', async function(assert) { 118 this.setProperties({ 119 items: [ 120 { text: 'One', height: h(20), expectedOrder: 0 }, 121 { text: 'Two', height: h(100), expectedOrder: 3 }, 122 { text: 'Three', height: h(20), expectedOrder: 1 }, 123 { text: 'Four', height: h(20), expectedOrder: 2 }, 124 ], 125 columns: 2, 126 }); 127 128 await this.render(hbs` 129 <FlexMasonry 130 @items={{this.items}} 131 @columns={{this.columns}} as |item|> 132 <div style={{item.height}}>{{item.text}}</div> 133 </FlexMasonry> 134 `); 135 136 findAll('[data-test-flex-masonry-item]').forEach((el, index) => { 137 assert.equal(el.style.order, this.items[index].expectedOrder); 138 }); 139 }); 140 141 test('the last item in each column gets a specific flex-basis value', async function(assert) { 142 this.setProperties({ 143 items: [ 144 { text: 'One', height: h(20) }, 145 { text: 'Two', height: h(100), flexBasis: '100px' }, 146 { text: 'Three', height: h(20) }, 147 { text: 'Four', height: h(100), flexBasis: '100px' }, 148 { text: 'Five', height: h(20), flexBasis: '80px' }, 149 { text: 'Six', height: h(20), flexBasis: '80px' }, 150 ], 151 columns: 4, 152 }); 153 154 await this.render(hbs` 155 <FlexMasonry 156 @items={{this.items}} 157 @columns={{this.columns}} as |item|> 158 <div style={{item.height}}>{{item.text}}</div> 159 </FlexMasonry> 160 `); 161 162 findAll('[data-test-flex-masonry-item]').forEach((el, index) => { 163 if (el.style.flexBasis) { 164 assert.equal(el.style.flexBasis, this.items[index].flexBasis); 165 } 166 }); 167 }); 168 169 test('when a multi-column layout becomes a single column layout, all inline-styles are reset', async function(assert) { 170 this.setProperties({ 171 items: [ 172 { text: 'One', height: h(20) }, 173 { text: 'Two', height: h(100) }, 174 { text: 'Three', height: h(20) }, 175 { text: 'Four', height: h(100) }, 176 { text: 'Five', height: h(20) }, 177 { text: 'Six', height: h(20) }, 178 ], 179 columns: 4, 180 }); 181 182 await this.render(hbs` 183 <FlexMasonry 184 @items={{this.items}} 185 @columns={{this.columns}} as |item|> 186 <div style={{item.height}}>{{item.text}}</div> 187 </FlexMasonry> 188 `); 189 190 assert.equal(find('[data-test-flex-masonry]').style.maxHeight, '101px'); 191 192 this.set('columns', 1); 193 await settled(); 194 195 findAll('[data-test-flex-masonry-item]').forEach(el => { 196 assert.equal(el.style.flexBasis, ''); 197 assert.equal(el.style.order, ''); 198 }); 199 200 assert.equal(find('[data-test-flex-masonry]').style.maxHeight, ''); 201 }); 202 });