Skip to content

G
gitlab-ce
Commit dff68009 authored by Paul Gascou-Vaillancourt's avatar Paul Gascou-Vaillancourt Committed by Jose Ivan Vargas
Browse files
Options

Convert repo tab specs to VTU 

Migrated repo tab specs to Vue Test Utils' API
parent 3d9f7a44
Hide whitespace changes
Inline Side-by-side
Showing with 56 additions and 76 deletions
spec/frontend/ide/components/repo_tab_spec.js
View file @ dff68009
import Vue from 'vue'; import { mount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import { createStore } from '~/ide/stores'; import { createStore } from '~/ide/stores';
import repoTab from '~/ide/components/repo_tab.vue'; import RepoTab from '~/ide/components/repo_tab.vue';
import { createRouter } from '~/ide/ide_router'; import { createRouter } from '~/ide/ide_router';
import { file } from '../helpers'; import { file } from '../helpers';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('RepoTab', () => { describe('RepoTab', () => {
let vm; let wrapper;
let store; let store;
let router; let router;
function createComponent(propsData) { function createComponent(propsData) {
const RepoTab = Vue.extend(repoTab); wrapper = mount(RepoTab, {
localVue,
return new RepoTab({
store, store,
propsData, propsData,
}).$mount(); });
} }
beforeEach(() => { beforeEach(() => {
...@@ -25,23 +28,24 @@ describe('RepoTab', () => { ...@@ -25,23 +28,24 @@ describe('RepoTab', () => {
}); });
afterEach(() => { afterEach(() => {
vm.$destroy(); wrapper.destroy();
wrapper = null;
}); });
it('renders a close link and a name link', () => { it('renders a close link and a name link', () => {
vm = createComponent({ createComponent({
tab: file(), tab: file(),
}); });
vm.$store.state.openFiles.push(vm.tab); wrapper.vm.$store.state.openFiles.push(wrapper.vm.tab);
const close = vm.$el.querySelector('.multi-file-tab-close'); const close = wrapper.find('.multi-file-tab-close');
const name = vm.$el.querySelector(`[title]`); const name = wrapper.find(`[title]`);
expect(close.innerHTML).toContain('#close'); expect(close.html()).toContain('#close');
expect(name.textContent.trim()).toEqual(vm.tab.name); expect(name.text().trim()).toEqual(wrapper.vm.tab.name);
}); });
it('does not call openPendingTab when tab is active', done => { it('does not call openPendingTab when tab is active', async () => {
vm = createComponent({ createComponent({
tab: { tab: {
...file(), ...file(),
pending: true, pending: true,
...@@ -49,63 +53,51 @@ describe('RepoTab', () => { ...@@ -49,63 +53,51 @@ describe('RepoTab', () => {
}, },
}); });
jest.spyOn(vm, 'openPendingTab').mockImplementation(() => {}); jest.spyOn(wrapper.vm, 'openPendingTab').mockImplementation(() => {});
vm.$el.click(); await wrapper.trigger('click');
vm.$nextTick(() => { expect(wrapper.vm.openPendingTab).not.toHaveBeenCalled();
expect(vm.openPendingTab).not.toHaveBeenCalled();
done();
});
}); });
it('fires clickFile when the link is clicked', () => { it('fires clickFile when the link is clicked', () => {
vm = createComponent({ createComponent({
tab: file(), tab: file(),
}); });
jest.spyOn(vm, 'clickFile').mockImplementation(() => {}); jest.spyOn(wrapper.vm, 'clickFile').mockImplementation(() => {});
vm.$el.click(); wrapper.trigger('click');
expect(vm.clickFile).toHaveBeenCalledWith(vm.tab); expect(wrapper.vm.clickFile).toHaveBeenCalledWith(wrapper.vm.tab);
}); });
it('calls closeFile when clicking close button', () => { it('calls closeFile when clicking close button', () => {
vm = createComponent({ createComponent({
tab: file(), tab: file(),
}); });
jest.spyOn(vm, 'closeFile').mockImplementation(() => {}); jest.spyOn(wrapper.vm, 'closeFile').mockImplementation(() => {});
vm.$el.querySelector('.multi-file-tab-close').click(); wrapper.find('.multi-file-tab-close').trigger('click');
expect(vm.closeFile).toHaveBeenCalledWith(vm.tab); expect(wrapper.vm.closeFile).toHaveBeenCalledWith(wrapper.vm.tab);
}); });
it('changes icon on hover', done => { it('changes icon on hover', async () => {
const tab = file(); const tab = file();
tab.changed = true; tab.changed = true;
vm = createComponent({ createComponent({
tab, tab,
}); });
vm.$el.dispatchEvent(new Event('mouseover')); await wrapper.trigger('mouseover');
Vue.nextTick() expect(wrapper.find('.file-modified').exists()).toBe(false);
.then(() => {
expect(vm.$el.querySelector('.file-modified')).toBeNull();
vm.$el.dispatchEvent(new Event('mouseout')); await wrapper.trigger('mouseout');
})
.then(Vue.nextTick)
.then(() => {
expect(vm.$el.querySelector('.file-modified')).not.toBeNull();
done(); expect(wrapper.find('.file-modified').exists()).toBe(true);
})
.catch(done.fail);
}); });
describe('locked file', () => { describe('locked file', () => {
...@@ -120,21 +112,17 @@ describe('RepoTab', () => { ...@@ -120,21 +112,17 @@ describe('RepoTab', () => {
}, },
}; };
vm = createComponent({ createComponent({
tab: f, tab: f,
}); });
}); });
afterEach(() => {
vm.$destroy();
});
it('renders lock icon', () => { it('renders lock icon', () => {
expect(vm.$el.querySelector('.file-status-icon')).not.toBeNull(); expect(wrapper.find('.file-status-icon')).not.toBeNull();
}); });
it('renders a tooltip', () => { it('renders a tooltip', () => {
expect(vm.$el.querySelector('span:nth-child(2)').dataset.originalTitle).toContain( expect(wrapper.find('span:nth-child(2)').attributes('data-original-title')).toContain(
'Locked by testuser', 'Locked by testuser',
); );
}); });
...@@ -142,45 +130,37 @@ describe('RepoTab', () => { ...@@ -142,45 +130,37 @@ describe('RepoTab', () => {
describe('methods', () => { describe('methods', () => {
describe('closeTab', () => { describe('closeTab', () => {
it('closes tab if file has changed', done => { it('closes tab if file has changed', async () => {
const tab = file(); const tab = file();
tab.changed = true; tab.changed = true;
tab.opened = true; tab.opened = true;
vm = createComponent({ createComponent({
tab, tab,
}); });
vm.$store.state.openFiles.push(tab); wrapper.vm.$store.state.openFiles.push(tab);
vm.$store.state.changedFiles.push(tab); wrapper.vm.$store.state.changedFiles.push(tab);
vm.$store.state.entries[tab.path] = tab; wrapper.vm.$store.state.entries[tab.path] = tab;
vm.$store.dispatch('setFileActive', tab.path); wrapper.vm.$store.dispatch('setFileActive', tab.path);
vm.$el.querySelector('.multi-file-tab-close').click();
vm.$nextTick(() => { await wrapper.find('.multi-file-tab-close').trigger('click');
expect(tab.opened).toBeFalsy();
expect(vm.$store.state.changedFiles.length).toBe(1);
done(); expect(tab.opened).toBeFalsy();
}); expect(wrapper.vm.$store.state.changedFiles).toHaveLength(1);
}); });
it('closes tab when clicking close btn', done => { it('closes tab when clicking close btn', async () => {
const tab = file('lose'); const tab = file('lose');
tab.opened = true; tab.opened = true;
vm = createComponent({ createComponent({
tab, tab,
}); });
vm.$store.state.openFiles.push(tab); wrapper.vm.$store.state.openFiles.push(tab);
vm.$store.state.entries[tab.path] = tab; wrapper.vm.$store.state.entries[tab.path] = tab;
vm.$store.dispatch('setFileActive', tab.path); wrapper.vm.$store.dispatch('setFileActive', tab.path);
vm.$el.querySelector('.multi-file-tab-close').click(); await wrapper.find('.multi-file-tab-close').trigger('click');
vm.$nextTick(() => { expect(tab.opened).toBeFalsy();
expect(tab.opened).toBeFalsy();
done();
});
}); });
}); });
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7