debian-mirror-gitlab/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js

import { shallowMount, mount } from '@vue/test-utils';
import AxiosMockAdapter from 'axios-mock-adapter';
import waitForPromises from 'helpers/wait_for_promises';
import ServiceDeskRoot from '~/projects/settings_service_desk/components/service_desk_root.vue';
import axios from '~/lib/utils/axios_utils';
import httpStatusCodes from '~/lib/utils/http_status';

describe('ServiceDeskRoot', () => {
  const endpoint = '/gitlab-org/gitlab-test/service_desk';
  const initialIncomingEmail = 'servicedeskaddress@example.com';
  let axiosMock;
  let wrapper;
  let spy;

  beforeEach(() => {
    axiosMock = new AxiosMockAdapter(axios);
  });

  afterEach(() => {
    axiosMock.restore();
    wrapper.destroy();
    if (spy) {
      spy.mockRestore();
    }
  });

  it('fetches incoming email when there is no incoming email provided', () => {
    axiosMock.onGet(endpoint).replyOnce(httpStatusCodes.OK);

    wrapper = shallowMount(ServiceDeskRoot, {
      propsData: {
        initialIsEnabled: true,
        initialIncomingEmail: '',
        endpoint,
      },
    });

    return wrapper.vm
      .$nextTick()
      .then(waitForPromises)
      .then(() => {
        expect(axiosMock.history.get).toHaveLength(1);
      });
  });

  it('does not fetch incoming email when there is an incoming email provided', () => {
    axiosMock.onGet(endpoint).replyOnce(httpStatusCodes.OK);

    wrapper = shallowMount(ServiceDeskRoot, {
      propsData: {
        initialIsEnabled: true,
        initialIncomingEmail,
        endpoint,
      },
    });

    return wrapper.vm
      .$nextTick()
      .then(waitForPromises)
      .then(() => {
        expect(axiosMock.history.get).toHaveLength(0);
      });
  });

  it('shows an error message when incoming email is not fetched correctly', () => {
    axiosMock.onGet(endpoint).networkError();

    wrapper = shallowMount(ServiceDeskRoot, {
      propsData: {
        initialIsEnabled: true,
        initialIncomingEmail: '',
        endpoint,
      },
    });

    return wrapper.vm
      .$nextTick()
      .then(waitForPromises)
      .then(() => {
        expect(wrapper.html()).toContain(
          'An error occurred while fetching the Service Desk address.',
        );
      });
  });

  it('sends a request to toggle service desk off when the toggle is clicked from the on state', () => {
    axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK);

    spy = jest.spyOn(axios, 'put');

    wrapper = mount(ServiceDeskRoot, {
      propsData: {
        initialIsEnabled: true,
        initialIncomingEmail,
        endpoint,
      },
    });

    wrapper.find('button.gl-toggle').trigger('click');

    return wrapper.vm
      .$nextTick()
      .then(waitForPromises)
      .then(() => {
        expect(spy).toHaveBeenCalledWith(endpoint, { service_desk_enabled: false });
      });
  });

  it('sends a request to toggle service desk on when the toggle is clicked from the off state', () => {
    axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK);

    spy = jest.spyOn(axios, 'put');

    wrapper = mount(ServiceDeskRoot, {
      propsData: {
        initialIsEnabled: false,
        initialIncomingEmail: '',
        endpoint,
      },
    });

    wrapper.find('button.gl-toggle').trigger('click');

    return wrapper.vm.$nextTick(() => {
      expect(spy).toHaveBeenCalledWith(endpoint, { service_desk_enabled: true });
    });
  });

  it('shows an error message when there is an issue toggling service desk on', () => {
    axiosMock.onPut(endpoint).networkError();

    wrapper = mount(ServiceDeskRoot, {
      propsData: {
        initialIsEnabled: false,
        initialIncomingEmail: '',
        endpoint,
      },
    });

    wrapper.find('button.gl-toggle').trigger('click');

    return wrapper.vm
      .$nextTick()
      .then(waitForPromises)
      .then(() => {
        expect(wrapper.html()).toContain('An error occurred while enabling Service Desk.');
      });
  });

  it('sends a request to update template when the "Save template" button is clicked', () => {
    axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK);

    spy = jest.spyOn(axios, 'put');

    wrapper = mount(ServiceDeskRoot, {
      propsData: {
        initialIsEnabled: true,
        endpoint,
        initialIncomingEmail,
        selectedTemplate: 'Bug',
        outgoingName: 'GitLab Support Bot',
        templates: ['Bug', 'Documentation'],
        projectKey: 'key',
      },
    });

    wrapper.find('button.btn-success').trigger('click');

    return wrapper.vm.$nextTick(() => {
      expect(spy).toHaveBeenCalledWith(endpoint, {
        issue_template_key: 'Bug',
        outgoing_name: 'GitLab Support Bot',
        project_key: 'key',
        service_desk_enabled: true,
      });
    });
  });

  it('saves the template when the "Save template" button is clicked', () => {
    axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK);

    wrapper = mount(ServiceDeskRoot, {
      propsData: {
        initialIsEnabled: true,
        endpoint,
        initialIncomingEmail,
        selectedTemplate: 'Bug',
        templates: ['Bug', 'Documentation'],
      },
    });

    wrapper.find('button.btn-success').trigger('click');

    return wrapper.vm
      .$nextTick()
      .then(waitForPromises)
      .then(() => {
        expect(wrapper.html()).toContain('Changes were successfully made.');
      });
  });

  it('shows an error message when there is an issue saving the template', () => {
    axiosMock.onPut(endpoint).networkError();

    wrapper = mount(ServiceDeskRoot, {
      propsData: {
        initialIsEnabled: true,
        endpoint,
        initialIncomingEmail,
        selectedTemplate: 'Bug',
        templates: ['Bug', 'Documentation'],
      },
    });

    wrapper.find('button.btn-success').trigger('click');

    return wrapper.vm
      .$nextTick()
      .then(waitForPromises)
      .then(() => {
        expect(wrapper.html()).toContain(
          'An error occurred while saving the template. Please check if the template exists.',
        );
      });
  });
});