Added GraphQL Jest transform

4 files changed, 262 insertions, 0 deletions

diff --git a/spec/frontend/__mocks__/file_mock.js b/spec/frontend/__mocks__/file_mock.js
new file mode 100644
index 00000000000..08d725cd4e4
--- /dev/null
+++ b/spec/frontend/__mocks__/file_mock.js
@@ -0,0 +1 @@
+export default '';
diff --git a/spec/frontend/issuable_suggestions/components/app_spec.js b/spec/frontend/issuable_suggestions/components/app_spec.js
new file mode 100644
index 00000000000..7bb8e26b81a
--- /dev/null
+++ b/spec/frontend/issuable_suggestions/components/app_spec.js
@@ -0,0 +1,96 @@
+import { shallowMount } from '@vue/test-utils';
+import App from '~/issuable_suggestions/components/app.vue';
+import Suggestion from '~/issuable_suggestions/components/item.vue';
+
+describe('Issuable suggestions app component', () => {
+  let vm;
+
+  function createComponent(search = 'search') {
+    vm = shallowMount(App, {
+      propsData: {
+        search,
+        projectPath: 'project',
+      },
+    });
+  }
+
+  afterEach(() => {
+    vm.destroy();
+  });
+
+  it('does not render with empty search', () => {
+    createComponent('');
+
+    expect(vm.isVisible()).toBe(false);
+  });
+
+  describe('with data', () => {
+    let data;
+
+    beforeEach(() => {
+      data = { issues: [{ id: 1 }, { id: 2 }] };
+    });
+
+    it('renders component', () => {
+      createComponent();
+      vm.setData(data);
+
+      expect(vm.isEmpty()).toBe(false);
+    });
+
+    it('does not render with empty search', () => {
+      createComponent('');
+      vm.setData(data);
+
+      expect(vm.isVisible()).toBe(false);
+    });
+
+    it('does not render when loading', () => {
+      createComponent();
+      vm.setData({
+        ...data,
+        loading: 1,
+      });
+
+      expect(vm.isVisible()).toBe(false);
+    });
+
+    it('does not render with empty issues data', () => {
+      createComponent();
+      vm.setData({ issues: [] });
+
+      expect(vm.isVisible()).toBe(false);
+    });
+
+    it('renders list of issues', () => {
+      createComponent();
+      vm.setData(data);
+
+      expect(vm.findAll(Suggestion).length).toBe(2);
+    });
+
+    it('adds margin class to first item', () => {
+      createComponent();
+      vm.setData(data);
+
+      expect(
+        vm
+          .findAll('li')
+          .at(0)
+          .is('.append-bottom-default'),
+      ).toBe(true);
+    });
+
+    it('does not add margin class to last item', () => {
+      createComponent();
+      vm.setData(data);
+
+      expect(
+        vm
+          .findAll('li')
+          .at(1)
+          .is('.append-bottom-default'),
+      ).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/issuable_suggestions/components/item_spec.js b/spec/frontend/issuable_suggestions/components/item_spec.js
new file mode 100644
index 00000000000..7bd1fe678f4
--- /dev/null
+++ b/spec/frontend/issuable_suggestions/components/item_spec.js
@@ -0,0 +1,139 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlTooltip, GlLink } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+import Suggestion from '~/issuable_suggestions/components/item.vue';
+import mockData from '../mock_data';
+
+describe('Issuable suggestions suggestion component', () => {
+  let vm;
+
+  function createComponent(suggestion = {}) {
+    vm = shallowMount(Suggestion, {
+      propsData: {
+        suggestion: {
+          ...mockData(),
+          ...suggestion,
+        },
+      },
+    });
+  }
+
+  afterEach(() => {
+    vm.destroy();
+  });
+
+  it('renders title', () => {
+    createComponent();
+
+    expect(vm.text()).toContain('Test issue');
+  });
+
+  it('renders issue link', () => {
+    createComponent();
+
+    const link = vm.find(GlLink);
+
+    expect(link.attributes('href')).toBe(`${gl.TEST_HOST}/test/issue/1`);
+  });
+
+  it('renders IID', () => {
+    createComponent();
+
+    expect(vm.text()).toContain('#1');
+  });
+
+  describe('opened state', () => {
+    it('renders icon', () => {
+      createComponent();
+
+      const icon = vm.find(Icon);
+
+      expect(icon.props('name')).toBe('issue-open-m');
+    });
+
+    it('renders created timeago', () => {
+      createComponent({
+        closedAt: '',
+      });
+
+      const tooltip = vm.find(GlTooltip);
+
+      expect(tooltip.find('.d-block').text()).toContain('Opened');
+      expect(tooltip.text()).toContain('3 days ago');
+    });
+  });
+
+  describe('closed state', () => {
+    it('renders icon', () => {
+      createComponent({
+        state: 'closed',
+      });
+
+      const icon = vm.find(Icon);
+
+      expect(icon.props('name')).toBe('issue-close');
+    });
+
+    it('renders closed timeago', () => {
+      createComponent();
+
+      const tooltip = vm.find(GlTooltip);
+
+      expect(tooltip.find('.d-block').text()).toContain('Opened');
+      expect(tooltip.text()).toContain('1 day ago');
+    });
+  });
+
+  describe('author', () => {
+    it('renders author info', () => {
+      createComponent();
+
+      const link = vm.findAll(GlLink).at(1);
+
+      expect(link.text()).toContain('Author Name');
+      expect(link.text()).toContain('@author.username');
+    });
+
+    it('renders author image', () => {
+      createComponent();
+
+      const image = vm.find(UserAvatarImage);
+
+      expect(image.props('imgSrc')).toBe(`${gl.TEST_HOST}/avatar`);
+    });
+  });
+
+  describe('counts', () => {
+    it('renders upvotes count', () => {
+      createComponent();
+
+      const count = vm.findAll('.suggestion-counts span').at(0);
+
+      expect(count.text()).toContain('1');
+      expect(count.find(Icon).props('name')).toBe('thumb-up');
+    });
+
+    it('renders notes count', () => {
+      createComponent();
+
+      const count = vm.findAll('.suggestion-counts span').at(1);
+
+      expect(count.text()).toContain('2');
+      expect(count.find(Icon).props('name')).toBe('comment');
+    });
+  });
+
+  describe('confidential', () => {
+    it('renders confidential icon', () => {
+      createComponent({
+        confidential: true,
+      });
+
+      const icon = vm.find(Icon);
+
+      expect(icon.props('name')).toBe('eye-slash');
+      expect(icon.attributes('data-original-title')).toBe('Confidential');
+    });
+  });
+});
diff --git a/spec/frontend/issuable_suggestions/mock_data.js b/spec/frontend/issuable_suggestions/mock_data.js
new file mode 100644
index 00000000000..4f0f9ef8d62
--- /dev/null
+++ b/spec/frontend/issuable_suggestions/mock_data.js
@@ -0,0 +1,26 @@
+function getDate(daysMinus) {
+  const today = new Date();
+  today.setDate(today.getDate() - daysMinus);
+
+  return today.toISOString();
+}
+
+export default () => ({
+  id: 1,
+  iid: 1,
+  state: 'opened',
+  upvotes: 1,
+  userNotesCount: 2,
+  closedAt: getDate(1),
+  createdAt: getDate(3),
+  updatedAt: getDate(2),
+  confidential: false,
+  webUrl: `${gl.TEST_HOST}/test/issue/1`,
+  title: 'Test issue',
+  author: {
+    avatarUrl: `${gl.TEST_HOST}/avatar`,
+    name: 'Author Name',
+    username: 'author.username',
+    webUrl: `${gl.TEST_HOST}/author`,
+  },
+});