Commit b75dc6b9 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch...

Merge branch '197139-transient-failure-in-karma-karma-foss-diffs-components-commit_item-renders-commit' into 'master'

Refactor commit_item_spec from karma to jest

Closes #197139

See merge request gitlab-org/gitlab!26588
parents f61daee3 6f7d9049
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);
});
});
});
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');
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment