update class name to BEM style

Author: Diego Jara

src/Avatar.vue

@@ -1,7 +1,7 @@
 <template>
-  <div><div class="avatar" :style="style">
+  <div class="vue-avatar--wrapper" :class="customClass" :style="style">
     <span v-if="!this.src">{{ userInitial }}</span>
-  </div></div>
+  </div>
 </template>
 
 <script>
@@ -21,6 +21,9 @@ export default {
     color: {
       type: String
     },
+    customClass: {
+      type: String
+    },
     size: {
       type: Number,
       default: 50

test/unit/specs/Avatar.spec.js

@@ -36,7 +36,7 @@ describe('Avatar.vue', function () {
 
     var initial = vm.$children[0].initial(username)
     expect(initial).to.equal('HF')
-    expect(vm.$el.querySelector('.avatar > span').textContent).to.contain(initial)
+    expect(vm.$el.querySelector('.vue-avatar--wrapper > span').textContent).to.contain(initial)
   })
 
   it('should render an image with the correct \'src\' when given', function () {
@@ -51,8 +51,8 @@ describe('Avatar.vue', function () {
     expect(initial).to.equal('HF')
 
     /* eslint-disable no-unused-expressions */
-    expect(vm.$el.querySelector('.avatar > span')).to.be.null
-    var av = vm.$el.querySelector('.avatar')
+    expect(vm.$el.querySelector('.vue-avatar--wrapper > span')).to.be.null
+    var av = vm.$el.querySelector('.vue-avatar--wrapper')
     var background = av.style.background // window.getComputedStyle(av,null).width
     expect(background).to.contain('path/to/img')
   })