Commit 24c81b28 authored by Scott Stern's avatar Scott Stern Committed by Paul Slaughter

Fix board settings sidebar FOSS specs

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/38363
parent cbf53224
<script>
import { GlDrawer, GlLabel, GlAvatarLink, GlAvatarLabeled, GlLink } from '@gitlab/ui';
import { GlDrawer, GlLabel } from '@gitlab/ui';
import { mapActions, mapState } from 'vuex';
import { __ } from '~/locale';
import boardsStore from '~/boards/stores/boards_store';
......@@ -15,16 +15,13 @@ export default {
milestone: 'milestone',
label: 'label',
labelListText: __('Label'),
labelMilestoneText: __('Milestone'),
labelAssigneeText: __('Assignee'),
components: {
GlDrawer,
GlLabel,
GlAvatarLink,
GlAvatarLabeled,
GlLink,
BoardSettingsSidebarWipLimit: () =>
import('ee_component/boards/components/board_settings_wip_limit.vue'),
BoardSettingsListTypes: () =>
import('ee_component/boards/components/board_settings_list_types.vue'),
},
computed: {
...mapState(['activeId']),
......@@ -41,30 +38,11 @@ export default {
activeListLabel() {
return this.activeList.label;
},
activeListMilestone() {
return this.activeList.milestone;
},
activeListAssignee() {
return this.activeList.assignee;
},
boardListType() {
return this.activeList.type || null;
},
listTypeTitle() {
switch (this.boardListType) {
case this.$options.milestone: {
return this.$options.labelMilestoneText;
}
case this.$options.label: {
return this.$options.labelListText;
}
case this.$options.assignee: {
return this.$options.labelAssigneeText;
}
default: {
return '';
}
}
return this.$options.labelListText;
},
},
created() {
......@@ -94,32 +72,20 @@ export default {
>
<template #header>{{ $options.listSettingsText }}</template>
<template v-if="isSidebarOpen">
<div class="d-flex flex-column align-items-start">
<label class="js-list-label">{{ listTypeTitle }}</label>
<template v-if="boardListType === $options.label">
<gl-label
:title="activeListLabel.title"
:background-color="activeListLabel.color"
:scoped="showScopedLabels(activeListLabel)"
/>
</template>
<template v-else-if="boardListType === $options.assignee">
<gl-avatar-link class="js-assignee" :href="activeListAssignee.webUrl">
<gl-avatar-labeled
:size="32"
:label="activeListAssignee.name"
:sub-label="`@${activeListAssignee.username}`"
:src="activeListAssignee.avatar"
/>
</gl-avatar-link>
</template>
<template v-else-if="boardListType === $options.milestone">
<gl-link class="js-milestone" :href="activeListMilestone.webUrl">
{{ activeListMilestone.title }}
</gl-link>
</template>
<div v-if="boardListType === $options.label">
<label class="js-list-label gl-display-block">{{ listTypeTitle }}</label>
<gl-label
:title="activeListLabel.title"
:background-color="activeListLabel.color"
:scoped="showScopedLabels(activeListLabel)"
/>
</div>
<board-settings-list-types
v-else
:active-list="activeList"
:board-list-type="boardListType"
/>
<board-settings-sidebar-wip-limit :max-issue-count="activeList.maxIssueCount" />
</template>
</gl-drawer>
......
<script>
import { GlAvatarLink, GlAvatarLabeled, GlLink } from '@gitlab/ui';
import { __ } from '~/locale';
export default {
milestone: 'milestone',
assignee: 'assignee',
labelMilestoneText: __('Milestone'),
labelAssigneeText: __('Assignee'),
components: {
GlLink,
GlAvatarLink,
GlAvatarLabeled,
},
props: {
boardListType: {
type: String,
required: true,
},
activeList: {
type: Object,
required: true,
},
},
computed: {
activeListAssignee() {
return this.activeList.assignee;
},
activeListMilestone() {
return this.activeList.milestone;
},
listTypeTitle() {
switch (this.boardListType) {
case this.$options.milestone: {
return this.$options.labelMilestoneText;
}
case this.$options.assignee: {
return this.$options.labelAssigneeText;
}
default: {
return '';
}
}
},
},
};
</script>
<template>
<div>
<label class="js-list-label gl-display-block">{{ listTypeTitle }}</label>
<gl-link
v-if="boardListType === $options.milestone"
class="js-milestone"
:href="activeListMilestone.webUrl"
>{{ activeListMilestone.title }}</gl-link
>
<gl-avatar-link
v-else-if="boardListType === $options.assignee"
class="js-assignee"
:href="activeListAssignee.webUrl"
>
<gl-avatar-labeled
:size="32"
:label="activeListAssignee.name"
:sub-label="`@${activeListAssignee.username}`"
:src="activeListAssignee.avatar"
/>
</gl-avatar-link>
</div>
</template>
import { shallowMount } from '@vue/test-utils';
import { GlAvatarLink, GlAvatarLabeled } from '@gitlab/ui';
import BoardSettingsListTypes from 'ee_component/boards/components/board_settings_list_types.vue';
describe('BoardSettingsListType', () => {
let wrapper;
const activeList = {
milestone: {
webUrl: 'https://gitlab.com/h5bp/html5-boilerplate/-/milestones/1',
title: 'Backlog',
},
assignee: { webUrl: 'https://gitlab.com/root', name: 'root', username: 'root' },
};
const createComponent = props => {
wrapper = shallowMount(BoardSettingsListTypes, {
propsData: { ...props, activeList },
});
};
afterEach(() => {
wrapper.destroy();
});
describe('when list type is "milestone"', () => {
it('renders the correct milestone text', () => {
createComponent({ activeId: 1, boardListType: 'milestone' });
expect(wrapper.find('.js-milestone').text()).toBe('Backlog');
});
it('renders the correct list type text', () => {
createComponent({ activeId: 1, boardListType: 'milestone' });
expect(wrapper.find('.js-list-label').text()).toBe('Milestone');
});
});
describe('when list type is "assignee"', () => {
afterEach(() => {
wrapper.destroy();
});
it('renders gl-avatar-link with correct href', () => {
createComponent({ activeId: 1, boardListType: 'assignee' });
expect(wrapper.find(GlAvatarLink).exists()).toBe(true);
expect(wrapper.find(GlAvatarLink).attributes('href')).toBe('https://gitlab.com/root');
});
it('renders gl-avatar-labeled with "root" as username and name as "root"', () => {
createComponent({ activeId: 1, boardListType: 'assignee' });
expect(wrapper.find(GlAvatarLabeled).exists()).toBe(true);
expect(wrapper.find(GlAvatarLabeled).attributes('label')).toBe('root');
expect(wrapper.find(GlAvatarLabeled).attributes('sublabel')).toBe('@root');
});
it('renders the correct list type text', () => {
createComponent({ activeId: 1, boardListType: 'assignee' });
expect(wrapper.find('.js-list-label').text()).toBe('Assignee');
});
});
});
......@@ -5,6 +5,7 @@ import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
import BoardSettingsWipLimit from 'ee_component/boards/components/board_settings_wip_limit.vue';
import BoardSettingsListTypes from 'ee_component/boards/components/board_settings_list_types.vue';
import boardsStore from '~/boards/stores/boards_store';
import { inactiveId } from '~/boards/constants';
......@@ -33,6 +34,7 @@ describe('ee/BoardSettingsSidebar', () => {
localVue,
stubs: {
'board-settings-sidebar-wip-limit': BoardSettingsWipLimit,
'board-settings-list-types': BoardSettingsListTypes,
},
});
};
......@@ -59,4 +61,20 @@ describe('ee/BoardSettingsSidebar', () => {
expect(wrapper.find(BoardSettingsWipLimit).exists()).toBe(true);
});
it('confirms we render BoardSettingsListTypes', () => {
boardsStore.addList({
id: 1,
milestone: {
webUrl: 'https://gitlab.com/h5bp/html5-boilerplate/-/milestones/1',
title: 'Backlog',
},
max_issue_count: 1,
list_type: 'milestone',
});
createComponent({ activeId: listId });
expect(wrapper.find(BoardSettingsListTypes).exists()).toBe(true);
});
});
......@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
import axios from 'axios';
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlDrawer, GlLabel, GlAvatarLink, GlAvatarLabeled } from '@gitlab/ui';
import { GlDrawer, GlLabel } from '@gitlab/ui';
import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
import boardsStore from '~/boards/stores/boards_store';
import sidebarEventHub from '~/sidebar/event_hub';
......@@ -156,82 +156,4 @@ describe('BoardSettingsSidebar', () => {
expect(findLabel().exists()).toBe(false);
});
});
describe('when activeList is present', () => {
beforeEach(() => {
mock = new MockAdapter(axios);
});
afterEach(() => {
boardsStore.removeList(listId);
});
describe('when list type is "milestone"', () => {
beforeEach(() => {
boardsStore.addList({
id: 1,
milestone: {
webUrl: 'https://gitlab.com/h5bp/html5-boilerplate/-/milestones/1',
title: 'Backlog',
},
max_issue_count: 1,
list_type: 'milestone',
});
});
afterEach(() => {
boardsStore.removeList(1, 'milestone');
wrapper.destroy();
});
it('renders the correct milestone text', () => {
createComponent({ activeId: 1 });
expect(wrapper.find('.js-milestone').text()).toBe('Backlog');
});
it('renders the correct list type text', () => {
createComponent({ activeId: 1 });
expect(wrapper.find('.js-list-label').text()).toBe('Milestone');
});
});
describe('when list type is "assignee"', () => {
beforeEach(() => {
boardsStore.addList({
id: 1,
user: { username: 'root', avatar: '', name: 'Test', webUrl: 'https://gitlab.com/root' },
max_issue_count: 1,
list_type: 'assignee',
});
});
afterEach(() => {
boardsStore.removeList(1, 'assignee');
wrapper.destroy();
});
it('renders gl-avatar-link with correct href', () => {
createComponent({ activeId: 1 });
expect(wrapper.find(GlAvatarLink).exists()).toBe(true);
expect(wrapper.find(GlAvatarLink).attributes('href')).toBe('https://gitlab.com/root');
});
it('renders gl-avatar-labeled with "root" as username and name as "Test"', () => {
createComponent({ activeId: 1 });
expect(wrapper.find(GlAvatarLabeled).exists()).toBe(true);
expect(wrapper.find(GlAvatarLabeled).attributes('label')).toBe('Test');
expect(wrapper.find(GlAvatarLabeled).attributes('sublabel')).toBe('@root');
});
it('renders the correct list type text', () => {
createComponent({ activeId: 1 });
expect(wrapper.find('.js-list-label').text()).toBe('Assignee');
});
});
});
});
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