github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/tests/integration/components/image-file-test.js (about) 1 import { find, render } 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/utils/units'; 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 assert.expect(3); 25 26 this.setProperties(commonProperties); 27 28 await render(commonTemplate); 29 30 assert.ok(find('img'), 'Image is in the DOM'); 31 assert.equal( 32 find('img').getAttribute('src'), 33 commonProperties.src, 34 `src is ${commonProperties.src}` 35 ); 36 37 await componentA11yAudit(this.element, assert); 38 }); 39 40 test('the image is wrapped in an anchor that links directly to the image', async function (assert) { 41 this.setProperties(commonProperties); 42 43 await render(commonTemplate); 44 45 assert.ok(find('a'), 'Anchor'); 46 assert.ok(find('a > img'), 'Image in anchor'); 47 assert.equal( 48 find('a').getAttribute('href'), 49 commonProperties.src, 50 `href is ${commonProperties.src}` 51 ); 52 assert.equal( 53 find('a').getAttribute('target'), 54 '_blank', 55 'Anchor opens to a new tab' 56 ); 57 assert.equal( 58 find('a').getAttribute('rel'), 59 'noopener noreferrer', 60 'Anchor rel correctly bars openers and referrers' 61 ); 62 }); 63 64 test('component updates image meta when the image loads', async function (assert) { 65 const { spy, wrapper, notifier } = notifyingSpy(); 66 67 this.setProperties(commonProperties); 68 this.set('spy', wrapper); 69 70 render(hbs` 71 <ImageFile @src={{src}} @alt={{alt}} @size={{size}} @updateImageMeta={{spy}} /> 72 `); 73 74 await notifier; 75 assert.ok(spy.calledOnce); 76 }); 77 78 test('component shows the width, height, and size of the image', async function (assert) { 79 this.setProperties(commonProperties); 80 81 await render(commonTemplate); 82 83 const statsEl = find('[data-test-file-stats]'); 84 assert.ok( 85 /\d+px \u00d7 \d+px/.test(statsEl.textContent), 86 'Width and height are formatted correctly' 87 ); 88 assert.ok( 89 statsEl.textContent 90 .trim() 91 .endsWith(formatBytes(commonProperties.size) + ')'), 92 'Human-formatted size is included' 93 ); 94 }); 95 }); 96 97 function notifyingSpy() { 98 // The notifier must resolve when the spy wrapper is called 99 let dispatch; 100 const notifier = new RSVP.Promise((resolve) => { 101 dispatch = resolve; 102 }); 103 104 const spy = sinon.spy(); 105 106 // The spy wrapper must call the spy, passing all arguments through, and it must 107 // call dispatch in order to resolve the promise. 108 const wrapper = (...args) => { 109 spy(...args); 110 dispatch(); 111 }; 112 113 // All three pieces are required to wire up a component, pause test execution, and 114 // write assertions. 115 return { spy, wrapper, notifier }; 116 }