summaryrefslogtreecommitdiff
path: root/spec/javascripts
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2019-10-31 00:07:00 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2019-10-31 00:07:00 +0000
commitfd0691c6c0dc16ddada016af08c47a28614e888d (patch)
tree17e3da2d636967070bbd7b2039d3a5ce1adf1770 /spec/javascripts
parent0f0a8be306e7e0cd5693f57414de351808c41db9 (diff)
downloadgitlab-ce-fd0691c6c0dc16ddada016af08c47a28614e888d.tar.gz
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/javascripts')
-rw-r--r--spec/javascripts/vue_shared/components/commit_spec.js234
-rw-r--r--spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js120
-rw-r--r--spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js167
3 files changed, 0 insertions, 521 deletions
diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js
deleted file mode 100644
index f89627e727b..00000000000
--- a/spec/javascripts/vue_shared/components/commit_spec.js
+++ /dev/null
@@ -1,234 +0,0 @@
-import Vue from 'vue';
-import commitComp from '~/vue_shared/components/commit.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
-
-describe('Commit component', () => {
- let props;
- let component;
- let CommitComponent;
-
- beforeEach(() => {
- CommitComponent = Vue.extend(commitComp);
- });
-
- afterEach(() => {
- component.$destroy();
- });
-
- it('should render a fork icon if it does not represent a tag', () => {
- component = mountComponent(CommitComponent, {
- tag: false,
- commitRef: {
- name: 'master',
- ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
- },
- commitUrl:
- 'https://gitlab.com/gitlab-org/gitlab-foss/commit/b7836eddf62d663c665769e1b0960197fd215067',
- shortSha: 'b7836edd',
- title: 'Commit message',
- author: {
- avatar_url: 'https://gitlab.com/uploads/-/system/user/avatar/300478/avatar.png',
- web_url: 'https://gitlab.com/jschatz1',
- path: '/jschatz1',
- username: 'jschatz1',
- },
- });
-
- expect(component.$el.querySelector('.icon-container').children).toContain('svg');
- });
-
- describe('Given all the props', () => {
- beforeEach(() => {
- props = {
- tag: true,
- commitRef: {
- name: 'master',
- ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
- },
- commitUrl:
- 'https://gitlab.com/gitlab-org/gitlab-foss/commit/b7836eddf62d663c665769e1b0960197fd215067',
- shortSha: 'b7836edd',
- title: 'Commit message',
- author: {
- avatar_url: 'https://gitlab.com/uploads/-/system/user/avatar/300478/avatar.png',
- web_url: 'https://gitlab.com/jschatz1',
- path: '/jschatz1',
- username: 'jschatz1',
- },
- };
-
- component = mountComponent(CommitComponent, props);
- });
-
- it('should render a tag icon if it represents a tag', () => {
- expect(component.$el.querySelector('.icon-container svg.ic-tag')).not.toBeNull();
- });
-
- it('should render a link to the ref url', () => {
- expect(component.$el.querySelector('.ref-name').getAttribute('href')).toEqual(
- props.commitRef.ref_url,
- );
- });
-
- it('should render the ref name', () => {
- expect(component.$el.querySelector('.ref-name').textContent).toContain(props.commitRef.name);
- });
-
- it('should render the commit short sha with a link to the commit url', () => {
- expect(component.$el.querySelector('.commit-sha').getAttribute('href')).toEqual(
- props.commitUrl,
- );
-
- expect(component.$el.querySelector('.commit-sha').textContent).toContain(props.shortSha);
- });
-
- it('should render icon for commit', () => {
- expect(
- component.$el.querySelector('.js-commit-icon use').getAttribute('xlink:href'),
- ).toContain('commit');
- });
-
- describe('Given commit title and author props', () => {
- it('should render a link to the author profile', () => {
- expect(
- component.$el.querySelector('.commit-title .avatar-image-container').getAttribute('href'),
- ).toEqual(props.author.path);
- });
-
- it('Should render the author avatar with title and alt attributes', () => {
- expect(
- component.$el
- .querySelector('.commit-title .avatar-image-container .js-user-avatar-image-toolip')
- .textContent.trim(),
- ).toContain(props.author.username);
-
- expect(
- component.$el
- .querySelector('.commit-title .avatar-image-container img')
- .getAttribute('alt'),
- ).toContain(`${props.author.username}'s avatar`);
- });
- });
-
- it('should render the commit title', () => {
- expect(component.$el.querySelector('a.commit-row-message').getAttribute('href')).toEqual(
- props.commitUrl,
- );
-
- expect(component.$el.querySelector('a.commit-row-message').textContent).toContain(
- props.title,
- );
- });
- });
-
- describe('When commit title is not provided', () => {
- it('should render default message', () => {
- props = {
- tag: false,
- commitRef: {
- name: 'master',
- ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
- },
- commitUrl:
- 'https://gitlab.com/gitlab-org/gitlab-foss/commit/b7836eddf62d663c665769e1b0960197fd215067',
- shortSha: 'b7836edd',
- title: null,
- author: {},
- };
-
- component = mountComponent(CommitComponent, props);
-
- expect(component.$el.querySelector('.commit-title span').textContent).toContain(
- "Can't find HEAD commit for this branch",
- );
- });
- });
-
- describe('When commit ref is provided, but merge ref is not', () => {
- it('should render the commit ref', () => {
- props = {
- tag: false,
- commitRef: {
- name: 'master',
- ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
- },
- commitUrl:
- 'https://gitlab.com/gitlab-org/gitlab-foss/commit/b7836eddf62d663c665769e1b0960197fd215067',
- shortSha: 'b7836edd',
- title: null,
- author: {},
- };
-
- component = mountComponent(CommitComponent, props);
- const refEl = component.$el.querySelector('.ref-name');
-
- expect(refEl.textContent).toContain('master');
-
- expect(refEl.href).toBe(props.commitRef.ref_url);
-
- expect(refEl.getAttribute('data-original-title')).toBe(props.commitRef.name);
-
- expect(component.$el.querySelector('.icon-container .ic-branch')).not.toBeNull();
- });
- });
-
- describe('When both commit and merge ref are provided', () => {
- it('should render the merge ref', () => {
- props = {
- tag: false,
- commitRef: {
- name: 'master',
- ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
- },
- commitUrl:
- 'https://gitlab.com/gitlab-org/gitlab-foss/commit/b7836eddf62d663c665769e1b0960197fd215067',
- mergeRequestRef: {
- iid: 1234,
- path: 'https://example.com/path/to/mr',
- title: 'Test MR',
- },
- shortSha: 'b7836edd',
- title: null,
- author: {},
- };
-
- component = mountComponent(CommitComponent, props);
- const refEl = component.$el.querySelector('.ref-name');
-
- expect(refEl.textContent).toContain('1234');
-
- expect(refEl.href).toBe(props.mergeRequestRef.path);
-
- expect(refEl.getAttribute('data-original-title')).toBe(props.mergeRequestRef.title);
-
- expect(component.$el.querySelector('.icon-container .ic-git-merge')).not.toBeNull();
- });
- });
-
- describe('When showRefInfo === false', () => {
- it('should not render any ref info', () => {
- props = {
- tag: false,
- commitRef: {
- name: 'master',
- ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
- },
- commitUrl:
- 'https://gitlab.com/gitlab-org/gitlab-foss/commit/b7836eddf62d663c665769e1b0960197fd215067',
- mergeRequestRef: {
- iid: 1234,
- path: '/path/to/mr',
- title: 'Test MR',
- },
- shortSha: 'b7836edd',
- title: null,
- author: {},
- showRefInfo: false,
- };
-
- component = mountComponent(CommitComponent, props);
-
- expect(component.$el.querySelector('.ref-name')).toBeNull();
- });
- });
-});
diff --git a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js
deleted file mode 100644
index c5045afc5b0..00000000000
--- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import Vue from 'vue';
-import { placeholderImage } from '~/lazy_loader';
-import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
-import mountComponent, { mountComponentWithSlots } from 'spec/helpers/vue_mount_component_helper';
-import defaultAvatarUrl from '~/../images/no_avatar.png';
-
-const DEFAULT_PROPS = {
- size: 99,
- imgSrc: 'myavatarurl.com',
- imgAlt: 'mydisplayname',
- cssClasses: 'myextraavatarclass',
- tooltipText: 'tooltip text',
- tooltipPlacement: 'bottom',
-};
-
-describe('User Avatar Image Component', function() {
- let vm;
- let UserAvatarImage;
-
- beforeEach(() => {
- UserAvatarImage = Vue.extend(userAvatarImage);
- });
-
- describe('Initialization', function() {
- beforeEach(function() {
- vm = mountComponent(UserAvatarImage, {
- ...DEFAULT_PROPS,
- }).$mount();
- });
-
- it('should return a defined Vue component', function() {
- expect(vm).toBeDefined();
- });
-
- it('should have <img> as a child element', function() {
- const imageElement = vm.$el.querySelector('img');
-
- expect(imageElement).not.toBe(null);
- expect(imageElement.getAttribute('src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
- expect(imageElement.getAttribute('data-src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
- expect(imageElement.getAttribute('alt')).toBe(DEFAULT_PROPS.imgAlt);
- });
-
- it('should properly compute avatarSizeClass', function() {
- expect(vm.avatarSizeClass).toBe('s99');
- });
-
- it('should properly render img css', function() {
- const { classList } = vm.$el.querySelector('img');
- const containsAvatar = classList.contains('avatar');
- const containsSizeClass = classList.contains('s99');
- const containsCustomClass = classList.contains(DEFAULT_PROPS.cssClasses);
- const lazyClass = classList.contains('lazy');
-
- expect(containsAvatar).toBe(true);
- expect(containsSizeClass).toBe(true);
- expect(containsCustomClass).toBe(true);
- expect(lazyClass).toBe(false);
- });
- });
-
- describe('Initialization when lazy', function() {
- beforeEach(function() {
- vm = mountComponent(UserAvatarImage, {
- ...DEFAULT_PROPS,
- lazy: true,
- }).$mount();
- });
-
- it('should add lazy attributes', function() {
- const imageElement = vm.$el.querySelector('img');
- const lazyClass = imageElement.classList.contains('lazy');
-
- expect(lazyClass).toBe(true);
- expect(imageElement.getAttribute('src')).toBe(placeholderImage);
- expect(imageElement.getAttribute('data-src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
- });
- });
-
- describe('Initialization without src', function() {
- beforeEach(function() {
- vm = mountComponent(UserAvatarImage);
- });
-
- it('should have default avatar image', function() {
- const imageElement = vm.$el.querySelector('img');
-
- expect(imageElement.getAttribute('src')).toBe(defaultAvatarUrl);
- });
- });
-
- describe('dynamic tooltip content', () => {
- const props = DEFAULT_PROPS;
- const slots = {
- default: ['Action!'],
- };
-
- beforeEach(() => {
- vm = mountComponentWithSlots(UserAvatarImage, { props, slots }).$mount();
- });
-
- it('renders the tooltip slot', () => {
- expect(vm.$el.querySelector('.js-user-avatar-image-toolip')).not.toBe(null);
- });
-
- it('renders the tooltip content', () => {
- expect(vm.$el.querySelector('.js-user-avatar-image-toolip').textContent).toContain(
- slots.default[0],
- );
- });
-
- it('does not render tooltip data attributes for on avatar image', () => {
- const avatarImg = vm.$el.querySelector('img');
-
- expect(avatarImg.dataset.originalTitle).not.toBeDefined();
- expect(avatarImg.dataset.placement).not.toBeDefined();
- expect(avatarImg.dataset.container).not.toBeDefined();
- });
- });
-});
diff --git a/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js b/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
deleted file mode 100644
index c7e0d806d80..00000000000
--- a/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
+++ /dev/null
@@ -1,167 +0,0 @@
-import Vue from 'vue';
-import userPopover from '~/vue_shared/components/user_popover/user_popover.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-const DEFAULT_PROPS = {
- loaded: true,
- user: {
- username: 'root',
- name: 'Administrator',
- location: 'Vienna',
- bio: null,
- organization: null,
- status: null,
- },
-};
-
-const UserPopover = Vue.extend(userPopover);
-
-describe('User Popover Component', () => {
- const fixtureTemplate = 'merge_requests/diff_comment.html';
- preloadFixtures(fixtureTemplate);
-
- let vm;
-
- beforeEach(() => {
- loadFixtures(fixtureTemplate);
- });
-
- afterEach(() => {
- vm.$destroy();
- });
-
- describe('Empty', () => {
- beforeEach(() => {
- vm = mountComponent(UserPopover, {
- target: document.querySelector('.js-user-link'),
- user: {
- name: null,
- username: null,
- location: null,
- bio: null,
- organization: null,
- status: null,
- },
- });
- });
-
- it('should return skeleton loaders', () => {
- expect(vm.$el.querySelectorAll('.animation-container').length).toBe(4);
- });
- });
-
- describe('basic data', () => {
- it('should show basic fields', () => {
- vm = mountComponent(UserPopover, {
- ...DEFAULT_PROPS,
- target: document.querySelector('.js-user-link'),
- });
-
- expect(vm.$el.textContent).toContain(DEFAULT_PROPS.user.name);
- expect(vm.$el.textContent).toContain(DEFAULT_PROPS.user.username);
- expect(vm.$el.textContent).toContain(DEFAULT_PROPS.user.location);
- });
-
- it('shows icon for location', () => {
- const iconEl = vm.$el.querySelector('.js-location svg');
-
- expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('location');
- });
- });
-
- describe('job data', () => {
- it('should show only bio if no organization is available', () => {
- const testProps = Object.assign({}, DEFAULT_PROPS);
- testProps.user.bio = 'Engineer';
-
- vm = mountComponent(UserPopover, {
- ...testProps,
- target: document.querySelector('.js-user-link'),
- });
-
- expect(vm.$el.textContent).toContain('Engineer');
- });
-
- it('should show only organization if no bio is available', () => {
- const testProps = Object.assign({}, DEFAULT_PROPS);
- testProps.user.organization = 'GitLab';
-
- vm = mountComponent(UserPopover, {
- ...testProps,
- target: document.querySelector('.js-user-link'),
- });
-
- expect(vm.$el.textContent).toContain('GitLab');
- });
-
- it('should display bio and organization in separate lines', () => {
- const testProps = Object.assign({}, DEFAULT_PROPS);
- testProps.user.bio = 'Engineer';
- testProps.user.organization = 'GitLab';
-
- vm = mountComponent(UserPopover, {
- ...DEFAULT_PROPS,
- target: document.querySelector('.js-user-link'),
- });
-
- expect(vm.$el.querySelector('.js-bio').textContent).toContain('Engineer');
- expect(vm.$el.querySelector('.js-organization').textContent).toContain('GitLab');
- });
-
- it('should not encode special characters in bio and organization', () => {
- const testProps = Object.assign({}, DEFAULT_PROPS);
- testProps.user.bio = 'Manager & Team Lead';
- testProps.user.organization = 'Me & my <funky> Company';
-
- vm = mountComponent(UserPopover, {
- ...DEFAULT_PROPS,
- target: document.querySelector('.js-user-link'),
- });
-
- expect(vm.$el.querySelector('.js-bio').textContent).toContain('Manager & Team Lead');
- expect(vm.$el.querySelector('.js-organization').textContent).toContain(
- 'Me & my <funky> Company',
- );
- });
-
- it('shows icon for bio', () => {
- const iconEl = vm.$el.querySelector('.js-bio svg');
-
- expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('profile');
- });
-
- it('shows icon for organization', () => {
- const iconEl = vm.$el.querySelector('.js-organization svg');
-
- expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('work');
- });
- });
-
- describe('status data', () => {
- it('should show only message', () => {
- const testProps = Object.assign({}, DEFAULT_PROPS);
- testProps.user.status = { message_html: 'Hello World' };
-
- vm = mountComponent(UserPopover, {
- ...DEFAULT_PROPS,
- target: document.querySelector('.js-user-link'),
- });
-
- expect(vm.$el.textContent).toContain('Hello World');
- });
-
- it('should show message and emoji', () => {
- const testProps = Object.assign({}, DEFAULT_PROPS);
- testProps.user.status = { emoji: 'basketball_player', message_html: 'Hello World' };
-
- vm = mountComponent(UserPopover, {
- ...DEFAULT_PROPS,
- target: document.querySelector('.js-user-link'),
- status: { emoji: 'basketball_player', message_html: 'Hello World' },
- });
-
- expect(vm.$el.textContent).toContain('Hello World');
- expect(vm.$el.innerHTML).toContain('<gl-emoji data-name="basketball_player"');
- });
- });
-});