diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 15:11:31 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 15:11:31 +0300 |
commit | e2999d09ec050b12b6de9121d9aedc38c12477fd (patch) | |
tree | 8da9e224d3959aa110e109d2869023e0e236b148 /spec/frontend | |
parent | 67cdffe4deb5c887c17115d4f974c0e8a267ffd2 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
3 files changed, 195 insertions, 111 deletions
diff --git a/spec/frontend/emoji/components/utils_spec.js b/spec/frontend/emoji/components/utils_spec.js new file mode 100644 index 00000000000..36521eb1051 --- /dev/null +++ b/spec/frontend/emoji/components/utils_spec.js @@ -0,0 +1,56 @@ +import Cookies from 'js-cookie'; +import { getFrequentlyUsedEmojis, addToFrequentlyUsed } from '~/emoji/components/utils'; + +jest.mock('js-cookie'); + +describe('getFrequentlyUsedEmojis', () => { + it('it returns null when no saved emojis set', () => { + jest.spyOn(Cookies, 'get').mockReturnValue(null); + + expect(getFrequentlyUsedEmojis()).toBe(null); + }); + + it('it returns frequently used emojis object', () => { + jest.spyOn(Cookies, 'get').mockReturnValue('thumbsup,thumbsdown'); + + expect(getFrequentlyUsedEmojis()).toEqual({ + frequently_used: { + emojis: [['thumbsup', 'thumbsdown']], + top: 0, + height: 71, + }, + }); + }); +}); + +describe('addToFrequentlyUsed', () => { + it('sets cookie value', () => { + jest.spyOn(Cookies, 'get').mockReturnValue(null); + + addToFrequentlyUsed('thumbsup'); + + expect(Cookies.set).toHaveBeenCalledWith('frequently_used_emojis', 'thumbsup', { + expires: 365, + }); + }); + + it('sets cookie value to include previously set cookie value', () => { + jest.spyOn(Cookies, 'get').mockReturnValue('thumbsdown'); + + addToFrequentlyUsed('thumbsup'); + + expect(Cookies.set).toHaveBeenCalledWith('frequently_used_emojis', 'thumbsdown,thumbsup', { + expires: 365, + }); + }); + + it('sets cookie value with uniq values', () => { + jest.spyOn(Cookies, 'get').mockReturnValue('thumbsup'); + + addToFrequentlyUsed('thumbsup'); + + expect(Cookies.set).toHaveBeenCalledWith('frequently_used_emojis', 'thumbsup', { + expires: 365, + }); + }); +}); diff --git a/spec/frontend/repository/components/breadcrumbs_spec.js b/spec/frontend/repository/components/breadcrumbs_spec.js index 2ac2069a177..93bfd3d9d32 100644 --- a/spec/frontend/repository/components/breadcrumbs_spec.js +++ b/spec/frontend/repository/components/breadcrumbs_spec.js @@ -1,24 +1,36 @@ import { GlDropdown } from '@gitlab/ui'; import { shallowMount, RouterLinkStub } from '@vue/test-utils'; import Breadcrumbs from '~/repository/components/breadcrumbs.vue'; - -let vm; - -function factory(currentPath, extraProps = {}) { - vm = shallowMount(Breadcrumbs, { - propsData: { - currentPath, - ...extraProps, - }, - stubs: { - RouterLink: RouterLinkStub, - }, - }); -} +import UploadBlobModal from '~/repository/components/upload_blob_modal.vue'; describe('Repository breadcrumbs component', () => { + let wrapper; + + const factory = (currentPath, extraProps = {}) => { + const $apollo = { + queries: { + userPermissions: { + loading: true, + }, + }, + }; + + wrapper = shallowMount(Breadcrumbs, { + propsData: { + currentPath, + ...extraProps, + }, + stubs: { + RouterLink: RouterLinkStub, + }, + mocks: { $apollo }, + }); + }; + + const findUploadBlobModal = () => wrapper.find(UploadBlobModal); + afterEach(() => { - vm.destroy(); + wrapper.destroy(); }); it.each` @@ -30,13 +42,13 @@ describe('Repository breadcrumbs component', () => { `('renders $linkCount links for path $path', ({ path, linkCount }) => { factory(path); - expect(vm.findAll(RouterLinkStub).length).toEqual(linkCount); + expect(wrapper.findAll(RouterLinkStub).length).toEqual(linkCount); }); it('escapes hash in directory path', () => { factory('app/assets/javascripts#'); - expect(vm.findAll(RouterLinkStub).at(3).props('to')).toEqual( + expect(wrapper.findAll(RouterLinkStub).at(3).props('to')).toEqual( '/-/tree/app/assets/javascripts%23', ); }); @@ -44,26 +56,44 @@ describe('Repository breadcrumbs component', () => { it('renders last link as active', () => { factory('app/assets'); - expect(vm.findAll(RouterLinkStub).at(2).attributes('aria-current')).toEqual('page'); + expect(wrapper.findAll(RouterLinkStub).at(2).attributes('aria-current')).toEqual('page'); }); - it('does not render add to tree dropdown when permissions are false', () => { + it('does not render add to tree dropdown when permissions are false', async () => { factory('/', { canCollaborate: false }); - vm.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } }); + wrapper.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } }); - return vm.vm.$nextTick(() => { - expect(vm.find(GlDropdown).exists()).toBe(false); - }); + await wrapper.vm.$nextTick(); + + expect(wrapper.find(GlDropdown).exists()).toBe(false); }); - it('renders add to tree dropdown when permissions are true', () => { + it('renders add to tree dropdown when permissions are true', async () => { factory('/', { canCollaborate: true }); - vm.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } }); + wrapper.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } }); + + await wrapper.vm.$nextTick(); + + expect(wrapper.find(GlDropdown).exists()).toBe(true); + }); + + describe('renders the upload blob modal', () => { + beforeEach(() => { + factory('/', { canEditTree: true }); + }); + + it('does not render the modal while loading', () => { + expect(findUploadBlobModal().exists()).toBe(false); + }); + + it('renders the modal once loaded', async () => { + wrapper.setData({ $apollo: { queries: { userPermissions: { loading: false } } } }); + + await wrapper.vm.$nextTick(); - return vm.vm.$nextTick(() => { - expect(vm.find(GlDropdown).exists()).toBe(true); + expect(findUploadBlobModal().exists()).toBe(true); }); }); }); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js index c1471314c4a..6d8e7056366 100644 --- a/spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js @@ -1,69 +1,67 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import failedToMergeComponent from '~/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue'; +import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; +import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue'; +import MrWidgetFailedToMerge from '~/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue'; import eventHub from '~/vue_merge_request_widget/event_hub'; describe('MRWidgetFailedToMerge', () => { const dummyIntervalId = 1337; - let Component; - let mr; - let vm; + let wrapper; + + const createComponent = (props = {}, data = {}) => { + wrapper = shallowMount(MrWidgetFailedToMerge, { + propsData: { + mr: { + mergeError: 'Merge error happened', + }, + ...props, + }, + data() { + return data; + }, + }); + }; beforeEach(() => { - Component = Vue.extend(failedToMergeComponent); jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); jest.spyOn(window, 'setInterval').mockReturnValue(dummyIntervalId); jest.spyOn(window, 'clearInterval').mockImplementation(); - mr = { - mergeError: 'Merge error happened', - }; - vm = mountComponent(Component, { - mr, - }); }); afterEach(() => { - vm.$destroy(); - }); - - it('sets interval to refresh', () => { - expect(window.setInterval).toHaveBeenCalledWith(vm.updateTimer, 1000); - expect(vm.intervalId).toBe(dummyIntervalId); + wrapper.destroy(); }); - it('clears interval when destroying ', () => { - vm.$destroy(); + describe('interval', () => { + it('sets interval to refresh', () => { + createComponent(); - expect(window.clearInterval).toHaveBeenCalledWith(dummyIntervalId); - }); - - describe('computed', () => { - describe('timerText', () => { - it('should return correct timer text', () => { - expect(vm.timerText).toEqual('Refreshing in 10 seconds to show the updated status...'); + expect(window.setInterval).toHaveBeenCalledWith(wrapper.vm.updateTimer, 1000); + expect(wrapper.vm.intervalId).toBe(dummyIntervalId); + }); - vm.timer = 1; + it('clears interval when destroying ', () => { + createComponent(); + wrapper.destroy(); - expect(vm.timerText).toEqual('Refreshing in a second to show the updated status...'); - }); + expect(window.clearInterval).toHaveBeenCalledWith(dummyIntervalId); }); + }); - describe('mergeError', () => { - it('removes forced line breaks', (done) => { - mr.mergeError = 'contains<br />line breaks<br />'; + describe('mergeError', () => { + it('removes forced line breaks', async () => { + createComponent({ mr: { mergeError: 'contains<br />line breaks<br />' } }); - Vue.nextTick() - .then(() => { - expect(vm.mergeError).toBe('contains line breaks.'); - }) - .then(done) - .catch(done.fail); - }); + await nextTick(); + + expect(wrapper.vm.mergeError).toBe('contains line breaks.'); }); }); describe('created', () => { it('should disable polling', () => { + createComponent(); + expect(eventHub.$emit).toHaveBeenCalledWith('DisablePolling'); }); }); @@ -71,11 +69,13 @@ describe('MRWidgetFailedToMerge', () => { describe('methods', () => { describe('refresh', () => { it('should emit event to request component refresh', () => { - expect(vm.isRefreshing).toEqual(false); + createComponent(); + + expect(wrapper.vm.isRefreshing).toBe(false); - vm.refresh(); + wrapper.vm.refresh(); - expect(vm.isRefreshing).toEqual(true); + expect(wrapper.vm.isRefreshing).toBe(true); expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested'); expect(eventHub.$emit).toHaveBeenCalledWith('EnablePolling'); }); @@ -83,78 +83,76 @@ describe('MRWidgetFailedToMerge', () => { describe('updateTimer', () => { it('should update timer and emit event when timer end', () => { - jest.spyOn(vm, 'refresh').mockImplementation(() => {}); + createComponent(); + + jest.spyOn(wrapper.vm, 'refresh').mockImplementation(() => {}); - expect(vm.timer).toEqual(10); + expect(wrapper.vm.timer).toEqual(10); for (let i = 0; i < 10; i += 1) { - expect(vm.timer).toEqual(10 - i); - vm.updateTimer(); + expect(wrapper.vm.timer).toEqual(10 - i); + wrapper.vm.updateTimer(); } - expect(vm.refresh).toHaveBeenCalled(); + expect(wrapper.vm.refresh).toHaveBeenCalled(); }); }); }); describe('while it is refreshing', () => { - it('renders Refresing now', (done) => { - vm.isRefreshing = true; - - Vue.nextTick(() => { - expect(vm.$el.querySelector('.js-refresh-label').textContent.trim()).toEqual( - 'Refreshing now', - ); - done(); - }); + it('renders Refresing now', async () => { + createComponent({}, { isRefreshing: true }); + + await nextTick(); + + expect(wrapper.find('.js-refresh-label').text().trim()).toBe('Refreshing now'); }); }); describe('while it is not regresing', () => { + beforeEach(() => { + createComponent(); + }); + it('renders warning icon and disabled merge button', () => { - expect(vm.$el.querySelector('.js-ci-status-icon-warning')).not.toBeNull(); - expect( - vm.$el.querySelector('[data-testid="disabled-merge-button"]').getAttribute('disabled'), - ).toEqual('disabled'); + expect(wrapper.find('.js-ci-status-icon-warning')).not.toBeNull(); + expect(wrapper.find(StatusIcon).props('showDisabledButton')).toBe(true); }); it('renders given error', () => { - expect(vm.$el.querySelector('.has-error-message').textContent.trim()).toEqual( - 'Merge error happened.', - ); + expect(wrapper.find('.has-error-message').text().trim()).toBe('Merge error happened.'); }); it('renders refresh button', () => { expect( - vm.$el - .querySelector('[data-testid="merge-request-failed-refresh-button"]') - .textContent.trim(), - ).toEqual('Refresh now'); + wrapper.find('[data-testid="merge-request-failed-refresh-button"]').text().trim(), + ).toBe('Refresh now'); }); it('renders remaining time', () => { - expect(vm.$el.querySelector('.has-custom-error').textContent.trim()).toEqual( + expect(wrapper.find('.has-custom-error').text().trim()).toBe( 'Refreshing in 10 seconds to show the updated status...', ); }); }); - it('should just generic merge failed message if merge_error is not available', (done) => { - vm.mr.mergeError = null; + it('should just generic merge failed message if merge_error is not available', async () => { + createComponent({ mr: { mergeError: null } }); - Vue.nextTick(() => { - expect(vm.$el.innerText).toContain('Merge failed.'); - expect(vm.$el.innerText).not.toContain('Merge error happened.'); - done(); - }); + await nextTick(); + + expect(wrapper.text().trim()).toContain('Merge failed.'); + expect(wrapper.text().trim()).not.toContain('Merge error happened.'); }); - it('should show refresh label when refresh requested', (done) => { - vm.refresh(); - Vue.nextTick(() => { - expect(vm.$el.innerText).not.toContain('Merge failed. Refreshing'); - expect(vm.$el.innerText).toContain('Refreshing now'); - done(); - }); + it('should show refresh label when refresh requested', async () => { + createComponent(); + + wrapper.vm.refresh(); + + await nextTick(); + + expect(wrapper.text().trim()).not.toContain('Merge failed. Refreshing'); + expect(wrapper.text().trim()).toContain('Refreshing now'); }); }); |