Commit 31a5664d authored by Illya Klymov's avatar Illya Klymov

Merge branch 'feature/230726-repo-tabs' into 'master'

Add GlTabs to app/assets/javascripts/ide/components/repo_tabs.vue

See merge request gitlab-org/gitlab!42162
parents 91e33a9d a00fea40
<script>
import { GlIcon } from '@gitlab/ui';
import { GlIcon, GlTab } from '@gitlab/ui';
import { mapActions, mapGetters } from 'vuex';
import { __, sprintf } from '~/locale';
......@@ -13,6 +13,7 @@ export default {
FileIcon,
GlIcon,
ChangedFileIcon,
GlTab,
},
props: {
tab: {
......@@ -71,29 +72,30 @@ export default {
</script>
<template>
<li
:class="{
active: tab.active,
disabled: tab.pending,
}"
<gl-tab
:active="tab.active"
:disabled="tab.pending"
:title="tab.name"
@click="clickFile(tab)"
@mouseover="mouseOverTab"
@mouseout="mouseOutTab"
>
<div :title="getUrlForPath(tab.path)" class="multi-file-tab">
<file-icon :file-name="tab.name" :size="16" />
{{ tab.name }}
<file-status-icon :file="tab" />
</div>
<button
:aria-label="closeLabel"
:disabled="tab.pending"
type="button"
class="multi-file-tab-close"
@click.stop.prevent="closeFile(tab)"
>
<gl-icon v-if="!showChangedIcon" :size="12" name="close" />
<changed-file-icon v-else :file="tab" />
</button>
</li>
<template #title>
<div :title="getUrlForPath(tab.path)" class="multi-file-tab">
<file-icon :file-name="tab.name" :size="16" />
{{ tab.name }}
<file-status-icon :file="tab" />
</div>
<button
:aria-label="closeLabel"
:disabled="tab.pending"
type="button"
class="multi-file-tab-close"
@click.stop.prevent="closeFile(tab)"
>
<gl-icon v-if="!showChangedIcon" :size="12" name="close" />
<changed-file-icon v-else :file="tab" />
</button>
</template>
</gl-tab>
</template>
<script>
import { GlTabs } from '@gitlab/ui';
import { mapActions, mapGetters } from 'vuex';
import RepoTab from './repo_tab.vue';
export default {
components: {
RepoTab,
GlTabs,
},
props: {
activeFile: {
......@@ -42,8 +44,8 @@ export default {
<template>
<div class="multi-file-tabs">
<ul ref="tabsScroller" class="list-unstyled gl-mb-0">
<gl-tabs>
<repo-tab v-for="tab in files" :key="tab.key" :tab="tab" />
</ul>
</gl-tabs>
</div>
</template>
---
title: convert to GlTabs in app/assets/javascripts/ide/components/repo_tabs.vue
merge_request: 42162
author: Brandon Everett
type: added
import { GlTab } from '@gitlab/ui';
import { mount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import { stubComponent } from 'helpers/stub_component';
import RepoTab from '~/ide/components/repo_tab.vue';
import { createRouter } from '~/ide/ide_router';
import { createStore } from '~/ide/stores';
......@@ -8,16 +10,25 @@ import { file } from '../helpers';
const localVue = createLocalVue();
localVue.use(Vuex);
const GlTabStub = stubComponent(GlTab, {
template: '<li><slot name="title" /></li>',
});
describe('RepoTab', () => {
let wrapper;
let store;
let router;
const findTab = () => wrapper.find(GlTabStub);
function createComponent(propsData) {
wrapper = mount(RepoTab, {
localVue,
store,
propsData,
stubs: {
GlTab: GlTabStub,
},
});
}
......@@ -55,7 +66,7 @@ describe('RepoTab', () => {
jest.spyOn(wrapper.vm, 'openPendingTab').mockImplementation(() => {});
await wrapper.trigger('click');
await findTab().vm.$emit('click');
expect(wrapper.vm.openPendingTab).not.toHaveBeenCalled();
});
......@@ -67,7 +78,7 @@ describe('RepoTab', () => {
jest.spyOn(wrapper.vm, 'clickFile').mockImplementation(() => {});
wrapper.trigger('click');
findTab().vm.$emit('click');
expect(wrapper.vm.clickFile).toHaveBeenCalledWith(wrapper.vm.tab);
});
......@@ -91,11 +102,11 @@ describe('RepoTab', () => {
tab,
});
await wrapper.trigger('mouseover');
await findTab().vm.$emit('mouseover');
expect(wrapper.find('.file-modified').exists()).toBe(false);
await wrapper.trigger('mouseout');
await findTab().vm.$emit('mouseout');
expect(wrapper.find('.file-modified').exists()).toBe(true);
});
......
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