text: import { GlFormGroup, GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
  import { shallowMount } from '@vue/test-utils';
  import Vue, { nextTick } from 'vue';
  import VueApollo from 'vue-apollo';
  import createMockApollo from 'helpers/mock_apollo_helper';
  import waitForPromises from 'helpers/wait_for_promises';
  import IssueTypeField, { i18n } from '~/issues/show/components/fields/type.vue';
  import { issuableTypes } from '~/issues/show/constants';
  import {
    getIssueStateQueryResponse,
    updateIssueStateQueryResponse,
  } from '../../mock_data/apollo_mock';
  
  Vue.use(VueApollo);
  
  describe('Issue type field component', () => {
    let wrapper;
    let fakeApollo;
    let mockIssueStateData;
  
    const mockResolvers = {
      Query: {
        issueState() {
          return {
            __typename: 'IssueState',
            rawData: mockIssueStateData(),
          };
        },
      },
      Mutation: {
        updateIssueState: jest.fn().mockResolvedValue(updateIssueStateQueryResponse),
      },
    };
  
    const findTypeFromGroup = () => wrapper.findComponent(GlFormGroup);
    const findTypeFromDropDown = () => wrapper.findComponent(GlDropdown);
    const findTypeFromDropDownItems = () => wrapper.findAllComponents(GlDropdownItem);
    const findTypeFromDropDownItemAt = (at) => findTypeFromDropDownItems().at(at);
    const findTypeFromDropDownItemIconAt = (at) =>
      findTypeFromDropDownItems().at(at).findComponent(GlIcon);
  
    const createComponent = ({ data } = {}, provide) => {
      fakeApollo = createMockApollo([], mockResolvers);
  
      wrapper = shallowMount(IssueTypeField, {
        apolloProvider: fakeApollo,
        data() {
          return {
            issueState: {},
            ...data,
          };
        },
        provide: {
          canCreateIncident: true,
          ...provide,
        },
      });
    };
  
    beforeEach(() => {
      mockIssueStateData = jest.fn();
      createComponent();
    });
  
    afterEach(() => {
      wrapper.destroy();
    });
  
    it.each`
      at   | text                     | icon
      ${0} | ${issuableTypes[0].text} | ${issuableTypes[0].icon}
      ${1} | ${issuableTypes[1].text} | ${issuableTypes[1].icon}
    `(`renders the issue type $text with an icon in the dropdown`, ({ at, text, icon }) => {
      expect(findTypeFromDropDownItemIconAt(at).attributes('name')).toBe(icon);
      expect(findTypeFromDropDownItemAt(at).text()).toBe(text);
    });
  
    it('renders a form group with the correct label', () => {
      expect(findTypeFromGroup().attributes('label')).toBe(i18n.label);
    });
  
    it('renders a form select with the `issue_type` value', () => {
      expect(findTypeFromDropDown().attributes('value')).toBe(issuableTypes.issue);
    });
  
    describe('with Apollo cache mock', () => {
      it('renders the selected issueType', async () => {
        mockIssueStateData.mockResolvedValue(getIssueStateQueryResponse);
        await waitForPromises();
        expect(findTypeFromDropDown().attributes('value')).toBe(issuableTypes.issue);
      });
  
      it('updates the `issue_type` in the apollo cache when the value is changed', async () => {
        findTypeFromDropDownItems().at(1).vm.$emit('click', issuableTypes.incident);
        await nextTick();
        expect(findTypeFromDropDown().attributes('value')).toBe(issuableTypes.incident);
      });
  
      describe('when user is a guest', () => {
        it('hides the incident type from the dropdown', async () => {
          createComponent({}, { canCreateIncident: false, issueType: 'issue' });
          await waitForPromises();
  
          expect(findTypeFromDropDownItemAt(0).isVisible()).toBe(true);
          expect(findTypeFromDropDownItemAt(1).isVisible()).toBe(false);
          expect(findTypeFromDropDown().attributes('value')).toBe(issuableTypes.issue);
        });
  
        it('and incident is selected, includes incident in the dropdown', async () => {
          createComponent({}, { canCreateIncident: false, issueType: 'incident' });
          await waitForPromises();
  
          expect(findTypeFromDropDownItemAt(0).isVisible()).toBe(true);
          expect(findTypeFromDropDownItemAt(1).isVisible()).toBe(true);
          expect(findTypeFromDropDown().attributes('value')).toBe(issuableTypes.incident);
        });
      });
    });
  });
  