Commit 7786b3c6 authored by Mark Florian's avatar Mark Florian

Merge branch 'revert-22364' into 'master'

Revert "Merge branch '118442-restyle-changes-header-and-file-tree' into 'master'"

See merge request gitlab-org/gitlab!23428
parents 4b8834ea 1dac75fe
...@@ -374,7 +374,7 @@ export default { ...@@ -374,7 +374,7 @@ export default {
<div <div
:data-can-create-note="getNoteableData.current_user.can_create_note" :data-can-create-note="getNoteableData.current_user.can_create_note"
class="files d-flex" class="files d-flex prepend-top-default"
> >
<div <div
v-show="showTreeList" v-show="showTreeList"
......
<script> <script>
/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
import { mapActions, mapGetters, mapState } from 'vuex'; import { mapActions, mapGetters, mapState } from 'vuex';
import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui'; import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
import { __ } from '~/locale'; import { __ } from '~/locale';
...@@ -62,6 +63,9 @@ export default { ...@@ -62,6 +63,9 @@ export default {
showDropdowns() { showDropdowns() {
return !this.commit && this.mergeRequestDiffs.length; return !this.commit && this.mergeRequestDiffs.length;
}, },
fileTreeIcon() {
return this.showTreeList ? 'collapse-left' : 'expand-left';
},
toggleFileBrowserTitle() { toggleFileBrowserTitle() {
return this.showTreeList ? __('Hide file browser') : __('Show file browser'); return this.showTreeList ? __('Hide file browser') : __('Show file browser');
}, },
...@@ -87,7 +91,7 @@ export default { ...@@ -87,7 +91,7 @@ export default {
</script> </script>
<template> <template>
<div class="mr-version-controls border-top"> <div class="mr-version-controls border-top border-bottom">
<div <div
class="mr-version-menus-container content-block" class="mr-version-menus-container content-block"
:class="{ :class="{
...@@ -104,17 +108,17 @@ export default { ...@@ -104,17 +108,17 @@ export default {
:title="toggleFileBrowserTitle" :title="toggleFileBrowserTitle"
@click="toggleShowTreeList" @click="toggleShowTreeList"
> >
<icon name="file-tree" /> <icon :name="fileTreeIcon" />
</button> </button>
<div v-if="showDropdowns" class="d-flex align-items-center compare-versions-container"> <div v-if="showDropdowns" class="d-flex align-items-center compare-versions-container">
{{ __('Compare') }} Changes between
<compare-versions-dropdown <compare-versions-dropdown
:other-versions="mergeRequestDiffs" :other-versions="mergeRequestDiffs"
:merge-request-version="mergeRequestDiff" :merge-request-version="mergeRequestDiff"
:show-commit-count="true" :show-commit-count="true"
class="mr-version-dropdown" class="mr-version-dropdown"
/> />
{{ __('and') }} and
<compare-versions-dropdown <compare-versions-dropdown
:other-versions="comparableDiffs" :other-versions="comparableDiffs"
:base-version-path="baseVersionPath" :base-version-path="baseVersionPath"
......
...@@ -123,20 +123,6 @@ export default { ...@@ -123,20 +123,6 @@ export default {
} }
return s__('MRDiff|Show full file'); return s__('MRDiff|Show full file');
}, },
changedFile() {
const {
new_path: changed,
deleted_file: deleted,
new_file: tempFile,
...diffFile
} = this.diffFile;
return {
...diffFile,
changed: Boolean(changed),
deleted,
tempFile,
};
},
}, },
mounted() { mounted() {
polyfillSticky(this.$refs.header); polyfillSticky(this.$refs.header);
...@@ -235,7 +221,7 @@ export default { ...@@ -235,7 +221,7 @@ export default {
<div <div
v-if="!diffFile.submodule && addMergeRequestButtons" v-if="!diffFile.submodule && addMergeRequestButtons"
class="file-actions d-none d-sm-flex align-items-center" class="file-actions d-none d-sm-block"
> >
<diff-stats :added-lines="diffFile.added_lines" :removed-lines="diffFile.removed_lines" /> <diff-stats :added-lines="diffFile.added_lines" :removed-lines="diffFile.removed_lines" />
<div class="btn-group" role="group"> <div class="btn-group" role="group">
......
<script> <script>
import Icon from '~/vue_shared/components/icon.vue';
import { n__ } from '~/locale'; import { n__ } from '~/locale';
export default { export default {
components: { Icon },
props: { props: {
addedLines: { addedLines: {
type: Number, type: Number,
...@@ -19,7 +21,7 @@ export default { ...@@ -19,7 +21,7 @@ export default {
}, },
computed: { computed: {
filesText() { filesText() {
return n__('file', 'files', this.diffFilesLength); return n__('File', 'Files', this.diffFilesLength);
}, },
isCompareVersionsHeader() { isCompareVersionsHeader() {
return Boolean(this.diffFilesLength); return Boolean(this.diffFilesLength);
...@@ -37,21 +39,14 @@ export default { ...@@ -37,21 +39,14 @@ export default {
}" }"
> >
<div v-if="diffFilesLength !== null" class="diff-stats-group"> <div v-if="diffFilesLength !== null" class="diff-stats-group">
<span class="text-secondary bold">{{ diffFilesLength }} {{ filesText }}</span> <icon name="doc-code" class="diff-stats-icon text-secondary" />
<strong>{{ diffFilesLength }} {{ filesText }}</strong>
</div> </div>
<div <div class="diff-stats-group cgreen">
class="diff-stats-group cgreen d-flex align-items-center" <icon name="file-addition" class="diff-stats-icon" /> <strong>{{ addedLines }}</strong>
:class="{ bold: isCompareVersionsHeader }"
>
<span>+</span>
<span class="js-file-addition-line">{{ addedLines }}</span>
</div> </div>
<div <div class="diff-stats-group cred">
class="diff-stats-group cred d-flex align-items-center" <icon name="file-deletion" class="diff-stats-icon" /> <strong>{{ removedLines }}</strong>
:class="{ bold: isCompareVersionsHeader }"
>
<span>-</span>
<span class="js-file-deletion-line">{{ removedLines }}</span>
</div> </div>
</div> </div>
</template> </template>
...@@ -4,6 +4,7 @@ import { GlTooltipDirective } from '@gitlab/ui'; ...@@ -4,6 +4,7 @@ import { GlTooltipDirective } from '@gitlab/ui';
import { s__, sprintf } from '~/locale'; import { s__, sprintf } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import FileRow from '~/vue_shared/components/file_row.vue'; import FileRow from '~/vue_shared/components/file_row.vue';
import FileRowStats from './file_row_stats.vue';
export default { export default {
directives: { directives: {
...@@ -47,6 +48,9 @@ export default { ...@@ -47,6 +48,9 @@ export default {
return acc; return acc;
}, []); }, []);
}, },
fileRowExtraComponent() {
return this.hideFileStats ? null : FileRowStats;
},
}, },
methods: { methods: {
...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile']), ...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile']),
...@@ -54,8 +58,8 @@ export default { ...@@ -54,8 +58,8 @@ export default {
this.search = ''; this.search = '';
}, },
}, },
searchPlaceholder: sprintf(s__('MergeRequest|Search files (%{modifier_key}P)'), { searchPlaceholder: sprintf(s__('MergeRequest|Filter files or search with %{modifier_key}+p'), {
modifier_key: /Mac/i.test(navigator.userAgent) ? '' : 'Ctrl+', modifier_key: /Mac/i.test(navigator.userAgent) ? 'cmd' : 'ctrl',
}), }),
}; };
</script> </script>
...@@ -93,6 +97,7 @@ export default { ...@@ -93,6 +97,7 @@ export default {
:file="file" :file="file"
:level="0" :level="0"
:hide-extra-on-tree="true" :hide-extra-on-tree="true"
:extra-component="fileRowExtraComponent"
:show-changed-icon="true" :show-changed-icon="true"
@toggleTreeOpen="toggleTreeOpen" @toggleTreeOpen="toggleTreeOpen"
@clickFile="scrollToFile" @clickFile="scrollToFile"
......
...@@ -36,17 +36,12 @@ export default { ...@@ -36,17 +36,12 @@ export default {
required: false, required: false,
default: true, default: true,
}, },
showChangedStatus: {
type: Boolean,
required: false,
default: false,
},
}, },
computed: { computed: {
changedIcon() { changedIcon() {
// False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26 // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
// eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
const suffix = this.showStagedIcon ? '-solid' : ''; const suffix = !this.file.changed && this.file.staged && this.showStagedIcon ? '-solid' : '';
return `${getCommitIconMap(this.file).icon}${suffix}`; return `${getCommitIconMap(this.file).icon}${suffix}`;
}, },
...@@ -91,8 +86,8 @@ export default { ...@@ -91,8 +86,8 @@ export default {
<span <span
v-gl-tooltip.right v-gl-tooltip.right
:title="tooltipTitle" :title="tooltipTitle"
:class="[{ 'ml-auto': isCentered }, changedIconClass]" :class="{ 'ml-auto': isCentered }"
class="file-changed-icon d-flex align-items-center " class="file-changed-icon d-inline-block"
> >
<icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" /> <icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" />
</span> </span>
......
<script> <script>
import Icon from '~/vue_shared/components/icon.vue';
import FileHeader from '~/vue_shared/components/file_row_header.vue'; import FileHeader from '~/vue_shared/components/file_row_header.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue';
import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue'; import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
...@@ -8,6 +9,7 @@ export default { ...@@ -8,6 +9,7 @@ export default {
components: { components: {
FileHeader, FileHeader,
FileIcon, FileIcon,
Icon,
ChangedFileIcon, ChangedFileIcon,
}, },
props: { props: {
...@@ -24,7 +26,6 @@ export default { ...@@ -24,7 +26,6 @@ export default {
required: false, required: false,
default: null, default: null,
}, },
hideExtraOnTree: { hideExtraOnTree: {
type: Boolean, type: Boolean,
required: false, required: false,
...@@ -142,17 +143,17 @@ export default { ...@@ -142,17 +143,17 @@ export default {
@mouseleave="toggleDropdown(false)" @mouseleave="toggleDropdown(false)"
> >
<div class="file-row-name-container"> <div class="file-row-name-container">
<span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated d-flex"> <span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated">
<file-icon <file-icon
v-if="!showChangedIcon || file.type === 'tree'" v-if="!showChangedIcon || file.type === 'tree'"
class="file-row-icon text-secondary mr-1" class="file-row-icon"
:file-name="file.name" :file-name="file.name"
:loading="file.loading" :loading="file.loading"
:folder="isTree" :folder="isTree"
:opened="file.opened" :opened="file.opened"
:size="16" :size="16"
/> />
<file-icon v-else :file-name="file.name" :size="16" css-classes="top mr-1" /> <changed-file-icon v-else :file="file" :size="16" class="append-right-5" />
{{ file.name }} {{ file.name }}
</span> </span>
<component <component
...@@ -162,7 +163,6 @@ export default { ...@@ -162,7 +163,6 @@ export default {
:dropdown-open="dropdownOpen" :dropdown-open="dropdownOpen"
@toggle="toggleDropdown($event)" @toggle="toggleDropdown($event)"
/> />
<changed-file-icon :file="file" :size="16" class="append-right-5" />
</div> </div>
</div> </div>
<template v-if="file.opened || file.isHeader"> <template v-if="file.opened || file.isHeader">
...@@ -172,6 +172,7 @@ export default { ...@@ -172,6 +172,7 @@ export default {
:file="childFile" :file="childFile"
:level="childFilesLevel" :level="childFilesLevel"
:hide-extra-on-tree="hideExtraOnTree" :hide-extra-on-tree="hideExtraOnTree"
:extra-component="extraComponent"
:show-changed-icon="showChangedIcon" :show-changed-icon="showChangedIcon"
@toggleTreeOpen="toggleTreeOpen" @toggleTreeOpen="toggleTreeOpen"
@clickFile="clickedFile" @clickFile="clickedFile"
......
...@@ -14,9 +14,9 @@ ...@@ -14,9 +14,9 @@
cursor: pointer; cursor: pointer;
@media (min-width: map-get($grid-breakpoints, md)) { @media (min-width: map-get($grid-breakpoints, md)) {
// The `+11` is to ensure the file header border shows when scrolled - // The `-1` below is to prevent two borders from clashing up against eachother -
// the bottom of the compare-versions header and the top of the file header // the bottom of the compare-versions header and the top of the file header
$mr-file-header-top: $mr-version-controls-height + $header-height + $mr-tabs-height + 11; $mr-file-header-top: $mr-version-controls-height + $header-height + $mr-tabs-height - 1;
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
...@@ -552,7 +552,7 @@ table.code { ...@@ -552,7 +552,7 @@ table.code {
.diff-stats { .diff-stats {
align-items: center; align-items: center;
padding: 0 1rem; padding: 0 0.25rem;
.diff-stats-group { .diff-stats-group {
padding: 0 0.25rem; padding: 0 0.25rem;
...@@ -564,7 +564,7 @@ table.code { ...@@ -564,7 +564,7 @@ table.code {
&.is-compare-versions-header { &.is-compare-versions-header {
.diff-stats-group { .diff-stats-group {
padding: 0 0.25rem; padding: 0 0.5rem;
} }
} }
} }
...@@ -1059,8 +1059,8 @@ table.code { ...@@ -1059,8 +1059,8 @@ table.code {
.diff-tree-list { .diff-tree-list {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
$top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 11px; $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
top: $header-height + $mr-tabs-height + $mr-version-controls-height + 11px; top: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
max-height: calc(100vh - #{$top-pos}); max-height: calc(100vh - #{$top-pos});
z-index: 202; z-index: 202;
...@@ -1097,7 +1097,10 @@ table.code { ...@@ -1097,7 +1097,10 @@ table.code {
.tree-list-scroll { .tree-list-scroll {
max-height: 100%; max-height: 100%;
padding-top: $grid-size;
padding-bottom: $grid-size; padding-bottom: $grid-size;
border-top: 1px solid $border-color;
border-bottom: 1px solid $border-color;
overflow-y: scroll; overflow-y: scroll;
overflow-x: auto; overflow-x: auto;
} }
......
...@@ -708,7 +708,7 @@ ...@@ -708,7 +708,7 @@
.mr-version-controls { .mr-version-controls {
position: relative; position: relative;
z-index: 203; z-index: 203;
background: $white-light; background: $gray-light;
color: $gl-text-color; color: $gl-text-color;
margin-top: -1px; margin-top: -1px;
...@@ -732,7 +732,7 @@ ...@@ -732,7 +732,7 @@
} }
.content-block { .content-block {
padding: $gl-padding; padding: $gl-padding-top $gl-padding;
border-bottom: 0; border-bottom: 0;
} }
......
---
title: Restyle changes header & file tree
merge_request: 22364
author:
type: changed
---
title: Reverts MR diff redesign which fixes Web IDE visual bugs including file dropdown
not showing up
merge_request: 23428
author:
type: fixed
...@@ -8097,6 +8097,11 @@ msgstr "" ...@@ -8097,6 +8097,11 @@ msgstr ""
msgid "Fetching licenses failed. You are not permitted to perform this action." msgid "Fetching licenses failed. You are not permitted to perform this action."
msgstr "" msgstr ""
msgid "File"
msgid_plural "Files"
msgstr[0] ""
msgstr[1] ""
msgid "File Hooks" msgid "File Hooks"
msgstr "" msgstr ""
...@@ -11680,10 +11685,10 @@ msgstr "" ...@@ -11680,10 +11685,10 @@ msgstr ""
msgid "MergeRequest|Error loading full diff. Please try again." msgid "MergeRequest|Error loading full diff. Please try again."
msgstr "" msgstr ""
msgid "MergeRequest|No files found" msgid "MergeRequest|Filter files or search with %{modifier_key}+p"
msgstr "" msgstr ""
msgid "MergeRequest|Search files (%{modifier_key}P)" msgid "MergeRequest|No files found"
msgstr "" msgstr ""
msgid "Merged" msgid "Merged"
...@@ -21778,9 +21783,6 @@ msgstr "" ...@@ -21778,9 +21783,6 @@ msgstr ""
msgid "among other things" msgid "among other things"
msgstr "" msgstr ""
msgid "and"
msgstr ""
msgid "any-approver for the merge request already exists" msgid "any-approver for the merge request already exists"
msgstr "" msgstr ""
...@@ -22220,11 +22222,6 @@ msgstr "" ...@@ -22220,11 +22222,6 @@ msgstr ""
msgid "failed to dismiss associated finding(id=%{finding_id}): %{message}" msgid "failed to dismiss associated finding(id=%{finding_id}): %{message}"
msgstr "" msgstr ""
msgid "file"
msgid_plural "files"
msgstr[0] ""
msgstr[1] ""
msgid "finding is not found or is already attached to a vulnerability" msgid "finding is not found or is already attached to a vulnerability"
msgstr "" msgstr ""
......
...@@ -50,7 +50,7 @@ describe 'Merge request > User sees versions', :js do ...@@ -50,7 +50,7 @@ describe 'Merge request > User sees versions', :js do
expect(page).to have_content 'latest version' expect(page).to have_content 'latest version'
end end
expect(page).to have_content '8 files' expect(page).to have_content '8 Files'
end end
it_behaves_like 'allows commenting', it_behaves_like 'allows commenting',
...@@ -84,7 +84,7 @@ describe 'Merge request > User sees versions', :js do ...@@ -84,7 +84,7 @@ describe 'Merge request > User sees versions', :js do
end end
it 'shows comments that were last relevant at that version' do it 'shows comments that were last relevant at that version' do
expect(page).to have_content '5 files' expect(page).to have_content '5 Files'
position = Gitlab::Diff::Position.new( position = Gitlab::Diff::Position.new(
old_path: ".gitmodules", old_path: ".gitmodules",
...@@ -128,10 +128,12 @@ describe 'Merge request > User sees versions', :js do ...@@ -128,10 +128,12 @@ describe 'Merge request > User sees versions', :js do
diff_id: merge_request_diff3.id, diff_id: merge_request_diff3.id,
start_sha: '6f6d7e7ed97bb5f0054f2b1df789b39ca89b6ff9' start_sha: '6f6d7e7ed97bb5f0054f2b1df789b39ca89b6ff9'
) )
expect(page).to have_content '4 files' expect(page).to have_content '4 Files'
additions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group .js-file-addition-line').text additions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group svg.ic-file-addition')
deletions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group .js-file-deletion-line').text .ancestor('.diff-stats-group').text
deletions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group svg.ic-file-deletion')
.ancestor('.diff-stats-group').text
expect(additions_content).to eq '15' expect(additions_content).to eq '15'
expect(deletions_content).to eq '6' expect(deletions_content).to eq '6'
...@@ -154,10 +156,12 @@ describe 'Merge request > User sees versions', :js do ...@@ -154,10 +156,12 @@ describe 'Merge request > User sees versions', :js do
end end
it 'show diff between new and old version' do it 'show diff between new and old version' do
additions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group .js-file-addition-line').text additions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group svg.ic-file-addition')
deletions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group .js-file-deletion-line').text .ancestor('.diff-stats-group').text
deletions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group svg.ic-file-deletion')
.ancestor('.diff-stats-group').text
expect(page).to have_content '4 files' expect(page).to have_content '4 Files'
expect(additions_content).to eq '15' expect(additions_content).to eq '15'
expect(deletions_content).to eq '6' expect(deletions_content).to eq '6'
end end
...@@ -167,7 +171,7 @@ describe 'Merge request > User sees versions', :js do ...@@ -167,7 +171,7 @@ describe 'Merge request > User sees versions', :js do
page.within '.mr-version-dropdown' do page.within '.mr-version-dropdown' do
expect(page).to have_content 'latest version' expect(page).to have_content 'latest version'
end end
expect(page).to have_content '8 files' expect(page).to have_content '8 Files'
end end
it_behaves_like 'allows commenting', it_behaves_like 'allows commenting',
...@@ -193,7 +197,7 @@ describe 'Merge request > User sees versions', :js do ...@@ -193,7 +197,7 @@ describe 'Merge request > User sees versions', :js do
find('.btn-default').click find('.btn-default').click
click_link 'version 1' click_link 'version 1'
end end
expect(page).to have_content '0 files' expect(page).to have_content '0 Files'
end end
end end
...@@ -219,7 +223,7 @@ describe 'Merge request > User sees versions', :js do ...@@ -219,7 +223,7 @@ describe 'Merge request > User sees versions', :js do
expect(page).to have_content 'version 1' expect(page).to have_content 'version 1'
end end
expect(page).to have_content '0 files' expect(page).to have_content '0 Files'
end end
end end
......
...@@ -49,7 +49,8 @@ describe('CompareVersions', () => { ...@@ -49,7 +49,8 @@ describe('CompareVersions', () => {
expect(treeListBtn.exists()).toBe(true); expect(treeListBtn.exists()).toBe(true);
expect(treeListBtn.attributes('title')).toBe('Hide file browser'); expect(treeListBtn.attributes('title')).toBe('Hide file browser');
expect(treeListBtn.find(Icon).props('name')).toBe('file-tree'); expect(treeListBtn.findAll(Icon).length).not.toBe(0);
expect(treeListBtn.find(Icon).props('name')).toBe('collapse-left');
}); });
it('should render comparison dropdowns with correct values', () => { it('should render comparison dropdowns with correct values', () => {
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Icon from '~/vue_shared/components/icon.vue';
import DiffStats from '~/diffs/components/diff_stats.vue'; import DiffStats from '~/diffs/components/diff_stats.vue';
describe('diff_stats', () => { describe('diff_stats', () => {
...@@ -23,11 +24,18 @@ describe('diff_stats', () => { ...@@ -23,11 +24,18 @@ describe('diff_stats', () => {
}, },
}); });
const findFileLine = name => wrapper.find(name); const findIcon = name =>
const additions = findFileLine('.js-file-addition-line'); wrapper
const deletions = findFileLine('.js-file-deletion-line'); .findAll(Icon)
.filter(c => c.attributes('name') === name)
.at(0).element.parentNode;
expect(additions.text()).toBe('100'); const additions = findIcon('file-addition');
expect(deletions.text()).toBe('200'); const deletions = findIcon('file-deletion');
const filesChanged = findIcon('doc-code');
expect(additions.textContent).toContain('100');
expect(deletions.textContent).toContain('200');
expect(filesChanged.textContent).toContain('300');
}); });
}); });
...@@ -56,10 +56,10 @@ describe('Changed file icon', () => { ...@@ -56,10 +56,10 @@ describe('Changed file icon', () => {
describe.each` describe.each`
file | iconName | tooltipText | desc file | iconName | tooltipText | desc
${changedFile()} | ${'file-modified-solid'} | ${'Unstaged modification'} | ${'with file changed'} ${changedFile()} | ${'file-modified'} | ${'Unstaged modification'} | ${'with file changed'}
${stagedFile()} | ${'file-modified-solid'} | ${'Staged modification'} | ${'with file staged'} ${stagedFile()} | ${'file-modified-solid'} | ${'Staged modification'} | ${'with file staged'}
${changedAndStagedFile()} | ${'file-modified-solid'} | ${'Unstaged and staged modification'} | ${'with file changed and staged'} ${changedAndStagedFile()} | ${'file-modified'} | ${'Unstaged and staged modification'} | ${'with file changed and staged'}
${newFile()} | ${'file-addition-solid'} | ${'Unstaged addition'} | ${'with file new'} ${newFile()} | ${'file-addition'} | ${'Unstaged addition'} | ${'with file new'}
`('$desc', ({ file, iconName, tooltipText }) => { `('$desc', ({ file, iconName, tooltipText }) => {
beforeEach(() => { beforeEach(() => {
factory({ file }); factory({ file });
......
...@@ -93,13 +93,13 @@ describe('RepoTab', () => { ...@@ -93,13 +93,13 @@ describe('RepoTab', () => {
Vue.nextTick() Vue.nextTick()
.then(() => { .then(() => {
expect(vm.$el.querySelector('.file-modified-solid')).toBeNull(); expect(vm.$el.querySelector('.file-modified')).toBeNull();
vm.$el.dispatchEvent(new Event('mouseout')); vm.$el.dispatchEvent(new Event('mouseout'));
}) })
.then(Vue.nextTick) .then(Vue.nextTick)
.then(() => { .then(() => {
expect(vm.$el.querySelector('.file-modified-solid')).not.toBeNull(); expect(vm.$el.querySelector('.file-modified')).not.toBeNull();
done(); done();
}) })
......
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