diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-09 06:08:34 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-09 06:08:34 +0300 |
commit | 37e1f8c80ec35e6833b0da7ac2f604ca67c91a17 (patch) | |
tree | 44baebb10fc8171a8dbcebfed83f37baadf572cf /spec | |
parent | 2cd1de3e03635878017037afc4e82f2ddb7ab8ad (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec')
4 files changed, 119 insertions, 209 deletions
diff --git a/spec/frontend/ide/components/nav_dropdown_button_spec.js b/spec/frontend/ide/components/nav_dropdown_button_spec.js index 1c14685df68..8eebcdd9e08 100644 --- a/spec/frontend/ide/components/nav_dropdown_button_spec.js +++ b/spec/frontend/ide/components/nav_dropdown_button_spec.js @@ -1,81 +1,74 @@ -import Vue, { nextTick } from 'vue'; import { trimText } from 'helpers/text_helper'; -import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; import NavDropdownButton from '~/ide/components/nav_dropdown_button.vue'; import { createStore } from '~/ide/stores'; +import { __ } from '~/locale'; -describe('NavDropdown', () => { +describe('NavDropdownButton component', () => { const TEST_BRANCH_ID = 'lorem-ipsum-dolar'; const TEST_MR_ID = '12345'; - let store; - let vm; - - beforeEach(() => { - store = createStore(); - }); + let wrapper; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); - const createComponent = (props = {}) => { - vm = mountComponentWithStore(Vue.extend(NavDropdownButton), { props, store }); - vm.$mount(); + const createComponent = ({ props = {}, state = {} } = {}) => { + const store = createStore(); + store.replaceState(state); + wrapper = mountExtended(NavDropdownButton, { propsData: props, store }); }; - const findIcon = (name) => vm.$el.querySelector(`[data-testid="${name}-icon"]`); - const findMRIcon = () => findIcon('merge-request'); - const findBranchIcon = () => findIcon('branch'); + const findMRIcon = () => wrapper.findByLabelText(__('Merge request')); + const findBranchIcon = () => wrapper.findByLabelText(__('Current Branch')); describe('normal', () => { - beforeEach(() => { + it('renders empty placeholders, if state is falsey', () => { createComponent(); - }); - it('renders empty placeholders, if state is falsey', () => { - expect(trimText(vm.$el.textContent)).toEqual('- -'); + expect(trimText(wrapper.text())).toBe('- -'); }); - it('renders branch name, if state has currentBranchId', async () => { - vm.$store.state.currentBranchId = TEST_BRANCH_ID; + it('renders branch name, if state has currentBranchId', () => { + createComponent({ state: { currentBranchId: TEST_BRANCH_ID } }); - await nextTick(); - expect(trimText(vm.$el.textContent)).toEqual(`${TEST_BRANCH_ID} -`); + expect(trimText(wrapper.text())).toBe(`${TEST_BRANCH_ID} -`); }); - it('renders mr id, if state has currentMergeRequestId', async () => { - vm.$store.state.currentMergeRequestId = TEST_MR_ID; + it('renders mr id, if state has currentMergeRequestId', () => { + createComponent({ state: { currentMergeRequestId: TEST_MR_ID } }); - await nextTick(); - expect(trimText(vm.$el.textContent)).toEqual(`- !${TEST_MR_ID}`); + expect(trimText(wrapper.text())).toBe(`- !${TEST_MR_ID}`); }); - it('renders branch and mr, if state has both', async () => { - vm.$store.state.currentBranchId = TEST_BRANCH_ID; - vm.$store.state.currentMergeRequestId = TEST_MR_ID; + it('renders branch and mr, if state has both', () => { + createComponent({ + state: { currentBranchId: TEST_BRANCH_ID, currentMergeRequestId: TEST_MR_ID }, + }); - await nextTick(); - expect(trimText(vm.$el.textContent)).toEqual(`${TEST_BRANCH_ID} !${TEST_MR_ID}`); + expect(trimText(wrapper.text())).toBe(`${TEST_BRANCH_ID} !${TEST_MR_ID}`); }); it('shows icons', () => { - expect(findBranchIcon()).toBeTruthy(); - expect(findMRIcon()).toBeTruthy(); + createComponent(); + + expect(findBranchIcon().exists()).toBe(true); + expect(findMRIcon().exists()).toBe(true); }); }); - describe('with showMergeRequests false', () => { + describe('when showMergeRequests=false', () => { beforeEach(() => { - createComponent({ showMergeRequests: false }); + createComponent({ props: { showMergeRequests: false } }); }); it('shows single empty placeholder, if state is falsey', () => { - expect(trimText(vm.$el.textContent)).toEqual('-'); + expect(trimText(wrapper.text())).toBe('-'); }); it('shows only branch icon', () => { - expect(findBranchIcon()).toBeTruthy(); - expect(findMRIcon()).toBe(null); + expect(findBranchIcon().exists()).toBe(true); + expect(findMRIcon().exists()).toBe(false); }); }); }); diff --git a/spec/frontend/notebook/cells/code_spec.js b/spec/frontend/notebook/cells/code_spec.js index 9a2db061278..10762a1c3a2 100644 --- a/spec/frontend/notebook/cells/code_spec.js +++ b/spec/frontend/notebook/cells/code_spec.js @@ -1,89 +1,73 @@ -import Vue, { nextTick } from 'vue'; +import { mount } from '@vue/test-utils'; import fixture from 'test_fixtures/blob/notebook/basic.json'; -import CodeComponent from '~/notebook/cells/code.vue'; - -const Component = Vue.extend(CodeComponent); +import Code from '~/notebook/cells/code.vue'; describe('Code component', () => { - let vm; - + let wrapper; let json; + const mountComponent = (cell) => mount(Code, { propsData: { cell } }); + beforeEach(() => { // Clone fixture as it could be modified by tests json = JSON.parse(JSON.stringify(fixture)); }); - const setupComponent = (cell) => { - const comp = new Component({ - propsData: { - cell, - }, - }); - comp.$mount(); - return comp; - }; + afterEach(() => { + wrapper.destroy(); + }); describe('without output', () => { beforeEach(() => { - vm = setupComponent(json.cells[0]); - - return nextTick(); + wrapper = mountComponent(json.cells[0]); }); it('does not render output prompt', () => { - expect(vm.$el.querySelectorAll('.prompt').length).toBe(1); + expect(wrapper.findAll('.prompt')).toHaveLength(1); }); }); describe('with output', () => { beforeEach(() => { - vm = setupComponent(json.cells[2]); - - return nextTick(); + wrapper = mountComponent(json.cells[2]); }); it('does not render output prompt', () => { - expect(vm.$el.querySelectorAll('.prompt').length).toBe(2); + expect(wrapper.findAll('.prompt')).toHaveLength(2); }); it('renders output cell', () => { - expect(vm.$el.querySelector('.output')).toBeDefined(); + expect(wrapper.find('.output').exists()).toBe(true); }); }); describe('with string for output', () => { // NBFormat Version 4.1 allows outputs.text to be a string - beforeEach(async () => { + beforeEach(() => { const cell = json.cells[2]; cell.outputs[0].text = cell.outputs[0].text.join(''); - vm = setupComponent(cell); - await nextTick(); + wrapper = mountComponent(cell); }); it('does not render output prompt', () => { - expect(vm.$el.querySelectorAll('.prompt').length).toBe(2); + expect(wrapper.findAll('.prompt')).toHaveLength(2); }); it('renders output cell', () => { - expect(vm.$el.querySelector('.output')).toBeDefined(); + expect(wrapper.find('.output').exists()).toBe(true); }); }); describe('with string for cell.source', () => { - beforeEach(async () => { + beforeEach(() => { const cell = json.cells[0]; cell.source = cell.source.join(''); - - vm = setupComponent(cell); - await nextTick(); + wrapper = mountComponent(cell); }); it('renders the same input as when cell.source is an array', () => { - const expected = "console.log('test')"; - - expect(vm.$el.querySelector('.input').innerText).toContain(expected); + expect(wrapper.find('.input').text()).toContain("console.log('test')"); }); }); }); diff --git a/spec/frontend/notebook/cells/output/index_spec.js b/spec/frontend/notebook/cells/output/index_spec.js index 8e04e4c146c..4d1d03e5e34 100644 --- a/spec/frontend/notebook/cells/output/index_spec.js +++ b/spec/frontend/notebook/cells/output/index_spec.js @@ -1,36 +1,35 @@ -import Vue, { nextTick } from 'vue'; +import { mount } from '@vue/test-utils'; import json from 'test_fixtures/blob/notebook/basic.json'; -import CodeComponent from '~/notebook/cells/output/index.vue'; - -const Component = Vue.extend(CodeComponent); +import Output from '~/notebook/cells/output/index.vue'; describe('Output component', () => { - let vm; + let wrapper; const createComponent = (output) => { - vm = new Component({ + wrapper = mount(Output, { propsData: { outputs: [].concat(output), count: 1, }, }); - vm.$mount(); }; + afterEach(() => { + wrapper.destroy(); + }); + describe('text output', () => { beforeEach(() => { const textType = json.cells[2]; createComponent(textType.outputs[0]); - - return nextTick(); }); it('renders as plain text', () => { - expect(vm.$el.querySelector('pre')).not.toBeNull(); + expect(wrapper.find('pre').exists()).toBe(true); }); it('renders prompt', () => { - expect(vm.$el.querySelector('.prompt span')).not.toBeNull(); + expect(wrapper.find('.prompt span').exists()).toBe(true); }); }); @@ -38,12 +37,10 @@ describe('Output component', () => { beforeEach(() => { const imageType = json.cells[3]; createComponent(imageType.outputs[0]); - - return nextTick(); }); it('renders as an image', () => { - expect(vm.$el.querySelector('img')).not.toBeNull(); + expect(wrapper.find('img').exists()).toBe(true); }); }); @@ -52,16 +49,15 @@ describe('Output component', () => { const htmlType = json.cells[4]; createComponent(htmlType.outputs[0]); - expect(vm.$el.querySelector('p')).not.toBeNull(); - expect(vm.$el.querySelectorAll('p')).toHaveLength(1); - expect(vm.$el.textContent.trim()).toContain('test'); + expect(wrapper.findAll('p')).toHaveLength(1); + expect(wrapper.text()).toContain('test'); }); it('renders multiple raw HTML outputs', () => { const htmlType = json.cells[4]; createComponent([htmlType.outputs[0], htmlType.outputs[0]]); - expect(vm.$el.querySelectorAll('p')).toHaveLength(2); + expect(wrapper.findAll('p')).toHaveLength(2); }); }); @@ -77,7 +73,7 @@ describe('Output component', () => { }; createComponent(output); - expect(vm.$el.querySelector('.MathJax')).not.toBeNull(); + expect(wrapper.find('.MathJax').exists()).toBe(true); }); }); @@ -85,12 +81,10 @@ describe('Output component', () => { beforeEach(() => { const svgType = json.cells[5]; createComponent(svgType.outputs[0]); - - return nextTick(); }); it('renders as an svg', () => { - expect(vm.$el.querySelector('svg')).not.toBeNull(); + expect(wrapper.find('svg').exists()).toBe(true); }); }); @@ -98,27 +92,23 @@ describe('Output component', () => { beforeEach(() => { const unknownType = json.cells[6]; createComponent(unknownType.outputs[0]); - - return nextTick(); }); it('renders as plain text', () => { - expect(vm.$el.querySelector('pre')).not.toBeNull(); - expect(vm.$el.textContent.trim()).toContain('testing'); + expect(wrapper.find('pre').exists()).toBe(true); + expect(wrapper.text()).toContain('testing'); }); - it('renders promot', () => { - expect(vm.$el.querySelector('.prompt span')).not.toBeNull(); + it('renders prompt', () => { + expect(wrapper.find('.prompt span').exists()).toBe(true); }); - it("renders as plain text when doesn't recognise other types", async () => { + it("renders as plain text when doesn't recognise other types", () => { const unknownType = json.cells[7]; createComponent(unknownType.outputs[0]); - await nextTick(); - - expect(vm.$el.querySelector('pre')).not.toBeNull(); - expect(vm.$el.textContent.trim()).toContain('testing'); + expect(wrapper.find('pre').exists()).toBe(true); + expect(wrapper.text()).toContain('testing'); }); }); }); diff --git a/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js index d0fa8b8dacb..16f924b44d8 100644 --- a/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js +++ b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js @@ -1,11 +1,9 @@ import { mount } from '@vue/test-utils'; -import Vue, { nextTick } from 'vue'; -import { compileToFunctions } from 'vue-template-compiler'; - +import { nextTick } from 'vue'; import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants'; -import imageDiffViewer from '~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue'; +import ImageDiffViewer from '~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue'; -describe('ImageDiffViewer', () => { +describe('ImageDiffViewer component', () => { const requiredProps = { diffMode: 'replaced', newPath: GREEN_BOX_IMAGE_URL, @@ -17,15 +15,12 @@ describe('ImageDiffViewer', () => { newSize: 1024, }; let wrapper; - let vm; - function createComponent(props) { - const ImageDiffViewer = Vue.extend(imageDiffViewer); - wrapper = mount(ImageDiffViewer, { propsData: props }); - vm = wrapper.vm; - } + const createComponent = (props, slots) => { + wrapper = mount(ImageDiffViewer, { propsData: props, slots }); + }; - const triggerEvent = (eventName, el = vm.$el, clientX = 0) => { + const triggerEvent = (eventName, el = wrapper.$el, clientX = 0) => { const event = new MouseEvent(eventName, { bubbles: true, cancelable: true, @@ -51,128 +46,76 @@ describe('ImageDiffViewer', () => { wrapper.destroy(); }); - it('renders image diff for replaced', async () => { - createComponent({ ...allProps }); - - await nextTick(); - const metaInfoElements = vm.$el.querySelectorAll('.image-info'); - - expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL); - - expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(RED_BOX_IMAGE_URL); - - expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe('2-up'); - expect(vm.$el.querySelector('.view-modes-menu li:nth-child(2)').textContent.trim()).toBe( - 'Swipe', - ); - - expect(vm.$el.querySelector('.view-modes-menu li:nth-child(3)').textContent.trim()).toBe( - 'Onion skin', - ); - - expect(metaInfoElements.length).toBe(2); - expect(metaInfoElements[0]).toHaveText('2.00 KiB'); - expect(metaInfoElements[1]).toHaveText('1.00 KiB'); + it('renders image diff for replaced', () => { + createComponent(allProps); + const metaInfoElements = wrapper.findAll('.image-info'); + + expect(wrapper.find('.added img').attributes('src')).toBe(GREEN_BOX_IMAGE_URL); + expect(wrapper.find('.deleted img').attributes('src')).toBe(RED_BOX_IMAGE_URL); + expect(wrapper.find('.view-modes-menu li.active').text()).toBe('2-up'); + expect(wrapper.find('.view-modes-menu li:nth-child(2)').text()).toBe('Swipe'); + expect(wrapper.find('.view-modes-menu li:nth-child(3)').text()).toBe('Onion skin'); + expect(metaInfoElements).toHaveLength(2); + expect(metaInfoElements.at(0).text()).toBe('2.00 KiB'); + expect(metaInfoElements.at(1).text()).toBe('1.00 KiB'); }); - it('renders image diff for new', async () => { + it('renders image diff for new', () => { createComponent({ ...allProps, diffMode: 'new', oldPath: '' }); - await nextTick(); - - const metaInfoElement = vm.$el.querySelector('.image-info'); - - expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL); - expect(metaInfoElement).toHaveText('1.00 KiB'); + expect(wrapper.find('.added img').attributes('src')).toBe(GREEN_BOX_IMAGE_URL); + expect(wrapper.find('.image-info').text()).toBe('1.00 KiB'); }); - it('renders image diff for deleted', async () => { + it('renders image diff for deleted', () => { createComponent({ ...allProps, diffMode: 'deleted', newPath: '' }); - await nextTick(); - - const metaInfoElement = vm.$el.querySelector('.image-info'); - - expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(RED_BOX_IMAGE_URL); - expect(metaInfoElement).toHaveText('2.00 KiB'); + expect(wrapper.find('.deleted img').attributes('src')).toBe(RED_BOX_IMAGE_URL); + expect(wrapper.find('.image-info').text()).toBe('2.00 KiB'); }); - it('renders image diff for renamed', async () => { - vm = new Vue({ - components: { - imageDiffViewer, - }, - data() { - return { - ...allProps, - diffMode: 'renamed', - }; - }, - ...compileToFunctions(` - <image-diff-viewer - :diff-mode="diffMode" - :new-path="newPath" - :old-path="oldPath" - :new-size="newSize" - :old-size="oldSize" - > - <template #image-overlay> - <span class="overlay">test</span> - </template> - </image-diff-viewer> - `), - }).$mount(); - - await nextTick(); - - const metaInfoElement = vm.$el.querySelector('.image-info'); - - expect(vm.$el.querySelector('img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL); - expect(vm.$el.querySelector('.overlay')).not.toBe(null); - - expect(metaInfoElement).toHaveText('2.00 KiB'); + it('renders image diff for renamed', () => { + createComponent( + { ...allProps, diffMode: 'renamed' }, + { 'image-overlay': '<span class="overlay">test</span>' }, + ); + + expect(wrapper.find('img').attributes('src')).toBe(GREEN_BOX_IMAGE_URL); + expect(wrapper.find('.overlay').exists()).toBe(true); + expect(wrapper.find('.image-info').text()).toBe('2.00 KiB'); }); describe('swipeMode', () => { beforeEach(() => { - createComponent({ ...requiredProps }); - - return nextTick(); + createComponent(requiredProps); }); it('switches to Swipe Mode', async () => { - vm.$el.querySelector('.view-modes-menu li:nth-child(2)').click(); + await wrapper.find('.view-modes-menu li:nth-child(2)').trigger('click'); - await nextTick(); - expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe('Swipe'); + expect(wrapper.find('.view-modes-menu li.active').text()).toBe('Swipe'); }); }); describe('onionSkin', () => { beforeEach(() => { createComponent({ ...requiredProps }); - - return nextTick(); }); it('switches to Onion Skin Mode', async () => { - vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click(); + await wrapper.find('.view-modes-menu li:nth-child(3)').trigger('click'); - await nextTick(); - expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe( - 'Onion skin', - ); + expect(wrapper.find('.view-modes-menu li.active').text()).toBe('Onion skin'); }); it('has working drag handler', async () => { - vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click(); + await wrapper.find('.view-modes-menu li:nth-child(3)').trigger('click'); + dragSlider(wrapper.find('.dragger').element, document, 20); await nextTick(); - dragSlider(vm.$el.querySelector('.dragger'), document, 20); - await nextTick(); - expect(vm.$el.querySelector('.dragger').style.left).toBe('20px'); - expect(vm.$el.querySelector('.added.frame').style.opacity).toBe('0.2'); + expect(wrapper.find('.dragger').attributes('style')).toBe('left: 20px;'); + expect(wrapper.find('.added.frame').attributes('style')).toBe('opacity: 0.2;'); }); }); }); |