{"size": 2396, "ext": "js", "max_stars_repo_path": "ee/spec/frontend/compliance_dashboard/components/merge_requests/approvers_spec.js", "max_stars_repo_name": "mehulagg/gitlab-codesanbox", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "ee/spec/frontend/compliance_dashboard/components/merge_requests/approvers_spec.js", "max_issues_repo_name": "mehulagg/gitlab-codesanbox", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "ee/spec/frontend/compliance_dashboard/components/merge_requests/approvers_spec.js", "max_forks_repo_name": "mehulagg/gitlab-codesanbox", "max_forks_repo_forks_event_min_datetime": "2020-11-04T05:30:08.000Z", "max_forks_repo_forks_event_max_datetime": "2020-11-04T05:30:08.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 28.8674698795, "max_line_length": 91, "alphanum_fraction": 0.632721202}
import { shallowMount } from '@vue/test-utils';
import { GlAvatarLink } from '@gitlab/ui';

import Approvers from 'ee/compliance_dashboard/components/merge_requests/approvers.vue';
import { PRESENTABLE_APPROVERS_LIMIT } from 'ee/compliance_dashboard/constants';
import { createApprovers } from '../../mock_data';

describe('MergeRequest component', () => {
  let wrapper;

  const findMessage = () => wrapper.find('[data-testid="approvers"]');
  const findCounter = () => wrapper.find('.avatar-counter');
  const findAvatarLinks = () => wrapper.findAll(GlAvatarLink);

  const createComponent = (approvers = []) => {
    return shallowMount(Approvers, {
      propsData: {
        approvers,
      },
      stubs: {
        GlAvatarLink,
      },
    });
  };

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

  describe('when there are no approvers', () => {
    beforeEach(() => {
      wrapper = createComponent();
    });

    it('displays the "no approvers" message', () => {
      expect(findMessage().text()).toEqual('no approvers');
    });
  });

  describe('when there are approvers', () => {
    beforeEach(() => {
      wrapper = createComponent(createApprovers(1));
    });

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

  describe('when the amount of approvers matches the presentable limit', () => {
    const approvers = createApprovers(PRESENTABLE_APPROVERS_LIMIT);

    beforeEach(() => {
      wrapper = createComponent(approvers);
    });

    it('does not display the additional approvers count', () => {
      expect(findCounter().exists()).toEqual(false);
    });

    it(`displays ${PRESENTABLE_APPROVERS_LIMIT} user avatar links`, () => {
      expect(findAvatarLinks().length).toEqual(PRESENTABLE_APPROVERS_LIMIT);
    });
  });

  describe('when the amount of approvers is over the presentable limit', () => {
    const additional = 1;

    beforeEach(() => {
      wrapper = createComponent(createApprovers(PRESENTABLE_APPROVERS_LIMIT + additional));
    });

    it(`displays only ${PRESENTABLE_APPROVERS_LIMIT} user avatar links`, () => {
      expect(findAvatarLinks().length).toEqual(PRESENTABLE_APPROVERS_LIMIT);
    });

    it('displays additional approvers count', () => {
      expect(findCounter().exists()).toEqual(true);
      expect(findCounter().text()).toEqual(`+ ${additional}`);
    });
  });
});
