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
c8f23a00
Commit
c8f23a00
authored
Jun 30, 2021
by
Florie Guibert
Committed by
Natalia Tepluhina
Jun 30, 2021
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add To Do sidebar widget
parent
9db9f105
Changes
21
Hide whitespace changes
Inline
Side-by-side
Showing
21 changed files
with
466 additions
and
31 deletions
+466
-31
app/assets/javascripts/boards/boards_util.js
app/assets/javascripts/boards/boards_util.js
+1
-0
app/assets/javascripts/boards/components/board_content_sidebar.vue
...s/javascripts/boards/components/board_content_sidebar.vue
+3
-1
app/assets/javascripts/design_management/components/design_todo_button.vue
...ripts/design_management/components/design_todo_button.vue
+0
-22
app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue
...ts/sidebar/components/todo_toggle/sidebar_todo_widget.vue
+164
-0
app/assets/javascripts/sidebar/constants.js
app/assets/javascripts/sidebar/constants.js
+19
-0
app/assets/javascripts/sidebar/queries/epic_todo.query.graphql
...ssets/javascripts/sidebar/queries/epic_todo.query.graphql
+14
-0
app/assets/javascripts/sidebar/queries/todo_create.mutation.graphql
.../javascripts/sidebar/queries/todo_create.mutation.graphql
+9
-0
app/assets/javascripts/sidebar/queries/todo_mark_done.mutation.graphql
...vascripts/sidebar/queries/todo_mark_done.mutation.graphql
+9
-0
app/assets/javascripts/vue_shared/components/todo_button.vue
app/assets/javascripts/vue_shared/components/todo_button.vue
+29
-1
app/assets/stylesheets/page_bundles/boards.scss
app/assets/stylesheets/page_bundles/boards.scss
+4
-0
ee/app/assets/javascripts/boards/boards_util.js
ee/app/assets/javascripts/boards/boards_util.js
+1
-0
ee/app/assets/javascripts/boards/components/epic_board_content_sidebar.vue
...ascripts/boards/components/epic_board_content_sidebar.vue
+11
-1
ee/spec/features/epic_boards/epic_boards_sidebar_spec.rb
ee/spec/features/epic_boards/epic_boards_sidebar_spec.rb
+27
-0
ee/spec/frontend/boards/boards_util_spec.js
ee/spec/frontend/boards/boards_util_spec.js
+1
-0
ee/spec/frontend/boards/components/__snapshots__/board_content_sidebar_spec.js.snap
...mponents/__snapshots__/board_content_sidebar_spec.js.snap
+5
-1
ee/spec/frontend/boards/components/epic_board_content_sidebar_spec.js
...tend/boards/components/epic_board_content_sidebar_spec.js
+10
-5
ee/spec/frontend/boards/mock_data.js
ee/spec/frontend/boards/mock_data.js
+16
-0
locale/gitlab.pot
locale/gitlab.pot
+3
-0
spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js
...idebar/components/todo_toggle/sidebar_todo_widget_spec.js
+86
-0
spec/frontend/sidebar/mock_data.js
spec/frontend/sidebar/mock_data.js
+34
-0
spec/frontend/vue_shared/components/todo_button_spec.js
spec/frontend/vue_shared/components/todo_button_spec.js
+20
-0
No files found.
app/assets/javascripts/boards/boards_util.js
View file @
c8f23a00
...
...
@@ -54,6 +54,7 @@ export function formatListIssues(listIssues) {
const
listIssue
=
{
...
i
,
id
,
fullId
:
i
.
id
,
labels
:
i
.
labels
?.
nodes
||
[],
assignees
:
i
.
assignees
?.
nodes
||
[],
};
...
...
app/assets/javascripts/boards/components/board_content_sidebar.vue
View file @
c8f23a00
...
...
@@ -82,7 +82,9 @@ export default {
class=
"boards-sidebar gl-absolute"
@
close=
"handleClose"
>
<template
#header
>
{{
__
(
'
Issue details
'
)
}}
</
template
>
<template
#header
>
<h2
class=
"gl-my-0 gl-font-size-h2 gl-line-height-24"
>
{{
__
(
'
Issue details
'
)
}}
</h2>
</
template
>
<
template
#default
>
<board-sidebar-title
/>
<sidebar-assignees-widget
...
...
app/assets/javascripts/design_management/components/design_todo_button.vue
View file @
c8f23a00
...
...
@@ -60,22 +60,6 @@ export default {
},
},
methods
:
{
updateGlobalTodoCount
(
additionalTodoCount
)
{
const
currentCount
=
parseInt
(
document
.
querySelector
(
'
.js-todos-count
'
).
innerText
,
10
);
const
todoToggleEvent
=
new
CustomEvent
(
'
todo:toggle
'
,
{
detail
:
{
count
:
Math
.
max
(
currentCount
+
additionalTodoCount
,
0
),
},
});
document
.
dispatchEvent
(
todoToggleEvent
);
},
incrementGlobalTodoCount
()
{
this
.
updateGlobalTodoCount
(
1
);
},
decrementGlobalTodoCount
()
{
this
.
updateGlobalTodoCount
(
-
1
);
},
createTodo
()
{
this
.
todoLoading
=
true
;
return
this
.
$apollo
...
...
@@ -92,9 +76,6 @@ export default {
}
},
})
.
then
(()
=>
{
this
.
incrementGlobalTodoCount
();
})
.
catch
((
err
)
=>
{
this
.
$emit
(
'
error
'
,
Error
(
CREATE_DESIGN_TODO_ERROR
));
throw
err
;
...
...
@@ -130,9 +111,6 @@ export default {
}
},
})
.
then
(()
=>
{
this
.
decrementGlobalTodoCount
();
})
.
catch
((
err
)
=>
{
this
.
$emit
(
'
error
'
,
Error
(
DELETE_DESIGN_TODO_ERROR
));
throw
err
;
...
...
app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue
0 → 100644
View file @
c8f23a00
<
script
>
import
{
GlTooltipDirective
}
from
'
@gitlab/ui
'
;
import
{
produce
}
from
'
immer
'
;
import
createFlash
from
'
~/flash
'
;
import
{
__
,
sprintf
}
from
'
~/locale
'
;
import
{
todoQueries
,
TodoMutationTypes
,
todoMutations
}
from
'
~/sidebar/constants
'
;
import
TodoButton
from
'
~/vue_shared/components/todo_button.vue
'
;
export
default
{
components
:
{
TodoButton
,
},
directives
:
{
GlTooltip
:
GlTooltipDirective
,
},
props
:
{
issuableId
:
{
type
:
String
,
required
:
true
,
},
issuableIid
:
{
type
:
String
,
required
:
true
,
},
fullPath
:
{
type
:
String
,
required
:
true
,
},
issuableType
:
{
required
:
true
,
type
:
String
,
},
},
data
()
{
return
{
loading
:
false
,
};
},
apollo
:
{
todoId
:
{
query
()
{
return
todoQueries
[
this
.
issuableType
].
query
;
},
variables
()
{
return
{
fullPath
:
this
.
fullPath
,
iid
:
String
(
this
.
issuableIid
),
};
},
update
(
data
)
{
return
data
.
workspace
?.
issuable
?.
currentUserTodos
.
nodes
[
0
]?.
id
;
},
result
({
data
})
{
const
currentUserTodos
=
data
.
workspace
?.
issuable
?.
currentUserTodos
?.
nodes
??
[];
this
.
todoId
=
currentUserTodos
[
0
]?.
id
;
this
.
$emit
(
'
todoUpdated
'
,
currentUserTodos
.
length
>
0
);
},
error
()
{
createFlash
({
message
:
sprintf
(
__
(
'
Something went wrong while setting %{issuableType} to-do item.
'
),
{
issuableType
:
this
.
issuableType
,
}),
});
},
},
},
computed
:
{
todoIdQuery
()
{
return
todoQueries
[
this
.
issuableType
].
query
;
},
todoIdQueryVariables
()
{
return
{
fullPath
:
this
.
fullPath
,
iid
:
String
(
this
.
issuableIid
),
};
},
isLoading
()
{
return
this
.
$apollo
.
queries
?.
todoId
?.
loading
||
this
.
loading
;
},
hasTodo
()
{
return
Boolean
(
this
.
todoId
);
},
todoMutationType
()
{
if
(
this
.
hasTodo
)
{
return
TodoMutationTypes
.
MarkDone
;
}
return
TodoMutationTypes
.
Create
;
},
},
methods
:
{
toggleTodo
()
{
this
.
loading
=
true
;
this
.
$apollo
.
mutate
({
mutation
:
todoMutations
[
this
.
todoMutationType
],
variables
:
{
input
:
{
targetId
:
!
this
.
hasTodo
?
this
.
issuableId
:
undefined
,
id
:
this
.
hasTodo
?
this
.
todoId
:
undefined
,
},
},
update
:
(
store
,
{
data
:
{
todoMutation
:
{
todo
},
},
},
)
=>
{
const
queryProps
=
{
query
:
this
.
todoIdQuery
,
variables
:
this
.
todoIdQueryVariables
,
};
const
sourceData
=
store
.
readQuery
(
queryProps
);
const
data
=
produce
(
sourceData
,
(
draftState
)
=>
{
draftState
.
workspace
.
issuable
.
currentUserTodos
.
nodes
=
this
.
hasTodo
?
[]
:
[
todo
];
});
store
.
writeQuery
({
data
,
...
queryProps
,
});
},
})
.
then
(
({
data
:
{
todoMutation
:
{
errors
},
},
})
=>
{
if
(
errors
.
length
)
{
createFlash
({
message
:
errors
[
0
],
});
}
},
)
.
catch
(()
=>
{
createFlash
({
message
:
sprintf
(
__
(
'
Something went wrong while setting %{issuableType} to-do item.
'
),
{
issuableType
:
this
.
issuableType
,
}),
});
})
.
finally
(()
=>
{
this
.
loading
=
false
;
});
},
},
};
</
script
>
<
template
>
<div
data-testid=
"sidebar-todo"
>
<todo-button
:issuable-type=
"issuableType"
:issuable-id=
"issuableId"
:is-todo=
"hasTodo"
:loading=
"isLoading"
size=
"small"
@
click.stop.prevent=
"toggleTodo"
/>
</div>
</
template
>
app/assets/javascripts/sidebar/constants.js
View file @
c8f23a00
...
...
@@ -4,6 +4,7 @@ import epicDueDateQuery from '~/sidebar/queries/epic_due_date.query.graphql';
import
epicParticipantsQuery
from
'
~/sidebar/queries/epic_participants.query.graphql
'
;
import
epicStartDateQuery
from
'
~/sidebar/queries/epic_start_date.query.graphql
'
;
import
epicSubscribedQuery
from
'
~/sidebar/queries/epic_subscribed.query.graphql
'
;
import
epicTodoQuery
from
'
~/sidebar/queries/epic_todo.query.graphql
'
;
import
issuableAssigneesSubscription
from
'
~/sidebar/queries/issuable_assignees.subscription.graphql
'
;
import
issueConfidentialQuery
from
'
~/sidebar/queries/issue_confidential.query.graphql
'
;
import
issueDueDateQuery
from
'
~/sidebar/queries/issue_due_date.query.graphql
'
;
...
...
@@ -13,6 +14,8 @@ import issueTimeTrackingQuery from '~/sidebar/queries/issue_time_tracking.query.
import
mergeRequestReferenceQuery
from
'
~/sidebar/queries/merge_request_reference.query.graphql
'
;
import
mergeRequestSubscribed
from
'
~/sidebar/queries/merge_request_subscribed.query.graphql
'
;
import
mergeRequestTimeTrackingQuery
from
'
~/sidebar/queries/merge_request_time_tracking.query.graphql
'
;
import
todoCreateMutation
from
'
~/sidebar/queries/todo_create.mutation.graphql
'
;
import
todoMarkDoneMutation
from
'
~/sidebar/queries/todo_mark_done.mutation.graphql
'
;
import
updateEpicConfidentialMutation
from
'
~/sidebar/queries/update_epic_confidential.mutation.graphql
'
;
import
updateEpicDueDateMutation
from
'
~/sidebar/queries/update_epic_due_date.mutation.graphql
'
;
import
updateEpicStartDateMutation
from
'
~/sidebar/queries/update_epic_start_date.mutation.graphql
'
;
...
...
@@ -189,3 +192,19 @@ export const issuableAttributesQueries = {
list
:
milestonesQueries
,
},
};
export
const
todoQueries
=
{
[
IssuableType
.
Epic
]:
{
query
:
epicTodoQuery
,
},
};
export
const
TodoMutationTypes
=
{
Create
:
'
create
'
,
MarkDone
:
'
mark-done
'
,
};
export
const
todoMutations
=
{
[
TodoMutationTypes
.
Create
]:
todoCreateMutation
,
[
TodoMutationTypes
.
MarkDone
]:
todoMarkDoneMutation
,
};
app/assets/javascripts/sidebar/queries/epic_todo.query.graphql
0 → 100644
View file @
c8f23a00
query
epicTodos
(
$fullPath
:
ID
!,
$iid
:
ID
)
{
workspace
:
group
(
fullPath
:
$fullPath
)
{
__typename
issuable
:
epic
(
iid
:
$iid
)
{
__typename
id
currentUserTodos
(
state
:
pending
)
{
nodes
{
id
}
}
}
}
}
app/assets/javascripts/sidebar/queries/todo_create.mutation.graphql
0 → 100644
View file @
c8f23a00
mutation
issuableTodoCreate
(
$input
:
TodoCreateInput
!)
{
todoMutation
:
todoCreate
(
input
:
$input
)
{
__typename
todo
{
id
}
errors
}
}
app/assets/javascripts/sidebar/queries/todo_mark_done.mutation.graphql
0 → 100644
View file @
c8f23a00
mutation
issuableTodoMarkDone
(
$input
:
TodoMarkDoneInput
!)
{
todoMutation
:
todoMarkDone
(
input
:
$input
)
{
__typename
todo
{
id
}
errors
}
}
app/assets/javascripts/vue_shared/components/todo_button.vue
View file @
c8f23a00
...
...
@@ -18,11 +18,39 @@ export default {
return
this
.
isTodo
?
__
(
'
Mark as done
'
)
:
__
(
'
Add a to do
'
);
},
},
methods
:
{
updateGlobalTodoCount
(
additionalTodoCount
)
{
const
countContainer
=
document
.
querySelector
(
'
.js-todos-count
'
);
if
(
countContainer
===
null
)
return
;
const
currentCount
=
parseInt
(
countContainer
.
innerText
,
10
);
const
todoToggleEvent
=
new
CustomEvent
(
'
todo:toggle
'
,
{
detail
:
{
count
:
Math
.
max
(
currentCount
+
additionalTodoCount
,
0
),
},
});
document
.
dispatchEvent
(
todoToggleEvent
);
},
incrementGlobalTodoCount
()
{
this
.
updateGlobalTodoCount
(
1
);
},
decrementGlobalTodoCount
()
{
this
.
updateGlobalTodoCount
(
-
1
);
},
onToggle
(
event
)
{
if
(
this
.
isTodo
)
{
this
.
decrementGlobalTodoCount
();
}
else
{
this
.
incrementGlobalTodoCount
();
}
this
.
$emit
(
'
click
'
,
event
);
},
},
};
</
script
>
<
template
>
<gl-button
v-bind=
"$attrs"
:aria-label=
"buttonLabel"
@
click=
"
$emit('click',
$event)"
>
<gl-button
v-bind=
"$attrs"
:aria-label=
"buttonLabel"
@
click=
"
onToggle(
$event)"
>
{{
buttonLabel
}}
</gl-button>
</
template
>
app/assets/stylesheets/page_bundles/boards.scss
View file @
c8f23a00
...
...
@@ -472,6 +472,10 @@
.sidebar-collapsed-icon
{
display
:
none
;
}
.gl-drawer-header
{
align-items
:
flex-start
;
}
}
.board-header-collapsed-info-icon
:hover
{
...
...
ee/app/assets/javascripts/boards/boards_util.js
View file @
c8f23a00
...
...
@@ -67,6 +67,7 @@ export function formatListEpics(listEpics) {
const
listEpic
=
{
...
i
,
id
,
fullId
:
i
.
id
,
labels
:
i
.
labels
?.
nodes
||
[],
assignees
:
i
.
assignees
?.
nodes
||
[],
};
...
...
ee/app/assets/javascripts/boards/components/epic_board_content_sidebar.vue
View file @
c8f23a00
...
...
@@ -10,10 +10,12 @@ import SidebarConfidentialityWidget from '~/sidebar/components/confidential/side
import
SidebarDateWidget
from
'
~/sidebar/components/date/sidebar_date_widget.vue
'
;
import
SidebarParticipantsWidget
from
'
~/sidebar/components/participants/sidebar_participants_widget.vue
'
;
import
SidebarSubscriptionsWidget
from
'
~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
'
;
import
SidebarTodoWidget
from
'
~/sidebar/components/todo_toggle/sidebar_todo_widget.vue
'
;
export
default
{
components
:
{
GlDrawer
,
SidebarTodoWidget
,
BoardSidebarLabelsSelect
,
BoardSidebarTitle
,
SidebarConfidentialityWidget
,
...
...
@@ -52,7 +54,15 @@ export default {
:open=
"isSidebarOpen"
@
close=
"handleClose"
>
<template
#header
>
{{
__
(
'
Epic details
'
)
}}
</
template
>
<template
#header
>
<h2
class=
"gl-mt-0 gl-mb-3 gl-font-size-h2 gl-line-height-24"
>
{{
__
(
'
Epic details
'
)
}}
</h2>
<sidebar-todo-widget
:issuable-id=
"activeBoardItem.fullId"
:issuable-iid=
"activeBoardItem.iid"
:full-path=
"fullPath"
:issuable-type=
"issuableType"
/>
</
template
>
<
template
#default
>
<board-sidebar-title
data-testid=
"sidebar-title"
/>
<sidebar-date-widget
...
...
ee/spec/features/epic_boards/epic_boards_sidebar_spec.rb
View file @
c8f23a00
...
...
@@ -81,6 +81,33 @@ RSpec.describe 'Epic boards sidebar', :js do
end
end
context
'todo'
do
it
'creates todo when clicking button'
do
click_card
(
card
)
wait_for_requests
page
.
within
'[data-testid="sidebar-todo"]'
do
click_button
'Add a to do'
wait_for_requests
expect
(
page
).
to
have_content
'Mark as done'
end
end
it
'marks a todo as done'
do
click_card
(
card
)
wait_for_requests
page
.
within
'[data-testid="sidebar-todo"]'
do
click_button
'Add a to do'
wait_for_requests
click_button
'Mark as done'
wait_for_requests
expect
(
page
).
to
have_content
'Add a to do'
end
end
end
context
'start date'
do
it
'edits fixed start date'
do
click_card
(
card
)
...
...
ee/spec/frontend/boards/boards_util_spec.js
View file @
c8f23a00
...
...
@@ -66,6 +66,7 @@ describe('formatListEpics', () => {
1
:
{
assignees
:
[],
id
:
1
,
fullId
:
'
gid://gitlab/Epic/1
'
,
labels
:
[
mockLabel
],
title
:
'
epic title
'
,
},
...
...
ee/spec/frontend/boards/components/__snapshots__/board_content_sidebar_spec.js.snap
View file @
c8f23a00
...
...
@@ -4,7 +4,11 @@ exports[`ee/BoardContentSidebar matches the snapshot 1`] = `
<div
class="boards-sidebar gl-absolute"
>
Issue details
<h2
class="gl-my-0 gl-font-size-h2 gl-line-height-24"
>
Issue details
</h2>
<boardsidebartitle-stub />
<sidebarassigneeswidget-stub
...
...
ee/spec/frontend/boards/components/epic_board_content_sidebar_spec.js
View file @
c8f23a00
...
...
@@ -12,7 +12,8 @@ import SidebarConfidentialityWidget from '~/sidebar/components/confidential/side
import
SidebarDateWidget
from
'
~/sidebar/components/date/sidebar_date_widget.vue
'
;
import
SidebarParticipantsWidget
from
'
~/sidebar/components/participants/sidebar_participants_widget.vue
'
;
import
SidebarSubscriptionsWidget
from
'
~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
'
;
import
{
mockEpic
}
from
'
../mock_data
'
;
import
SidebarTodoWidget
from
'
~/sidebar/components/todo_toggle/sidebar_todo_widget.vue
'
;
import
{
mockFormattedBoardEpic
}
from
'
../mock_data
'
;
describe
(
'
EpicBoardContentSidebar
'
,
()
=>
{
let
wrapper
;
...
...
@@ -22,14 +23,14 @@ describe('EpicBoardContentSidebar', () => {
store
=
new
Vuex
.
Store
({
state
:
{
sidebarType
:
ISSUABLE
,
boardItems
:
{
[
mock
Epic
.
id
]:
mock
Epic
},
activeId
:
mockEpic
.
id
,
boardItems
:
{
[
mock
FormattedBoardEpic
.
id
]:
mockFormattedBoard
Epic
},
activeId
:
mock
FormattedBoard
Epic
.
id
,
issuableType
:
'
epic
'
,
fullPath
:
'
gitlab-org
'
,
},
getters
:
{
activeBoardItem
:
()
=>
{
return
mockEpic
;
return
mock
FormattedBoard
Epic
;
},
isSidebarOpen
:
()
=>
true
,
...
mockGetters
,
...
...
@@ -86,6 +87,10 @@ describe('EpicBoardContentSidebar', () => {
expect
(
wrapper
.
findComponent
(
GlDrawer
).
props
(
'
open
'
)).
toBe
(
true
);
});
it
(
'
renders SidebarTodoWidget
'
,
()
=>
{
expect
(
wrapper
.
findComponent
(
SidebarTodoWidget
).
exists
()).
toBe
(
true
);
});
it
(
'
renders BoardSidebarLabelsSelect
'
,
()
=>
{
expect
(
wrapper
.
findComponent
(
BoardSidebarLabelsSelect
).
exists
()).
toBe
(
true
);
});
...
...
@@ -127,7 +132,7 @@ describe('EpicBoardContentSidebar', () => {
expect
(
toggleBoardItem
).
toHaveBeenCalledTimes
(
1
);
expect
(
toggleBoardItem
).
toHaveBeenCalledWith
(
expect
.
any
(
Object
),
{
boardItem
:
mockEpic
,
boardItem
:
mock
FormattedBoard
Epic
,
sidebarType
:
ISSUABLE
,
});
});
...
...
ee/spec/frontend/boards/mock_data.js
View file @
c8f23a00
...
...
@@ -240,6 +240,22 @@ export const mockEpic = {
labels
:
[],
};
export
const
mockFormattedBoardEpic
=
{
fullId
:
'
gid://gitlab/Epic/41
'
,
id
:
41
,
iid
:
'
1
'
,
title
:
'
Epic title
'
,
state
:
'
opened
'
,
webUrl
:
'
/groups/gitlab-org/-/epics/1
'
,
group
:
{
fullPath
:
'
gitlab-org
'
},
descendantCounts
:
{
openedIssues
:
3
,
closedIssues
:
2
,
},
issues
:
[
mockIssue
],
labels
:
[],
};
export
const
mockEpics
=
[
{
id
:
'
gid://gitlab/Epic/41
'
,
...
...
locale/gitlab.pot
View file @
c8f23a00
...
...
@@ -30339,6 +30339,9 @@ msgstr ""
msgid "Something went wrong while setting %{issuableType} notifications."
msgstr ""
msgid "Something went wrong while setting %{issuableType} to-do item."
msgstr ""
msgid "Something went wrong while stopping this environment. Please try again."
msgstr ""
...
...
spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js
0 → 100644
View file @
c8f23a00
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
Vue
from
'
vue
'
;
import
VueApollo
from
'
vue-apollo
'
;
import
createMockApollo
from
'
helpers/mock_apollo_helper
'
;
import
waitForPromises
from
'
helpers/wait_for_promises
'
;
import
createFlash
from
'
~/flash
'
;
import
SidebarTodoWidget
from
'
~/sidebar/components/todo_toggle/sidebar_todo_widget.vue
'
;
import
epicTodoQuery
from
'
~/sidebar/queries/epic_todo.query.graphql
'
;
import
TodoButton
from
'
~/vue_shared/components/todo_button.vue
'
;
import
{
todosResponse
,
noTodosResponse
}
from
'
../../mock_data
'
;
jest
.
mock
(
'
~/flash
'
);
Vue
.
use
(
VueApollo
);
describe
(
'
Sidebar Todo Widget
'
,
()
=>
{
let
wrapper
;
let
fakeApollo
;
const
findTodoButton
=
()
=>
wrapper
.
findComponent
(
TodoButton
);
const
createComponent
=
({
todosQueryHandler
=
jest
.
fn
().
mockResolvedValue
(
noTodosResponse
),
}
=
{})
=>
{
fakeApollo
=
createMockApollo
([[
epicTodoQuery
,
todosQueryHandler
]]);
wrapper
=
shallowMount
(
SidebarTodoWidget
,
{
apolloProvider
:
fakeApollo
,
provide
:
{
canUpdate
:
true
,
},
propsData
:
{
fullPath
:
'
group
'
,
issuableIid
:
'
1
'
,
issuableId
:
'
gid://gitlab/Epic/4
'
,
issuableType
:
'
epic
'
,
},
});
};
afterEach
(()
=>
{
wrapper
.
destroy
();
fakeApollo
=
null
;
});
describe
(
'
when user does not have a todo for the issuable
'
,
()
=>
{
beforeEach
(()
=>
{
createComponent
();
return
waitForPromises
();
});
it
(
'
passes false isTodo prop to Todo button component
'
,
()
=>
{
expect
(
findTodoButton
().
props
(
'
isTodo
'
)).
toBe
(
false
);
});
it
(
'
emits `todoUpdated` event with a `false` payload
'
,
()
=>
{
expect
(
wrapper
.
emitted
(
'
todoUpdated
'
)).
toEqual
([[
false
]]);
});
});
describe
(
'
when user has a todo for the issuable
'
,
()
=>
{
beforeEach
(()
=>
{
createComponent
({
todosQueryHandler
:
jest
.
fn
().
mockResolvedValue
(
todosResponse
),
});
return
waitForPromises
();
});
it
(
'
passes true isTodo prop to Todo button component
'
,
()
=>
{
expect
(
findTodoButton
().
props
(
'
isTodo
'
)).
toBe
(
true
);
});
it
(
'
emits `todoUpdated` event with a `true` payload
'
,
()
=>
{
expect
(
wrapper
.
emitted
(
'
todoUpdated
'
)).
toEqual
([[
true
]]);
});
});
it
(
'
displays a flash message when query is rejected
'
,
async
()
=>
{
createComponent
({
todosQueryHandler
:
jest
.
fn
().
mockRejectedValue
(
'
Houston, we have a problem
'
),
});
await
waitForPromises
();
expect
(
createFlash
).
toHaveBeenCalled
();
});
});
spec/frontend/sidebar/mock_data.js
View file @
c8f23a00
...
...
@@ -609,4 +609,38 @@ export const issuableTimeTrackingResponse = {
},
};
export
const
todosResponse
=
{
data
:
{
workspace
:
{
__typename
:
'
Group
'
,
issuable
:
{
__typename
:
'
Epic
'
,
id
:
'
gid://gitlab/Epic/4
'
,
currentUserTodos
:
{
nodes
:
[
{
id
:
'
gid://gitlab/Todo/433
'
,
},
],
},
},
},
},
};
export
const
noTodosResponse
=
{
data
:
{
workspace
:
{
__typename
:
'
Group
'
,
issuable
:
{
__typename
:
'
Epic
'
,
id
:
'
gid://gitlab/Epic/4
'
,
currentUserTodos
:
{
nodes
:
[],
},
},
},
},
};
export
default
mockData
;
spec/frontend/vue_shared/components/todo_button_spec.js
View file @
c8f23a00
...
...
@@ -4,6 +4,7 @@ import TodoButton from '~/vue_shared/components/todo_button.vue';
describe
(
'
Todo Button
'
,
()
=>
{
let
wrapper
;
let
dispatchEventSpy
;
const
createComponent
=
(
props
=
{},
mountFn
=
shallowMount
)
=>
{
wrapper
=
mountFn
(
TodoButton
,
{
...
...
@@ -13,8 +14,17 @@ describe('Todo Button', () => {
});
};
beforeEach
(()
=>
{
dispatchEventSpy
=
jest
.
spyOn
(
document
,
'
dispatchEvent
'
);
jest
.
spyOn
(
document
,
'
querySelector
'
).
mockReturnValue
({
innerText
:
2
,
});
});
afterEach
(()
=>
{
wrapper
.
destroy
();
dispatchEventSpy
=
null
;
jest
.
clearAllMocks
();
});
it
(
'
renders GlButton
'
,
()
=>
{
...
...
@@ -30,6 +40,16 @@ describe('Todo Button', () => {
expect
(
wrapper
.
emitted
().
click
).
toBeTruthy
();
});
it
(
'
calls dispatchDocumentEvent to update global To-Do counter correctly
'
,
()
=>
{
createComponent
({},
mount
);
wrapper
.
find
(
GlButton
).
trigger
(
'
click
'
);
const
dispatchedEvent
=
dispatchEventSpy
.
mock
.
calls
[
0
][
0
];
expect
(
dispatchEventSpy
).
toHaveBeenCalledTimes
(
1
);
expect
(
dispatchedEvent
.
detail
).
toEqual
({
count
:
1
});
expect
(
dispatchedEvent
.
type
).
toBe
(
'
todo:toggle
'
);
});
it
.
each
`
label | isTodo
${
'
Mark as done
'
}
|
${
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