Merge pull request #135 from 67P/feature/contributor_profiles

Contributor profiles
2019-07-12 11:42:26 +02:00
parent aa98b35796 d7294d9d7f
commit 9cf743b02a
36 changed files with 360 additions and 72 deletions
@@ -37,7 +37,7 @@
        <span class="category {{contribution.kind}}">({{contribution.kind}})</span>
        <span class="title">
          {{#if contribution.url}}
-            <a href={{contribution.url}} target="_blank" rel="noopener">{{contribution.description}}</a>
+            <a href={{contribution.url}} target="_blank" rel="noopener" title={{contribution.description}}>{{contribution.description}}</a>
          {{else}}
            {{contribution.description}}
          {{/if}}
@@ -1,20 +1,18 @@
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';

 export default Component.extend({

+  router: service(),
+
  tagName: 'table',
  classNames: 'contributor-list',
  selectedContributor: null,

  actions: {

-    toggleContributorInfo(contributor) {
-      if (contributor.showMetadata) {
-        contributor.set('showMetadata', false);
-      } else {
-        this.contributorList.setEach('showMetadata', false);
-        contributor.set('showMetadata', true);
-      }
+    openContributorDetails(contributor) {
+      this.router.transitionTo('dashboard.contributors.show', contributor);
    }

  }
@@ -1,6 +1,6 @@
 <tbody>
  {{#each contributorList as |c|}}
-    <tr role="button" class={{if (is-current-user c.contributor) "current-user"}} {{action "toggleContributorInfo" c}}>
+    <tr role="button" class={{if (is-current-user c.contributor) "current-user"}} {{action "openContributorDetails" c.contributor}}>
      <td class="person">
        {{user-avatar contributor=c.contributor}} {{c.contributor.name}}
      </td>
@@ -15,25 +15,5 @@
        <span class="symbol">₭S</span>
      </td>
    </tr>
-    <tr class="metadata {{if (is-current-user c.contributor) "current-user"}} {{if c.showMetadata "visible"}}">
-      <td colspan="2">
-        <ul>
-          <li>
-            <a href="https://rinkeby.etherscan.io/address/{{c.contributor.account}}" target="_blank" rel="noopener">Inspect Ethereum transactions</a>
-          </li>
-          {{#if c.contributor.ipfsHash}}
-            <li>
-              <a href="https://ipfs.io/ipfs/{{c.contributor.ipfsHash}}" target="_blank" rel="noopener">Inspect IPFS profile</a>
-            </li>
-          {{/if}}
-          <li>
-            {{link-to "Edit profile" "contributors.edit" c.contributor.id}}
-          </li>
-        </ul>
-        {{#if c.showMetadata}}
-          <pre>{{c.contributor.ipfsData}}</pre>
-        {{/if}}
-      </td>
-    </tr>
  {{/each}}
 </tbody>
@@ -0,0 +1,15 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  tagName: "",
+  account: null,
+
+  iconComponentName: computed('account.site', function() {
+    if (this.account.site.match(/github|gitea|wiki/)) {
+      return 'icon-account-' + this.account.site.replace(/\./g, '-');
+    } else {
+      return 'icon-web-globe';
+    }
+  })
+});
@@ -0,0 +1,4 @@
+<a href={{account.url}} target="_blank" rel="noopener" title="{{account.username}} on {{account.site}}">
+  <span class="site">{{account.site}}</span>
+  {{component iconComponentName}}
+</a>
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: ""
+});
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: ""
+});
@@ -0,0 +1,8 @@
+<svg id="svg825" class="icon-github" width="260" height="260" enable-background="new 0 0 212.4575 186.23" version="1.1" viewBox="0 0 260 260" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+  <g transform="translate(23.766 36.885)">
+    <path d="m151.79 86.234c-7.078 0.1229-14.154 0.5605-21.232 0.7069-12.318 0.248-24.64 0.5664-36.961 0.512-11.176-0.0472-22.358-0.9728-33.518-0.7052-7.3164 0.1776-14.373 2.2948-20.131 7.584-9.9472 9.1368-12.522 21-11.314 33.807 1.92 20.357 9.2716 31.449 29.115 37.064 15.793 4.4704 31.963 5.2088 48.199 4.9744 5.254 0 10.51 0.1367 15.758-0.0292 12.723-0.4064 25.264-2.2072 37.358-6.3596 10.846-3.7225 18.799-10.691 22.572-22.166 2.6736-8.1288 3.7148-16.388 2.5544-24.853-1.7772-12.959-13.275-30.86-32.4-30.535zm-81.576 59.996c-8.836 0-16-8.9551-16-20 0-11.045 7.164-20 16-20s16 8.9553 16 20c0 11.045-7.164 20-16 20zm76 0c-8.836 0-16-8.9551-16-20 0-11.045 7.164-20 16-20s16 8.9553 16 20c0 11.045-7.164 20-16 20z" fill="none"/>
+    <path class="fg" d="m200.25 59.188c-2.5076-3.4493-4.3632-6.3888-3.8748-11.44 0.6796-7.0664-0.3536-14.396-1.3204-21.518-1.2188-8.9843-3.5236-17.74-7.1776-26.23-9.0332 1.9356-17.981 3.49-25.963 8.0976-8.4648 4.8908-16.695 10.215-25.08 15.25-0.9532 0.5704-2.3124 0.8848-3.3848 0.7032-17.967-3.1368-35.92-3.0196-53.898-0.086-1.3632 0.2244-3.0724-0.2345-4.2948-0.9608-4.4436-2.6604-8.6564-5.7344-13.123-8.3516-11.656-6.844-23.66-12.822-37.494-14.59-0.3928 0.8597-0.7188 1.4785-0.9612 2.1253-4.164 11.22-6.6424 22.844-7.4276 34.82-0.2872 4.3516-0.6092 8.8048 0 13.072 0.3456 2.4296-4e-3 3.8788-1.3924 5.6132-4.8516 6.0488-8.6368 12.717-11.102 20.219-4.6972 14.295-4.4004 28.861-2.2756 43.475 1.7268 11.974 4.7344 23.537 11.324 33.873 13.186 20.682 32.892 29.774 55.572 31.705 19.308 1.6464 38.8 1.1992 58.213 1.2364 13.855 0.0251 27.57-1.4924 40.715-6.6389 20.375-7.9727 33.859-22.604 40.275-44.166 3.7344-12.545 5.2324-25.396 4.8144-38.498-0.4412-13.81-4.0504-26.566-12.144-37.711zm-18.609 82.435c-3.7736 11.475-11.727 18.444-22.572 22.166-12.094 4.1524-24.635 5.9532-37.358 6.3596-5.248 0.1659-10.504 0.0292-15.758 0.0292-16.236 0.2344-32.406-0.504-48.199-4.9744-19.844-5.6152-27.195-16.707-29.115-37.064-1.2072-12.807 1.3672-24.67 11.314-33.807 5.7576-5.2892 12.814-7.4064 20.131-7.584 11.16-0.2676 22.342 0.658 33.518 0.7052 12.32 0.0544 24.642-0.264 36.961-0.512 7.0784-0.1464 14.154-0.584 21.232-0.7069 19.125-0.3243 30.623 17.576 32.4 30.535 1.1604 8.4647 0.1192 16.724-2.5544 24.853z"/>
+    <ellipse class="fg" cx="70.214" cy="126.23" rx="16" ry="20"/>
+    <ellipse class="fg" cx="146.21" cy="126.23" rx="16" ry="20"/>
+  </g>
+</svg>
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: ""
+});
@@ -0,0 +1,8 @@
+<svg class="icon-wiki" width="120" height="120" version="1.1" viewBox="0 0 120 120" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+  <g transform="translate(18.1,3)">
+    <polygon class="fg" transform="translate(-6.2,9)" points="6.2 5 45.7 20.5 45.7 91 6.2 75.5"/>
+    <polygon class="fg" transform="translate(-6.2,9)" points="90 5 50.5 20.5 50.5 91 90 75.5"/>
+    <polygon class="fg" transform="translate(-6.2,9)" points="87 88 87 81.8 60.4 91"/>
+    <polygon class="fg" transform="translate(-6.2,9)" points="9.2 88 9.2 81.8 34.9 91"/>
+  </g>
+</svg>
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: ""
+});
@@ -0,0 +1,3 @@
+<svg class="icon-web-globe" width="60" height="60" enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 60 60" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+  <path class="fg" d="m48.1 14.3c-0.4-0.5-0.9-1-1.4-1.5-4.3-4.2-10.2-6.8-16.7-6.8s-12.4 2.6-16.7 6.8c-0.5 0.5-1 1-1.4 1.5-3.7 4.2-5.9 9.7-5.9 15.7s2.2 11.5 5.8 15.7c0.4 0.5 0.9 1 1.4 1.5 4.3 4.2 10.3 6.8 16.8 6.8s12.5-2.6 16.8-6.9c0.5-0.5 0.9-0.9 1.4-1.5 3.6-4.1 5.8-9.6 5.8-15.6s-2.2-11.5-5.9-15.7zm3.9 14.7h-8.1c-0.1-3-1-7.3-2.4-10.5 1.8-0.8 3.5-1.8 5.1-3 3.1 3.6 5.1 8.5 5.4 13.5zm-21-20.1c3 2.3 5.8 5.2 7.6 8.5-2.4 0.9-4.6 1.3-7.6 1.4zm-2 9.9c-3-0.1-5.2-0.6-7.6-1.4 1.8-3.3 4.6-6.3 7.6-8.5zm0 2v8.2h-10.8c0.1-3 0.9-6.8 2.3-9.8 2.7 1 5.5 1.5 8.5 1.6zm0 10.2v8c-3 0.1-5.9 0.7-8.6 1.7-1.4-3-2.1-5.7-2.3-9.7zm0 10v10.1c-3-2.3-5.8-5.3-7.7-8.6 2.4-0.9 4.7-1.4 7.7-1.5zm2 0c3 0.1 5.3 0.6 7.7 1.5-1.9 3.4-4.7 6.3-7.7 8.6zm0-2v-8h10.8c-0.1 4-0.9 6.7-2.3 9.7-2.6-1-5.5-1.5-8.5-1.7zm0-10v-8.2c3-0.1 5.8-0.7 8.5-1.6 1.4 3 2.2 6.8 2.3 9.8zm9.5-12.3c-1.7-3.2-4.1-6-6.9-8.3 4.4 0.6 8.4 2.7 11.5 5.6-1.4 1.1-3 1.9-4.6 2.7zm-14.1-8.4c-2.9 2.3-5.2 5.2-6.9 8.3-1.6-0.7-3.2-1.6-4.6-2.6 3.1-2.9 7.1-5 11.5-5.7zm-12.9 7.2c1.6 1.2 3.3 2.2 5.1 3-1.5 3.3-2.3 7.5-2.4 10.5h-8.2c0.3-5 2.3-9.9 5.5-13.5zm-5.5 15.5h8.1c0.1 4 1 7.2 2.4 10.5-1.8 0.8-3.5 1.8-5.1 3-3.2-3.7-5.1-8.5-5.4-13.5zm11.4 12.2c1.7 3.2 4.1 6.1 7 8.4-4.5-0.7-8.5-2.8-11.6-5.8 1.5-1 3-1.8 4.6-2.6zm14.2 8.5c2.9-2.4 5.3-5.2 7-8.4 1.6 0.7 3.2 1.6 4.6 2.6-3.1 3-7.2 5-11.6 5.8zm13-7.3c-1.6-1.2-3.3-2.2-5.1-3 1.4-3.2 2.3-6.5 2.4-10.5h8.1c-0.3 5.1-2.2 9.9-5.4 13.5z"/>
+</svg>
@@ -1,11 +1,30 @@
 import Component from '@ember/component';
 import { alias } from '@ember/object/computed';
+import { computed } from '@ember/object';
+
+const SIZES = {
+  'small':  '128', // pixels
+  'medium': '256',
+  'large':  '512'
+}

 export default Component.extend({
  contributor: null,
  tagName: 'img',
  classNames: ['avatar'],
+  classNameBindings: ['size'],
  attributeBindings: ['src', 'title'],
-  src: alias('contributor.avatarURL'),
-  title: alias('contributor.name')
+  size: 'small',
+
+  src: alias('avatarURL'),
+  title: alias('contributor.name'),
+
+  avatarURL: computed('contributor.github_uid', 'size', function() {
+    const github_uid = this.contributor.github_uid;
+
+    if (github_uid) {
+      return `https://avatars2.githubusercontent.com/u/${github_uid}?v=3&s=${SIZES[this.size]}`;
+    }
+  })
+
 });
@@ -5,6 +5,9 @@ import { inject as service } from '@ember/service';

 export default Controller.extend({
  kredits: service(),
+
+  showDetailsPane: false,
+
  currentBlock: alias('kredits.currentBlock'),

  contributions: alias('kredits.contributions'),
@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+
+export default Controller.extend({
+
+  roleName: computed('model.isCore', 'totalKreditsEarned', function() {
+    if (this.model.isCore) return 'Core Contributor';
+    if (this.model.totalKreditsEarned <= 5000) return 'Newcomer';
+    return 'Contributor';
+  })
+
+});
@@ -1,4 +1,3 @@
-import { computed } from '@ember/object';
 import EmberObject from '@ember/object';
 import bignumber from 'kredits-web/utils/cps/bignumber';
 import kreditsValue from 'kredits-web/utils/cps/kredits';
@@ -20,12 +19,6 @@ export default EmberObject.extend({
  github_username: null,
  github_uid: null,
  wiki_username: null,
-  ipfsData: '',
+  ipfsData: ''

-  avatarURL: computed('github_uid', function() {
-    let github_uid = this.github_uid;
-    if (github_uid) {
-      return `https://avatars2.githubusercontent.com/u/${github_uid}?v=3&s=128`;
-    }
-  }),
 });
@@ -7,6 +7,11 @@ const Router = EmberRouter.extend({
 });

 Router.map(function() {
+  this.route('dashboard', function() {
+    this.route('contributors', function() {
+      this.route('show', { path: ':id' });
+    });
+  });
  this.route('proposals', function() {
    this.route('new');
  });
@@ -0,0 +1,24 @@
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import { alias } from '@ember/object/computed';
+
+export default Route.extend({
+
+  kredits: service(),
+  contributors: alias('kredits.contributors'),
+
+  model (params) {
+    return this.contributors.findBy('id', params.id);
+  },
+
+  activate () {
+    this.controllerFor('dashboard')
+        .set('showDetailsPane', true);
+  },
+
+  deactivate () {
+    this.controllerFor('dashboard')
+        .set('showDetailsPane', false);
+  }
+
+});
@@ -0,0 +1,9 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+
+  redirect () {
+    this.transitionTo('dashboard');
+  }
+
+});
@@ -5,7 +5,7 @@ main {
    padding: 1rem;
  }

-  &#index {
+  &#dashboard {
    width: 100%;
    display: grid;
    grid-row-gap: 2rem;
@@ -32,12 +32,19 @@ main {

@media (min-width: 550px) {
  main {
-    &#index {
+    &#dashboard {
      grid-column-gap: 4rem;
      grid-row-gap: 2rem;
      grid-template-columns: 2fr 4fr;
      grid-template-areas:
        "stats contributions";
+
+      &.with-details {
+        grid-column-gap: 3rem;
+        grid-template-columns: 2fr 4fr 2fr;
+        grid-template-areas:
+          "stats contributions details";
+      }
    }
  }
 }
@@ -97,9 +97,12 @@ section {

@import "buttons";
@import "forms";
-@import "components/topbar";
-@import "components/loading-spinner";
-@import "components/contributor-list";
-@import "components/proposal-list";
+
@import "components/contribution-list";
+@import "components/contributor-list";
+@import "components/contributor-profile";
+@import "components/external-account-link";
+@import "components/loading-spinner";
+@import "components/proposal-list";
+@import "components/topbar";
@import "components/user-avatar";
@@ -57,6 +57,9 @@ ul.contribution-list {
      margin: 0;
      font-size: inherit;
      line-height: 2rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;

      &.kredits-amount, &.voting {
        text-align: right;
@@ -0,0 +1,52 @@
+section#contributor-profile {
+  text-align: center;
+
+  header {
+    z-index: 2;
+    width: 100%;
+    text-align: center;
+
+    img {
+      margin: 0 auto;
+      border: 3px solid rgba(255,255,255,0.2);
+    }
+  }
+
+  .content {
+    z-index: 1;
+    width: 100%;
+    margin: -7.2rem 0 1.5rem;
+    padding: 6rem 1.2rem 2rem;
+
+    border-top: 1px solid rgba(255,255,255,0.2);
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    background-color: rgba(255,255,255,0.1);
+
+    h2 {
+      text-align: center;
+      margin-bottom: 0.6rem;
+    }
+
+    p.role {
+      margin-bottom: 2rem;
+    }
+
+    ul.external-accounts {
+      list-style: none;
+
+      li {
+        display: inline-block;
+
+        &+li {
+          margin-left: 0.6rem;
+        }
+      }
+    }
+  }
+
+  .actions {
+    .button {
+      margin-bottom: 0.6rem;
+    }
+  }
+}
@@ -0,0 +1,34 @@
+.external-accounts a {
+  display: inline-block;
+  width: 4rem;
+  height: 4rem;
+  padding: 0.8rem;
+  background-color: rgba(0, 0, 0, 0.3);
+  color: $body-text-color;
+  border-radius: 2rem;
+
+  span.site {
+    display: none;
+  }
+
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .fg {
+      fill: $body-text-color;
+    }
+  }
+
+  &:hover, &:active {
+    background-color: rgba(0, 0, 0, 0.5);
+
+    svg {
+      .fg {
+        fill: $primary-color;
+      }
+    }
+  }
+}
@@ -13,6 +13,11 @@
  h1 {
    display: inline-block;
    text-transform: uppercase;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
  }

  section#user-account {
@@ -4,4 +4,18 @@ img.avatar {
  vertical-align: middle;
  margin-right: 0.2rem;
  border-radius: 1rem;
+
+  &.medium {
+    margin: 0;
+    width: 10rem;
+    height: 10rem;
+    border-radius: 5rem;
+  }
+
+  &.large {
+    margin: 0;
+    width: 256px;
+    height: 256px;
+    border-radius: 128px;
+  }
 }
@@ -1,5 +1,5 @@
 <header id="topbar">
-  <h1>Kosmos Kredits</h1>
+  <h1>{{link-to "Kosmos Kredits" "dashboard"}}</h1>

  <section id="user-account">
    {{#if kredits.hasAccounts }}
@@ -1,4 +1,4 @@
-<main id="index">
+<main id="dashboard" class={{if showDetailsPane "with-details"}}>

  <div id="stats">
    <section id="people">
@@ -72,4 +72,8 @@
    </section>
  </div>

+  <div id="details">
+    {{outlet}}
+  </div>
+
 </main>
@@ -0,0 +1,36 @@
+<section id="contributor-profile">
+  <header>
+    {{user-avatar contributor=model size="medium"}}
+  </header>
+
+  <div class="content">
+    <h2>{{model.name}}</h2>
+    <p class="role">{{roleName}}</p>
+
+    <ul class="external-accounts">
+      {{#each model.accounts as |account|}}
+        <li>
+          {{external-account-link account=account}}
+        </li>
+      {{/each}}
+      {{#if model.url}}
+        <li>
+          <a href={{model.url}} target="_blank" rel="noopener" title="Website">
+            <span class="site">Web</span>
+            {{icon-web-globe}}
+          </a>
+        </li>
+      {{/if}}
+    </ul>
+  </div>
+
+  <div class="actions">
+    <p>
+      <a href="https://rinkeby.etherscan.io/address/{{model.account}}" class="button small" target="_blank" rel="noopener">Inspect Ethereum transactions</a>
+      {{#if model.ipfsHash}}
+        <a href="https://ipfs.io/ipfs/{{model.ipfsHash}}" class="button small" target="_blank" rel="noopener">Inspect IPFS profile</a>
+      {{/if}}
+      {{link-to "Edit profile" "contributors.edit" model class="button small"}}
+    </p>
+  </div>
+</section>
@@ -1,4 +1,5 @@
 import Model from 'kredits-web/models/contribution';
+import contributors from '../../tests/fixtures/contributors';

 const items = [];

@@ -14,6 +15,9 @@ const data = [
  { id: 9, contributorId: 3, confirmedAtBlock: 2000, claimed: false, vetoed: true, amount: 1500, kind: 'docs' },
 ];

-data.forEach(attrs => items.push(Model.create(attrs)));
+data.forEach(attrs => {
+  attrs.contributor = contributors.findBy('id', attrs.contributorId.toString());
+  items.push(Model.create(attrs))
+});

 export default items;
@@ -3,9 +3,9 @@ import Contributor from 'kredits-web/models/contributor';
 const contributors = [];

 const data = [
-  { id: 1, name: 'Bumi', totalKreditsEarned: 11500 },
-  { id: 2, name: 'Râu Cao', totalKreditsEarned: 3000 },
-  { id: 3, name: 'Manuel', totalKreditsEarned: 0 }
+  { id: 1, name: 'Bumi', totalKreditsEarned: 11500, github_uid: 318 },
+  { id: 2, name: 'Râu Cao', totalKreditsEarned: 3000, github_uid: 842 },
+  { id: 3, name: 'Manuel', totalKreditsEarned: 0, github_uid: 54812 }
 ];

 data.forEach(attrs => contributors.push(Contributor.create(attrs)));
@@ -9,13 +9,13 @@ module('Integration | Component | contributor list', function(hooks) {

  const toplist = [
    {
-      contributor: Contributor.create({ id: 1, name: 'Bumi' }),
+      contributor: Contributor.create({ id: 1, name: 'Bumi', github_uid: 318 }),
      amountConfirmed: 5500,
      amountUnconfirmed: 1000,
      amountTotal: 6500
    },
    {
-      contributor: Contributor.create({ id: 2, name: 'Râu Cao' }),
+      contributor: Contributor.create({ id: 2, name: 'Râu Cao', github_uid: 842 }),
      amountConfirmed: 1500,
      amountUnconfirmed: 2000,
      amountTotal: 3500
@@ -28,8 +28,8 @@ module('Integration | Component | contributor list', function(hooks) {

    assert.dom('tr:nth-child(1) td.person').hasText('Bumi');
    assert.dom('tr:nth-child(1) span.amount').hasText('6500');
-    assert.dom('tr:nth-child(3) td.person').hasText('Râu Cao');
-    assert.dom('tr:nth-child(3) span.amount').hasText('3500');
+    assert.dom('tr:nth-child(2) td.person').hasText('Râu Cao');
+    assert.dom('tr:nth-child(2) span.amount').hasText('3500');
  });

  test('it renders confirmed kredits earned', async function(assert) {
@@ -38,7 +38,7 @@ module('Integration | Component | contributor list', function(hooks) {

    assert.dom('tr:nth-child(1) td.person').hasText('Bumi');
    assert.dom('tr:nth-child(1) span.amount').hasText('5500');
-    assert.dom('tr:nth-child(3) td.person').hasText('Râu Cao');
-    assert.dom('tr:nth-child(3) span.amount').hasText('1500');
+    assert.dom('tr:nth-child(2) td.person').hasText('Râu Cao');
+    assert.dom('tr:nth-child(2) span.amount').hasText('1500');
  });
 });
@@ -2,13 +2,39 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
+import contributors from '../../../fixtures/contributors';

 module('Integration | Component | user-avatar', function(hooks) {
  setupRenderingTest(hooks);

  test('it renders', async function(assert) {
-    await render(hbs`{{user-avatar}}`);
+    this.set('bumi', contributors.findBy('id', '1'));
+    await render(hbs`{{user-avatar contributor=bumi}}`);

    assert.equal(this.element.textContent.trim(), '');
  });
+
+  test('default image source URL', async function(assert) {
+    this.set('bumi', contributors.findBy('id', '1'));
+    await render(hbs`{{user-avatar contributor=bumi}}`);
+
+    assert.equal(this.element.querySelector('img').src,
+                 `https://avatars2.githubusercontent.com/u/318?v=3&s=128`);
+  });
+
+  test('size-specific image source URLs', async function(assert) {
+    this.set('bumi', contributors.findBy('id', '1'));
+    this.set('size', 'medium');
+
+    await render(hbs`{{user-avatar contributor=bumi size=size}}`);
+
+    assert.equal(this.element.querySelector('img').src,
+                 `https://avatars2.githubusercontent.com/u/318?v=3&s=256`);
+
+    this.set('size', 'large');
+
+    assert.equal(this.element.querySelector('img').src,
+                 `https://avatars2.githubusercontent.com/u/318?v=3&s=512`);
+  });
+
 });
@@ -1,14 +1,7 @@
-import { module, test } from 'qunit';
-import { setupTest } from 'ember-qunit';
-import Contributor from 'kredits-web/models/contributor';
-
-module('Unit | Model | contributor', function(hooks) {
-  setupTest(hooks);
-
-  test('#avatarURL() returns correct URL', function(assert) {
-    let model = Contributor.create();
-    model.set('github_uid', '318');
-
-    assert.equal(model.get('avatarURL'), 'https://avatars2.githubusercontent.com/u/318?v=3&s=128');
-  });
-});
+// import { module, test } from 'qunit';
+// import { setupTest } from 'ember-qunit';
+// import Contributor from 'kredits-web/models/contributor';
+//
+// module('Unit | Model | contributor', function(hooks) {
+//   setupTest(hooks);
+// });