@mekari/mekari-ui-vue/src/components/Avatar/index.spec.js

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

import MAvatar from './index.vue';
import MTooltip from '../Tooltip';
import { shallowMount } from '@vue/test-utils';

describe('Mekari UI Avatar Component', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallowMount(MAvatar, {
      stubs: {
        'm-tooltip': MTooltip,
      },
    });
  });

  afterEach(() => {
    wrapper.destroy();
  });

  const setPropsWrapper = async props => {
    wrapper.setProps({ ...props });
    await wrapper.vm.$nextTick();
  };

  it('should match snapshot', () => {
    expect(wrapper.element).toMatchSnapshot();
  });

  it('should use appropriate class name based on the selected size variant', async () => {
    await setPropsWrapper({ size: 'small' });
    expect(wrapper.findComponent({ ref: 'avatarContent' }).classes('avatar-small')).toBe(true);
  });

  it('should use appropriate class name based on the selected size variant', async () => {
    await setPropsWrapper({ size: 'medium' });
    expect(wrapper.findComponent({ ref: 'avatarContent' }).classes('avatar-medium')).toBe(true);
  });

  it('should use appropriate class name based on the selected size variant', async () => {
    await setPropsWrapper({ size: 'large' });
    expect(wrapper.findComponent({ ref: 'avatarContent' }).classes('avatar-large')).toBe(true);
  });

  it('should use appropriate class name based on the selected size variant', async () => {
    await setPropsWrapper({ size: 'xlarge' });
    expect(wrapper.findComponent({ ref: 'avatarContent' }).classes('avatar-xlarge')).toBe(true);
  });

  it('should set width and height manually when size props is number', () => {
    wrapper = shallowMount(MAvatar, {
      propsData: {
        initial: true,
        size: 80,
      },
    });
    expect(wrapper.findComponent({ ref: 'avatarContent' }).attributes().style).toBe('width: 80px; height: 80px;');
  });

  it('should display default avatar if not set as initial', async () => {
    await setPropsWrapper({
      initial: false,
      src: '',
    });
    expect(wrapper.findComponent({ ref: 'avatarContent' }).classes('avatar-default-people')).toBe(true);
  });

  it('should not display default avatar if set as initial', async () => {
    await setPropsWrapper({
      initial: true,
      src: '',
    });
    expect(wrapper.findComponent({ ref: 'avatarContent' }).classes('avatar-default-people')).toBe(false);
  });

  it('should display the full name if the filter initial is set to false', async () => {
    const name = 'John Walker Doe';
    await setPropsWrapper({
      initial: true,
      name,
      filterInitial: false,
    });
    expect(wrapper.find('div.avatar-initial').text()).toBe(name);
  });

  it('should display JD initial if name is set to John Walker Doe', async () => {
    await setPropsWrapper({
      initial: true,
      name: 'John Walker Doe',
    });
    expect(wrapper.find('div.avatar-initial').text()).toBe('JD');
  });

  it('should display JD initial if name is set to John Doe', async () => {
    await setPropsWrapper({
      initial: true,
      name: 'John Doe',
    });
    expect(wrapper.find('div.avatar-initial').text()).toBe('JD');
  });

  it('should display J initial if name is set to John', async () => {
    await setPropsWrapper({
      initial: true,
      name: 'John',
    });
    expect(wrapper.find('div.avatar-initial').text()).toBe('J');
  });

  it('should display A initial if name is not set', async () => {
    await setPropsWrapper({
      initial: true,
    });
    expect(wrapper.find('div.avatar-initial').text()).toBe('A');
  });

  it('should display nothing initial if name is set to empty', async () => {
    await setPropsWrapper({
      initial: true,
      name: '',
    });
    expect(wrapper.find('div.avatar-initial').text()).toBe('');
  });

  it('should display user\'s avatar if not set as initial and src is not empty', async () => {
    const src =
      'http://mekari-ui.sleekr.id/docs/1.0/assets/img/avatar/profile-example-xl.png';
    await setPropsWrapper({
      initial: false,
      src,
    });
    expect(wrapper.find('img.avatar-photo').attributes('src')).toBe(src);
  });
});