gitlab-org--gitlab-foss/spec/frontend/boards/board_card_inner_spec.js

import { GlLabel, GlLoadingIcon, GlTooltip } from '@gitlab/ui';
import { range } from 'lodash';
import Vuex from 'vuex';
import { nextTick } from 'vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import BoardBlockedIcon from '~/boards/components/board_blocked_icon.vue';
import BoardCardInner from '~/boards/components/board_card_inner.vue';
import { issuableTypes } from '~/boards/constants';
import defaultStore from '~/boards/stores';
import { mockLabelList, mockIssue, mockIssueFullPath } from './mock_data';

jest.mock('~/lib/utils/url_utility');
jest.mock('~/boards/eventhub');

describe('Board card component', () => {
  const user = {
    id: 1,
    name: 'testing 123',
    username: 'test',
    avatarUrl: 'test_image',
  };

  const label1 = {
    id: 3,
    title: 'testing 123',
    color: '#000CFF',
    textColor: 'white',
    description: 'test',
  };

  let wrapper;
  let issue;
  let list;
  let store;

  const findBoardBlockedIcon = () => wrapper.find(BoardBlockedIcon);
  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
  const findEpicCountablesTotalTooltip = () => wrapper.findComponent(GlTooltip);
  const findEpicCountables = () => wrapper.findByTestId('epic-countables');
  const findEpicCountablesBadgeIssues = () => wrapper.findByTestId('epic-countables-counts-issues');
  const findEpicCountablesBadgeWeight = () => wrapper.findByTestId('epic-countables-weight-issues');
  const findEpicBadgeProgress = () => wrapper.findByTestId('epic-progress');
  const findEpicCountablesTotalWeight = () => wrapper.findByTestId('epic-countables-total-weight');
  const findEpicProgressTooltip = () => wrapper.findByTestId('epic-progress-tooltip-content');
  const findHiddenIssueIcon = () => wrapper.findByTestId('hidden-icon');

  const createStore = ({ isEpicBoard = false, isProjectBoard = false } = {}) => {
    store = new Vuex.Store({
      ...defaultStore,
      state: {
        ...defaultStore.state,
        issuableType: issuableTypes.issue,
        isShowingLabels: true,
      },
      getters: {
        isGroupBoard: () => true,
        isEpicBoard: () => isEpicBoard,
        isProjectBoard: () => isProjectBoard,
      },
    });
  };

  const createWrapper = (props = {}) => {
    wrapper = mountExtended(BoardCardInner, {
      store,
      propsData: {
        list,
        item: issue,
        ...props,
      },
      stubs: {
        GlLabel: true,
        GlLoadingIcon: true,
      },
      directives: {
        GlTooltip: createMockDirective(),
      },
      mocks: {
        $apollo: {
          queries: {
            blockingIssuables: { loading: false },
          },
        },
      },
      provide: {
        rootPath: '/',
        scopedLabelsAvailable: false,
      },
    });
  };

  beforeEach(() => {
    list = mockLabelList;
    issue = {
      ...mockIssue,
      labels: [list.label],
      assignees: [],
      weight: 1,
    };

    createStore();
    createWrapper({ item: issue, list });
  });

  afterEach(() => {
    wrapper.destroy();
    wrapper = null;
    store = null;
    jest.clearAllMocks();
  });

  it('renders issue title', () => {
    expect(wrapper.find('.board-card-title').text()).toContain(issue.title);
  });

  it('includes issue base in link', () => {
    expect(wrapper.find('.board-card-title a').attributes('href')).toContain('/test');
  });

  it('includes issue title on link', () => {
    expect(wrapper.find('.board-card-title a').attributes('title')).toBe(issue.title);
  });

  it('does not render confidential icon', () => {
    expect(wrapper.find('.confidential-icon').exists()).toBe(false);
  });

  it('does not render hidden issue icon', () => {
    expect(findHiddenIssueIcon().exists()).toBe(false);
  });

  it('renders issue ID with #', () => {
    expect(wrapper.find('.board-card-number').text()).toContain(`#${issue.iid}`);
  });

  it('does not render assignee', () => {
    expect(wrapper.find('.board-card-assignee .avatar').exists()).toBe(false);
  });

  it('does not render loading icon', () => {
    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
  });

  it('does not render item reference path', () => {
    createStore({ isProjectBoard: true });
    createWrapper();

    expect(wrapper.find('.board-card-number').text()).not.toContain(mockIssueFullPath);
  });

  it('renders item reference path', () => {
    expect(wrapper.find('.board-card-number').text()).toContain(mockIssueFullPath);
  });

  describe('blocked', () => {
    it('renders blocked icon if issue is blocked', async () => {
      createWrapper({
        item: {
          ...issue,
          blocked: true,
        },
      });

      expect(findBoardBlockedIcon().exists()).toBe(true);
    });

    it('does not show blocked icon if issue is not blocked', () => {
      createWrapper({
        item: {
          ...issue,
          blocked: false,
        },
      });

      expect(findBoardBlockedIcon().exists()).toBe(false);
    });
  });

  describe('confidential issue', () => {
    beforeEach(() => {
      wrapper.setProps({
        item: {
          ...wrapper.props('item'),
          confidential: true,
        },
      });
    });

    it('renders confidential icon', () => {
      expect(wrapper.find('.confidential-icon').exists()).toBe(true);
    });
  });

  describe('hidden issue', () => {
    beforeEach(() => {
      wrapper.setProps({
        item: {
          ...wrapper.props('item'),
          hidden: true,
        },
      });
    });

    it('renders hidden issue icon', () => {
      expect(findHiddenIssueIcon().exists()).toBe(true);
    });

    it('displays a tooltip which explains the meaning of the icon', () => {
      const tooltip = getBinding(findHiddenIssueIcon().element, 'gl-tooltip');

      expect(tooltip).toBeDefined();
      expect(findHiddenIssueIcon().attributes('title')).toBe(
        'This issue is hidden because its author has been banned',
      );
    });
  });

  describe('with assignee', () => {
    describe('with avatar', () => {
      beforeEach(() => {
        wrapper.setProps({
          item: {
            ...wrapper.props('item'),
            assignees: [user],
            updateData(newData) {
              Object.assign(this, newData);
            },
          },
        });
      });

      it('renders assignee', () => {
        expect(wrapper.find('.board-card-assignee .avatar').exists()).toBe(true);
      });

      it('sets title', () => {
        expect(wrapper.find('.js-assignee-tooltip').text()).toContain(`${user.name}`);
      });

      it('sets users path', () => {
        expect(wrapper.find('.board-card-assignee a').attributes('href')).toBe('/test');
      });

      it('renders avatar', () => {
        expect(wrapper.find('.board-card-assignee img').exists()).toBe(true);
      });

      it('renders the avatar using avatarUrl property', async () => {
        wrapper.props('item').updateData({
          ...wrapper.props('item'),
          assignees: [
            {
              id: '1',
              name: 'test',
              state: 'active',
              username: 'test_name',
              avatarUrl: 'test_image_from_avatar_url',
            },
          ],
        });

        await nextTick();

        expect(wrapper.find('.board-card-assignee img').attributes('src')).toBe(
          'test_image_from_avatar_url?width=24',
        );
      });
    });

    describe('with default avatar', () => {
      beforeEach(() => {
        global.gon.default_avatar_url = 'default_avatar';

        wrapper.setProps({
          item: {
            ...wrapper.props('item'),
            assignees: [
              {
                id: 1,
                name: 'testing 123',
                username: 'test',
              },
            ],
          },
        });
      });

      afterEach(() => {
        global.gon.default_avatar_url = null;
      });

      it('displays defaults avatar if users avatar is null', () => {
        expect(wrapper.find('.board-card-assignee img').exists()).toBe(true);
        expect(wrapper.find('.board-card-assignee img').attributes('src')).toBe(
          'default_avatar?width=24',
        );
      });
    });
  });

  describe('multiple assignees', () => {
    beforeEach(() => {
      wrapper.setProps({
        item: {
          ...wrapper.props('item'),
          assignees: [
            {
              id: 2,
              name: 'user2',
              username: 'user2',
              avatarUrl: 'test_image',
            },
            {
              id: 3,
              name: 'user3',
              username: 'user3',
              avatarUrl: 'test_image',
            },
            {
              id: 4,
              name: 'user4',
              username: 'user4',
              avatarUrl: 'test_image',
            },
          ],
        },
      });
    });

    it('renders all three assignees', () => {
      expect(wrapper.findAll('.board-card-assignee .avatar').length).toEqual(3);
    });

    describe('more than three assignees', () => {
      beforeEach(() => {
        const { assignees } = wrapper.props('item');
        assignees.push({
          id: 5,
          name: 'user5',
          username: 'user5',
          avatarUrl: 'test_image',
        });

        wrapper.setProps({
          item: {
            ...wrapper.props('item'),
            assignees,
          },
        });
      });

      it('renders more avatar counter', () => {
        expect(wrapper.find('.board-card-assignee .avatar-counter').text().trim()).toEqual('+2');
      });

      it('renders two assignees', () => {
        expect(wrapper.findAll('.board-card-assignee .avatar').length).toEqual(2);
      });

      it('renders 99+ avatar counter', async () => {
        const assignees = [
          ...wrapper.props('item').assignees,
          ...range(5, 103).map((i) => ({
            id: i,
            name: 'name',
            username: 'username',
            avatarUrl: 'test_image',
          })),
        ];
        wrapper.setProps({
          item: {
            ...wrapper.props('item'),
            assignees,
          },
        });

        await nextTick();

        expect(wrapper.find('.board-card-assignee .avatar-counter').text().trim()).toEqual('99+');
      });
    });
  });

  describe('labels', () => {
    beforeEach(() => {
      wrapper.setProps({ item: { ...issue, labels: [list.label, label1] } });
    });

    it('does not render list label but renders all other labels', () => {
      expect(wrapper.findAll(GlLabel).length).toBe(1);
      const label = wrapper.find(GlLabel);
      expect(label.props('title')).toEqual(label1.title);
      expect(label.props('description')).toEqual(label1.description);
      expect(label.props('backgroundColor')).toEqual(label1.color);
    });

    it('does not render label if label does not have an ID', async () => {
      wrapper.setProps({ item: { ...issue, labels: [label1, { title: 'closed' }] } });

      await nextTick();

      expect(wrapper.findAll(GlLabel).length).toBe(1);
      expect(wrapper.text()).not.toContain('closed');
    });

    describe('when label params arent set', () => {
      it('passes the right target to GlLabel', () => {
        expect(wrapper.findAll(GlLabel).at(0).props('target')).toEqual(
          '?label_name[]=testing%20123',
        );
      });
    });
  });

  describe('loading', () => {
    it('renders loading icon', async () => {
      createWrapper({
        item: {
          ...issue,
          isLoading: true,
        },
      });

      expect(findLoadingIcon().exists()).toBe(true);
    });
  });

  describe('is an epic board', () => {
    const descendantCounts = {
      closedEpics: 0,
      closedIssues: 0,
      openedEpics: 0,
      openedIssues: 0,
    };

    const descendantWeightSum = {
      closedIssues: 0,
      openedIssues: 0,
    };

    beforeEach(() => {
      createStore({ isEpicBoard: true });
    });

    it('should render if the item has issues', () => {
      createWrapper({
        item: {
          ...issue,
          descendantCounts,
          descendantWeightSum,
          hasIssues: true,
        },
      });

      expect(findEpicCountables().exists()).toBe(true);
    });

    it('should not render if the item does not have issues', () => {
      createWrapper({
        item: {
          ...issue,
          descendantCounts,
          descendantWeightSum,
          hasIssues: false,
        },
      });

      expect(findEpicCountablesBadgeIssues().exists()).toBe(false);
    });

    it('shows render item countBadge, weights, and progress correctly', () => {
      createWrapper({
        item: {
          ...issue,
          descendantCounts: {
            ...descendantCounts,
            openedIssues: 1,
          },
          descendantWeightSum: {
            closedIssues: 10,
            openedIssues: 5,
          },
          hasIssues: true,
        },
      });

      expect(findEpicCountablesBadgeIssues().text()).toBe('1');
      expect(findEpicCountablesBadgeWeight().text()).toBe('15');
      expect(findEpicBadgeProgress().text()).toBe('67%');
    });

    it('does not render progress when weight is zero', () => {
      createWrapper({
        item: {
          ...issue,
          descendantCounts: {
            ...descendantCounts,
            openedIssues: 1,
          },
          descendantWeightSum,
          hasIssues: true,
        },
      });

      expect(findEpicBadgeProgress().exists()).toBe(false);
    });

    it('renders the tooltip with the correct data', () => {
      createWrapper({
        item: {
          ...issue,
          descendantCounts,
          descendantWeightSum: {
            closedIssues: 10,
            openedIssues: 5,
          },
          hasIssues: true,
        },
      });

      const tooltip = findEpicCountablesTotalTooltip();
      expect(tooltip).toBeDefined();

      expect(findEpicCountablesTotalWeight().text()).toBe('15');
      expect(findEpicProgressTooltip().text()).toBe('10 of 15 weight completed');
    });
  });
});