diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-28 15:08:44 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-28 15:08:44 +0300 |
commit | db24ab2b72dbff24c201410a0561e929ae7e8061 (patch) | |
tree | 67297286aad8cc590ae325330a0bfe1e2a7e51dc /spec/frontend/ide/components | |
parent | 7e8278c0f46cf6058efad5afd0aef177977bd663 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/ide/components')
3 files changed, 180 insertions, 179 deletions
diff --git a/spec/frontend/ide/components/branches/item_spec.js b/spec/frontend/ide/components/branches/item_spec.js index 1db3750609b..138443b715e 100644 --- a/spec/frontend/ide/components/branches/item_spec.js +++ b/spec/frontend/ide/components/branches/item_spec.js @@ -1,8 +1,8 @@ -import Vue from 'vue'; -import mountCompontent from 'helpers/vue_mount_component_helper'; +import { shallowMount } from '@vue/test-utils'; import router from '~/ide/ide_router'; import Item from '~/ide/components/branches/item.vue'; -import { getTimeago } from '~/lib/utils/datetime_utility'; +import Icon from '~/vue_shared/components/icon.vue'; +import Timeago from '~/vue_shared/components/time_ago_tooltip.vue'; import { projectData } from '../../mock_data'; const TEST_BRANCH = { @@ -12,45 +12,45 @@ const TEST_BRANCH = { const TEST_PROJECT_ID = projectData.name_with_namespace; describe('IDE branch item', () => { - const Component = Vue.extend(Item); - let vm; - - beforeEach(() => { - vm = mountCompontent(Component, { - item: { ...TEST_BRANCH }, - projectId: TEST_PROJECT_ID, - isActive: false, + let wrapper; + + function createComponent(props = {}) { + wrapper = shallowMount(Item, { + propsData: { + item: { ...TEST_BRANCH }, + projectId: TEST_PROJECT_ID, + isActive: false, + ...props, + }, }); - }); + } afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); - it('renders branch name and timeago', () => { - const timeText = getTimeago().format(TEST_BRANCH.committedDate); - - expect(vm.$el.textContent).toContain(TEST_BRANCH.name); - expect(vm.$el.querySelector('time')).toHaveText(timeText); - expect(vm.$el.querySelector('.ic-mobile-issue-close')).toBe(null); - }); + describe('if not active', () => { + beforeEach(() => { + createComponent(); + }); + it('renders branch name and timeago', () => { + expect(wrapper.text()).toContain(TEST_BRANCH.name); + expect(wrapper.find(Timeago).props('time')).toBe(TEST_BRANCH.committedDate); + expect(wrapper.find(Icon).exists()).toBe(false); + }); - it('renders link to branch', () => { - const expectedHref = router.resolve(`/project/${TEST_PROJECT_ID}/edit/${TEST_BRANCH.name}`) - .href; + it('renders link to branch', () => { + const expectedHref = router.resolve(`/project/${TEST_PROJECT_ID}/edit/${TEST_BRANCH.name}`) + .href; - expect(vm.$el.textContent).toMatch('a'); - expect(vm.$el).toHaveAttr('href', expectedHref); + expect(wrapper.text()).toMatch('a'); + expect(wrapper.attributes('href')).toBe(expectedHref); + }); }); - it('renders icon if isActive', done => { - vm.isActive = true; + it('renders icon if is not active', () => { + createComponent({ isActive: true }); - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelector('.ic-mobile-issue-close')).not.toBe(null); - }) - .then(done) - .catch(done.fail); + expect(wrapper.find(Icon).exists()).toBe(true); }); }); diff --git a/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js b/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js index 096851a5401..b8dbca97ade 100644 --- a/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js +++ b/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js @@ -1,59 +1,50 @@ -import Vue from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import Icon from '~/vue_shared/components/icon.vue'; import ScrollButton from '~/ide/components/jobs/detail/scroll_button.vue'; -import mountComponent from '../../../../helpers/vue_mount_component_helper'; describe('IDE job log scroll button', () => { - const Component = Vue.extend(ScrollButton); - let vm; - - beforeEach(() => { - vm = mountComponent(Component, { - direction: 'up', - disabled: false, + let wrapper; + + const createComponent = props => { + wrapper = shallowMount(ScrollButton, { + propsData: { + direction: 'up', + disabled: false, + ...props, + }, }); - }); + }; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); - describe('iconName', () => { - ['up', 'down'].forEach(direction => { - it(`returns icon name for ${direction}`, () => { - vm.direction = direction; + describe.each` + direction | icon | title + ${'up'} | ${'scroll_up'} | ${'Scroll to top'} + ${'down'} | ${'scroll_down'} | ${'Scroll to bottom'} + `('for $direction direction', ({ direction, icon, title }) => { + beforeEach(() => createComponent({ direction })); - expect(vm.iconName).toBe(`scroll_${direction}`); - }); + it('returns proper icon name', () => { + expect(wrapper.find(Icon).props('name')).toBe(icon); }); - }); - describe('tooltipTitle', () => { - it('returns title for up', () => { - expect(vm.tooltipTitle).toBe('Scroll to top'); - }); - - it('returns title for down', () => { - vm.direction = 'down'; - - expect(vm.tooltipTitle).toBe('Scroll to bottom'); + it('returns proper title', () => { + expect(wrapper.attributes('data-original-title')).toBe(title); }); }); it('emits click event on click', () => { - jest.spyOn(vm, '$emit').mockImplementation(() => {}); - - vm.$el.querySelector('.btn-scroll').click(); + createComponent(); - expect(vm.$emit).toHaveBeenCalledWith('click'); + wrapper.find('button').trigger('click'); + expect(wrapper.emitted().click).toBeDefined(); }); - it('disables button when disabled is true', done => { - vm.disabled = true; + it('disables button when disabled is true', () => { + createComponent({ disabled: true }); - vm.$nextTick(() => { - expect(vm.$el.querySelector('.btn-scroll').hasAttribute('disabled')).toBe(true); - - done(); - }); + expect(wrapper.find('button').attributes('disabled')).toBe('disabled'); }); }); diff --git a/spec/frontend/ide/components/preview/navigator_spec.js b/spec/frontend/ide/components/preview/navigator_spec.js index 650bb7660a4..aa15f391e77 100644 --- a/spec/frontend/ide/components/preview/navigator_spec.js +++ b/spec/frontend/ide/components/preview/navigator_spec.js @@ -1,167 +1,177 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; +import { shallowMount } from '@vue/test-utils'; import { TEST_HOST } from 'helpers/test_constants'; +import { GlLoadingIcon } from '@gitlab/ui'; import ClientsideNavigator from '~/ide/components/preview/navigator.vue'; +import { listen } from 'codesandbox-api'; + +jest.mock('codesandbox-api', () => ({ + listen: jest.fn().mockReturnValue(jest.fn()), +})); describe('IDE clientside preview navigator', () => { - let vm; - let Component; + let wrapper; let manager; + let listenHandler; - beforeAll(() => { - Component = Vue.extend(ClientsideNavigator); - }); + const findBackButton = () => wrapper.findAll('button').at(0); + const findForwardButton = () => wrapper.findAll('button').at(1); + const findRefreshButton = () => wrapper.findAll('button').at(2); beforeEach(() => { + listen.mockClear(); manager = { bundlerURL: TEST_HOST, iframe: { src: '' } }; - vm = mountComponent(Component, { manager }); + wrapper = shallowMount(ClientsideNavigator, { propsData: { manager } }); + [[listenHandler]] = listen.mock.calls; }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); it('renders readonly URL bar', () => { - expect(vm.$el.querySelector('input[readonly]').value).toBe('/'); + listenHandler({ type: 'urlchange', url: manager.bundlerURL }); + return wrapper.vm.$nextTick(() => { + expect(wrapper.find('input[readonly]').element.value).toBe('/'); + }); }); - it('disables back button when navigationStack is empty', () => { - expect(vm.$el.querySelector('.ide-navigator-btn')).toHaveAttr('disabled'); - expect(vm.$el.querySelector('.ide-navigator-btn').classList).toContain('disabled-content'); + it('renders loading icon by default', () => { + expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); }); - it('disables forward button when forwardNavigationStack is empty', () => { - vm.forwardNavigationStack = []; - - expect(vm.$el.querySelectorAll('.ide-navigator-btn')[1]).toHaveAttr('disabled'); - expect(vm.$el.querySelectorAll('.ide-navigator-btn')[1].classList).toContain( - 'disabled-content', - ); + it('removes loading icon when done event is fired', () => { + listenHandler({ type: 'done' }); + return wrapper.vm.$nextTick(() => { + expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + }); }); - it('calls back method when clicking back button', done => { - vm.navigationStack.push('/test'); - vm.navigationStack.push('/test2'); - jest.spyOn(vm, 'back').mockReturnValue(); - - vm.$nextTick(() => { - vm.$el.querySelector('.ide-navigator-btn').click(); - - expect(vm.back).toHaveBeenCalled(); - - done(); + it('does not count visiting same url multiple times', () => { + listenHandler({ type: 'done' }); + listenHandler({ type: 'done', url: `${TEST_HOST}/url1` }); + listenHandler({ type: 'done', url: `${TEST_HOST}/url1` }); + return wrapper.vm.$nextTick().then(() => { + expect(findBackButton().attributes('disabled')).toBe('disabled'); }); }); - it('calls forward method when clicking forward button', done => { - vm.forwardNavigationStack.push('/test'); - jest.spyOn(vm, 'forward').mockReturnValue(); + it('unsubscribes from listen on destroy', () => { + const unsubscribeFn = listen(); - vm.$nextTick(() => { - vm.$el.querySelectorAll('.ide-navigator-btn')[1].click(); - - expect(vm.forward).toHaveBeenCalled(); - - done(); - }); + wrapper.destroy(); + expect(unsubscribeFn).toHaveBeenCalled(); }); - describe('onUrlChange', () => { - it('updates the path', () => { - vm.onUrlChange({ url: `${TEST_HOST}/url` }); - - expect(vm.path).toBe('/url'); + describe('back button', () => { + beforeEach(() => { + listenHandler({ type: 'done' }); + listenHandler({ type: 'urlchange', url: TEST_HOST }); + return wrapper.vm.$nextTick(); }); - it('sets currentBrowsingIndex 0 if not already set', () => { - vm.onUrlChange({ url: `${TEST_HOST}/url` }); - - expect(vm.currentBrowsingIndex).toBe(0); + it('is disabled by default', () => { + expect(findBackButton().attributes('disabled')).toBe('disabled'); }); - it('increases currentBrowsingIndex if path doesnt match', () => { - vm.onUrlChange({ url: `${TEST_HOST}/url` }); - - vm.onUrlChange({ url: `${TEST_HOST}/url2` }); - - expect(vm.currentBrowsingIndex).toBe(1); + it('is enabled when there is previous entry', () => { + listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` }); + return wrapper.vm.$nextTick().then(() => { + findBackButton().trigger('click'); + expect(findBackButton().attributes('disabled')).toBeFalsy(); + }); }); - it('does not increase currentBrowsingIndex if path matches', () => { - vm.onUrlChange({ url: `${TEST_HOST}/url` }); - - vm.onUrlChange({ url: `${TEST_HOST}/url` }); - - expect(vm.currentBrowsingIndex).toBe(0); + it('is disabled when there is no previous entry', () => { + listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` }); + return wrapper.vm + .$nextTick() + .then(() => { + findBackButton().trigger('click'); + + return wrapper.vm.$nextTick(); + }) + .then(() => { + expect(findBackButton().attributes('disabled')).toBe('disabled'); + }); }); - it('pushes path into navigation stack', () => { - vm.onUrlChange({ url: `${TEST_HOST}/url` }); + it('updates manager iframe src', () => { + listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` }); + listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url2` }); + return wrapper.vm.$nextTick().then(() => { + findBackButton().trigger('click'); - expect(vm.navigationStack).toEqual(['/url']); + expect(manager.iframe.src).toBe(`${TEST_HOST}/url1`); + }); }); }); - describe('back', () => { + describe('forward button', () => { beforeEach(() => { - vm.path = '/test2'; - vm.currentBrowsingIndex = 1; - vm.navigationStack.push('/test'); - vm.navigationStack.push('/test2'); - - jest.spyOn(vm, 'visitPath').mockReturnValue(); - - vm.back(); + listenHandler({ type: 'done' }); + listenHandler({ type: 'urlchange', url: TEST_HOST }); + return wrapper.vm.$nextTick(); }); - it('visits the last entry in navigationStack', () => { - expect(vm.visitPath).toHaveBeenCalledWith('/test'); + it('is disabled by default', () => { + expect(findForwardButton().attributes('disabled')).toBe('disabled'); }); - it('adds last entry to forwardNavigationStack', () => { - expect(vm.forwardNavigationStack).toEqual(['/test2']); + it('is enabled when there is next entry', () => { + listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` }); + return wrapper.vm + .$nextTick() + .then(() => { + findBackButton().trigger('click'); + return wrapper.vm.$nextTick(); + }) + .then(() => { + expect(findForwardButton().attributes('disabled')).toBeFalsy(); + }); }); - it('clears navigation stack if currentBrowsingIndex is 1', () => { - expect(vm.navigationStack).toEqual([]); + it('is disabled when there is no next entry', () => { + listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` }); + return wrapper.vm + .$nextTick() + .then(() => { + findBackButton().trigger('click'); + return wrapper.vm.$nextTick(); + }) + .then(() => { + findForwardButton().trigger('click'); + return wrapper.vm.$nextTick(); + }) + .then(() => { + expect(findForwardButton().attributes('disabled')).toBe('disabled'); + }); }); - it('sets currentBrowsingIndex to null is currentBrowsingIndex is 1', () => { - expect(vm.currentBrowsingIndex).toBe(null); - }); - }); - - describe('forward', () => { - it('calls visitPath with first entry in forwardNavigationStack', () => { - jest.spyOn(vm, 'visitPath').mockReturnValue(); - - vm.forwardNavigationStack.push('/test'); - vm.forwardNavigationStack.push('/test2'); + it('updates manager iframe src', () => { + listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` }); + listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url2` }); + return wrapper.vm.$nextTick().then(() => { + findBackButton().trigger('click'); - vm.forward(); - - expect(vm.visitPath).toHaveBeenCalledWith('/test'); + expect(manager.iframe.src).toBe(`${TEST_HOST}/url1`); + }); }); }); - describe('refresh', () => { - it('calls refresh with current path', () => { - jest.spyOn(vm, 'visitPath').mockReturnValue(); - - vm.path = '/test'; - - vm.refresh(); - - expect(vm.visitPath).toHaveBeenCalledWith('/test'); + describe('refresh button', () => { + const url = `${TEST_HOST}/some_url`; + beforeEach(() => { + listenHandler({ type: 'done' }); + listenHandler({ type: 'urlchange', url }); + return wrapper.vm.$nextTick(); }); - }); - describe('visitPath', () => { - it('updates iframe src with passed in path', () => { - vm.visitPath('/testpath'); + it('calls refresh with current path', () => { + manager.iframe.src = 'something-other'; + findRefreshButton().trigger('click'); - expect(manager.iframe.src).toBe(`${TEST_HOST}/testpath`); + expect(manager.iframe.src).toBe(url); }); }); }); |