Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Léo-Paul Géneau
gitlab-ce
Commits
efd5e533
Commit
efd5e533
authored
7 years ago
by
Filipa Lacerda
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Prevents rendering empty badge when pipeline request fails
parent
1b9c318c
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
170 additions
and
20 deletions
+170
-20
app/assets/javascripts/pipelines/components/navigation_tabs.vue
...sets/javascripts/pipelines/components/navigation_tabs.vue
+34
-20
changelogs/unreleased/35048-empty-badges.yml
changelogs/unreleased/35048-empty-badges.yml
+5
-0
spec/javascripts/helpers/vue_mount_component_helper.js
spec/javascripts/helpers/vue_mount_component_helper.js
+4
-0
spec/javascripts/pipelines/navigation_tabs_spec.js
spec/javascripts/pipelines/navigation_tabs_spec.js
+127
-0
No files found.
app/assets/javascripts/pipelines/components/navigation_tabs.vue
View file @
efd5e533
<
script
>
export
default
{
export
default
{
name
:
'
PipelineNavigationTabs
'
,
props
:
{
scope
:
{
...
...
@@ -18,6 +18,12 @@ export default {
mounted
()
{
$
(
document
).
trigger
(
'
init.scrolling-tabs
'
);
},
methods
:
{
shouldRenderBadge
(
count
)
{
// 0 is valid in a badge, but evaluates to false, we need to check for undefined
return
count
!==
undefined
;
},
},
};
</
script
>
<
template
>
...
...
@@ -27,7 +33,9 @@ export default {
:class=
"
{ active: scope === 'all'}">
<a
:href=
"paths.allPath"
>
All
<span
class=
"badge js-totalbuilds-count"
>
<span
v-if=
"shouldRenderBadge(count.all)"
class=
"badge js-totalbuilds-count"
>
{{
count
.
all
}}
</span>
</a>
...
...
@@ -37,7 +45,9 @@ export default {
:class=
"
{ active: scope === 'pending'}">
<a
:href=
"paths.pendingPath"
>
Pending
<span
class=
"badge"
>
<span
v-if=
"shouldRenderBadge(count.pending)"
class=
"badge"
>
{{
count
.
pending
}}
</span>
</a>
...
...
@@ -47,7 +57,9 @@ export default {
:class=
"
{ active: scope === 'running'}">
<a
:href=
"paths.runningPath"
>
Running
<span
class=
"badge"
>
<span
v-if=
"shouldRenderBadge(count.running)"
class=
"badge"
>
{{
count
.
running
}}
</span>
</a>
...
...
@@ -57,7 +69,9 @@ export default {
:class=
"
{ active: scope === 'finished'}">
<a
:href=
"paths.finishedPath"
>
Finished
<span
class=
"badge"
>
<span
v-if=
"shouldRenderBadge(count.finished)"
class=
"badge"
>
{{
count
.
finished
}}
</span>
</a>
...
...
This diff is collapsed.
Click to expand it.
changelogs/unreleased/35048-empty-badges.yml
0 → 100644
View file @
efd5e533
---
title
:
Prevents rendering empty badges when request fails
merge_request
:
author
:
type
:
fixed
This diff is collapsed.
Click to expand it.
spec/javascripts/helpers/vue_mount_component_helper.js
0 → 100644
View file @
efd5e533
export
default
(
Component
,
props
=
{})
=>
new
Component
({
propsData
:
props
,
}).
$mount
();
This diff is collapsed.
Click to expand it.
spec/javascripts/pipelines/navigation_tabs_spec.js
0 → 100644
View file @
efd5e533
import
Vue
from
'
vue
'
;
import
navigationTabs
from
'
~/pipelines/components/navigation_tabs.vue
'
;
import
mountComponent
from
'
../helpers/vue_mount_component_helper
'
;
describe
(
'
navigation tabs pipeline component
'
,
()
=>
{
let
vm
;
let
Component
;
let
data
;
beforeEach
(()
=>
{
data
=
{
scope
:
'
all
'
,
count
:
{
all
:
16
,
running
:
1
,
pending
:
10
,
finished
:
0
,
},
paths
:
{
allPath
:
'
/gitlab-org/gitlab-ce/pipelines
'
,
pendingPath
:
'
/gitlab-org/gitlab-ce/pipelines?scope=pending
'
,
finishedPath
:
'
/gitlab-org/gitlab-ce/pipelines?scope=finished
'
,
runningPath
:
'
/gitlab-org/gitlab-ce/pipelines?scope=running
'
,
branchesPath
:
'
/gitlab-org/gitlab-ce/pipelines?scope=branches
'
,
tagsPath
:
'
/gitlab-org/gitlab-ce/pipelines?scope=tags
'
,
},
};
Component
=
Vue
.
extend
(
navigationTabs
);
});
afterEach
(()
=>
{
vm
.
$destroy
();
});
it
(
'
should render tabs with correct paths
'
,
()
=>
{
vm
=
mountComponent
(
Component
,
data
);
// All
const
allTab
=
vm
.
$el
.
querySelector
(
'
.js-pipelines-tab-all a
'
);
expect
(
allTab
.
textContent
.
trim
()).
toContain
(
'
All
'
);
expect
(
allTab
.
getAttribute
(
'
href
'
)).
toEqual
(
data
.
paths
.
allPath
);
// Pending
const
pendingTab
=
vm
.
$el
.
querySelector
(
'
.js-pipelines-tab-pending a
'
);
expect
(
pendingTab
.
textContent
.
trim
()).
toContain
(
'
Pending
'
);
expect
(
pendingTab
.
getAttribute
(
'
href
'
)).
toEqual
(
data
.
paths
.
pendingPath
);
// Running
const
runningTab
=
vm
.
$el
.
querySelector
(
'
.js-pipelines-tab-running a
'
);
expect
(
runningTab
.
textContent
.
trim
()).
toContain
(
'
Running
'
);
expect
(
runningTab
.
getAttribute
(
'
href
'
)).
toEqual
(
data
.
paths
.
runningPath
);
// Finished
const
finishedTab
=
vm
.
$el
.
querySelector
(
'
.js-pipelines-tab-finished a
'
);
expect
(
finishedTab
.
textContent
.
trim
()).
toContain
(
'
Finished
'
);
expect
(
finishedTab
.
getAttribute
(
'
href
'
)).
toEqual
(
data
.
paths
.
finishedPath
);
// Branches
const
branchesTab
=
vm
.
$el
.
querySelector
(
'
.js-pipelines-tab-branches a
'
);
expect
(
branchesTab
.
textContent
.
trim
()).
toContain
(
'
Branches
'
);
// Tags
const
tagsTab
=
vm
.
$el
.
querySelector
(
'
.js-pipelines-tab-tags a
'
);
expect
(
tagsTab
.
textContent
.
trim
()).
toContain
(
'
Tags
'
);
});
describe
(
'
scope
'
,
()
=>
{
it
(
'
should render scope provided as active tab
'
,
()
=>
{
vm
=
mountComponent
(
Component
,
data
);
expect
(
vm
.
$el
.
querySelector
(
'
.js-pipelines-tab-all
'
).
className
).
toContain
(
'
active
'
);
});
});
describe
(
'
badges
'
,
()
=>
{
it
(
'
should render provided number
'
,
()
=>
{
vm
=
mountComponent
(
Component
,
data
);
// All
expect
(
vm
.
$el
.
querySelector
(
'
.js-totalbuilds-count
'
).
textContent
.
trim
(),
).
toContain
(
data
.
count
.
all
);
// Pending
expect
(
vm
.
$el
.
querySelector
(
'
.js-pipelines-tab-pending .badge
'
).
textContent
.
trim
(),
).
toContain
(
data
.
count
.
pending
);
// Running
expect
(
vm
.
$el
.
querySelector
(
'
.js-pipelines-tab-running .badge
'
).
textContent
.
trim
(),
).
toContain
(
data
.
count
.
running
);
// Finished
expect
(
vm
.
$el
.
querySelector
(
'
.js-pipelines-tab-finished .badge
'
).
textContent
.
trim
(),
).
toContain
(
data
.
count
.
finished
);
});
it
(
'
should not render badge when number is undefined
'
,
()
=>
{
vm
=
mountComponent
(
Component
,
{
scope
:
'
all
'
,
paths
:
{},
count
:
{},
});
// All
expect
(
vm
.
$el
.
querySelector
(
'
.js-totalbuilds-count
'
),
).
toEqual
(
null
);
// Pending
expect
(
vm
.
$el
.
querySelector
(
'
.js-pipelines-tab-pending .badge
'
),
).
toEqual
(
null
);
// Running
expect
(
vm
.
$el
.
querySelector
(
'
.js-pipelines-tab-running .badge
'
),
).
toEqual
(
null
);
// Finished
expect
(
vm
.
$el
.
querySelector
(
'
.js-pipelines-tab-finished .badge
'
),
).
toEqual
(
null
);
});
});
});
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment