Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
60405bd3
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 搜索 >>
提交
60405bd3
编写于
10月 22, 2018
作者:
W
Winnie Hellmann
提交者:
Mike Greiling
10月 22, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Extract JobContainerItem component
上级
0518e63b
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
149 addition
and
47 deletion
+149
-47
app/assets/javascripts/jobs/components/job_container_item.vue
...assets/javascripts/jobs/components/job_container_item.vue
+66
-0
app/assets/javascripts/jobs/components/jobs_container.vue
app/assets/javascripts/jobs/components/jobs_container.vue
+7
-46
spec/javascripts/jobs/components/job_container_item_spec.js
spec/javascripts/jobs/components/job_container_item_spec.js
+73
-0
spec/javascripts/jobs/mock_data.js
spec/javascripts/jobs/mock_data.js
+3
-1
未找到文件。
app/assets/javascripts/jobs/components/job_container_item.vue
0 → 100644
浏览文件 @
60405bd3
<
script
>
import
_
from
'
underscore
'
;
import
CiIcon
from
'
~/vue_shared/components/ci_icon.vue
'
;
import
Icon
from
'
~/vue_shared/components/icon.vue
'
;
import
tooltip
from
'
~/vue_shared/directives/tooltip
'
;
export
default
{
components
:
{
CiIcon
,
Icon
,
},
directives
:
{
tooltip
,
},
props
:
{
job
:
{
type
:
Object
,
required
:
true
,
},
isActive
:
{
type
:
Boolean
,
required
:
true
,
},
},
computed
:
{
tooltipText
()
{
return
`
${
_
.
escape
(
this
.
job
.
name
)}
-
${
this
.
job
.
status
.
tooltip
}
`
;
},
},
};
</
script
>
<
template
>
<div
class=
"build-job"
:class=
"
{ retried: job.retried, active: isActive }"
>
<a
v-tooltip
:href=
"job.status.details_path"
:title=
"tooltipText"
data-container=
"body"
data-boundary=
"viewport"
class=
"js-job-link"
>
<icon
v-if=
"isActive"
name=
"arrow-right"
class=
"js-arrow-right icon-arrow-right"
/>
<ci-icon
:status=
"job.status"
/>
<span>
{{
job
.
name
?
job
.
name
:
job
.
id
}}
</span>
<icon
v-if=
"job.retried"
name=
"retry"
class=
"js-retry-icon"
/>
</a>
</div>
</
template
>
app/assets/javascripts/jobs/components/jobs_container.vue
浏览文件 @
60405bd3
<
script
>
import
_
from
'
underscore
'
;
import
CiIcon
from
'
~/vue_shared/components/ci_icon.vue
'
;
import
Icon
from
'
~/vue_shared/components/icon.vue
'
;
import
tooltip
from
'
~/vue_shared/directives/tooltip
'
;
import
JobContainerItem
from
'
./job_container_item.vue
'
;
export
default
{
components
:
{
CiIcon
,
Icon
,
},
directives
:
{
tooltip
,
JobContainerItem
,
},
props
:
{
jobs
:
{
type
:
Array
,
...
...
@@ -26,49 +20,16 @@ export default {
isJobActive
(
currentJobId
)
{
return
this
.
jobId
===
currentJobId
;
},
tooltipText
(
job
)
{
return
`
${
_
.
escape
(
job
.
name
)}
-
${
job
.
status
.
tooltip
}
`
;
},
},
};
</
script
>
<
template
>
<div
class=
"js-jobs-container builds-container"
>
<
div
<
job-container-item
v-for=
"job in jobs"
:key=
"job.id"
class=
"build-job"
:class=
"
{ retried: job.retried, active: isJobActive(job.id) }"
>
<a
v-tooltip
:href=
"job.status.details_path"
:title=
"tooltipText(job)"
data-container=
"body"
>
<icon
v-if=
"isJobActive(job.id)"
name=
"arrow-right"
class=
"js-arrow-right icon-arrow-right"
/>
<ci-icon
:status=
"job.status"
/>
<span>
<template
v-if=
"job.name"
>
{{
job
.
name
}}
</
template
>
<
template
v-else
>
{{
job
.
id
}}
</
template
>
</span>
<icon
v-if=
"job.retried"
name=
"retry"
class=
"js-retry-icon"
/>
</a>
</div>
:job=
"job"
:is-active=
"isJobActive(job.id)"
/>
</div>
</
template
>
spec/javascripts/jobs/components/job_container_item_spec.js
0 → 100644
浏览文件 @
60405bd3
import
Vue
from
'
vue
'
;
import
JobContainerItem
from
'
~/jobs/components/job_container_item.vue
'
;
import
mountComponent
from
'
spec/helpers/vue_mount_component_helper
'
;
import
job
from
'
../mock_data
'
;
describe
(
'
JobContainerItem
'
,
()
=>
{
const
Component
=
Vue
.
extend
(
JobContainerItem
);
let
vm
;
afterEach
(()
=>
{
vm
.
$destroy
();
});
const
sharedTests
=
()
=>
{
it
(
'
displays a status icon
'
,
()
=>
{
expect
(
vm
.
$el
).
toHaveSpriteIcon
(
job
.
status
.
icon
);
});
it
(
'
displays the job name
'
,
()
=>
{
expect
(
vm
.
$el
).
toContainText
(
job
.
name
);
});
it
(
'
displays a link to the job
'
,
()
=>
{
const
link
=
vm
.
$el
.
querySelector
(
'
.js-job-link
'
);
expect
(
link
.
href
).
toBe
(
job
.
status
.
details_path
);
});
};
describe
(
'
when a job is not active and not retied
'
,
()
=>
{
beforeEach
(()
=>
{
vm
=
mountComponent
(
Component
,
{
job
,
isActive
:
false
,
});
});
sharedTests
();
});
describe
(
'
when a job is active
'
,
()
=>
{
beforeEach
(()
=>
{
vm
=
mountComponent
(
Component
,
{
job
,
isActive
:
true
,
});
});
sharedTests
();
it
(
'
displays an arrow
'
,
()
=>
{
expect
(
vm
.
$el
).
toHaveSpriteIcon
(
'
arrow-right
'
);
});
});
describe
(
'
when a job is retried
'
,
()
=>
{
beforeEach
(()
=>
{
vm
=
mountComponent
(
Component
,
{
job
:
{
...
job
,
retried
:
true
,
},
isActive
:
false
,
});
});
sharedTests
();
it
(
'
displays an icon
'
,
()
=>
{
expect
(
vm
.
$el
).
toHaveSpriteIcon
(
'
retry
'
);
});
});
});
spec/javascripts/jobs/mock_data.js
浏览文件 @
60405bd3
import
{
TEST_HOST
}
from
'
spec/test_constants
'
;
const
threeWeeksAgo
=
new
Date
();
threeWeeksAgo
.
setDate
(
threeWeeksAgo
.
getDate
()
-
21
);
...
...
@@ -19,7 +21,7 @@ export default {
label
:
'
passed
'
,
group
:
'
success
'
,
has_details
:
true
,
details_path
:
'
/root/ci-mock/-/jobs/4757
'
,
details_path
:
`
${
TEST_HOST
}
/root/ci-mock/-/jobs/4757`
,
favicon
:
'
/assets/ci_favicons/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.png
'
,
action
:
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录