Avatar: Add avatar component (#16144)

* add avatar component * 1. add test 2. add types 3. refine doc 4. add img attr * add props in types and doc * refine how image fit its container * fix doc * refine doc * change default background color * remote style demo from doc * add theme * add demo on theme preview and change var name
2025-12-16 11:44:01 +08:00 · 2019-06-24 16:37:17 +08:00
parent c588b64fa1
commit 6f9ce3accb
18 changed files with 1005 additions and 3 deletions
--- a/test/unit/specs/avatar.spec.js
+++ b/test/unit/specs/avatar.spec.js
@@ -0,0 +1,123 @@
+import {createTest, createVue, destroyVM} from '../util';
+import Avatar from 'packages/avatar';
+
+describe('Avatar', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(Avatar);
+    expect(vm.$el).to.exist;
+  });
+
+  it('size is number', () => {
+    vm = createVue({
+      template: `
+        <el-avatar :size="50">
+        </el-avatar>
+      `
+    }, true);
+    const avatarElm = vm.$el;
+    expect(avatarElm.style.height).to.equal('50px');
+  });
+
+  it('size is string', () => {
+    vm = createVue({
+      template: `
+        <el-avatar size="small">
+          user
+        </el-avatar>
+      `
+    }, true);
+    const avatarElm = vm.$el;
+    expect(avatarElm.classList.contains('el-avatar--small')).to.be.true;
+  });
+
+  it('shape', () => {
+    vm = createVue({
+      template: `
+        <el-avatar size="small" shape="square">
+          user
+        </el-avatar>
+      `
+    }, true);
+    const avatarElm = vm.$el;
+    expect(avatarElm.classList.contains('el-avatar--square')).to.be.true;
+  });
+
+  it('icon avatar', () => {
+    vm = createVue({
+      template: `
+        <el-avatar icon="el-icon-user-solid">
+        </el-avatar>
+      `
+    }, true);
+    const avatarElm = vm.$el;
+    const iconELm = avatarElm.children[0];
+    expect(avatarElm.classList.contains('el-avatar--icon')).to.be.true;
+    expect(iconELm.classList.contains('el-icon-user-solid')).to.be.true;
+  });
+
+  it('image avatar', () => {
+    vm = createVue({
+      template: `
+        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
+      `
+    }, true);
+    const imgElm = vm.$el.children[0];
+    expect(imgElm.tagName.toUpperCase()).to.equal('IMG');
+    expect(imgElm.src).to.equal('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png');
+  });
+
+  it('image fallback', (done) => {
+    vm = createVue({
+      template: `
+        <el-avatar src="https://empty" @error="errorHandler">
+          fallback
+        </el-avatar>
+      `,
+      methods: {
+        errorHandler() {
+          return true;
+        }
+      }
+    }, true);
+    setTimeout(() => {
+      const avatarElm = vm.$el;
+      expect(avatarElm.textContent.trim()).to.equal('fallback');
+      done();
+    }, 3000);
+  });
+
+  it('image fit', (done) => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-avatar :src="url"></el-avatar>
+          <el-avatar :src="url" v-for="fit in fits" :fit="fit" :key="fit"></el-avatar>
+        </div>
+        
+      `,
+      data() {
+        return {
+          fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+          url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+        };
+      }
+    }, true);
+    setTimeout(() => {
+      const containerElm = vm.$el;
+      expect(containerElm.children[0].children[0].style.objectFit).to.equal('cover');
+      expect(containerElm.children[1].children[0].style.objectFit).to.equal('fill');
+      expect(containerElm.children[2].children[0].style.objectFit).to.equal('contain');
+      expect(containerElm.children[3].children[0].style.objectFit).to.equal('cover');
+      expect(containerElm.children[4].children[0].style.objectFit).to.equal('none');
+      expect(containerElm.children[5].children[0].style.objectFit).to.equal('scale-down');
+
+      done();
+    }, 3000);
+  });
+});
+