added specs
fixed scss-lint
This commit is contained in:
parent
4033e0aa35
commit
8f7ec95b86
13 changed files with 207 additions and 67 deletions
|
@ -62,7 +62,6 @@
|
|||
<div class="multi-file-commit-list">
|
||||
<list-collapsed
|
||||
v-if="collapsed"
|
||||
:file-list="fileList"
|
||||
/>
|
||||
<template v-else>
|
||||
<ul
|
||||
|
|
|
@ -6,12 +6,6 @@
|
|||
components: {
|
||||
icon,
|
||||
},
|
||||
props: {
|
||||
fileList: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'addedFiles',
|
||||
|
|
|
@ -31,7 +31,7 @@ export default {
|
|||
'changedFiles',
|
||||
]),
|
||||
commitButtonDisabled() {
|
||||
return !this.commitMessage || this.submitCommitsLoading || !this.changedFiles.length;
|
||||
return this.commitMessage === '' || this.submitCommitsLoading || !this.changedFiles.length;
|
||||
},
|
||||
commitMessageCount() {
|
||||
return this.commitMessage.length;
|
||||
|
|
|
@ -55,7 +55,7 @@
|
|||
class="file"
|
||||
@click.prevent="clickedTreeRow(file)">
|
||||
<td
|
||||
class="multi-file-table-col-name"
|
||||
class="multi-file-table-name"
|
||||
:colspan="submoduleColSpan"
|
||||
>
|
||||
<i
|
||||
|
|
|
@ -53,7 +53,7 @@ export default {
|
|||
>
|
||||
</th>
|
||||
<template v-else>
|
||||
<th class="name multi-file-table-col-name">
|
||||
<th class="name multi-file-table-name">
|
||||
Name
|
||||
</th>
|
||||
<th class="hidden-sm hidden-xs last-commit">
|
||||
|
|
|
@ -44,13 +44,13 @@
|
|||
&.is-collapsed {
|
||||
.ide-file-list {
|
||||
max-width: 250px;
|
||||
overflow: scroll;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ide-file-list {
|
||||
flex: 1;
|
||||
overflow: scroll;
|
||||
|
||||
.file {
|
||||
cursor: pointer;
|
||||
|
@ -59,9 +59,14 @@
|
|||
a {
|
||||
color: $gl-text-color;
|
||||
}
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-file-table-col-name,
|
||||
.multi-file-table-name,
|
||||
.multi-file-table-col-commit-message {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
@ -69,12 +74,12 @@
|
|||
max-width: 0;
|
||||
}
|
||||
|
||||
.multi-file-table-col-name {
|
||||
.multi-file-table-name {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.multi-file-table-col-commit-message {
|
||||
width: 450px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.multi-file-edit-pane {
|
||||
|
@ -97,12 +102,12 @@
|
|||
}
|
||||
|
||||
.multi-file-tab {
|
||||
@include str-truncated(150px);
|
||||
padding: ($gl-padding / 2) ($gl-padding + 12) ($gl-padding / 2) $gl-padding;
|
||||
background-color: $gray-normal;
|
||||
border-right: 1px solid $white-dark;
|
||||
border-bottom: 1px solid $white-dark;
|
||||
cursor: pointer;
|
||||
@include str-truncated(150px);
|
||||
|
||||
&.active {
|
||||
background-color: $white-light;
|
||||
|
@ -146,29 +151,27 @@
|
|||
height: 100%;
|
||||
overflow: scroll;
|
||||
|
||||
& {
|
||||
.blob-viewer {
|
||||
height: 100%;
|
||||
}
|
||||
.blob-viewer {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.file-content.code {
|
||||
display: flex;
|
||||
.file-content.code {
|
||||
display: flex;
|
||||
|
||||
i {
|
||||
margin-left: -10px;
|
||||
}
|
||||
i {
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.line-numbers {
|
||||
min-width: 50px;
|
||||
}
|
||||
.line-numbers {
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.file-content,
|
||||
.line-numbers,
|
||||
.blob-content,
|
||||
.code {
|
||||
min-height: 100%;
|
||||
}
|
||||
.file-content,
|
||||
.line-numbers,
|
||||
.blob-content,
|
||||
.code {
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -196,7 +199,7 @@
|
|||
.multi-file-commit-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0 12px 0;
|
||||
padding: 0 0 12px;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 1px solid $white-dark;
|
||||
|
||||
|
|
|
@ -0,0 +1,33 @@
|
|||
import Vue from 'vue';
|
||||
import store from '~/repo/stores';
|
||||
import listCollapsed from '~/repo/components/commit_sidebar/list_collapsed.vue';
|
||||
import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
|
||||
import { file } from '../../helpers';
|
||||
|
||||
describe('Multi-file editor commit sidebar list collapsed', () => {
|
||||
let vm;
|
||||
|
||||
beforeEach(() => {
|
||||
const Component = Vue.extend(listCollapsed);
|
||||
|
||||
vm = createComponentWithStore(Component, store);
|
||||
|
||||
vm.$store.state.openFiles.push(file(), file());
|
||||
vm.$store.state.openFiles[0].tempFile = true;
|
||||
vm.$store.state.openFiles.forEach((f) => {
|
||||
Object.assign(f, {
|
||||
changed: true,
|
||||
});
|
||||
});
|
||||
|
||||
vm.$mount();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vm.$destroy();
|
||||
});
|
||||
|
||||
it('renders added & modified files count', () => {
|
||||
expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toBe('1 1');
|
||||
});
|
||||
});
|
|
@ -0,0 +1,53 @@
|
|||
import Vue from 'vue';
|
||||
import listItem from '~/repo/components/commit_sidebar/list_item.vue';
|
||||
import mountComponent from '../../../helpers/vue_mount_component_helper';
|
||||
import { file } from '../../helpers';
|
||||
|
||||
describe('Multi-file editor commit sidebar list item', () => {
|
||||
let vm;
|
||||
let f;
|
||||
|
||||
beforeEach(() => {
|
||||
const Component = Vue.extend(listItem);
|
||||
|
||||
f = file();
|
||||
|
||||
vm = mountComponent(Component, {
|
||||
file: f,
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vm.$destroy();
|
||||
});
|
||||
|
||||
it('renders file path', () => {
|
||||
expect(vm.$el.querySelector('.multi-file-commit-list-path').textContent.trim()).toBe(f.path);
|
||||
});
|
||||
|
||||
describe('computed', () => {
|
||||
describe('iconName', () => {
|
||||
it('returns modified when not a tempFile', () => {
|
||||
expect(vm.iconName).toBe('file-modified');
|
||||
});
|
||||
|
||||
it('returns addition when not a tempFile', () => {
|
||||
f.tempFile = true;
|
||||
|
||||
expect(vm.iconName).toBe('file-addition');
|
||||
});
|
||||
});
|
||||
|
||||
describe('iconClass', () => {
|
||||
it('returns modified when not a tempFile', () => {
|
||||
expect(vm.iconClass).toContain('multi-file-modified');
|
||||
});
|
||||
|
||||
it('returns addition when not a tempFile', () => {
|
||||
f.tempFile = true;
|
||||
|
||||
expect(vm.iconClass).toContain('multi-file-addition');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
72
spec/javascripts/repo/components/commit_sidebar/list_spec.js
Normal file
72
spec/javascripts/repo/components/commit_sidebar/list_spec.js
Normal file
|
@ -0,0 +1,72 @@
|
|||
import Vue from 'vue';
|
||||
import store from '~/repo/stores';
|
||||
import commitSidebarList from '~/repo/components/commit_sidebar/list.vue';
|
||||
import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
|
||||
import { file } from '../../helpers';
|
||||
|
||||
describe('Multi-file editor commit sidebar list', () => {
|
||||
let vm;
|
||||
|
||||
beforeEach(() => {
|
||||
const Component = Vue.extend(commitSidebarList);
|
||||
|
||||
vm = createComponentWithStore(Component, store, {
|
||||
title: 'Staged',
|
||||
fileList: [],
|
||||
collapsed: false,
|
||||
}).$mount();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vm.$destroy();
|
||||
});
|
||||
|
||||
describe('empty file list', () => {
|
||||
it('renders no changes text', () => {
|
||||
expect(vm.$el.querySelector('.help-block').textContent.trim()).toBe('No changes');
|
||||
});
|
||||
});
|
||||
|
||||
describe('with a list of files', () => {
|
||||
beforeEach((done) => {
|
||||
const f = file('file name');
|
||||
f.changed = true;
|
||||
vm.fileList.push(f);
|
||||
|
||||
Vue.nextTick(done);
|
||||
});
|
||||
|
||||
it('renders list', () => {
|
||||
expect(vm.$el.querySelectorAll('li').length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('collapsed', () => {
|
||||
beforeEach((done) => {
|
||||
vm.collapsed = true;
|
||||
|
||||
Vue.nextTick(done);
|
||||
});
|
||||
|
||||
it('adds collapsed class', () => {
|
||||
expect(vm.$el.querySelector('.is-collapsed')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('hides list', () => {
|
||||
expect(vm.$el.querySelector('.list-unstyled')).toBeNull();
|
||||
expect(vm.$el.querySelector('.help-block')).toBeNull();
|
||||
});
|
||||
|
||||
it('hides collapse button', () => {
|
||||
expect(vm.$el.querySelector('.multi-file-commit-panel-collapse-btn')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
it('clicking toggle collapse button emits toggle event', () => {
|
||||
spyOn(vm, '$emit');
|
||||
|
||||
vm.$el.querySelector('.multi-file-commit-panel-collapse-btn').click();
|
||||
|
||||
expect(vm.$emit).toHaveBeenCalledWith('toggleCollapsed');
|
||||
});
|
||||
});
|
|
@ -25,8 +25,12 @@ describe('RepoCommitSection', () => {
|
|||
return comp.$mount();
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
beforeEach((done) => {
|
||||
vm = createComponent();
|
||||
|
||||
vm.collapsed = false;
|
||||
|
||||
Vue.nextTick(done);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
@ -36,12 +40,11 @@ describe('RepoCommitSection', () => {
|
|||
});
|
||||
|
||||
it('renders a commit section', () => {
|
||||
const changedFileElements = [...vm.$el.querySelectorAll('.changed-files > li')];
|
||||
const submitCommit = vm.$el.querySelector('.btn');
|
||||
const targetBranch = vm.$el.querySelector('.target-branch');
|
||||
const changedFileElements = [...vm.$el.querySelectorAll('.multi-file-commit-list li')];
|
||||
const submitCommit = vm.$el.querySelector('form .btn');
|
||||
|
||||
expect(vm.$el.querySelector(':scope > form')).toBeTruthy();
|
||||
expect(vm.$el.querySelector('.staged-files').textContent.trim()).toEqual('Staged files (2)');
|
||||
expect(vm.$el.querySelector('.multi-file-commit-form')).not.toBeNull();
|
||||
expect(vm.$el.querySelector('.multi-file-commit-panel-section header').textContent.trim()).toEqual('Staged');
|
||||
expect(changedFileElements.length).toEqual(2);
|
||||
|
||||
changedFileElements.forEach((changedFile, i) => {
|
||||
|
@ -49,10 +52,7 @@ describe('RepoCommitSection', () => {
|
|||
});
|
||||
|
||||
expect(submitCommit.disabled).toBeTruthy();
|
||||
expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeFalsy();
|
||||
expect(vm.$el.querySelector('.commit-summary').textContent.trim()).toEqual('Commit 2 files');
|
||||
expect(targetBranch.querySelector(':scope > label').textContent.trim()).toEqual('Target branch');
|
||||
expect(targetBranch.querySelector('.help-block').textContent.trim()).toEqual('master');
|
||||
expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeNull();
|
||||
});
|
||||
|
||||
describe('when submitting', () => {
|
||||
|
@ -69,7 +69,7 @@ describe('RepoCommitSection', () => {
|
|||
});
|
||||
|
||||
it('allows you to submit', () => {
|
||||
expect(vm.$el.querySelector('.btn').disabled).toBeTruthy();
|
||||
expect(vm.$el.querySelector('form .btn').disabled).toBeTruthy();
|
||||
});
|
||||
|
||||
it('submits commit', (done) => {
|
||||
|
|
|
@ -29,7 +29,6 @@ describe('RepoSidebar', () => {
|
|||
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.trim()).toEqual('Name');
|
||||
expect(thead.querySelector('.last-commit').textContent.trim()).toEqual('Last commit');
|
||||
|
@ -40,18 +39,6 @@ describe('RepoSidebar', () => {
|
|||
expect(tbody.querySelector('.file')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('does not render a thead, renders repo-file-options and sets sidebar-mini class if isMini', (done) => {
|
||||
vm.$store.state.openFiles.push(vm.$store.state.tree[0]);
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(vm.$el.classList.contains('sidebar-mini')).toBeTruthy();
|
||||
expect(vm.$el.querySelector('thead')).toBeTruthy();
|
||||
expect(vm.$el.querySelector('thead .repo-file-options')).toBeTruthy();
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders 5 loading files if tree is loading', (done) => {
|
||||
vm.$store.state.tree = [];
|
||||
vm.$store.state.loading = true;
|
||||
|
|
|
@ -24,8 +24,8 @@ describe('RepoTab', () => {
|
|||
tab: file(),
|
||||
});
|
||||
vm.$store.state.openFiles.push(vm.tab);
|
||||
const close = vm.$el.querySelector('.close-btn');
|
||||
const name = vm.$el.querySelector(`a[title="${vm.tab.url}"]`);
|
||||
const close = vm.$el.querySelector('.multi-file-tab-close');
|
||||
const name = vm.$el.querySelector(`[title="${vm.tab.url}"]`);
|
||||
|
||||
expect(close.querySelector('.fa-times')).toBeTruthy();
|
||||
expect(name.textContent.trim()).toEqual(vm.tab.name);
|
||||
|
@ -50,7 +50,7 @@ describe('RepoTab', () => {
|
|||
|
||||
spyOn(vm, 'closeFile');
|
||||
|
||||
vm.$el.querySelector('.close-btn').click();
|
||||
vm.$el.querySelector('.multi-file-tab-close').click();
|
||||
|
||||
expect(vm.closeFile).toHaveBeenCalledWith({ file: vm.tab });
|
||||
});
|
||||
|
@ -62,7 +62,7 @@ describe('RepoTab', () => {
|
|||
tab,
|
||||
});
|
||||
|
||||
expect(vm.$el.querySelector('.close-btn .fa-circle')).toBeTruthy();
|
||||
expect(vm.$el.querySelector('.multi-file-tab-close .fa-circle')).not.toBeNull();
|
||||
});
|
||||
|
||||
describe('methods', () => {
|
||||
|
@ -77,7 +77,7 @@ describe('RepoTab', () => {
|
|||
vm.$store.state.openFiles.push(tab);
|
||||
vm.$store.dispatch('setFileActive', tab);
|
||||
|
||||
vm.$el.querySelector('.close-btn').click();
|
||||
vm.$el.querySelector('.multi-file-tab-close').click();
|
||||
|
||||
vm.$nextTick(() => {
|
||||
expect(tab.opened).toBeTruthy();
|
||||
|
@ -95,7 +95,7 @@ describe('RepoTab', () => {
|
|||
vm.$store.state.openFiles.push(tab);
|
||||
vm.$store.dispatch('setFileActive', tab);
|
||||
|
||||
vm.$el.querySelector('.close-btn').click();
|
||||
vm.$el.querySelector('.multi-file-tab-close').click();
|
||||
|
||||
vm.$nextTick(() => {
|
||||
expect(tab.opened).toBeFalsy();
|
||||
|
|
|
@ -25,12 +25,11 @@ describe('RepoTabs', () => {
|
|||
vm.$store.state.openFiles = openedFiles;
|
||||
|
||||
vm.$nextTick(() => {
|
||||
const tabs = [...vm.$el.querySelectorAll(':scope > li')];
|
||||
const tabs = [...vm.$el.querySelectorAll('.multi-file-tab')];
|
||||
|
||||
expect(tabs.length).toEqual(3);
|
||||
expect(tabs.length).toEqual(2);
|
||||
expect(tabs[0].classList.contains('active')).toBeTruthy();
|
||||
expect(tabs[1].classList.contains('active')).toBeFalsy();
|
||||
expect(tabs[2].classList.contains('tabs-divider')).toBeTruthy();
|
||||
|
||||
done();
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue