Move commit_item_spec from karma to jest

- remove karma file
- move to jest, use VTU

spec/frontend/diffs/components/commit_item_spec.js

+import { mount } from '@vue/test-utils';
+import { TEST_HOST } from 'helpers/test_constants';
+import { trimText } from 'helpers/text_helper';
+import { getTimeago } from '~/lib/utils/datetime_utility';
+import Component from '~/diffs/components/commit_item.vue';
+import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
+import getDiffWithCommit from '../mock_data/diff_with_commit';
+
+jest.mock('~/user_popovers');
+
+const TEST_AUTHOR_NAME = 'test';
+const TEST_AUTHOR_EMAIL = 'test+test@gitlab.com';
+const TEST_AUTHOR_GRAVATAR = `${TEST_HOST}/avatar/test?s=40`;
+const TEST_SIGNATURE_HTML = '<a>Legit commit</a>';
+const TEST_PIPELINE_STATUS_PATH = `${TEST_HOST}/pipeline/status`;
+
+describe('diffs/components/commit_item', () => {
+  let wrapper;
+
+  const timeago = getTimeago();
+  const { commit } = getDiffWithCommit();
+
+  const getTitleElement = () => wrapper.find('.commit-row-message.item-title');
+  const getDescElement = () => wrapper.find('pre.commit-row-description');
+  const getDescExpandElement = () =>
+    wrapper.find('.commit-content .text-expander.js-toggle-button');
+  const getShaElement = () => wrapper.find('.commit-sha-group');
+  const getAvatarElement = () => wrapper.find('.user-avatar-link');
+  const getCommitterElement = () => wrapper.find('.committer');
+  const getCommitActionsElement = () => wrapper.find('.commit-actions');
+  const getCommitPipelineStatus = () => wrapper.find(CommitPipelineStatus);
+
+  const defaultProps = {
+    commit: getDiffWithCommit().commit,
+  };
+  const mountComponent = (propsData = defaultProps) => {
+    wrapper = mount(Component, {
+      propsData,
+      stubs: {
+        CommitPipelineStatus: true,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('default state', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
+
+    it('renders commit title', () => {
+      const titleElement = getTitleElement();
+
+      expect(titleElement.attributes('href')).toBe(commit.commit_url);
+      expect(titleElement.text()).toBe(commit.title_html);
+    });
+
+    it('renders commit description', () => {
+      const descElement = getDescElement();
+      const descExpandElement = getDescExpandElement();
+
+      const expected = commit.description_html.replace(/&#x000A;/g, '');
+
+      expect(trimText(descElement.text())).toEqual(trimText(expected));
+      expect(descExpandElement.exists()).toBe(true);
+    });
+
+    it('renders commit sha', () => {
+      const shaElement = getShaElement();
+      const labelElement = shaElement.find('.label');
+      const buttonElement = shaElement.find('button');
+
+      expect(labelElement.text()).toEqual(commit.short_id);
+      expect(buttonElement.props('text')).toBe(commit.id);
+    });
+
+    it('renders author avatar', () => {
+      const avatarElement = getAvatarElement();
+      const imgElement = avatarElement.find('img');
+
+      expect(avatarElement.attributes('href')).toBe(commit.author.web_url);
+      expect(imgElement.classes()).toContain('s40');
+      expect(imgElement.attributes('alt')).toBe(commit.author.name);
+      expect(imgElement.attributes('src')).toBe(commit.author.avatar_url);
+    });
+
+    it('renders committer text', () => {
+      const committerElement = getCommitterElement();
+      const nameElement = committerElement.find('a');
+
+      const expectTimeText = timeago.format(commit.authored_date);
+      const expectedText = `${commit.author.name} authored ${expectTimeText}`;
+
+      expect(trimText(committerElement.text())).toEqual(expectedText);
+      expect(nameElement.attributes('href')).toBe(commit.author.web_url);
+      expect(nameElement.text()).toBe(commit.author.name);
+      expect(nameElement.classes()).toContain('js-user-link');
+      expect(nameElement.attributes('data-user-id')).toEqual(commit.author.id.toString());
+    });
+  });
+
+  describe('without commit description', () => {
+    beforeEach(() => {
+      mountComponent({ defaultProps, commit: { ...defaultProps.commit, description_html: '' } });
+    });
+
+    it('hides description', () => {
+      const descElement = getDescElement();
+      const descExpandElement = getDescExpandElement();
+
+      expect(descElement.exists()).toBeFalsy();
+      expect(descExpandElement.exists()).toBeFalsy();
+    });
+  });
+
+  describe('with no matching user', () => {
+    beforeEach(() => {
+      mountComponent({
+        defaultProps,
+        commit: {
+          ...defaultProps.commit,
+          author: null,
+          author_email: TEST_AUTHOR_EMAIL,
+          author_name: TEST_AUTHOR_NAME,
+          author_gravatar_url: TEST_AUTHOR_GRAVATAR,
+        },
+      });
+    });
+
+    it('renders author avatar', () => {
+      const avatarElement = getAvatarElement();
+      const imgElement = avatarElement.find('img');
+
+      expect(avatarElement.attributes('href')).toBe(`mailto:${TEST_AUTHOR_EMAIL}`);
+      expect(imgElement.attributes('alt')).toBe(TEST_AUTHOR_NAME);
+      expect(imgElement.attributes('src')).toBe(TEST_AUTHOR_GRAVATAR);
+    });
+
+    it('renders committer text', () => {
+      const committerElement = getCommitterElement();
+      const nameElement = committerElement.find('a');
+
+      expect(nameElement.attributes('href')).toBe(`mailto:${TEST_AUTHOR_EMAIL}`);
+      expect(nameElement.text()).toBe(TEST_AUTHOR_NAME);
+    });
+  });
+
+  describe('with signature', () => {
+    beforeEach(() => {
+      mountComponent({
+        defaultProps,
+        commit: { ...defaultProps.commit, signature_html: TEST_SIGNATURE_HTML },
+      });
+    });
+
+    it('renders signature html', () => {
+      const actionsElement = getCommitActionsElement();
+
+      expect(actionsElement.html()).toContain(TEST_SIGNATURE_HTML);
+    });
+  });
+
+  describe('with pipeline status', () => {
+    beforeEach(() => {
+      mountComponent({
+        defaultProps,
+        commit: { ...defaultProps.commit, pipeline_status_path: TEST_PIPELINE_STATUS_PATH },
+      });
+    });
+
+    it('renders pipeline status', () => {
+      expect(getCommitPipelineStatus().exists()).toBe(true);
+    });
+  });
+});

spec/javascripts/diffs/components/commit_item_spec.js

-import Vue from 'vue';
-import { TEST_HOST } from 'spec/test_constants';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { trimText } from 'spec/helpers/text_helper';
-import { getTimeago } from '~/lib/utils/datetime_utility';
-import CommitItem from '~/diffs/components/commit_item.vue';
-import getDiffWithCommit from '../mock_data/diff_with_commit';
-
-const TEST_AUTHOR_NAME = 'test';
-const TEST_AUTHOR_EMAIL = 'test+test@gitlab.com';
-const TEST_AUTHOR_GRAVATAR = `${TEST_HOST}/avatar/test?s=40`;
-const TEST_SIGNATURE_HTML = '<a>Legit commit</a>';
-const TEST_PIPELINE_STATUS_PATH = `${TEST_HOST}/pipeline/status`;
-
-const getTitleElement = vm => vm.$el.querySelector('.commit-row-message.item-title');
-const getDescElement = vm => vm.$el.querySelector('pre.commit-row-description');
-const getDescExpandElement = vm =>
-  vm.$el.querySelector('.commit-content .text-expander.js-toggle-button');
-const getShaElement = vm => vm.$el.querySelector('.commit-sha-group');
-const getAvatarElement = vm => vm.$el.querySelector('.user-avatar-link');
-const getCommitterElement = vm => vm.$el.querySelector('.committer');
-const getCommitActionsElement = vm => vm.$el.querySelector('.commit-actions');
-
-describe('diffs/components/commit_item', () => {
-  const Component = Vue.extend(CommitItem);
-  const timeago = getTimeago();
-  const { commit } = getDiffWithCommit();
-
-  let vm;
-
-  beforeEach(() => {
-    vm = mountComponent(Component, {
-      commit: getDiffWithCommit().commit,
-    });
-  });
-
-  it('renders commit title', () => {
-    const titleElement = getTitleElement(vm);
-
-    expect(titleElement).toHaveAttr('href', commit.commit_url);
-    expect(titleElement).toHaveText(commit.title_html);
-  });
-
-  // https://gitlab.com/gitlab-org/gitlab/issues/197139
-  // eslint-disable-next-line jasmine/no-disabled-tests
-  xit('renders commit description', () => {
-    const descElement = getDescElement(vm);
-    const descExpandElement = getDescExpandElement(vm);
-
-    const expected = commit.description_html.replace(/&#x000A;/g, '');
-
-    expect(trimText(descElement.innerHTML)).toEqual(trimText(expected));
-    expect(descExpandElement).not.toBeNull();
-  });
-
-  it('renders commit sha', () => {
-    const shaElement = getShaElement(vm);
-    const labelElement = shaElement.querySelector('.label');
-    const buttonElement = shaElement.querySelector('button');
-
-    expect(labelElement.textContent).toEqual(commit.short_id);
-    expect(buttonElement).toHaveData('clipboard-text', commit.id);
-  });
-
-  it('renders author avatar', () => {
-    const avatarElement = getAvatarElement(vm);
-    const imgElement = avatarElement.querySelector('img');
-
-    expect(avatarElement).toHaveAttr('href', commit.author.web_url);
-    expect(imgElement).toHaveClass('s40');
-    expect(imgElement).toHaveAttr('alt', commit.author.name);
-    expect(imgElement).toHaveAttr('src', commit.author.avatar_url);
-  });
-
-  it('renders committer text', () => {
-    const committerElement = getCommitterElement(vm);
-    const nameElement = committerElement.querySelector('a');
-
-    const expectTimeText = timeago.format(commit.authored_date);
-    const expectedText = `${commit.author.name} authored ${expectTimeText}`;
-
-    expect(trimText(committerElement.textContent)).toEqual(expectedText);
-    expect(nameElement).toHaveAttr('href', commit.author.web_url);
-    expect(nameElement).toHaveText(commit.author.name);
-    expect(nameElement).toHaveClass('js-user-link');
-    expect(nameElement.dataset.userId).toEqual(commit.author.id.toString());
-  });
-
-  describe('without commit description', () => {
-    beforeEach(done => {
-      vm.commit.description_html = '';
-
-      vm.$nextTick()
-        .then(done)
-        .catch(done.fail);
-    });
-
-    it('hides description', () => {
-      const descElement = getDescElement(vm);
-      const descExpandElement = getDescExpandElement(vm);
-
-      expect(descElement).toBeNull();
-      expect(descExpandElement).toBeNull();
-    });
-  });
-
-  describe('with no matching user', () => {
-    beforeEach(done => {
-      vm.commit.author = null;
-      vm.commit.author_email = TEST_AUTHOR_EMAIL;
-      vm.commit.author_name = TEST_AUTHOR_NAME;
-      vm.commit.author_gravatar_url = TEST_AUTHOR_GRAVATAR;
-
-      vm.$nextTick()
-        .then(done)
-        .catch(done.fail);
-    });
-
-    it('renders author avatar', () => {
-      const avatarElement = getAvatarElement(vm);
-      const imgElement = avatarElement.querySelector('img');
-
-      expect(avatarElement).toHaveAttr('href', `mailto:${TEST_AUTHOR_EMAIL}`);
-      expect(imgElement).toHaveAttr('alt', TEST_AUTHOR_NAME);
-      expect(imgElement).toHaveAttr('src', TEST_AUTHOR_GRAVATAR);
-    });
-
-    it('renders committer text', () => {
-      const committerElement = getCommitterElement(vm);
-      const nameElement = committerElement.querySelector('a');
-
-      expect(nameElement).toHaveAttr('href', `mailto:${TEST_AUTHOR_EMAIL}`);
-      expect(nameElement).toHaveText(TEST_AUTHOR_NAME);
-    });
-  });
-
-  describe('with signature', () => {
-    beforeEach(done => {
-      vm.commit.signature_html = TEST_SIGNATURE_HTML;
-
-      vm.$nextTick()
-        .then(done)
-        .catch(done.fail);
-    });
-
-    it('renders signature html', () => {
-      const actionsElement = getCommitActionsElement(vm);
-
-      expect(actionsElement).toContainHtml(TEST_SIGNATURE_HTML);
-    });
-  });
-
-  describe('with pipeline status', () => {
-    beforeEach(done => {
-      vm.commit.pipeline_status_path = TEST_PIPELINE_STATUS_PATH;
-
-      vm.$nextTick()
-        .then(done)
-        .catch(done.fail);
-    });
-
-    it('renders pipeline status', () => {
-      const actionsElement = getCommitActionsElement(vm);
-
-      expect(actionsElement).toContainElement('.ci-status-link');
-    });
-  });
-});