github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/integration/components/image-file-test.js (about) 1 import { find, settled } from '@ember/test-helpers'; 2 import { module, 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 import sinon from 'sinon'; 7 import RSVP from 'rsvp'; 8 import { formatBytes } from 'nomad-ui/helpers/format-bytes'; 9 10 module('Integration | Component | image file', function(hooks) { 11 setupRenderingTest(hooks); 12 13 const commonTemplate = hbs` 14 <ImageFile @src={{src}} @alt={{alt}} @size={{size}} /> 15 `; 16 17 const commonProperties = { 18 src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', 19 alt: 'This is the alt text', 20 size: 123456, 21 }; 22 23 test('component displays the image', async function(assert) { 24 this.setProperties(commonProperties); 25 26 await this.render(commonTemplate); 27 28 assert.ok(find('img'), 'Image is in the DOM'); 29 assert.equal( 30 find('img').getAttribute('src'), 31 commonProperties.src, 32 `src is ${commonProperties.src}` 33 ); 34 35 await componentA11yAudit(this.element, assert); 36 }); 37 38 test('the image is wrapped in an anchor that links directly to the image', async function(assert) { 39 this.setProperties(commonProperties); 40 41 await this.render(commonTemplate); 42 43 assert.ok(find('a'), 'Anchor'); 44 assert.ok(find('a > img'), 'Image in anchor'); 45 assert.equal( 46 find('a').getAttribute('href'), 47 commonProperties.src, 48 `href is ${commonProperties.src}` 49 ); 50 assert.equal(find('a').getAttribute('target'), '_blank', 'Anchor opens to a new tab'); 51 assert.equal( 52 find('a').getAttribute('rel'), 53 'noopener noreferrer', 54 'Anchor rel correctly bars openers and referrers' 55 ); 56 }); 57 58 test('component updates image meta when the image loads', async function(assert) { 59 const { spy, wrapper, notifier } = notifyingSpy(); 60 61 this.setProperties(commonProperties); 62 this.set('spy', wrapper); 63 64 this.render(hbs` 65 <ImageFile @src={{src}} @alt={{alt}} @size={{size}} @updateImageMeta={{spy}} /> 66 `); 67 68 await notifier; 69 assert.ok(spy.calledOnce); 70 }); 71 72 test('component shows the width, height, and size of the image', async function(assert) { 73 this.setProperties(commonProperties); 74 75 await this.render(commonTemplate); 76 await settled(); 77 78 const statsEl = find('[data-test-file-stats]'); 79 assert.ok( 80 /\d+px \u00d7 \d+px/.test(statsEl.textContent), 81 'Width and height are formatted correctly' 82 ); 83 assert.ok( 84 statsEl.textContent.trim().endsWith(formatBytes([commonProperties.size]) + ')'), 85 'Human-formatted size is included' 86 ); 87 }); 88 }); 89 90 function notifyingSpy() { 91 // The notifier must resolve when the spy wrapper is called 92 let dispatch; 93 const notifier = new RSVP.Promise(resolve => { 94 dispatch = resolve; 95 }); 96 97 const spy = sinon.spy(); 98 99 // The spy wrapper must call the spy, passing all arguments through, and it must 100 // call dispatch in order to resolve the promise. 101 const wrapper = (...args) => { 102 spy(...args); 103 dispatch(); 104 }; 105 106 // All three pieces are required to wire up a component, pause test execution, and 107 // write assertions. 108 return { spy, wrapper, notifier }; 109 }