spec/frontend/work_items/components/work_item_state_badge_spec.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import { GlBadge } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { STATE_OPEN, STATE_CLOSED } from '~/work_items/constants';
import WorkItemStateBadge from '~/work_items/components/work_item_state_badge.vue';

describe('WorkItemStateBadge', () => {
  let wrapper;

  const createComponent = ({ workItemState = STATE_OPEN } = {}) => {
    wrapper = shallowMount(WorkItemStateBadge, {
      propsData: {
        workItemState,
      },
    });
  };
  const findStatusBadge = () => wrapper.findComponent(GlBadge);

  it.each`
    state           | icon              | stateText   | variant
    ${STATE_OPEN}   | ${'issue-open-m'} | ${'Open'}   | ${'success'}
    ${STATE_CLOSED} | ${'issue-close'}  | ${'Closed'} | ${'info'}
  `(
    'renders icon as "$icon" and text as "$stateText" when the work item state is "$state"',
    ({ state, icon, stateText, variant }) => {
      createComponent({ workItemState: state });

      expect(findStatusBadge().props('icon')).toBe(icon);
      expect(findStatusBadge().props('variant')).toBe(variant);
      expect(findStatusBadge().text()).toBe(stateText);
    },
  );
});