debian-mirror-gitlab/spec/frontend/releases/components/release_block_spec.js

199 lines
6 KiB
JavaScript
Raw Normal View History

2020-03-13 15:44:24 +05:30
import $ from 'jquery';
2019-12-21 20:55:43 +05:30
import { mount } from '@vue/test-utils';
2021-01-03 14:25:43 +05:30
import { getJSONFixture } from 'helpers/fixtures';
2020-03-13 15:44:24 +05:30
import EvidenceBlock from '~/releases/components/evidence_block.vue';
import ReleaseBlock from '~/releases/components/release_block.vue';
import ReleaseBlockFooter from '~/releases/components/release_block_footer.vue';
2019-12-21 20:55:43 +05:30
import timeagoMixin from '~/vue_shared/mixins/timeago';
2020-04-08 14:13:33 +05:30
import * as commonUtils from '~/lib/utils/common_utils';
import { BACK_URL_PARAM } from '~/releases/constants';
import * as urlUtility from '~/lib/utils/url_utility';
2019-12-21 20:55:43 +05:30
2021-01-03 14:25:43 +05:30
const originalRelease = getJSONFixture('api/releases/release.json');
2019-12-21 20:55:43 +05:30
describe('Release block', () => {
let wrapper;
2020-04-08 14:13:33 +05:30
let release;
2019-12-21 20:55:43 +05:30
2019-12-26 22:10:19 +05:30
const factory = (releaseProp, featureFlags = {}) => {
2019-12-21 20:55:43 +05:30
wrapper = mount(ReleaseBlock, {
propsData: {
release: releaseProp,
},
provide: {
glFeatures: {
2019-12-26 22:10:19 +05:30
...featureFlags,
2019-12-21 20:55:43 +05:30
},
},
});
return wrapper.vm.$nextTick();
};
const milestoneListLabel = () => wrapper.find('.js-milestone-list-label');
const editButton = () => wrapper.find('.js-edit-button');
beforeEach(() => {
2020-03-13 15:44:24 +05:30
jest.spyOn($.fn, 'renderGFM');
2020-04-08 14:13:33 +05:30
release = commonUtils.convertObjectPropsToCamelCase(originalRelease, { deep: true });
2019-12-21 20:55:43 +05:30
});
afterEach(() => {
wrapper.destroy();
});
describe('with default props', () => {
beforeEach(() => factory(release));
it("renders the block with an id equal to the release's tag name", () => {
2021-01-03 14:25:43 +05:30
expect(wrapper.attributes().id).toBe(release.tagName);
2019-12-21 20:55:43 +05:30
});
2020-04-08 14:13:33 +05:30
it(`renders an edit button that links to the "Edit release" page with a "${BACK_URL_PARAM}" parameter`, () => {
2019-12-21 20:55:43 +05:30
expect(editButton().exists()).toBe(true);
2020-04-08 14:13:33 +05:30
expect(editButton().attributes('href')).toBe(
`${release._links.editUrl}?${BACK_URL_PARAM}=${encodeURIComponent(window.location.href)}`,
);
2019-12-21 20:55:43 +05:30
});
it('renders release name', () => {
expect(wrapper.text()).toContain(release.name);
});
2020-03-13 15:44:24 +05:30
it('renders release description', () => {
expect(wrapper.vm.$refs['gfm-content']).toBeDefined();
expect($.fn.renderGFM).toHaveBeenCalledTimes(1);
});
2019-12-21 20:55:43 +05:30
it('renders release date', () => {
2020-04-08 14:13:33 +05:30
expect(wrapper.text()).toContain(timeagoMixin.methods.timeFormatted(release.releasedAt));
2019-12-21 20:55:43 +05:30
});
it('renders author avatar', () => {
expect(wrapper.find('.user-avatar-link').exists()).toBe(true);
});
2019-12-26 22:10:19 +05:30
it('renders the footer', () => {
expect(wrapper.find(ReleaseBlockFooter).exists()).toBe(true);
});
2019-12-21 20:55:43 +05:30
});
it('renders commit sha', () => {
2020-04-08 14:13:33 +05:30
release.commitPath = '/commit/example';
2019-12-21 20:55:43 +05:30
2020-04-08 14:13:33 +05:30
return factory(release).then(() => {
expect(wrapper.text()).toContain(release.commit.shortId);
2019-12-21 20:55:43 +05:30
expect(wrapper.find('a[href="/commit/example"]').exists()).toBe(true);
});
});
it('renders tag name', () => {
2020-04-08 14:13:33 +05:30
release.tagPath = '/tag/example';
2019-12-21 20:55:43 +05:30
2020-04-08 14:13:33 +05:30
return factory(release).then(() => {
expect(wrapper.text()).toContain(release.tagName);
2019-12-21 20:55:43 +05:30
expect(wrapper.find('a[href="/tag/example"]').exists()).toBe(true);
});
});
it('does not render the milestone list if no milestones are associated to the release', () => {
2020-04-08 14:13:33 +05:30
delete release.milestones;
2019-12-21 20:55:43 +05:30
2020-04-08 14:13:33 +05:30
return factory(release).then(() => {
2019-12-21 20:55:43 +05:30
expect(milestoneListLabel().exists()).toBe(false);
});
});
it('renders upcoming release badge', () => {
2020-04-08 14:13:33 +05:30
release.upcomingRelease = true;
2019-12-21 20:55:43 +05:30
2020-04-08 14:13:33 +05:30
return factory(release).then(() => {
2019-12-21 20:55:43 +05:30
expect(wrapper.text()).toContain('Upcoming Release');
});
});
2020-04-08 14:13:33 +05:30
it('slugifies the tagName before setting it as the elements ID', () => {
release.tagName = 'a dangerous tag name <script>alert("hello")</script>';
2019-12-21 20:55:43 +05:30
2020-04-08 14:13:33 +05:30
return factory(release).then(() => {
2020-03-13 15:44:24 +05:30
expect(wrapper.attributes().id).toBe('a-dangerous-tag-name-script-alert-hello-script');
2019-12-21 20:55:43 +05:30
});
});
2020-04-22 19:07:51 +05:30
it('does not set the ID if tagName is missing', () => {
release.tagName = undefined;
return factory(release).then(() => {
expect(wrapper.attributes().id).toBeUndefined();
});
});
2020-01-01 13:55:28 +05:30
describe('evidence block', () => {
2021-01-03 14:25:43 +05:30
it('renders the evidence block when the evidence is available', () => {
return factory(release).then(() => {
expect(wrapper.find(EvidenceBlock).exists()).toBe(true);
});
});
2020-01-01 13:55:28 +05:30
it('does not render the evidence block when there is no evidence', () => {
2021-01-03 14:25:43 +05:30
release.evidences = [];
2020-01-01 13:55:28 +05:30
2020-04-08 14:13:33 +05:30
return factory(release).then(() => {
2020-01-01 13:55:28 +05:30
expect(wrapper.find(EvidenceBlock).exists()).toBe(false);
});
});
});
2019-12-21 20:55:43 +05:30
describe('anchor scrolling', () => {
2020-04-08 14:13:33 +05:30
let locationHash;
2019-12-21 20:55:43 +05:30
beforeEach(() => {
2020-04-08 14:13:33 +05:30
commonUtils.scrollToElement = jest.fn();
urlUtility.getLocationHash = jest.fn().mockImplementation(() => locationHash);
2019-12-21 20:55:43 +05:30
});
const hasTargetBlueBackground = () => wrapper.classes('bg-line-target-blue');
it('does not attempt to scroll the page if no anchor tag is included in the URL', () => {
2020-04-08 14:13:33 +05:30
locationHash = '';
2019-12-21 20:55:43 +05:30
return factory(release).then(() => {
2020-04-08 14:13:33 +05:30
expect(commonUtils.scrollToElement).not.toHaveBeenCalled();
2019-12-21 20:55:43 +05:30
});
});
it("does not attempt to scroll the page if the anchor tag doesn't match the release's tag name", () => {
2020-04-08 14:13:33 +05:30
locationHash = 'v0.4';
2019-12-21 20:55:43 +05:30
return factory(release).then(() => {
2020-04-08 14:13:33 +05:30
expect(commonUtils.scrollToElement).not.toHaveBeenCalled();
2019-12-21 20:55:43 +05:30
});
});
it("attempts to scroll itself into view if the anchor tag matches the release's tag name", () => {
2020-04-08 14:13:33 +05:30
locationHash = release.tagName;
2019-12-21 20:55:43 +05:30
return factory(release).then(() => {
2020-04-08 14:13:33 +05:30
expect(commonUtils.scrollToElement).toHaveBeenCalledTimes(1);
2019-12-21 20:55:43 +05:30
2020-04-08 14:13:33 +05:30
expect(commonUtils.scrollToElement).toHaveBeenCalledWith(wrapper.element);
2019-12-21 20:55:43 +05:30
});
});
it('renders with a light blue background if it is the target of the anchor', () => {
2020-04-08 14:13:33 +05:30
locationHash = release.tagName;
2019-12-21 20:55:43 +05:30
return factory(release).then(() => {
expect(hasTargetBlueBackground()).toBe(true);
});
});
it('does not render with a light blue background if it is not the target of the anchor', () => {
2020-04-08 14:13:33 +05:30
locationHash = '';
2019-12-21 20:55:43 +05:30
return factory(release).then(() => {
expect(hasTargetBlueBackground()).toBe(false);
});
});
});
});