Commit 0a023197 authored by Samantha Ming's avatar Samantha Ming

Add specs for components

- Fill in slot for ide file row & remove unused prop from file_row
- Add spec test to ide_file_row
- Remove un-needed test from file_row
parent 08700a2b
Pipeline #116715212 passed with stages
in 89 minutes and 12 seconds
......@@ -4,14 +4,41 @@
* https://gitlab.com/gitlab-org/gitlab/-/merge_requests/23720
*/
import FileRow from '~/vue_shared/components/file_row.vue';
import FileRowExtra from './file_row_extra.vue';
export default {
name: 'IdeFileRow',
components: {
FileRow,
FileRowExtra,
},
props: {
file: {
type: Object,
required: true,
},
},
data() {
return {
dropdownOpen: false,
};
},
methods: {
toggleDropdown(val) {
this.dropdownOpen = val;
},
},
};
</script>
<template>
<file-row v-bind="$attrs" v-on="$listeners" />
<file-row :file="file" v-bind="$attrs" @mouseleave="toggleDropdown(false)" v-on="$listeners">
<file-row-extra
v-if="file.type === 'tree'"
:file="file"
:dropdown-open="dropdownOpen"
@toggle="toggleDropdown($event)"
@click="toggleDropdown(false)"
/>
</file-row>
</template>
<script>
import Icon from '~/vue_shared/components/icon.vue';
import FileHeader from '~/vue_shared/components/file_row_header.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue';
import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
......@@ -9,7 +8,6 @@ export default {
components: {
FileHeader,
FileIcon,
Icon,
ChangedFileIcon,
},
props: {
......@@ -21,27 +19,12 @@ export default {
type: Number,
required: true,
},
extraComponent: {
type: Object,
required: false,
default: null,
},
hideExtraOnTree: {
type: Boolean,
required: false,
default: false,
},
showChangedIcon: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
dropdownOpen: false,
};
},
computed: {
isTree() {
return this.file.type === 'tree';
......@@ -120,9 +103,6 @@ export default {
return this.$router.currentRoute.path === `/project${this.file.url}`;
},
toggleDropdown(val) {
this.dropdownOpen = val;
},
},
};
</script>
......@@ -136,7 +116,7 @@ export default {
class="file-row"
role="button"
@click="clickFile"
@mouseleave="toggleDropdown(false)"
@mouseleave="$emit('mouseleave', $event)"
>
<div class="file-row-name-container">
<span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated">
......@@ -152,13 +132,7 @@ export default {
<changed-file-icon v-else :file="file" :size="16" class="append-right-5" />
{{ file.name }}
</span>
<component
:is="extraComponent"
v-if="extraComponent && !(hideExtraOnTree && file.type === 'tree')"
:file="file"
:dropdown-open="dropdownOpen"
@toggle="toggleDropdown($event)"
/>
<slot></slot>
</div>
</div>
</template>
......
import { shallowMount } from '@vue/test-utils';
import { createLocalVue, mount } from '@vue/test-utils';
import Vuex from 'vuex';
import IdeFileRow from '~/ide/components/ide_file_row.vue';
import FileRow from '~/vue_shared/components/file_row.vue';
import FileRowExtra from '~/ide/components/file_row_extra.vue';
import { createStore } from '~/ide/stores';
const localVue = createLocalVue();
localVue.use(Vuex);
const defaultComponentProps = (type = 'tree') => ({
level: 4,
file: {
type,
name: 'js',
},
});
describe('Ide File Row component', () => {
let wrapper;
const createComponent = (props = {}) => {
wrapper = shallowMount(IdeFileRow, {
wrapper = mount(IdeFileRow, {
propsData: { ...props },
store: createStore(),
localVue,
});
};
......@@ -16,10 +32,58 @@ describe('Ide File Row component', () => {
});
it('renders file row component', () => {
createComponent({
level: 4,
file: {},
});
createComponent(defaultComponentProps());
expect(wrapper.find(FileRow).exists()).toEqual(true);
});
it('hides dropdown when mouseleave', () => {
createComponent(defaultComponentProps());
wrapper.setMethods({
toggleDropdown: jest.fn(),
});
wrapper.trigger('mouseleave');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.vm.toggleDropdown).toHaveBeenCalled();
expect(wrapper.vm.toggleDropdown).toHaveBeenCalledWith(false);
});
});
describe('FileRowExtra component', () => {
it('hides dropdown on click', () => {
createComponent(defaultComponentProps());
wrapper.setMethods({
toggleDropdown: jest.fn(),
});
wrapper.find(FileRowExtra).vm.$emit('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.vm.toggleDropdown).toHaveBeenCalled();
expect(wrapper.vm.toggleDropdown).toHaveBeenCalledWith(false);
});
});
it('call dropdown on toggle', () => {
createComponent(defaultComponentProps());
wrapper.setMethods({
toggleDropdown: jest.fn(),
});
wrapper.find(FileRowExtra).vm.$emit('toggle');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.vm.toggleDropdown).toHaveBeenCalled();
});
});
it.each`
type | value | desc
${'tree'} | ${true} | ${'is shown if file type is tree'}
${'hello'} | ${false} | ${'is hidden if file is not tree'}
`('$desc', ({ type, value }) => {
createComponent(defaultComponentProps(type));
expect(wrapper.find(FileRowExtra).exists()).toEqual(value);
});
});
});
import Vue from 'vue';
import { file } from 'spec/ide/helpers';
import FileRow from '~/vue_shared/components/file_row.vue';
import FileRowExtra from '~/ide/components/file_row_extra.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
describe('File row component', () => {
......@@ -17,9 +16,6 @@ describe('File row component', () => {
vm.$destroy();
});
const findNewDropdown = () => vm.$el.querySelector('.ide-new-btn .dropdown');
const findNewDropdownButton = () => vm.$el.querySelector('.ide-new-btn .dropdown button');
it('renders name', () => {
createComponent({
file: file('t4'),
......@@ -88,59 +84,4 @@ describe('File row component', () => {
expect(vm.$el.classList).toContain('js-file-row-header');
});
describe('new dropdown', () => {
beforeEach(() => {
createComponent({
file: file('t5'),
level: 1,
extraComponent: FileRowExtra,
});
});
it('renders in extra component', () => {
expect(findNewDropdown()).not.toBe(null);
});
it('is hidden at start', () => {
expect(findNewDropdown()).not.toHaveClass('show');
});
it('is opened when button is clicked', done => {
expect(vm.dropdownOpen).toBe(false);
findNewDropdownButton().dispatchEvent(new Event('click'));
vm.$nextTick()
.then(() => {
expect(vm.dropdownOpen).toBe(true);
expect(findNewDropdown()).toHaveClass('show');
})
.then(done)
.catch(done.fail);
});
describe('when opened', () => {
beforeEach(() => {
vm.dropdownOpen = true;
});
it('stays open when button triggers mouseout', () => {
findNewDropdownButton().dispatchEvent(new Event('mouseout'));
expect(vm.dropdownOpen).toBe(true);
});
it('stays open when button triggers mouseleave', () => {
findNewDropdownButton().dispatchEvent(new Event('mouseleave'));
expect(vm.dropdownOpen).toBe(true);
});
it('closes when row triggers mouseleave', () => {
vm.$el.dispatchEvent(new Event('mouseleave'));
expect(vm.dropdownOpen).toBe(false);
});
});
});
});
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