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
1
Merge Requests
1
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
nexedi
gitlab-ce
Commits
c80fac8b
Commit
c80fac8b
authored
Apr 27, 2020
by
Coung Ngo
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Move tests from Karma to Jest
Move tests as part of Jestodius
parent
b26e9115
Changes
9
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
513 additions
and
171 deletions
+513
-171
app/assets/javascripts/sidebar/components/participants/participants.vue
...ascripts/sidebar/components/participants/participants.vue
+4
-12
ee/spec/frontend/gfm_auto_complete_spec.js
ee/spec/frontend/gfm_auto_complete_spec.js
+0
-0
ee/spec/javascripts/kubernetes_mock_data.js
ee/spec/javascripts/kubernetes_mock_data.js
+0
-127
spec/frontend/sidebar/lock/edit_form_buttons_spec.js
spec/frontend/sidebar/lock/edit_form_buttons_spec.js
+31
-0
spec/frontend/sidebar/participants_spec.js
spec/frontend/sidebar/participants_spec.js
+200
-0
spec/frontend/sidebar/sidebar_mediator_spec.js
spec/frontend/sidebar/sidebar_mediator_spec.js
+135
-0
spec/frontend/sidebar/sidebar_subscriptions_spec.js
spec/frontend/sidebar/sidebar_subscriptions_spec.js
+36
-0
spec/frontend/sidebar/subscriptions_spec.js
spec/frontend/sidebar/subscriptions_spec.js
+107
-0
spec/javascripts/sidebar/lock/edit_form_buttons_spec.js
spec/javascripts/sidebar/lock/edit_form_buttons_spec.js
+0
-32
No files found.
app/assets/javascripts/sidebar/components/participants/participants.vue
View file @
c80fac8b
...
...
@@ -95,22 +95,18 @@ export default {
@
click=
"onClickCollapsedIcon"
>
<i
class=
"fa fa-users"
aria-hidden=
"true"
>
</i>
<gl-loading-icon
v-if=
"loading"
class=
"js-participants-collapsed-loading-icon"
/>
<gl-loading-icon
v-if=
"loading"
/>
<span
v-else
class=
"js-participants-collapsed-count"
>
{{
participantCount
}}
</span>
</div>
<div
v-if=
"showParticipantLabel"
class=
"title hide-collapsed"
>
<gl-loading-icon
v-if=
"loading"
:inline=
"true"
class=
"js-participants-expanded-loading-icon"
/>
<gl-loading-icon
v-if=
"loading"
:inline=
"true"
/>
{{
participantLabel
}}
</div>
<div
class=
"participants-list hide-collapsed"
>
<div
v-for=
"participant in visibleParticipants"
:key=
"participant.id"
class=
"participants-author
js-participants-author
"
class=
"participants-author"
>
<a
:href=
"participant.web_url"
class=
"author-link"
>
<user-avatar-image
...
...
@@ -125,11 +121,7 @@ export default {
</div>
</div>
<div
v-if=
"hasMoreParticipants"
class=
"participants-more hide-collapsed"
>
<button
type=
"button"
class=
"btn-transparent btn-link js-toggle-participants-button"
@
click=
"toggleMoreParticipants"
>
<button
type=
"button"
class=
"btn-transparent btn-link"
@
click=
"toggleMoreParticipants"
>
{{
toggleLabel
}}
</button>
</div>
...
...
ee/spec/
javascripts
/gfm_auto_complete_spec.js
→
ee/spec/
frontend
/gfm_auto_complete_spec.js
View file @
c80fac8b
File moved
ee/spec/javascripts/kubernetes_mock_data.js
deleted
100644 → 0
View file @
b26e9115
export
const
logMockData
=
[
'
[2018-05-17 16:31:10] INFO WEBrick 1.3.1
'
,
'
[2018-05-17 16:31:10] INFO ruby 2.4.1 (2017-03-22) [x86_64-linux-musl]
'
,
'
[2018-05-17 16:31:10] INFO WEBrick::HTTPServer#start: pid=5 port=5000
'
,
"
172.17.0.1 - - [17/May/2018:16:31:14 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:31:24 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:31:32 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:31:34 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:31:42 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:31:44 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:31:52 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:31:54 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:32:02 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:32:04 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:32:12 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:32:14 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:32:22 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:32:24 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:32:32 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:32:34 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:32:42 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:32:44 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:32:52 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:32:54 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:33:02 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:33:04 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:33:12 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:33:14 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:33:22 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:33:24 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:33:32 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:33:34 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:33:42 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:33:44 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:33:52 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:33:54 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:34:02 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:34:04 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:34:12 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:34:14 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:34:22 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:34:24 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:34:32 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:34:34 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:34:42 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:34:44 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:34:52 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:34:54 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:35:02 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:35:04 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:35:12 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:35:14 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:35:22 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
"
172.17.0.1 - - [17/May/2018:16:35:24 UTC] 'GET / HTTP/1.1' 200 13
"
,
'
- -> /
'
,
];
export
const
podMockData
=
[
'
production-tanuki-1
'
,
'
production-tanuki-2
'
,
'
production-tanuki-3
'
];
export
const
mockEnvironmentData
=
[
{
name
:
'
production
'
,
logs_path
:
'
/namespace/project/environments/1/logs
'
,
id
:
1
,
},
{
name
:
'
stating
'
,
logs_path
:
'
/namespace/project/environments/2/logs
'
,
id
:
2
,
},
{
name
:
'
review/my-new-branch
'
,
logs_path
:
'
/namespace/project/environments/3/logs
'
,
id
:
3
,
},
];
export
default
{};
spec/frontend/sidebar/lock/edit_form_buttons_spec.js
0 → 100644
View file @
c80fac8b
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
EditFormButtons
from
'
~/sidebar/components/lock/edit_form_buttons.vue
'
;
describe
(
'
EditFormButtons
'
,
()
=>
{
let
wrapper
;
const
mountComponent
=
propsData
=>
shallowMount
(
EditFormButtons
,
{
propsData
});
afterEach
(()
=>
{
wrapper
.
destroy
();
wrapper
=
null
;
});
it
(
'
displays "Unlock" when locked
'
,
()
=>
{
wrapper
=
mountComponent
({
isLocked
:
true
,
updateLockedAttribute
:
()
=>
{},
});
expect
(
wrapper
.
text
()).
toContain
(
'
Unlock
'
);
});
it
(
'
displays "Lock" when unlocked
'
,
()
=>
{
wrapper
=
mountComponent
({
isLocked
:
false
,
updateLockedAttribute
:
()
=>
{},
});
expect
(
wrapper
.
text
()).
toContain
(
'
Lock
'
);
});
});
spec/
javascripts
/sidebar/participants_spec.js
→
spec/
frontend
/sidebar/participants_spec.js
View file @
c80fac8b
import
{
GlLoadingIcon
}
from
'
@gitlab/ui
'
;
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
Vue
from
'
vue
'
;
import
mountComponent
from
'
spec/helpers/vue_mount_component_helper
'
;
import
participants
from
'
~/sidebar/components/participants/participants.vue
'
;
import
Participants
from
'
~/sidebar/components/participants/participants.vue
'
;
const
PARTICIPANT
=
{
id
:
1
,
...
...
@@ -13,190 +14,187 @@ const PARTICIPANT = {
const
PARTICIPANT_LIST
=
[
PARTICIPANT
,
{
...
PARTICIPANT
,
id
:
2
},
{
...
PARTICIPANT
,
id
:
3
}];
describe
(
'
Participants
'
,
function
()
{
let
vm
;
let
Participants
;
describe
(
'
Participants
'
,
()
=>
{
let
wrapper
;
beforeEach
(()
=>
{
Participants
=
Vue
.
extend
(
participants
);
});
const
getMoreParticipantsButton
=
()
=>
wrapper
.
find
(
'
button
'
);
const
mountComponent
=
propsData
=>
shallowMount
(
Participants
,
{
propsData
,
});
afterEach
(()
=>
{
vm
.
$destroy
();
wrapper
.
destroy
();
wrapper
=
null
;
});
describe
(
'
collapsed sidebar state
'
,
()
=>
{
it
(
'
shows loading spinner when loading
'
,
()
=>
{
vm
=
mountComponent
(
Participants
,
{
wrapper
=
mountComponent
(
{
loading
:
true
,
});
expect
(
vm
.
$el
.
querySelector
(
'
.js-participants-collapsed-loading-icon
'
)).
toBeDefined
(
);
expect
(
wrapper
.
find
(
GlLoadingIcon
).
exists
()).
toBe
(
true
);
});
it
(
'
shows participant count when given
'
,
()
=>
{
vm
=
mountComponent
(
Participants
,
{
wrapper
=
mountComponent
(
{
loading
:
false
,
participants
:
PARTICIPANT_LIST
,
});
const
countEl
=
vm
.
$el
.
querySelector
(
'
.js-participants-collapsed-count
'
);
expect
(
countEl
.
textContent
.
trim
()).
toBe
(
`
${
PARTICIPANT_LIST
.
length
}
`
);
expect
(
wrapper
.
find
(
'
.js-participants-collapsed-count
'
).
text
()).
toBe
(
`
${
PARTICIPANT_LIST
.
length
}
`
,
);
});
it
(
'
shows full participant count when there are hidden participants
'
,
()
=>
{
vm
=
mountComponent
(
Participants
,
{
wrapper
=
mountComponent
(
{
loading
:
false
,
participants
:
PARTICIPANT_LIST
,
numberOfLessParticipants
:
1
,
});
const
countEl
=
vm
.
$el
.
querySelector
(
'
.js-participants-collapsed-count
'
);
expect
(
countEl
.
textContent
.
trim
()).
toBe
(
`
${
PARTICIPANT_LIST
.
length
}
`
);
expect
(
wrapper
.
find
(
'
.js-participants-collapsed-count
'
).
text
()).
toBe
(
`
${
PARTICIPANT_LIST
.
length
}
`
,
);
});
});
describe
(
'
expanded sidebar state
'
,
()
=>
{
it
(
'
shows loading spinner when loading
'
,
()
=>
{
vm
=
mountComponent
(
Participants
,
{
wrapper
=
mountComponent
(
{
loading
:
true
,
});
expect
(
vm
.
$el
.
querySelector
(
'
.js-participants-expanded-loading-icon
'
)).
toBeDefined
(
);
expect
(
wrapper
.
find
(
GlLoadingIcon
).
exists
()).
toBe
(
true
);
});
it
(
'
when only showing visible participants, shows an avatar only for each participant under the limit
'
,
done
=>
{
it
(
'
when only showing visible participants, shows an avatar only for each participant under the limit
'
,
()
=>
{
const
numberOfLessParticipants
=
2
;
vm
=
mountComponent
(
Participants
,
{
wrapper
=
mountComponent
(
{
loading
:
false
,
participants
:
PARTICIPANT_LIST
,
numberOfLessParticipants
,
});
vm
.
isShowingMoreParticipants
=
false
;
Vue
.
nextTick
()
.
then
(()
=>
{
const
participantEls
=
vm
.
$el
.
querySelectorAll
(
'
.js-participants-author
'
);
wrapper
.
setData
({
isShowingMoreParticipants
:
false
,
}
);
expect
(
participantEls
.
length
).
toBe
(
numberOfLessParticipants
);
})
.
then
(
done
)
.
catch
(
done
.
fail
);
return
Vue
.
nextTick
().
then
(()
=>
{
expect
(
wrapper
.
findAll
(
'
.participants-author
'
).
length
).
toBe
(
numberOfLessParticipants
);
});
});
it
(
'
when only showing all participants, each has an avatar
'
,
done
=>
{
const
numberOfLessParticipants
=
2
;
vm
=
mountComponent
(
Participants
,
{
it
(
'
when only showing all participants, each has an avatar
'
,
()
=>
{
wrapper
=
mountComponent
({
loading
:
false
,
participants
:
PARTICIPANT_LIST
,
numberOfLessParticipants
,
numberOfLessParticipants
:
2
,
});
vm
.
isShowingMoreParticipants
=
true
;
Vue
.
nextTick
()
.
then
(()
=>
{
const
participantEls
=
vm
.
$el
.
querySelectorAll
(
'
.js-participants-author
'
);
wrapper
.
setData
({
isShowingMoreParticipants
:
true
,
}
);
expect
(
participantEls
.
length
).
toBe
(
PARTICIPANT_LIST
.
length
);
})
.
then
(
done
)
.
catch
(
done
.
fail
);
return
Vue
.
nextTick
().
then
(()
=>
{
expect
(
wrapper
.
findAll
(
'
.participants-author
'
).
length
).
toBe
(
PARTICIPANT_LIST
.
length
);
});
});
it
(
'
does not have more participants link when they can all be shown
'
,
()
=>
{
const
numberOfLessParticipants
=
100
;
vm
=
mountComponent
(
Participants
,
{
wrapper
=
mountComponent
(
{
loading
:
false
,
participants
:
PARTICIPANT_LIST
,
numberOfLessParticipants
,
});
const
moreParticipantLink
=
vm
.
$el
.
querySelector
(
'
.js-toggle-participants-button
'
);
expect
(
PARTICIPANT_LIST
.
length
).
toBeLessThan
(
numberOfLessParticipants
);
expect
(
moreParticipantLink
).
toBeNull
(
);
expect
(
getMoreParticipantsButton
().
exists
()).
toBe
(
false
);
});
it
(
'
when too many participants, has more participants link to show more
'
,
done
=>
{
vm
=
mountComponent
(
Participants
,
{
it
(
'
when too many participants, has more participants link to show more
'
,
()
=>
{
wrapper
=
mountComponent
(
{
loading
:
false
,
participants
:
PARTICIPANT_LIST
,
numberOfLessParticipants
:
2
,
});
vm
.
isShowingMoreParticipants
=
false
;
Vue
.
nextTick
()
.
then
(()
=>
{
const
moreParticipantLink
=
vm
.
$el
.
querySelector
(
'
.js-toggle-participants-button
'
);
wrapper
.
setData
({
isShowingMoreParticipants
:
false
,
}
);
expect
(
moreParticipantLink
.
textContent
.
trim
()).
toBe
(
'
+ 1 more
'
);
})
.
then
(
done
)
.
catch
(
done
.
fail
);
return
Vue
.
nextTick
().
then
(()
=>
{
expect
(
getMoreParticipantsButton
().
text
()).
toBe
(
'
+ 1 more
'
);
});
});
it
(
'
when too many participants and already showing them, has more participants link to show less
'
,
done
=>
{
vm
=
mountComponent
(
Participants
,
{
it
(
'
when too many participants and already showing them, has more participants link to show less
'
,
()
=>
{
wrapper
=
mountComponent
(
{
loading
:
false
,
participants
:
PARTICIPANT_LIST
,
numberOfLessParticipants
:
2
,
});
vm
.
isShowingMoreParticipants
=
true
;
Vue
.
nextTick
()
.
then
(()
=>
{
const
moreParticipantLink
=
vm
.
$el
.
querySelector
(
'
.js-toggle-participants-button
'
);
wrapper
.
setData
({
isShowingMoreParticipants
:
true
,
}
);
expect
(
moreParticipantLink
.
textContent
.
trim
()).
toBe
(
'
- show less
'
);
})
.
then
(
done
)
.
catch
(
done
.
fail
);
return
Vue
.
nextTick
().
then
(()
=>
{
expect
(
getMoreParticipantsButton
().
text
()).
toBe
(
'
- show less
'
);
});
});
it
(
'
clicking more participants link emits event
'
,
()
=>
{
vm
=
mountComponent
(
Participants
,
{
wrapper
=
mountComponent
(
{
loading
:
false
,
participants
:
PARTICIPANT_LIST
,
numberOfLessParticipants
:
2
,
});
const
moreParticipantLink
=
vm
.
$el
.
querySelector
(
'
.js-toggle-participants-button
'
);
expect
(
vm
.
isShowingMoreParticipants
).
toBe
(
false
);
expect
(
wrapper
.
vm
.
isShowingMoreParticipants
).
toBe
(
false
);
moreParticipantLink
.
click
(
);
getMoreParticipantsButton
().
trigger
(
'
click
'
);
expect
(
vm
.
isShowingMoreParticipants
).
toBe
(
true
);
expect
(
wrapper
.
vm
.
isShowingMoreParticipants
).
toBe
(
true
);
});
it
(
'
clicking on participants icon emits `toggleSidebar` event
'
,
()
=>
{
vm
=
mountComponent
(
Participants
,
{
wrapper
=
mountComponent
(
{
loading
:
false
,
participants
:
PARTICIPANT_LIST
,
numberOfLessParticipants
:
2
,
});
spyOn
(
vm
,
'
$emit
'
);
const
participantsIconEl
=
vm
.
$el
.
querySelector
(
'
.sidebar-collapsed-icon
'
);
const
spy
=
jest
.
spyOn
(
wrapper
.
vm
,
'
$emit
'
);
participantsIconEl
.
click
(
);
wrapper
.
find
(
'
.sidebar-collapsed-icon
'
).
trigger
(
'
click
'
);
expect
(
vm
.
$emit
).
toHaveBeenCalledWith
(
'
toggleSidebar
'
);
return
Vue
.
nextTick
(()
=>
{
expect
(
spy
).
toHaveBeenCalledWith
(
'
toggleSidebar
'
);
spy
.
mockRestore
();
});
});
});
describe
(
'
when not showing participants label
'
,
()
=>
{
beforeEach
(()
=>
{
vm
=
mountComponent
(
Participants
,
{
wrapper
=
mountComponent
(
{
participants
:
PARTICIPANT_LIST
,
showParticipantLabel
:
false
,
});
});
it
(
'
does not show sidebar collapsed icon
'
,
()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
.sidebar-collapsed-icon
'
)).
not
.
toBeTruthy
(
);
expect
(
wrapper
.
find
(
'
.sidebar-collapsed-icon
'
).
exists
()).
toBe
(
false
);
});
it
(
'
does not show participants label title
'
,
()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
.title
'
)).
not
.
toBeTruthy
(
);
expect
(
wrapper
.
find
(
'
.title
'
).
exists
()).
toBe
(
false
);
});
});
});
spec/
javascripts
/sidebar/sidebar_mediator_spec.js
→
spec/
frontend
/sidebar/sidebar_mediator_spec.js
View file @
c80fac8b
import
MockAdapter
from
'
axios-mock-adapter
'
;
import
axios
from
'
~/lib/utils/axios_utils
'
;
import
*
as
urlUtility
from
'
~/lib/utils/url_utility
'
;
import
SidebarService
,
{
gqClient
}
from
'
~/sidebar/services/sidebar_service
'
;
import
SidebarMediator
from
'
~/sidebar/sidebar_mediator
'
;
import
SidebarStore
from
'
~/sidebar/stores/sidebar_store
'
;
import
SidebarService
,
{
gqClient
}
from
'
~/sidebar/services/sidebar_service
'
;
import
Mock
from
'
./mock_data
'
;
const
{
mediator
:
mediatorMockData
}
=
Mock
;
describe
(
'
Sidebar mediator
'
,
function
()
{
describe
(
'
Sidebar mediator
'
,
()
=>
{
const
{
mediator
:
mediatorMockData
}
=
Mock
;
let
mock
;
let
mediator
;
beforeEach
(()
=>
{
mock
=
new
MockAdapter
(
axios
);
this
.
mediator
=
new
SidebarMediator
(
mediatorMockData
);
mediator
=
new
SidebarMediator
(
mediatorMockData
);
});
afterEach
(()
=>
{
...
...
@@ -24,111 +24,112 @@ describe('Sidebar mediator', function() {
});
it
(
'
assigns yourself
'
,
()
=>
{
this
.
mediator
.
assignYourself
();
mediator
.
assignYourself
();
expect
(
this
.
mediator
.
store
.
currentUser
).
toEqual
(
mediatorMockData
.
currentUser
);
expect
(
this
.
mediator
.
store
.
assignees
[
0
]).
toEqual
(
mediatorMockData
.
currentUser
);
expect
(
mediator
.
store
.
currentUser
).
toEqual
(
mediatorMockData
.
currentUser
);
expect
(
mediator
.
store
.
assignees
[
0
]).
toEqual
(
mediatorMockData
.
currentUser
);
});
it
(
'
saves assignees
'
,
done
=>
{
it
(
'
saves assignees
'
,
()
=>
{
mock
.
onPut
(
mediatorMockData
.
endpoint
).
reply
(
200
,
{});
this
.
mediator
.
saveAssignees
(
'
issue[assignee_ids]
'
)
.
then
(
resp
=>
{
expect
(
resp
.
status
).
toEqual
(
200
);
done
();
})
.
catch
(
done
.
fail
);
return
mediator
.
saveAssignees
(
'
issue[assignee_ids]
'
).
then
(
resp
=>
{
expect
(
resp
.
status
).
toEqual
(
200
);
});
});
it
(
'
fetches the data
'
,
done
=>
{
it
(
'
fetches the data
'
,
()
=>
{
const
mockData
=
Mock
.
responseMap
.
GET
[
mediatorMockData
.
endpoint
];
mock
.
onGet
(
mediatorMockData
.
endpoint
).
reply
(
200
,
mockData
);
const
mockGraphQlData
=
Mock
.
graphQlResponseData
;
spyOn
(
gqClient
,
'
query
'
).
and
.
r
eturnValue
({
const
graphQlSpy
=
jest
.
spyOn
(
gqClient
,
'
query
'
).
mockR
eturnValue
({
data
:
mockGraphQlData
,
});
const
spy
=
jest
.
spyOn
(
mediator
,
'
processFetchedData
'
).
mockReturnValue
(
Promise
.
resolve
());
spyOn
(
this
.
mediator
,
'
processFetchedData
'
).
and
.
callThrough
();
return
mediator
.
fetch
().
then
(()
=>
{
expect
(
spy
).
toHaveBeenCalledWith
(
mockData
,
mockGraphQlData
);
this
.
mediator
.
fetch
()
.
then
(()
=>
{
expect
(
this
.
mediator
.
processFetchedData
).
toHaveBeenCalledWith
(
mockData
,
mockGraphQlData
);
})
.
then
(
done
)
.
catch
(
done
.
fail
);
spy
.
mockRestore
();
graphQlSpy
.
mockRestore
();
});
});
it
(
'
processes fetched data
'
,
()
=>
{
const
mockData
=
Mock
.
responseMap
.
GET
[
mediatorMockData
.
endpoint
];
this
.
mediator
.
processFetchedData
(
mockData
);
expect
(
this
.
mediator
.
store
.
assignees
).
toEqual
(
mockData
.
assignees
);
expect
(
this
.
mediator
.
store
.
humanTimeEstimate
).
toEqual
(
mockData
.
human_time_estimate
);
expect
(
this
.
mediator
.
store
.
humanTotalTimeSpent
).
toEqual
(
mockData
.
human_total_time_spent
);
expect
(
this
.
mediator
.
store
.
participants
).
toEqual
(
mockData
.
participants
);
expect
(
this
.
mediator
.
store
.
subscribed
).
toEqual
(
mockData
.
subscribed
);
expect
(
this
.
mediator
.
store
.
timeEstimate
).
toEqual
(
mockData
.
time_estimate
);
expect
(
this
.
mediator
.
store
.
totalTimeSpent
).
toEqual
(
mockData
.
total_time_spent
);
mediator
.
processFetchedData
(
mockData
);
expect
(
mediator
.
store
.
assignees
).
toEqual
(
mockData
.
assignees
);
expect
(
mediator
.
store
.
humanTimeEstimate
).
toEqual
(
mockData
.
human_time_estimate
);
expect
(
mediator
.
store
.
humanTotalTimeSpent
).
toEqual
(
mockData
.
human_total_time_spent
);
expect
(
mediator
.
store
.
participants
).
toEqual
(
mockData
.
participants
);
expect
(
mediator
.
store
.
subscribed
).
toEqual
(
mockData
.
subscribed
);
expect
(
mediator
.
store
.
timeEstimate
).
toEqual
(
mockData
.
time_estimate
);
expect
(
mediator
.
store
.
totalTimeSpent
).
toEqual
(
mockData
.
total_time_spent
);
});
it
(
'
sets moveToProjectId
'
,
()
=>
{
const
projectId
=
7
;
spyOn
(
this
.
mediator
.
store
,
'
setMoveToProjectId
'
).
and
.
callThrough
(
);
const
spy
=
jest
.
spyOn
(
mediator
.
store
,
'
setMoveToProjectId
'
).
mockReturnValue
(
Promise
.
resolve
()
);
this
.
mediator
.
setMoveToProjectId
(
projectId
);
mediator
.
setMoveToProjectId
(
projectId
);
expect
(
this
.
mediator
.
store
.
setMoveToProjectId
).
toHaveBeenCalledWith
(
projectId
);
expect
(
spy
).
toHaveBeenCalledWith
(
projectId
);
spy
.
mockRestore
();
});
it
(
'
fetches autocomplete projects
'
,
done
=>
{
it
(
'
fetches autocomplete projects
'
,
()
=>
{
const
searchTerm
=
'
foo
'
;
mock
.
onGet
(
mediatorMockData
.
projectsAutocompleteEndpoint
).
reply
(
200
,
{});
spyOn
(
this
.
mediator
.
service
,
'
getProjectsAutocomplete
'
).
and
.
callThrough
();
spyOn
(
this
.
mediator
.
store
,
'
setAutocompleteProjects
'
).
and
.
callThrough
();
this
.
mediator
.
fetchAutocompleteProjects
(
searchTerm
)
.
then
(()
=>
{
expect
(
this
.
mediator
.
service
.
getProjectsAutocomplete
).
toHaveBeenCalledWith
(
searchTerm
);
expect
(
this
.
mediator
.
store
.
setAutocompleteProjects
).
toHaveBeenCalled
();
})
.
then
(
done
)
.
catch
(
done
.
fail
);
const
getterSpy
=
jest
.
spyOn
(
mediator
.
service
,
'
getProjectsAutocomplete
'
)
.
mockReturnValue
(
Promise
.
resolve
({
data
:
{}
}));
const
setterSpy
=
jest
.
spyOn
(
mediator
.
store
,
'
setAutocompleteProjects
'
)
.
mockReturnValue
(
Promise
.
resolve
());
return
mediator
.
fetchAutocompleteProjects
(
searchTerm
).
then
(()
=>
{
expect
(
getterSpy
).
toHaveBeenCalledWith
(
searchTerm
);
expect
(
setterSpy
).
toHaveBeenCalled
();
getterSpy
.
mockRestore
();
setterSpy
.
mockRestore
();
});
});
it
(
'
moves issue
'
,
done
=>
{
it
(
'
moves issue
'
,
()
=>
{
const
mockData
=
Mock
.
responseMap
.
POST
[
mediatorMockData
.
moveIssueEndpoint
];
const
moveToProjectId
=
7
;
mock
.
onPost
(
mediatorMockData
.
moveIssueEndpoint
).
reply
(
200
,
mockData
);
this
.
mediator
.
store
.
setMoveToProjectId
(
moveToProjectId
);
spyOn
(
this
.
mediator
.
service
,
'
moveIssue
'
).
and
.
callThrough
();
const
visitUrl
=
spyOnDependency
(
SidebarMediator
,
'
visitUrl
'
);
this
.
mediator
.
moveIssue
()
.
then
(()
=>
{
expect
(
this
.
mediator
.
service
.
moveIssue
).
toHaveBeenCalledWith
(
moveToProjectId
);
expect
(
visitUrl
).
toHaveBeenCalledWith
(
mockData
.
web_url
);
})
.
then
(
done
)
.
catch
(
done
.
fail
);
mediator
.
store
.
setMoveToProjectId
(
moveToProjectId
);
const
moveIssueSpy
=
jest
.
spyOn
(
mediator
.
service
,
'
moveIssue
'
)
.
mockReturnValue
(
Promise
.
resolve
({
data
:
{
web_url
:
mockData
.
web_url
}
}));
const
urlSpy
=
jest
.
spyOn
(
urlUtility
,
'
visitUrl
'
).
mockReturnValue
({});
return
mediator
.
moveIssue
().
then
(()
=>
{
expect
(
moveIssueSpy
).
toHaveBeenCalledWith
(
moveToProjectId
);
expect
(
urlSpy
).
toHaveBeenCalledWith
(
mockData
.
web_url
);
moveIssueSpy
.
mockRestore
();
urlSpy
.
mockRestore
();
});
});
it
(
'
toggle subscription
'
,
done
=>
{
this
.
mediator
.
store
.
setSubscribedState
(
false
);
it
(
'
toggle subscription
'
,
()
=>
{
mediator
.
store
.
setSubscribedState
(
false
);
mock
.
onPost
(
mediatorMockData
.
toggleSubscriptionEndpoint
).
reply
(
200
,
{});
spyOn
(
this
.
mediator
.
service
,
'
toggleSubscription
'
).
and
.
callThrough
();
this
.
mediator
.
toggleSubscription
()
.
then
(()
=>
{
expect
(
this
.
mediator
.
service
.
toggleSubscription
).
toHaveBeenCalled
();
expect
(
this
.
mediator
.
store
.
subscribed
).
toEqual
(
true
);
})
.
then
(
done
)
.
catch
(
done
.
fail
);
const
spy
=
jest
.
spyOn
(
mediator
.
service
,
'
toggleSubscription
'
)
.
mockReturnValue
(
Promise
.
resolve
());
return
mediator
.
toggleSubscription
()
.
then
(()
=>
{
expect
(
spy
).
toHaveBeenCalled
();
expect
(
mediator
.
store
.
subscribed
).
toEqual
(
true
);
spy
.
mockRestore
();
}
);
});
});
spec/
javascripts
/sidebar/sidebar_subscriptions_spec.js
→
spec/
frontend
/sidebar/sidebar_subscriptions_spec.js
View file @
c80fac8b
import
Vue
from
'
vue
'
;
import
mountComponent
from
'
spec/helpers/vue_mount_component_helper
'
;
import
sidebarSubscriptions
from
'
~/sidebar/components/subscriptions/sidebar_subscriptions.vue
'
;
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
SidebarSubscriptions
from
'
~/sidebar/components/subscriptions/sidebar_subscriptions.vue
'
;
import
SidebarMediator
from
'
~/sidebar/sidebar_mediator
'
;
import
SidebarService
from
'
~/sidebar/services/sidebar_service
'
;
import
SidebarStore
from
'
~/sidebar/stores/sidebar_store
'
;
import
Mock
from
'
./mock_data
'
;
describe
(
'
Sidebar Subscriptions
'
,
function
()
{
let
vm
;
let
SidebarSubscriptions
;
describe
(
'
Sidebar Subscriptions
'
,
()
=>
{
let
wrapper
;
let
mediator
;
beforeEach
(()
=>
{
SidebarSubscriptions
=
Vue
.
extend
(
sidebarSubscriptions
);
// Set up the stores, services, etc
// eslint-disable-next-line no-new
new
SidebarMediator
(
Mock
.
mediator
);
mediator
=
new
SidebarMediator
(
Mock
.
mediator
);
wrapper
=
shallowMount
(
SidebarSubscriptions
,
{
propsData
:
{
mediator
,
},
});
});
afterEach
(()
=>
{
vm
.
$
destroy
();
wrapper
.
destroy
();
SidebarService
.
singleton
=
null
;
SidebarStore
.
singleton
=
null
;
SidebarMediator
.
singleton
=
null
;
});
it
(
'
calls the mediator toggleSubscription on event
'
,
()
=>
{
const
mediator
=
new
SidebarMediator
();
spyOn
(
mediator
,
'
toggleSubscription
'
).
and
.
returnValue
(
Promise
.
resolve
());
vm
=
mountComponent
(
SidebarSubscriptions
,
{
mediator
,
});
const
spy
=
jest
.
spyOn
(
mediator
,
'
toggleSubscription
'
).
mockReturnValue
(
Promise
.
resolve
());
vm
.
onToggleSubscription
();
wrapper
.
vm
.
onToggleSubscription
();
expect
(
mediator
.
toggleSubscription
).
toHaveBeenCalled
();
expect
(
spy
).
toHaveBeenCalled
();
spy
.
mockRestore
();
});
});
spec/
javascripts
/sidebar/subscriptions_spec.js
→
spec/
frontend
/sidebar/subscriptions_spec.js
View file @
c80fac8b
import
Vue
from
'
vue
'
;
import
mountComponent
from
'
spec/helpers/vue_mount_component_helper
'
;
import
{
mockTracking
}
from
'
spec/helpers/tracking_helper
'
;
import
subscriptions
from
'
~/sidebar/components/subscriptions/subscriptions.vue
'
;
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
Subscriptions
from
'
~/sidebar/components/subscriptions/subscriptions.vue
'
;
import
eventHub
from
'
~/sidebar/event_hub
'
;
import
ToggleButton
from
'
~/vue_shared/components/toggle_button.vue
'
;
describe
(
'
Subscriptions
'
,
function
()
{
let
vm
;
let
Subscriptions
;
describe
(
'
Subscriptions
'
,
()
=>
{
let
wrapper
;
beforeEach
(()
=>
{
Subscriptions
=
Vue
.
extend
(
subscriptions
);
});
const
findToggleButton
=
()
=>
wrapper
.
find
(
ToggleButton
);
const
mountComponent
=
propsData
=>
shallowMount
(
Subscriptions
,
{
propsData
,
});
afterEach
(()
=>
{
vm
.
$destroy
();
wrapper
.
destroy
();
wrapper
=
null
;
});
it
(
'
shows loading spinner when loading
'
,
()
=>
{
vm
=
mountComponent
(
Subscriptions
,
{
wrapper
=
mountComponent
(
{
loading
:
true
,
subscribed
:
undefined
,
});
expect
(
vm
.
$refs
.
toggleButton
.
isLoading
).
toBe
(
true
);
expect
(
vm
.
$refs
.
toggleButton
.
$el
.
querySelector
(
'
.project-feature-toggle
'
)).
toHaveClass
(
'
is-loading
'
,
);
expect
(
findToggleButton
().
attributes
(
'
isloading
'
)).
toBe
(
'
true
'
);
});
it
(
'
is toggled "off" when currently not subscribed
'
,
()
=>
{
vm
=
mountComponent
(
Subscriptions
,
{
wrapper
=
mountComponent
(
{
subscribed
:
false
,
});
expect
(
vm
.
$refs
.
toggleButton
.
$el
.
querySelector
(
'
.project-feature-toggle
'
)).
not
.
toHaveClass
(
'
is-checked
'
,
);
expect
(
findToggleButton
().
attributes
(
'
value
'
)).
toBeFalsy
();
});
it
(
'
is toggled "on" when currently subscribed
'
,
()
=>
{
vm
=
mountComponent
(
Subscriptions
,
{
wrapper
=
mountComponent
(
{
subscribed
:
true
,
});
expect
(
vm
.
$refs
.
toggleButton
.
$el
.
querySelector
(
'
.project-feature-toggle
'
)).
toHaveClass
(
'
is-checked
'
,
);
expect
(
findToggleButton
().
attributes
(
'
value
'
)).
toBe
(
'
true
'
);
});
it
(
'
toggleSubscription method emits `toggleSubscription` event on eventHub and Component
'
,
()
=>
{
vm
=
mountComponent
(
Subscriptions
,
{
subscribed
:
true
})
;
spyOn
(
eventHub
,
'
$emit
'
);
spyOn
(
vm
,
'
$emit
'
);
spyOn
(
vm
,
'
track
'
);
const
id
=
42
;
wrapper
=
mountComponent
({
subscribed
:
true
,
id
}
);
const
eventHubSpy
=
jest
.
spyOn
(
eventHub
,
'
$emit
'
);
const
wrapperEmitSpy
=
jest
.
spyOn
(
wrapper
.
vm
,
'
$emit
'
);
vm
.
toggleSubscription
();
wrapper
.
vm
.
toggleSubscription
();
expect
(
eventHub
.
$emit
).
toHaveBeenCalledWith
(
'
toggleSubscription
'
,
jasmine
.
any
(
Object
));
expect
(
vm
.
$emit
).
toHaveBeenCalledWith
(
'
toggleSubscription
'
,
jasmine
.
any
(
Object
));
expect
(
eventHubSpy
).
toHaveBeenCalledWith
(
'
toggleSubscription
'
,
id
);
expect
(
wrapperEmitSpy
).
toHaveBeenCalledWith
(
'
toggleSubscription
'
,
id
);
eventHubSpy
.
mockRestore
();
wrapperEmitSpy
.
mockRestore
();
});
it
(
'
tracks the event when toggled
'
,
()
=>
{
vm
=
mountComponent
(
Subscriptions
,
{
subscribed
:
true
});
const
spy
=
mockTracking
(
'
_category_
'
,
vm
.
$el
,
spyOn
);
vm
.
toggleSubscription
();
wrapper
=
mountComponent
({
subscribed
:
true
});
// const spy = mockTracking('_category_', wrapper.element, jest.spyOn);
const
wrapperTrackSpy
=
jest
.
spyOn
(
wrapper
.
vm
,
'
track
'
);
expect
(
spy
).
toHaveBeenCalled
();
wrapper
.
vm
.
toggleSubscription
();
expect
(
wrapperTrackSpy
).
toHaveBeenCalledWith
(
'
toggle_button
'
,
{
property
:
'
notifications
'
,
value
:
0
,
});
wrapperTrackSpy
.
mockRestore
();
});
it
(
'
onClickCollapsedIcon method emits `toggleSidebar` event on component
'
,
()
=>
{
vm
=
mountComponent
(
Subscriptions
,
{
subscribed
:
true
});
spyOn
(
vm
,
'
$emit
'
);
wrapper
=
mountComponent
(
{
subscribed
:
true
});
const
spy
=
jest
.
spyOn
(
wrapper
.
vm
,
'
$emit
'
);
vm
.
onClickCollapsedIcon
();
wrapper
.
vm
.
onClickCollapsedIcon
();
expect
(
vm
.
$emit
).
toHaveBeenCalledWith
(
'
toggleSidebar
'
);
expect
(
spy
).
toHaveBeenCalledWith
(
'
toggleSidebar
'
);
spy
.
mockRestore
();
});
describe
(
'
given project emails are disabled
'
,
()
=>
{
const
subscribeDisabledDescription
=
'
Notifications have been disabled
'
;
beforeEach
(()
=>
{
vm
=
mountComponent
(
Subscriptions
,
{
wrapper
=
mountComponent
(
{
subscribed
:
false
,
projectEmailsDisabled
:
true
,
subscribeDisabledDescription
,
...
...
@@ -89,12 +94,14 @@ describe('Subscriptions', function() {
});
it
(
'
sets the correct display text
'
,
()
=>
{
expect
(
vm
.
$el
.
textContent
).
toContain
(
subscribeDisabledDescription
);
expect
(
vm
.
$refs
.
tooltip
.
dataset
.
originalTitle
).
toBe
(
subscribeDisabledDescription
);
expect
(
wrapper
.
find
(
'
.issuable-header-text
'
).
text
()).
toContain
(
subscribeDisabledDescription
);
expect
(
wrapper
.
find
({
ref
:
'
tooltip
'
}).
attributes
(
'
data-original-title
'
)).
toBe
(
subscribeDisabledDescription
,
);
});
it
(
'
does not render the toggle button
'
,
()
=>
{
expect
(
vm
.
$refs
.
toggleButton
).
toBeUndefined
(
);
expect
(
wrapper
.
find
(
'
.js-issuable-subscribe-button
'
).
exists
()).
toBe
(
false
);
});
});
});
spec/javascripts/sidebar/lock/edit_form_buttons_spec.js
deleted
100644 → 0
View file @
b26e9115
import
Vue
from
'
vue
'
;
import
mountComponent
from
'
spec/helpers/vue_mount_component_helper
'
;
import
editFormButtons
from
'
~/sidebar/components/lock/edit_form_buttons.vue
'
;
describe
(
'
EditFormButtons
'
,
()
=>
{
let
vm1
;
let
vm2
;
beforeEach
(()
=>
{
const
Component
=
Vue
.
extend
(
editFormButtons
);
const
toggleForm
=
()
=>
{};
const
updateLockedAttribute
=
()
=>
{};
vm1
=
mountComponent
(
Component
,
{
isLocked
:
true
,
toggleForm
,
updateLockedAttribute
,
});
vm2
=
mountComponent
(
Component
,
{
isLocked
:
false
,
toggleForm
,
updateLockedAttribute
,
});
});
it
(
'
renders unlock or lock text based on locked state
'
,
()
=>
{
expect
(
vm1
.
$el
.
innerHTML
.
includes
(
'
Unlock
'
)).
toBe
(
true
);
expect
(
vm2
.
$el
.
innerHTML
.
includes
(
'
Lock
'
)).
toBe
(
true
);
});
});
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