@mekari/mekari-ui-vue/src/components/AvatarGroup/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 MAvatarGroup from './index.vue';
import { shallowMount } from '@vue/test-utils';


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

  beforeEach(() => {
    wrapper = shallowMount(MAvatarGroup);
  });

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

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

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

  describe('Stack', () => {
    it('should use avatar-stacked if displayed as a stack', async () => {
      await setPropsWrapper({ grid: false });
      expect(wrapper.classes('avatar-stacked')).toBe(true);
    });

    it('should use correct style if use a dynamic size', async () => {
      await setPropsWrapper({
        grid: false,
        avatarSize: 80,
        users: [{}, {}, {}, {}],
      });
      expect(wrapper.findComponent({ ref: 'avatar0' }).attributes('style')).toBe('box-shadow: 2px 0 0 2px #fff; margin-left: 0px; z-index: 3;');
      expect(wrapper.findComponent({ ref: 'avatar1' }).attributes('style')).toBe('box-shadow: 2px 0 0 2px #fff; margin-left: -20px; z-index: 2;');
      expect(wrapper.findComponent({ ref: 'avatar2' }).attributes('style')).toBe('box-shadow: 2px 0 0 2px #fff; margin-left: -20px; z-index: 1;');
      expect(wrapper.findComponent({ ref: 'avatarMore' }).attributes('style')).toBe('box-shadow: 2px 0 0 2px #fff; margin-left: -20px; z-index: 0;');
    });

    it('should use correct style if use a dynamic size and sparse and reversed set to true', async () => {
      await setPropsWrapper({
        grid: false,
        sparse: true,
        reversed: true,
        avatarSize: 80,
        users: [{}, {}, {}, {}],
      });
      expect(wrapper.findComponent({ ref: 'avatar0' }).attributes('style')).toBe('box-shadow: -2px 0 0 2px #fff; margin-left: 0px; z-index: 0;');
      expect(wrapper.findComponent({ ref: 'avatar1' }).attributes('style')).toBe('box-shadow: -2px 0 0 2px #fff; margin-left: -10px; z-index: 1;');
      expect(wrapper.findComponent({ ref: 'avatar2' }).attributes('style')).toBe('box-shadow: -2px 0 0 2px #fff; margin-left: -10px; z-index: 2;');
      expect(wrapper.findComponent({ ref: 'avatarMore' }).attributes('style')).toBe('box-shadow: -2px 0 0 2px #fff; margin-left: -10px; z-index: 3;');
    });

    it('should use avatar-stacked-reversed if displayed as a stack and reversed', async () => {
      await setPropsWrapper({
        grid: false,
        reversed: true,
      });
      expect(wrapper.classes('avatar-stacked-reversed')).toBe(true);
    });

    it('should not use avatar-stacked-reversed if displayed as a stack and not reversed', async () => {
      await setPropsWrapper({
        grid: false,
        reversed: false,
      });
      expect(wrapper.classes('avatar-stacked-reversed')).toBe(false);
    });

    it('should use avatar-stacked-sparse if displayed as a stack and sparsed', async () => {
      await setPropsWrapper({
        grid: false,
        sparse: true,
      });
      expect(wrapper.classes('avatar-stacked-sparse')).toBe(true);
    });

    it('should not use avatar-stacked-sparse if displayed as a stack and not sparsed', async () => {
      await setPropsWrapper({
        grid: false,
        sparse: false,
      });
      expect(wrapper.classes('avatar-stacked-sparse')).toBe(false);
    });

    it('should return 0 if no user is specified', async () => {
      await setPropsWrapper({
        size: 3,
      });
      expect(wrapper.vm.remaining).toBe(0);
    });

    it('should return 0 if the user count are equal to the size', async () => {
      await setPropsWrapper({
        users: [{}, {}, {}],
        size: 3,
      });
      expect(wrapper.vm.remaining).toBe(0);
    });

    it('should return 0 if the user count are lower than the size', async () => {
      await setPropsWrapper({
        users: [{}, {}, {}, {}, {}, {}],
        size: 6,
      });
      expect(wrapper.vm.remaining).toBe(0);
    });

    it('should return N if the user count are greater than the size', async () => {
      await setPropsWrapper({
        users: [{}, {}, {}, {}, {}, {}],
        size: 4,
      });
      // eslint-disable-next-line no-magic-numbers
      expect(wrapper.vm.remaining).toBe(2);
    });
  });

  describe('Grid', () => {
    it('should not use avatar-stacked if displayed as a grid view', async () => {
      await setPropsWrapper({ grid: true });
      expect(wrapper.classes('avatar-stacked')).toBe(false);
    });

    it('should return 0 if user specified is less than the acceptable size', async () => {
      await setPropsWrapper({
        grid: true,
        users: [{}, {}, {}, {}, {}, {}],
        size: 3,
        rowSize: 3,
      });
      expect(wrapper.vm.remaining).toBe(0);
    });

    it('should return N if user specified is less than the acceptable size', async () => {
      await setPropsWrapper({
        grid: true,
        users: [{}, {}, {}, {}, {}, {}],
        size: 1,
        rowSize: 1,
      });
      // eslint-disable-next-line no-magic-numbers
      expect(wrapper.vm.remaining).toBe(5);
    });
  });
});