Add repo file buttons spec
This commit is contained in:
parent
5e0f5f1758
commit
b259c6e63e
3 changed files with 81 additions and 25 deletions
|
@ -11,7 +11,7 @@ const RepoFileButtons = {
|
|||
|
||||
computed: {
|
||||
editableBorder() {
|
||||
return this.editMode ? '1px solid #1F78D1' : '1px solid #f0f0f0';
|
||||
return this.editMode ? '1px solid rgb(31, 120, 209)' : '1px solid rgb(240,240,240)';
|
||||
},
|
||||
|
||||
canPreview() {
|
||||
|
@ -22,11 +22,11 @@ const RepoFileButtons = {
|
|||
return Helper.getRawURLFromBlobURL(this.activeFile.url);
|
||||
},
|
||||
|
||||
blameFileUrl() {
|
||||
blameFileURL() {
|
||||
return Helper.getBlameURLFromBlobURL(this.activeFile.url);
|
||||
},
|
||||
|
||||
historyFileUrl() {
|
||||
historyFileURL() {
|
||||
return Helper.getHistoryURLFromBlobURL(this.activeFile.url);
|
||||
},
|
||||
},
|
||||
|
@ -41,21 +41,19 @@ export default RepoFileButtons;
|
|||
|
||||
<template>
|
||||
<div id="repo-file-buttons" v-if="isMini" :style="{'border-bottom': editableBorder}">
|
||||
<a :href="rawFileURL" target="_blank" class="btn btn-default">Raw</a>
|
||||
<a :href="rawFileURL" target="_blank" class="btn btn-default raw">Raw</a>
|
||||
|
||||
<div class="btn-group" role="group" aria-label="File actions">
|
||||
<a :href="blameFileUrl" class="btn btn-default">Blame</a>
|
||||
<a :href="historyFileUrl" class="btn btn-default">History</a>
|
||||
<a href="#" class="btn btn-default">Permalink</a>
|
||||
<a href="#" class="btn btn-default">Lock</a>
|
||||
<a :href="blameFileURL" class="btn btn-default blame">Blame</a>
|
||||
<a :href="historyFileURL" class="btn btn-default history">History</a>
|
||||
<a href="#" class="btn btn-default permalink">Permalink</a>
|
||||
<a href="#" class="btn btn-default lock">Lock</a>
|
||||
</div>
|
||||
|
||||
<a href="#" v-if="canPreview" @click.prevent="rawPreviewToggle" class="btn btn-default">
|
||||
{{activeFileLabel}}
|
||||
</a>
|
||||
<a href="#" v-if="canPreview" @click.prevent="rawPreviewToggle" class="btn btn-default preview">{{activeFileLabel}}</a>
|
||||
|
||||
<button type="button" class="btn btn-default" data-target="#modal-upload-blob" data-toggle="modal">Replace</button>
|
||||
<button type="button" class="btn btn-default replace" data-target="#modal-upload-blob" data-toggle="modal">Replace</button>
|
||||
|
||||
<a href="#" class="btn btn-danger">Delete</a>
|
||||
<a href="#" class="btn btn-danger delete">Delete</a>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import Vue from 'vue';
|
||||
import repoEditor from '~/repo/repo_editor.vue';
|
||||
|
||||
fdescribe('RepoEditor', () => {
|
||||
describe('RepoEditor', () => {
|
||||
const RepoEditor = Vue.extend(repoEditor);
|
||||
|
||||
function createComponent() {
|
||||
|
@ -11,8 +11,6 @@ fdescribe('RepoEditor', () => {
|
|||
it('renders an ide container', () => {
|
||||
const vm = createComponent();
|
||||
|
||||
vm.$nextTick(() => {
|
||||
expect(vm.$el.getElementById('ide')).toBeTruthy();
|
||||
});
|
||||
expect(vm.$el.id).toEqual('ide');
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,18 +1,78 @@
|
|||
import Vue from 'vue';
|
||||
import repoFileButtons from '~/repo/repo_file_buttons.vue';
|
||||
import RepoStore from '~/repo/repo_store';
|
||||
|
||||
fdescribe('RepoFileButtons', () => {
|
||||
const RepoFileButtons = Vue.extend(repoFileButtons);
|
||||
|
||||
describe('RepoFileButtons', () => {
|
||||
function createComponent() {
|
||||
const RepoFileButtons = Vue.extend(repoFileButtons);
|
||||
|
||||
return new RepoFileButtons().$mount();
|
||||
}
|
||||
|
||||
it('does not render if not isMini', () => {
|
||||
const vm = createComponent({});
|
||||
it('renders Raw, Blame, History, Permalink, Lock, Preview toggle, Replace and Delete', () => {
|
||||
const activeFile = {
|
||||
extension: 'md',
|
||||
url: 'url',
|
||||
};
|
||||
const activeFileLabel = 'activeFileLabel';
|
||||
RepoStore.openedFiles = new Array(1);
|
||||
RepoStore.activeFile = activeFile;
|
||||
RepoStore.activeFileLabel = activeFileLabel;
|
||||
RepoStore.editMode = true;
|
||||
|
||||
vm.$nextTick(() => {
|
||||
expect(vm.$el.getElementById('ide')).toBeTruthy();
|
||||
});
|
||||
const vm = createComponent();
|
||||
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(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');
|
||||
});
|
||||
|
||||
it('does not render preview toggle if not canPreview', () => {
|
||||
const activeFile = {
|
||||
extension: 'abcd',
|
||||
url: 'url',
|
||||
};
|
||||
RepoStore.openedFiles = new Array(1);
|
||||
RepoStore.activeFile = activeFile;
|
||||
|
||||
const vm = createComponent();
|
||||
|
||||
expect(vm.$el.querySelector('.preview')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('does not render if not isMini', () => {
|
||||
RepoStore.openedFiles = [];
|
||||
|
||||
const vm = createComponent();
|
||||
|
||||
expect(vm.$el.innerHTML).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue