import ActionCable from '@rails/actioncable';
import { shallowMount } from '@vue/test-utils';
import query from '~/issuable_sidebar/queries/issue_sidebar.query.graphql';
import AssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
import SidebarMediator from '~/sidebar/sidebar_mediator';
import Mock from './mock_data';

jest.mock('@rails/actioncable', () => {
  const mockConsumer = {
    subscriptions: { create: jest.fn().mockReturnValue({ unsubscribe: jest.fn() }) },
  };
  return {
    createConsumer: jest.fn().mockReturnValue(mockConsumer),
  };
});

describe('Assignees Realtime', () => {
  let wrapper;
  let mediator;

  const createComponent = () => {
    wrapper = shallowMount(AssigneesRealtime, {
      propsData: {
        issuableIid: '1',
        mediator,
        projectPath: 'path/to/project',
      },
      mocks: {
        $apollo: {
          query,
          queries: {
            project: {
              refetch: jest.fn(),
            },
          },
        },
      },
    });
  };

  beforeEach(() => {
    mediator = new SidebarMediator(Mock.mediator);
  });

  afterEach(() => {
    wrapper.destroy();
    wrapper = null;
    SidebarMediator.singleton = null;
  });

  describe('when handleFetchResult is called from smart query', () => {
    it('sets assignees to the store', () => {
      const data = {
        project: {
          issue: {
            assignees: {
              nodes: [{ id: 'gid://gitlab/Environments/123', avatarUrl: 'url' }],
            },
          },
        },
      };
      const expected = [{ id: 123, avatar_url: 'url', avatarUrl: 'url' }];
      createComponent();

      wrapper.vm.handleFetchResult({ data });

      expect(mediator.store.assignees).toEqual(expected);
    });
  });

  describe('when mounted', () => {
    it('calls create subscription', () => {
      const cable = ActionCable.createConsumer();

      createComponent();

      return wrapper.vm.$nextTick().then(() => {
        expect(cable.subscriptions.create).toHaveBeenCalledTimes(1);
        expect(cable.subscriptions.create).toHaveBeenCalledWith(
          {
            channel: 'IssuesChannel',
            iid: wrapper.props('issuableIid'),
            project_path: wrapper.props('projectPath'),
          },
          { received: wrapper.vm.received },
        );
      });
    });
  });

  describe('when subscription is recieved', () => {
    it('refetches the GraphQL project query', () => {
      createComponent();

      wrapper.vm.received({ event: 'updated' });

      return wrapper.vm.$nextTick().then(() => {
        expect(wrapper.vm.$apollo.queries.project.refetch).toHaveBeenCalledTimes(1);
      });
    });
  });
});