Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
c1ed7f3f
G
gitlab-foss
项目概览
李少辉-开发者
/
gitlab-foss
通知
15
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gitlab-foss
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
c1ed7f3f
编写于
3月 05, 2018
作者:
K
Kushal Pandya
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
LabelsSelect DropdownValue Component
上级
8b44ad6e
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
157 addition
and
0 deletion
+157
-0
app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
...hared/components/sidebar/labels_select/dropdown_value.vue
+63
-0
spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
...d/components/sidebar/labels_select/dropdown_value_spec.js
+94
-0
未找到文件。
app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
0 → 100644
浏览文件 @
c1ed7f3f
<
script
>
import
tooltip
from
'
~/vue_shared/directives/tooltip
'
;
export
default
{
directives
:
{
tooltip
,
},
props
:
{
labels
:
{
type
:
Array
,
required
:
true
,
},
labelFilterBasePath
:
{
type
:
String
,
required
:
true
,
},
},
computed
:
{
isEmpty
()
{
return
this
.
labels
.
length
===
0
;
},
},
methods
:
{
labelFilterUrl
(
label
)
{
return
`
${
this
.
labelFilterBasePath
}
?label_name[]=
${
encodeURIComponent
(
label
.
title
)}
`
;
},
labelStyle
(
label
)
{
return
{
color
:
label
.
textColor
,
backgroundColor
:
label
.
color
,
};
},
},
};
</
script
>
<
template
>
<div
class=
"hide-collapsed value issuable-show-labels"
>
<span
v-if=
"isEmpty"
class=
"text-secondary"
>
<slot>
{{
__
(
'
None
'
)
}}
</slot>
</span>
<a
v-else
v-for=
"label in labels"
:key=
"label.id"
:href=
"labelFilterUrl(label)"
>
<span
v-tooltip
class=
"label color-label"
data-placement=
"bottom"
data-container=
"body"
:style=
"labelStyle(label)"
:title=
"label.description"
>
{{
label
.
title
}}
</span>
</a>
</div>
</
template
>
spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
0 → 100644
浏览文件 @
c1ed7f3f
import
Vue
from
'
vue
'
;
import
dropdownValueComponent
from
'
~/vue_shared/components/sidebar/labels_select/dropdown_value.vue
'
;
import
{
mockConfig
,
mockLabels
}
from
'
./mock_data
'
;
import
mountComponent
from
'
../../../../helpers/vue_mount_component_helper
'
;
const
createComponent
=
(
labels
=
mockLabels
,
labelFilterBasePath
=
mockConfig
.
labelFilterBasePath
,
)
=>
{
const
Component
=
Vue
.
extend
(
dropdownValueComponent
);
return
mountComponent
(
Component
,
{
labels
,
labelFilterBasePath
,
});
};
describe
(
'
DropdownValueComponent
'
,
()
=>
{
let
vm
;
beforeEach
(()
=>
{
vm
=
createComponent
();
});
afterEach
(()
=>
{
vm
.
$destroy
();
});
describe
(
'
computed
'
,
()
=>
{
describe
(
'
isEmpty
'
,
()
=>
{
it
(
'
returns true if `labels` prop is empty
'
,
()
=>
{
const
vmEmptyLabels
=
createComponent
([]);
expect
(
vmEmptyLabels
.
isEmpty
).
toBe
(
true
);
vmEmptyLabels
.
$destroy
();
});
it
(
'
returns false if `labels` prop is empty
'
,
()
=>
{
expect
(
vm
.
isEmpty
).
toBe
(
false
);
});
});
});
describe
(
'
methods
'
,
()
=>
{
describe
(
'
labelFilterUrl
'
,
()
=>
{
it
(
'
returns URL string starting with labelFilterBasePath and encoded label.title
'
,
()
=>
{
expect
(
vm
.
labelFilterUrl
({
title
:
'
Foo bar
'
,
})).
toBe
(
'
/gitlab-org/my-project/issues?label_name[]=Foo%20bar
'
);
});
});
describe
(
'
labelStyle
'
,
()
=>
{
it
(
'
returns object with `color` & `backgroundColor` properties from label.textColor & label.color
'
,
()
=>
{
const
label
=
{
textColor
:
'
#FFFFFF
'
,
color
:
'
#BADA55
'
,
};
const
styleObj
=
vm
.
labelStyle
(
label
);
expect
(
styleObj
.
color
).
toBe
(
label
.
textColor
);
expect
(
styleObj
.
backgroundColor
).
toBe
(
label
.
color
);
});
});
});
describe
(
'
template
'
,
()
=>
{
it
(
'
renders component container element with classes `hide-collapsed value issuable-show-labels`
'
,
()
=>
{
expect
(
vm
.
$el
.
classList
.
contains
(
'
hide-collapsed
'
,
'
value
'
,
'
issuable-show-labels
'
)).
toBe
(
true
);
});
it
(
'
render slot content inside component when `labels` prop is empty
'
,
()
=>
{
const
vmEmptyLabels
=
createComponent
([]);
expect
(
vmEmptyLabels
.
$el
.
querySelector
(
'
.text-secondary
'
).
innerText
.
trim
()).
toBe
(
mockConfig
.
emptyValueText
);
vmEmptyLabels
.
$destroy
();
});
it
(
'
renders label element with filter URL
'
,
()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
a
'
).
getAttribute
(
'
href
'
)).
toBe
(
'
/gitlab-org/my-project/issues?label_name[]=Foo%20Label
'
);
});
it
(
'
renders label element with tooltip and styles based on label details
'
,
()
=>
{
const
labelEl
=
vm
.
$el
.
querySelector
(
'
a span.label.color-label
'
);
expect
(
labelEl
).
not
.
toBeNull
();
expect
(
labelEl
.
dataset
.
placement
).
toBe
(
'
bottom
'
);
expect
(
labelEl
.
dataset
.
container
).
toBe
(
'
body
'
);
expect
(
labelEl
.
dataset
.
originalTitle
).
toBe
(
mockLabels
[
0
].
description
);
expect
(
labelEl
.
getAttribute
(
'
style
'
)).
toBe
(
'
background-color: rgb(186, 218, 85);
'
);
expect
(
labelEl
.
innerText
.
trim
()).
toBe
(
mockLabels
[
0
].
title
);
});
});
});
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录