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