Avatar component

components.avatar\.js

import Ember from 'ember';
import Component from 'ember-component';
import { alias, equal } from 'ember-computed';

export default Component.extend({
  classNames: 'avatar-source',
  classNameBindings: ['mini', 'imageLoaded'],
  item: undefined,
  avatarUrl: alias('item.avatarUrl'),
  imageLoaded: false,
  mini: false,

  isAtlasAuto: equal('item.source', 'atlas-auto'),
  isAtlasArtifact: equal('item.source', 'atlas-artifact'),
  isAtlasCompile: equal('item.source', 'atlas-compiled'),
  isAtlasUser: equal('item.source', 'atlas-user'),
  isGithub: equal('item.source', 'github'),
  isGitlab: equal('item.source', 'gitlab'),
  isBitbucket: equal('item.source', 'bitbucket'),
  isTerraform: equal('item.source', 'terraform'),
  isState: equal('item.isState', true),
  isVagrant: equal('item.source', 'vagrant'),

  setupImageHandlers() {
    let image = this.$('img');
    image
      .on(
        'error',
        function() {
          image.remove();
          this.triggerAction('image-loading-error');
        }.bind(this)
      )
      .on(
        'load',
        function() {
          this.set('imageLoaded', true);
        }.bind(this)
      );
  },

  didInsertElement() {
    Ember.assert('avatar-source component requires item', this.get('item') != undefined);
    this.setupImageHandlers();
  },
});

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.avatar-source {
  float: left;
  margin-right: 20px;
  padding-top: 3px;
  position: relative;
  width: 36px;
  height: 36px;

  img {
    height: 36px;
    width: 36px;
  }

  > img {
    border-radius: 100%;
  }

  &.mini, &.mini img {
    height: 26px;
    width: 26px;

    .icon {
      &.source-icon {
        height: 12px;
        width: 12px;
        right: 0px;
        bottom: -2px;
        font-size: 15px;

        &:before {
          left: 2px;
          top: -2px;
        }
      }
    }
  }
}

.avatar-source-image-wrap {
  background-image: image-url('default_avatar.jpg');
  background-size: 100% 100%;
  border-radius: 100%;
  display: block;
  height: 36px;
  overflow: hidden;
  width: 36px;

  .image-loaded & {
    background: none;
  }
}

.mini .avatar-source-image-wrap {
  height: 26px;
  width: 26px;
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
{{yield}}
<br>
<br>

templates.components.avatar\.hbs

<span class="avatar-source-image-wrap">
  <img src="{{avatarUrl}}" role="presentation" alt="avatar">
</span>
<span class="source-icon icon
  {{ if isGithub 'icon-social-github' }}
  {{ if isGitlab 'icon-gitlab' }}
  {{ if isBitbucket 'icon-bitbucket' }}
  {{ if isTerraform 'icon-terraform' }}
  {{ if isState 'icon-terraform' }}
  {{ if isPacker 'icon-packer' }}
  {{ if isVagrant 'icon-vagrant' }}
  {{ if isAtlasAuto 'icon-clock' }}
  {{ if isAtlasUser 'icon-atlas' }}
  {{ if isAtlasCompile 'icon-atlas' }}
  {{ if isAtlasArtifact 'icon-link' }}"
></span>

tests.integration.components.avatar-test\.js

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import { setupOnerror, resetOnerror } from '@ember/test-helpers';

moduleForComponent('avatar', 'Integration | Component | avatar', {
  integration: true,
});

test('it requires an item', function(assert) {
  setupOnerror(thrownError => {
    assert.equal(thrownError.message, 'Assertion Failed: avatar-source component requires item');
  });
  
  this.render(hbs`{{avatar}}`);
  
  resetOnerror();
});

test('it renders', function(assert) {
  this.set('item', { source: 'github' });
  this.render(hbs`{{avatar item=item}}`);

  assert.ok(this.$('img').length, 'renders the image tag');
});

test('image-handling', function(assert) {
  let done = assert.async();
  this.set('item', {
    source: 'github',
    avatarUrl: 'http://example.com/nope.jpg',
  });

  // trigger 404 for the image
  this.render(hbs`{{avatar item=item action="image-loading-error"}}`);
  
  this.on('image-loading-error', () => {
    assert.equal(this.$('img').length, 0, 'removes the image on error');
    done();
  });
});

tests.test-helper\.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { assign } from '@ember/polyfills';
import { start } from 'ember-qunit';

let attributes = {
  rootElement: '#test-root',
  autoboot: false
};
attributes = assign(attributes, config.APP);

let application = Application.create(attributes);
setApplication(application);

start();

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": true
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}