BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit e0cfc27c by Jacob Schatz
Options

Merge branch 'ide' of gitlab.com:gitlab-org/gitlab-ce into ide

parents a1adb794 dc5e7f3e
Showing with 180 additions and 202 deletions
app/assets/javascripts/api.js
......@@ -103,16 +103,15 @@ const Api = {
return $.ajax({
url,
headers: {
'PRIVATE_TOKEN': token,
PRIVATE_TOKEN: token,
},
type: 'POST',
contentType: "application/json; charset=utf-8",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data),
dataType: 'json',
})
.done(commitData => callback(commitData))
.fail(message => callback(message.responseJSON));
},
// Return text for a specific license
......
app/assets/javascripts/project.js
......@@ -77,7 +77,7 @@ import Cookies from 'js-cookie';
},
dataType: "json"
}).done(function(refs) {
console.log(refs)
console.log(refs);
return callback(refs);
});
},
......
app/assets/javascripts/repo/index.js
......@@ -19,12 +19,12 @@ function initRepo() {
Store.service.url = repo.dataset.url;
Store.projectName = repo.dataset.projectName;
Store.service.refsUrl = repo.dataset.refsUrl;
Store.currentBranch = $("button.dropdown-menu-toggle").attr('data-ref');
Store.currentBranch = $('button.dropdown-menu-toggle').attr('data-ref');
Store.checkIsCommitable();
Store.projectId = repo.dataset.projectId;
Store.tempPrivateToken = repo.dataset.tempToken;
new Vue({
this.vm = new Vue({
el: repo,
data: () => Store,
template: `
......@@ -45,7 +45,7 @@ function initRepo() {
'repo-file-buttons': RepoFileButtons,
'repo-binary-viewer': RepoBinaryViewer,
'repo-editor': RepoEditor,
'repo-commit-section': RepoCommitSection
'repo-commit-section': RepoCommitSection,
},
});
......
app/assets/javascripts/repo/repo_binary_viewer.vue
<script>
import Vue from 'vue';
import Store from './repo_store';
import RepoHelper from './repo_helper';
......
app/assets/javascripts/repo/repo_commit_section.vue
<script>
import Vue from 'vue';
/* global Flash */
import Store from './repo_store';
import Api from '../api'
import Api from '../api';
const RepoCommitSection = {
data: () => Store,
methods: {
makeCommit() {
// see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
const branch = $("button.dropdown-menu-toggle").attr('data-ref');
const branch = $('button.dropdown-menu-toggle').attr('data-ref');
const commitMessage = this.commitMessage;
const actions = this.changedFiles.map(f => {
const filePath = f.url.split(branch)[1];
return {
action: 'update',
file_path: filePath,
content: f.newContent,
};
const actions = this.changedFiles.map((f) => {
const filePath = f.url.split(branch)[1];
return {
action: 'update',
file_path: filePath,
content: f.newContent,
};
});
const payload = {
branch: branch,
branch,
commit_message: commitMessage,
actions: actions,
}
actions,
};
Store.submitCommitsLoading = true;
Api.commitMultiple(Store.projectId, payload, (data) => {
Store.submitCommitsLoading = false;
......@@ -36,7 +36,7 @@ const RepoCommitSection = {
this.editMode = false;
$('html, body').animate({ scrollTop: 0 }, 'fast');
}, Store.tempPrivateToken);
}
},
},
computed: {
......@@ -46,7 +46,7 @@ const RepoCommitSection = {
return changedFileList;
},
},
}
};
export default RepoCommitSection;
</script>
......@@ -59,7 +59,7 @@ export default RepoCommitSection;
<label class="col-md-4 control-label">Staged files ({{changedFiles.length}})</label>
<div class="col-md-4">
<ul class="list-unstyled">
<li v-for="file in changedFiles">
<li v-for="file in changedFiles" :key="file.id">
<span class="help-block">
{{file.url}}
</span>
......@@ -119,4 +119,4 @@ export default RepoCommitSection;
</fieldset>
</form>
</div>
</template>
\ No newline at end of file
</template>
app/assets/javascripts/repo/repo_editor.vue
<script>
/* global monaco */
import Vue from 'vue';
import Store from './repo_store';
import Helper from './repo_helper';
import monacoLoader from './monaco_loader';
......@@ -28,7 +27,7 @@ const RepoEditor = {
const newModel = monaco.editor.createModel(this.blobRaw, 'plaintext');
this.monacoInstance.setModel(newModel);
});
}).catch(Helper.loadingError);
});
},
......@@ -55,7 +54,7 @@ const RepoEditor = {
location.hash = `L${e.target.position.lineNumber}`;
Store.activeLine = e.target.position.lineNumber;
}
}
},
},
watch: {
......
app/assets/javascripts/repo/repo_file.vue
......@@ -40,7 +40,7 @@ export default RepoFile;
</script>
<template>
<tr v-if="!loading.tree || hasFiles" :class="{'active': activeFile.url === file.url}">
<tr class="file" v-if="!loading.tree || hasFiles" :class="{'active': activeFile.url === file.url}">
<td @click.prevent="linkClicked(file)">
<i class="fa" v-if="!file.loading" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
<i class="fa fa-spinner fa-spin" v-if="file.loading" :style="{'margin-left': file.level * 10 + 'px'}"></i>
......
app/assets/javascripts/repo/repo_file_buttons.vue
<script>
import Vue from 'vue';
import Store from './repo_store';
import Helper from './repo_helper';
import RepoMiniMixin from './repo_mini_mixin';
......
app/assets/javascripts/repo/repo_helper.js
......@@ -27,8 +27,8 @@ const RepoHelper = {
},
setDirectoryOpen(tree) {
let file = tree;
if (!file) return;
const file = tree;
if (!file) return undefined;
file.opened = true;
file.icon = 'fa-folder-open';
......@@ -91,14 +91,12 @@ const RepoHelper = {
return oldList;
},
compareFilesCaseInsensitive(a,b) {
compareFilesCaseInsensitive(a, b) {
const aName = a.name.toLowerCase();
const bName = b.name.toLowerCase();
if(a.level > 0) return 0;
if (aName < bName)
return -1;
if (aName > bName)
return 1;
if (a.level > 0) return 0;
if (aName < bName) { return -1; }
if (aName > bName) { return 1; }
return 0;
},
......@@ -109,7 +107,7 @@ const RepoHelper = {
.then((response) => {
const data = response.data;
// RepoHelper.setLoading(false, loadingData);
if(cb) cb();
if (cb) cb();
Store.isTree = RepoHelper.isTree(data);
if (!Store.isTree) {
if (!file) file = data;
......@@ -187,15 +185,13 @@ const RepoHelper = {
};
},
scrollTabsRight() {
// wait for the transition. 0.1 seconds.
setTimeout(() => {
const tabs = document.getElementById('tabs');
if(!tabs) return;
if (!tabs) return;
tabs.scrollLeft = 12000;
}, 200)
}, 200);
},
dataToListOfFiles(data) {
......
app/assets/javascripts/repo/repo_loading_file.vue
......@@ -29,7 +29,7 @@ export default RepoLoadingFile;
</script>
<template>
<tr v-if="loading.tree && !hasFiles">
<tr v-if="loading.tree && !hasFiles" class="loading-file">
<td>
<div class="animation-container animation-container-small">
<div v-for="n in 6" :class="lineOfCode(n)"></div>
......
app/assets/javascripts/repo/repo_prev_directory.vue
......@@ -18,7 +18,7 @@ export default RepoPreviousDirectory;
</script>
<template>
<tr>
<tr class="prev-directory">
<td colspan="3">
<a :href="prevUrl" @click.prevent="linkClicked(prevUrl)">..</a>
</td>
......
app/assets/javascripts/repo/repo_service.js
import Store from './repo_store';
import axios from 'axios';
import Store from './repo_store';
const RepoService = {
url: '',
......@@ -12,10 +12,10 @@ const RepoService = {
checkCurrentBranchIsCommitable() {
const url = Store.service.refsUrl;
return axios.get(url, {params: {
ref: Store.currentBranch,
search: Store.currentBranch
}});
return axios.get(url, { params: {
ref: Store.currentBranch,
search: Store.currentBranch,
} });
},
buildParams(url = this.url) {
......
app/assets/javascripts/repo/repo_sidebar.vue
<script>
import Vue from 'vue';
import Service from './repo_service';
import Helper from './repo_helper';
import Store from './repo_store';
......@@ -73,18 +72,9 @@ export default RepoSidebar;
<table class="table">
<thead v-if="!isMini">
<tr>
<th v-if="!isMini">
Name
</th>
<th v-else>
Project
</th>
<th class="hidden-sm hidden-xs" v-if="!isMini">
Last Commit
</th>
<th class="hidden-xs" v-if="!isMini">
Last Update
</th>
<th class="name">Name</th>
<th class="hidden-sm hidden-xs last-commit">Last Commit</th>
<th class="hidden-xs last-update">Last Update</th>
</tr>
</thead>
<tbody>
......@@ -96,6 +86,7 @@ export default RepoSidebar;
@linkclicked="linkClicked(prevURL)"/>
<repo-loading-file
v-for="n in 5"
:key="n"
:loading="loading"
:has-files="!!files.length"
:is-mini="isMini"/>
......
app/assets/javascripts/repo/repo_store.js
/* global Flash */
import RepoHelper from './repo_helper';
const RepoStore = {
......@@ -38,7 +39,7 @@ const RepoStore = {
raw: false,
newContent: '',
changed: false,
loading: false
loading: false,
},
activeFileIndex: 0,
activeLine: 0,
......@@ -65,12 +66,12 @@ const RepoStore = {
checkIsCommitable() {
RepoStore.service.checkCurrentBranchIsCommitable()
.then((data) => {
// you shouldn't be able to make commits on commits or tags.
let {Branches, Commits, Tags} = data.data;
if(Branches && Branches.length) RepoStore.isCommitable = true;
if(Commits && Commits.length) RepoStore.isCommitable = false;
if(Tags && Tags.length) RepoStore.isCommitable = false;
});
// you shouldn't be able to make commits on commits or tags.
const { Branches, Commits, Tags } = data.data;
if (Branches && Branches.length) RepoStore.isCommitable = true;
if (Commits && Commits.length) RepoStore.isCommitable = false;
if (Tags && Tags.length) RepoStore.isCommitable = false;
}).catch(() => Flash('Failed to check if branch can be committed to.'));
},
addFilesToDirectory(inDirectory, currentList, newList) {
......@@ -127,11 +128,11 @@ const RepoStore = {
RepoStore.files = RepoStore.files.filter((file) => {
const isItTheTreeWeWant = file.url === treeToClose.url;
// if it's the next tree
if(foundTree && file.type === 'tree' && !isItTheTreeWeWant && file.level === treeToClose.level) {
if (foundTree && file.type === 'tree' && !isItTheTreeWeWant && file.level === treeToClose.level) {
wereDone = true;
return true;
}
if(wereDone) return true;
if (wereDone) return true;
if (isItTheTreeWeWant) foundTree = true;
......
app/assets/javascripts/repo/repo_tabs.vue
......@@ -16,7 +16,7 @@ const RepoTabs = {
methods: {
isOverflow() {
return this.$el.scrollWidth > this.$el.offsetWidth;
}
},
},
watch: {
......@@ -24,9 +24,9 @@ const RepoTabs = {
Vue.nextTick(() => {
this.tabsOverflow = this.isOverflow();
});
}
}
}
},
},
};
export default RepoTabs;
</script>
......
app/assets/javascripts/repo/repo_view_toggler.js deleted 100644 → 0
import Vue from 'vue';
import Store from './repo_store';
export default class RepoViewToggler {
constructor() {
this.initVue();
}
initVue() {
this.vue = new Vue({
el: '#view-toggler',
data: () => Store,
});
}
}
app/assets/stylesheets/pages/repo.scss
......@@ -120,7 +120,6 @@
#repo-file-buttons {
background: $gray-light;
border-bottom: 1px solid $white-normal;
padding: 5px;
padding: 10px 5px;
position: relative;
border-top: 1px solid $white-normal;
......@@ -333,12 +332,14 @@
@keyframes swipeRightAppear {
0% {
transform: scaleX(0.00) ;
transform: scaleX(0.00);
}
45% {
transform: scaleX(0.26) ;
transform: scaleX(0.26);
}
100% {
transform: scaleX(1.00) ;
transform: scaleX(1.00);
}
}
spec/javascripts/repo/index_spec.js deleted 100644 → 0
// import Tabs from '~/repo/repo_tabs';
// import Sidebar from '~/repo/repo_sidebar';
// import Editor from '~/repo/repo_editor';
// import FileButtons from '~/repo/repo_file_buttons';
// import EditButton from '~/repo/repo_edit_button';
// import BinaryViewer from '~/repo/repo_binary_viewer';
// import CommitSection from '~/repo/repo_commit_section';
// import Service from '~/repo/repo_service';
// import Store from '~/repo/repo_store';
// import Helper from '~/repo/repo_helper';
// describe('initRepo', () => {
// const url = 'url';
// it('should select all elements, set store service and url, init all needed classes and getContent', () => {
// spyOn(Helper, 'getContent');
// spyOn(document, 'getElementById').and.callFake((selector) => {
// const element = document.createElement('div');
// if (selector === 'ide') element.dataset.url = url;
// return element;
// });
// require('~/repo/index'); // eslint-disable-line global-require
// expect(document.getElementById).toHaveBeenCalledWith('ide');
// expect(document.getElementById).toHaveBeenCalledWith('tabs');
// expect(document.getElementById).toHaveBeenCalledWith('sidebar');
// expect(document.getElementById).toHaveBeenCalledWith('repo-file-buttons');
// expect(document.getElementById).toHaveBeenCalledWith('editable-mode');
// expect(document.getElementById).toHaveBeenCalledWith('commit-area');
// expect(document.getElementById).toHaveBeenCalledWith('binary-viewer');
// expect(Store.service).toBe(Service);
// expect(Store.service.url).toBe(url);
// expect(Store.tabs instanceof Tabs).toBe(true);
// expect(Store.sidebar instanceof Sidebar).toBe(true);
// expect(Store.editor instanceof Editor).toBe(true);
// expect(Store.buttons instanceof FileButtons).toBe(true);
// expect(Store.editButton instanceof EditButton).toBe(true);
// expect(Store.commitSection instanceof CommitSection).toBe(true);
// expect(Store.binaryViewer instanceof BinaryViewer).toBe(true);
// expect(Helper.getContent).toHaveBeenCalled();
// });
// });
spec/javascripts/repo/repo_binary_viewer_spec.js
......@@ -3,9 +3,9 @@ import Store from '~/repo/repo_store';
import repoBinaryViewer from '~/repo/repo_binary_viewer.vue';
describe('RepoBinaryViewer', () => {
const RepoBinaryViewer = Vue.extend(repoBinaryViewer);
function createComponent() {
const RepoBinaryViewer = Vue.extend(repoBinaryViewer);
return new RepoBinaryViewer().$mount();
}
......@@ -24,7 +24,6 @@ describe('RepoBinaryViewer', () => {
const vm = createComponent();
const img = vm.$el.querySelector(':scope > img');
expect(img).toBeTruthy();
expect(img.src).toMatch(`/${uri}`);
expect(img.alt).toEqual(activeFile.name);
});
......@@ -40,10 +39,8 @@ describe('RepoBinaryViewer', () => {
Store.binaryTypes = binaryTypes;
Store.activeFile = activeFile;
const vm = createComponent();
const markdown = vm.$el.querySelector(':scope > div');
expect(markdown).toBeTruthy();
expect(markdown.innerHTML).toEqual(activeFile.html);
expect(vm.$el.querySelector(':scope > div')).toEqual(activeFile.html);
});
it('does not render if no binary', () => {
......
spec/javascripts/repo/repo_editor_spec.js
......@@ -2,9 +2,9 @@ import Vue from 'vue';
import repoEditor from '~/repo/repo_editor.vue';
describe('RepoEditor', () => {
const RepoEditor = Vue.extend(repoEditor);
function createComponent() {
const RepoEditor = Vue.extend(repoEditor);
return new RepoEditor().$mount();
}
......
spec/javascripts/repo/repo_file_buttons_spec.js
......@@ -24,35 +24,23 @@ describe('RepoFileButtons', () => {
const raw = vm.$el.querySelector('.raw');
const blame = vm.$el.querySelector('.blame');
const history = vm.$el.querySelector('.history');
const permalink = vm.$el.querySelector('.permalink');
const lock = vm.$el.querySelector('.lock');
const preview = vm.$el.querySelector('.preview');
const replace = vm.$el.querySelector('.replace');
const deleteBtn = vm.$el.querySelector('.delete');
expect(vm.$el.id).toEqual('repo-file-buttons');
expect(vm.$el.style.borderBottom).toEqual('1px solid rgb(31, 120, 209)');
expect(raw).toBeTruthy();
expect(raw.href).toMatch(`/${activeFile.url}`);
expect(raw.textContent).toEqual('Raw');
expect(blame).toBeTruthy();
expect(blame.href).toMatch(`/${activeFile.url}`);
expect(blame.textContent).toEqual('Blame');
expect(history).toBeTruthy();
expect(history.href).toMatch(`/${activeFile.url}`);
expect(history.textContent).toEqual('History');
expect(permalink).toBeTruthy();
expect(permalink.textContent).toEqual('Permalink');
expect(lock).toBeTruthy();
expect(lock.textContent).toEqual('Lock');
expect(preview).toBeTruthy();
expect(preview.textContent).toEqual(activeFileLabel);
expect(replace).toBeTruthy();
expect(vm.$el.querySelector('.permalink').textContent).toEqual('Permalink');
expect(vm.$el.querySelector('.lock').textContent).toEqual('Lock');
expect(vm.$el.querySelector('.preview').textContent).toEqual(activeFileLabel);
expect(replace.dataset.target).toEqual('#modal-upload-blob');
expect(replace.dataset.toggle).toEqual('modal');
expect(replace.textContent).toEqual('Replace');
expect(deleteBtn).toBeTruthy();
expect(deleteBtn.textContent).toEqual('Delete');
expect(vm.$el.querySelector('.delete').textContent).toEqual('Delete');
});
it('renders a white border if not editMode', () => {
......
spec/javascripts/repo/repo_file_options_spec.js
......@@ -2,10 +2,11 @@ import Vue from 'vue';
import repoFileOptions from '~/repo/repo_file_options.vue';
describe('RepoFileOptions', () => {
const RepoFileOptions = Vue.extend(repoFileOptions);
const projectName = 'projectName';
function createComponent(propsData) {
const RepoFileOptions = Vue.extend(repoFileOptions);
return new RepoFileOptions({
propsData,
}).$mount();
......@@ -16,11 +17,9 @@ describe('RepoFileOptions', () => {
isMini: true,
projectName,
});
const title = vm.$el.querySelector('.title');
expect(vm.$el.classList.contains('repo-file-options')).toBeTruthy();
expect(title).toBeTruthy();
expect(title.textContent).toEqual(projectName);
expect(vm.$el.querySelector('.title').textContent).toEqual(projectName);
expect(vm.$el.querySelector('a[title="New File"]')).toBeTruthy();
expect(vm.$el.querySelector('a[title="New Folder"]')).toBeTruthy();
});
......
spec/javascripts/repo/repo_file_spec.js
......@@ -2,7 +2,6 @@ import Vue from 'vue';
import repoFile from '~/repo/repo_file.vue';
describe('RepoFile', () => {
const RepoFile = Vue.extend(repoFile);
const file = {
icon: 'icon',
url: 'url',
......@@ -16,6 +15,8 @@ describe('RepoFile', () => {
};
function createComponent(propsData) {
const RepoFile = Vue.extend(repoFile);
return new RepoFile({
propsData,
}).$mount();
......@@ -26,23 +27,15 @@ describe('RepoFile', () => {
file,
activeFile,
});
const icon = vm.$el.querySelector(`.${file.icon}`);
const name = vm.$el.querySelector('.repo-file-name');
const commitMessage = vm.$el.querySelector('.commit-message');
const commitUpdate = vm.$el.querySelector('.commit-update');
expect(vm.$el.innerHTML).toBeTruthy();
expect(vm.$el.classList.contains('active')).toBeTruthy();
expect(icon).toBeTruthy();
expect(icon.style.marginLeft).toEqual('100px');
expect(name).toBeTruthy();
expect(vm.$el.querySelector(`.${file.icon}`).style.marginLeft).toEqual('100px');
expect(name.title).toEqual(file.url);
expect(name.href).toMatch(`/${file.url}`);
expect(name.textContent).toEqual(file.name);
expect(commitMessage).toBeTruthy();
expect(commitMessage.textContent).toBe(file.lastCommitMessage);
expect(commitUpdate).toBeTruthy();
expect(commitUpdate.textContent).toBe(file.lastCommitUpdate);
expect(vm.$el.querySelector('.commit-message').textContent).toBe(file.lastCommitMessage);
expect(vm.$el.querySelector('.commit-update').textContent).toBe(file.lastCommitUpdate);
});
it('does render if hasFiles is true and is loading tree', () => {
......@@ -76,11 +69,9 @@ describe('RepoFile', () => {
activeFile,
isMini: true,
});
const commitMessage = vm.$el.querySelector('.commit-message');
const commitUpdate = vm.$el.querySelector('.commit-update');
expect(commitMessage).toBeFalsy();
expect(commitUpdate).toBeFalsy();
expect(vm.$el.querySelector('.commit-message')).toBeFalsy();
expect(vm.$el.querySelector('.commit-update')).toBeFalsy();
});
it('does not set active class if file is active file', () => {
......
spec/javascripts/repo/repo_loading_file_spec.js
......@@ -2,9 +2,9 @@ import Vue from 'vue';
import repoLoadingFile from '~/repo/repo_loading_file.vue';
describe('RepoLoadingFile', () => {
const RepoLoadingFile = Vue.extend(repoLoadingFile);
function createComponent(propsData) {
const RepoLoadingFile = Vue.extend(repoLoadingFile);
return new RepoLoadingFile({
propsData,
}).$mount();
......
spec/javascripts/repo/repo_prev_directory_spec.js
......@@ -2,9 +2,9 @@ import Vue from 'vue';
import repoPrevDirectory from '~/repo/repo_prev_directory.vue';
describe('RepoPrevDirectory', () => {
const RepoPrevDirectory = Vue.extend(repoPrevDirectory);
function createComponent(propsData) {
const RepoPrevDirectory = Vue.extend(repoPrevDirectory);
return new RepoPrevDirectory({
propsData,
}).$mount();
......@@ -19,7 +19,6 @@ describe('RepoPrevDirectory', () => {
spyOn(vm, 'linkClicked');
expect(link).toBeTruthy();
expect(link.href).toMatch(`/${prevUrl}`);
expect(link.textContent).toEqual('..');
......
spec/javascripts/repo/repo_sidebar_spec.js 0 → 100644
import Vue from 'vue';
import RepoStore from '~/repo/repo_store';
import repoSidebar from '~/repo/repo_sidebar.vue';
describe('RepoSidebar', () => {
function createComponent() {
const RepoSidebar = Vue.extend(repoSidebar);
return new RepoSidebar().$mount();
}
it('renders a sidebar', () => {
RepoStore.files = [{
id: 0,
}];
const vm = createComponent();
const thead = vm.$el.querySelector('thead');
const tbody = vm.$el.querySelector('tbody');
expect(vm.$el.id).toEqual('sidebar');
expect(vm.$el.classList.contains('sidebar-mini')).toBeFalsy();
expect(thead.querySelector('.name').textContent).toEqual('Name');
expect(thead.querySelector('.last-commit').textContent).toEqual('Last Commit');
expect(thead.querySelector('.last-update').textContent).toEqual('Last Update');
expect(tbody.querySelector('.repo-file-options')).toBeFalsy();
expect(tbody.querySelector('.prev-directory')).toBeTruthy();
expect(tbody.querySelector('.loading-file')).toBeFalsy();
expect(tbody.querySelector('.file')).toBeTruthy();
});
it('does not render a thead, renders repo-file-options and sets sidebar-mini class if isMini', () => {
RepoStore.openedFiles = [{
id: 0,
}];
const vm = createComponent();
expect(vm.$el.classList.contains('sidebar-mini')).toBeTruthy();
expect(vm.$el.querySelector('thead')).toBeFalsy();
expect(vm.$el.querySelector('tbody .repo-file-options')).toBeTruthy();
});
it('renders 5 loading files if tree is loading and not hasFiles', () => {
RepoStore.loading = {
tree: true,
};
RepoStore.files = [];
const vm = createComponent();
expect(vm.$el.querySelectorAll('tbody .loading-file').length).toEqual(5);
});
});
spec/javascripts/repo/repo_tab_spec.js
......@@ -2,9 +2,9 @@ import Vue from 'vue';
import repoTab from '~/repo/repo_tab.vue';
describe('RepoTab', () => {
const RepoTab = Vue.extend(repoTab);
function createComponent(propsData) {
const RepoTab = Vue.extend(repoTab);
return new RepoTab({
propsData,
}).$mount();
......@@ -20,14 +20,12 @@ describe('RepoTab', () => {
tab,
});
const close = vm.$el.querySelector('.close');
const name = vm.$el.querySelector(`a[title="${tab.url}"]`)
const name = vm.$el.querySelector(`a[title="${tab.url}"]`);
spyOn(vm, 'xClicked');
spyOn(vm, 'tabClicked');
expect(close).toBeTruthy();
expect(close.querySelector('.fa-times')).toBeTruthy();
expect(name).toBeTruthy();
expect(name.textContent).toEqual(tab.name);
close.click();
......@@ -63,8 +61,7 @@ describe('RepoTab', () => {
const vm = createComponent({
tab,
});
const close = vm.$el.querySelector('.close');
expect(close.querySelector('.fa-circle')).toBeTruthy();
expect(vm.$el.querySelector('.close .fa-circle')).toBeTruthy();
});
});
spec/javascripts/repo/repo_tabs_spec.js
import Vue from 'vue';
import RepoStore from '~/repo/repo_store';
import repoTabs from '~/repo/repo_tabs.vue';
describe('RepoTabss', () => {
const RepoTabs = Vue.extend(repoTabs);
describe('RepoTabs', () => {
const openedFiles = [{
id: 0,
active: true,
}, {
id: 1,
}];
function createComponent() {
const RepoTabs = Vue.extend(repoTabs);
return new RepoTabs().$mount();
}
it('renders a list of tabs', () => {
RepoStore.openedFiles = openedFiles;
RepoStore.tabsOverflow = true;
const vm = createComponent();
const tabs = [...vm.$el.querySelectorAll(':scope > li')];
expect(vm.$el.id).toEqual('tabs');
expect(vm.$el.classList.contains('overflown')).toBeTruthy();
expect(tabs.length).toEqual(2);
expect(tabs[0].classList.contains('active')).toBeTruthy();
expect(tabs[1].classList.contains('active')).toBeFalsy();
});
it('does not render a tabs list if no isMini', () => {
it('does not render a tabs list if not isMini', () => {
RepoStore.openedFiles = [];
const vm = createComponent();
expect(vm.$el.innerHTML).toBeFalsy();
});
it('does not apply overflown class if not tabsOverflow', () => {
RepoStore.openedFiles = openedFiles;
RepoStore.tabsOverflow = false;
const vm = createComponent();
expect(vm.$el.classList.contains('overflown')).toBeFalsy();
});
});
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