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  }