debian-mirror-gitlab/spec/frontend/ide/components/repo_tab_spec.js

189 lines
4.7 KiB
JavaScript
Raw Normal View History

2021-04-17 20:07:23 +05:30
import { GlTab } from '@gitlab/ui';
2020-11-24 15:15:51 +05:30
import { mount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
2021-04-17 20:07:23 +05:30
import { stubComponent } from 'helpers/stub_component';
2020-11-24 15:15:51 +05:30
import RepoTab from '~/ide/components/repo_tab.vue';
2020-06-23 00:09:42 +05:30
import { createRouter } from '~/ide/ide_router';
2021-03-11 19:13:27 +05:30
import { createStore } from '~/ide/stores';
2020-06-23 00:09:42 +05:30
import { file } from '../helpers';
2018-05-09 12:01:36 +05:30
2020-11-24 15:15:51 +05:30
const localVue = createLocalVue();
localVue.use(Vuex);
2021-04-17 20:07:23 +05:30
const GlTabStub = stubComponent(GlTab, {
template: '<li><slot name="title" /></li>',
});
2018-05-09 12:01:36 +05:30
describe('RepoTab', () => {
2020-11-24 15:15:51 +05:30
let wrapper;
2020-06-23 00:09:42 +05:30
let store;
let router;
2018-05-09 12:01:36 +05:30
2021-04-17 20:07:23 +05:30
const findTab = () => wrapper.find(GlTabStub);
2018-05-09 12:01:36 +05:30
function createComponent(propsData) {
2020-11-24 15:15:51 +05:30
wrapper = mount(RepoTab, {
localVue,
2018-05-09 12:01:36 +05:30
store,
propsData,
2021-04-17 20:07:23 +05:30
stubs: {
GlTab: GlTabStub,
},
2020-11-24 15:15:51 +05:30
});
2018-05-09 12:01:36 +05:30
}
beforeEach(() => {
2020-06-23 00:09:42 +05:30
store = createStore();
router = createRouter(store);
2020-05-24 23:13:21 +05:30
jest.spyOn(router, 'push').mockImplementation(() => {});
2018-05-09 12:01:36 +05:30
});
afterEach(() => {
2020-11-24 15:15:51 +05:30
wrapper.destroy();
wrapper = null;
2018-05-09 12:01:36 +05:30
});
it('renders a close link and a name link', () => {
2020-11-24 15:15:51 +05:30
createComponent({
2018-05-09 12:01:36 +05:30
tab: file(),
});
2020-11-24 15:15:51 +05:30
wrapper.vm.$store.state.openFiles.push(wrapper.vm.tab);
const close = wrapper.find('.multi-file-tab-close');
const name = wrapper.find(`[title]`);
2018-05-09 12:01:36 +05:30
2020-11-24 15:15:51 +05:30
expect(close.html()).toContain('#close');
expect(name.text().trim()).toEqual(wrapper.vm.tab.name);
2018-05-09 12:01:36 +05:30
});
2020-11-24 15:15:51 +05:30
it('does not call openPendingTab when tab is active', async () => {
createComponent({
2018-11-08 19:23:39 +05:30
tab: {
...file(),
pending: true,
active: true,
},
});
2020-11-24 15:15:51 +05:30
jest.spyOn(wrapper.vm, 'openPendingTab').mockImplementation(() => {});
2018-11-08 19:23:39 +05:30
2021-04-17 20:07:23 +05:30
await findTab().vm.$emit('click');
2018-11-08 19:23:39 +05:30
2020-11-24 15:15:51 +05:30
expect(wrapper.vm.openPendingTab).not.toHaveBeenCalled();
2018-11-08 19:23:39 +05:30
});
2018-05-09 12:01:36 +05:30
it('fires clickFile when the link is clicked', () => {
2020-11-24 15:15:51 +05:30
createComponent({
2018-05-09 12:01:36 +05:30
tab: file(),
});
2020-11-24 15:15:51 +05:30
jest.spyOn(wrapper.vm, 'clickFile').mockImplementation(() => {});
2018-05-09 12:01:36 +05:30
2021-04-17 20:07:23 +05:30
findTab().vm.$emit('click');
2018-05-09 12:01:36 +05:30
2020-11-24 15:15:51 +05:30
expect(wrapper.vm.clickFile).toHaveBeenCalledWith(wrapper.vm.tab);
2018-05-09 12:01:36 +05:30
});
it('calls closeFile when clicking close button', () => {
2020-11-24 15:15:51 +05:30
createComponent({
2018-05-09 12:01:36 +05:30
tab: file(),
});
2020-11-24 15:15:51 +05:30
jest.spyOn(wrapper.vm, 'closeFile').mockImplementation(() => {});
2018-05-09 12:01:36 +05:30
2020-11-24 15:15:51 +05:30
wrapper.find('.multi-file-tab-close').trigger('click');
2018-05-09 12:01:36 +05:30
2020-11-24 15:15:51 +05:30
expect(wrapper.vm.closeFile).toHaveBeenCalledWith(wrapper.vm.tab);
2018-05-09 12:01:36 +05:30
});
2020-11-24 15:15:51 +05:30
it('changes icon on hover', async () => {
2018-05-09 12:01:36 +05:30
const tab = file();
tab.changed = true;
2020-11-24 15:15:51 +05:30
createComponent({
2018-05-09 12:01:36 +05:30
tab,
});
2021-04-17 20:07:23 +05:30
await findTab().vm.$emit('mouseover');
2018-05-09 12:01:36 +05:30
2020-11-24 15:15:51 +05:30
expect(wrapper.find('.file-modified').exists()).toBe(false);
2018-05-09 12:01:36 +05:30
2021-04-17 20:07:23 +05:30
await findTab().vm.$emit('mouseout');
2018-05-09 12:01:36 +05:30
2020-11-24 15:15:51 +05:30
expect(wrapper.find('.file-modified').exists()).toBe(true);
2018-05-09 12:01:36 +05:30
});
2021-01-29 00:20:46 +05:30
it.each`
tabProps | closeLabel
${{}} | ${'Close foo.txt'}
${{ changed: true }} | ${'foo.txt changed'}
`('close button has label ($closeLabel) with tab ($tabProps)', ({ tabProps, closeLabel }) => {
const tab = { ...file('foo.txt'), ...tabProps };
createComponent({ tab });
expect(wrapper.find('button').attributes('aria-label')).toBe(closeLabel);
});
2018-05-09 12:01:36 +05:30
describe('locked file', () => {
let f;
beforeEach(() => {
f = file('locked file');
f.file_lock = {
user: {
name: 'testuser',
updated_at: new Date(),
},
};
2020-11-24 15:15:51 +05:30
createComponent({
2018-05-09 12:01:36 +05:30
tab: f,
});
});
it('renders lock icon', () => {
2020-11-24 15:15:51 +05:30
expect(wrapper.find('.file-status-icon')).not.toBeNull();
2018-05-09 12:01:36 +05:30
});
it('renders a tooltip', () => {
2021-01-29 00:20:46 +05:30
expect(wrapper.find('span:nth-child(2)').attributes('title')).toBe('Locked by testuser');
2018-05-09 12:01:36 +05:30
});
});
describe('methods', () => {
describe('closeTab', () => {
2020-11-24 15:15:51 +05:30
it('closes tab if file has changed', async () => {
2018-05-09 12:01:36 +05:30
const tab = file();
tab.changed = true;
tab.opened = true;
2020-11-24 15:15:51 +05:30
createComponent({
2018-05-09 12:01:36 +05:30
tab,
});
2020-11-24 15:15:51 +05:30
wrapper.vm.$store.state.openFiles.push(tab);
wrapper.vm.$store.state.changedFiles.push(tab);
wrapper.vm.$store.state.entries[tab.path] = tab;
wrapper.vm.$store.dispatch('setFileActive', tab.path);
2018-05-09 12:01:36 +05:30
2020-11-24 15:15:51 +05:30
await wrapper.find('.multi-file-tab-close').trigger('click');
2018-05-09 12:01:36 +05:30
2020-11-24 15:15:51 +05:30
expect(tab.opened).toBeFalsy();
expect(wrapper.vm.$store.state.changedFiles).toHaveLength(1);
2018-05-09 12:01:36 +05:30
});
2020-11-24 15:15:51 +05:30
it('closes tab when clicking close btn', async () => {
2018-05-09 12:01:36 +05:30
const tab = file('lose');
tab.opened = true;
2020-11-24 15:15:51 +05:30
createComponent({
2018-05-09 12:01:36 +05:30
tab,
});
2020-11-24 15:15:51 +05:30
wrapper.vm.$store.state.openFiles.push(tab);
wrapper.vm.$store.state.entries[tab.path] = tab;
wrapper.vm.$store.dispatch('setFileActive', tab.path);
2018-05-09 12:01:36 +05:30
2020-11-24 15:15:51 +05:30
await wrapper.find('.multi-file-tab-close').trigger('click');
2018-05-09 12:01:36 +05:30
2020-11-24 15:15:51 +05:30
expect(tab.opened).toBeFalsy();
2018-05-09 12:01:36 +05:30
});
});
});
});