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  }