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
5fb1ec11
Commit
5fb1ec11
authored
Dec 17, 2020
by
Olena Horal-Koretska
Committed by
Phil Hughes
Dec 17, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Join add and update schedule modals
parent
91d34112
Changes
9
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
320 additions
and
294 deletions
+320
-294
ee/app/assets/javascripts/oncall_schedules/components/add_edit_schedule_modal.vue
...s/oncall_schedules/components/add_edit_schedule_modal.vue
+72
-19
ee/app/assets/javascripts/oncall_schedules/components/add_schedule_modal.vue
...cripts/oncall_schedules/components/add_schedule_modal.vue
+0
-137
ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
...vascripts/oncall_schedules/components/oncall_schedule.vue
+6
-1
ee/app/assets/javascripts/oncall_schedules/components/oncall_schedules_wrapper.vue
.../oncall_schedules/components/oncall_schedules_wrapper.vue
+1
-1
ee/spec/frontend/oncall_schedule/__snapshots__/add_schedule_modal_spec.js.snap
...ll_schedule/__snapshots__/add_schedule_modal_spec.js.snap
+0
-20
ee/spec/frontend/oncall_schedule/__snapshots__/edit_schedule_modal_spec.js.snap
...l_schedule/__snapshots__/edit_schedule_modal_spec.js.snap
+0
-21
ee/spec/frontend/oncall_schedule/add_edit_schedule_modal_spec.js
.../frontend/oncall_schedule/add_edit_schedule_modal_spec.js
+240
-0
ee/spec/frontend/oncall_schedule/add_schedule_modal_spec.js
ee/spec/frontend/oncall_schedule/add_schedule_modal_spec.js
+0
-94
ee/spec/frontend/oncall_schedule/oncall_schedule_wrapper_spec.js
.../frontend/oncall_schedule/oncall_schedule_wrapper_spec.js
+1
-1
No files found.
ee/app/assets/javascripts/oncall_schedules/components/edit_schedule_modal.vue
→
ee/app/assets/javascripts/oncall_schedules/components/
add_
edit_schedule_modal.vue
View file @
5fb1ec11
...
...
@@ -2,15 +2,18 @@
import
{
isEmpty
}
from
'
lodash
'
;
import
{
GlModal
,
GlAlert
}
from
'
@gitlab/ui
'
;
import
{
s__
,
__
}
from
'
~/locale
'
;
import
updateOncallScheduleMutation
from
'
../graphql/mutations/update_oncall_schedule.mutation.graphql
'
;
import
getOncallSchedulesQuery
from
'
../graphql/queries/get_oncall_schedules.query.graphql
'
;
import
{
updateStoreAfterScheduleEdit
}
from
'
../utils/cache_updates
'
;
import
createOncallScheduleMutation
from
'
../graphql/mutations/create_oncall_schedule.mutation.graphql
'
;
import
updateOncallScheduleMutation
from
'
../graphql/mutations/update_oncall_schedule.mutation.graphql
'
;
import
AddEditScheduleForm
from
'
./add_edit_schedule_form.vue
'
;
import
{
updateStoreOnScheduleCreate
,
updateStoreAfterScheduleEdit
}
from
'
../utils/cache_updates
'
;
export
const
i18n
=
{
cancel
:
__
(
'
Cancel
'
),
addSchedule
:
s__
(
'
OnCallSchedules|Add schedule
'
),
editSchedule
:
s__
(
'
OnCallSchedules|Edit schedule
'
),
errorMsg
:
s__
(
'
OnCallSchedules|Failed to edit schedule
'
),
addErrorMsg
:
s__
(
'
OnCallSchedules|Failed to edit schedule
'
),
editErrorMsg
:
s__
(
'
OnCallSchedules|Failed to add schedule
'
),
};
export
default
{
...
...
@@ -22,31 +25,37 @@ export default {
AddEditScheduleForm
,
},
props
:
{
schedule
:
{
type
:
Object
,
required
:
true
,
},
modalId
:
{
type
:
String
,
required
:
true
,
},
schedule
:
{
type
:
Object
,
required
:
false
,
default
:
()
=>
({}),
},
isEditMode
:
{
type
:
Boolean
,
required
:
false
,
default
:
false
,
},
},
data
()
{
return
{
loading
:
false
,
error
:
null
,
form
:
{
name
:
this
.
schedule
.
name
,
description
:
this
.
schedule
.
description
,
timezone
:
this
.
timezones
.
find
(({
identifier
})
=>
this
.
schedule
.
timezone
===
identifier
),
name
:
this
.
schedule
?
.
name
,
description
:
this
.
schedule
?
.
description
,
timezone
:
this
.
timezones
.
find
(({
identifier
})
=>
this
.
schedule
?
.
timezone
===
identifier
),
},
error
:
null
,
};
},
computed
:
{
actionsProps
()
{
return
{
primary
:
{
text
:
i18n
.
editSchedu
le
,
text
:
this
.
tit
le
,
attributes
:
[
{
variant
:
'
info
'
},
{
loading
:
this
.
loading
},
...
...
@@ -59,7 +68,7 @@ export default {
};
},
isNameInvalid
()
{
return
!
this
.
form
.
name
.
length
;
return
!
this
.
form
.
name
?
.
length
;
},
isTimezoneInvalid
()
{
return
isEmpty
(
this
.
form
.
timezone
);
...
...
@@ -76,8 +85,53 @@ export default {
timezone
:
this
.
form
.
timezone
.
identifier
,
};
},
errorMsg
()
{
return
this
.
error
||
(
this
.
isEditMode
?
i18n
.
editErrorMsg
:
i18n
.
addErrorMsg
);
},
title
()
{
return
this
.
isEditMode
?
i18n
.
editSchedule
:
i18n
.
addSchedule
;
},
},
methods
:
{
createSchedule
()
{
this
.
loading
=
true
;
const
{
projectPath
}
=
this
;
this
.
$apollo
.
mutate
({
mutation
:
createOncallScheduleMutation
,
variables
:
{
oncallScheduleCreateInput
:
{
projectPath
,
...
this
.
form
,
timezone
:
this
.
form
.
timezone
.
identifier
,
},
},
update
(
store
,
{
data
:
{
oncallScheduleCreate
},
},
)
{
updateStoreOnScheduleCreate
(
store
,
getOncallSchedulesQuery
,
oncallScheduleCreate
,
{
projectPath
,
});
},
})
.
then
(({
data
:
{
oncallScheduleCreate
:
{
errors
:
[
error
]
}
}
})
=>
{
if
(
error
)
{
throw
error
;
}
this
.
$refs
.
addUpdateScheduleModal
.
hide
();
this
.
$emit
(
'
scheduleCreated
'
);
})
.
catch
(
error
=>
{
this
.
error
=
error
;
})
.
finally
(()
=>
{
this
.
loading
=
false
;
});
},
editSchedule
()
{
const
{
projectPath
}
=
this
;
this
.
loading
=
true
;
...
...
@@ -94,7 +148,7 @@ export default {
if
(
error
)
{
throw
error
;
}
this
.
$refs
.
u
pdateScheduleModal
.
hide
();
this
.
$refs
.
addU
pdateScheduleModal
.
hide
();
})
.
catch
(
error
=>
{
this
.
error
=
error
;
...
...
@@ -115,17 +169,16 @@ export default {
<
template
>
<gl-modal
ref=
"
u
pdateScheduleModal"
ref=
"
addU
pdateScheduleModal"
:modal-id=
"modalId"
size=
"sm"
:data-testid=
"`update-schedule-modal-$
{schedule.iid}`"
:title="$options.i18n.editSchedule"
:title=
"title"
:action-primary=
"actionsProps.primary"
:action-cancel=
"actionsProps.cancel"
@primary.prevent="
editSchedule
"
@
primary.prevent=
"
isEditMode ? editSchedule() : createSchedule()
"
>
<gl-alert
v-if=
"error"
variant=
"danger"
class=
"gl-mt-n3 gl-mb-3"
@
dismiss=
"hideErrorAlert"
>
{{
error
||
$options
.
i18n
.
error
Msg
}}
{{
errorMsg
}}
</gl-alert>
<add-edit-schedule-form
:is-name-invalid=
"isNameInvalid"
...
...
ee/app/assets/javascripts/oncall_schedules/components/add_schedule_modal.vue
deleted
100644 → 0
View file @
91d34112
<
script
>
import
{
isEmpty
}
from
'
lodash
'
;
import
{
GlModal
,
GlAlert
}
from
'
@gitlab/ui
'
;
import
{
s__
,
__
}
from
'
~/locale
'
;
import
getOncallSchedulesQuery
from
'
../graphql/queries/get_oncall_schedules.query.graphql
'
;
import
createOncallScheduleMutation
from
'
../graphql/mutations/create_oncall_schedule.mutation.graphql
'
;
import
AddEditScheduleForm
from
'
./add_edit_schedule_form.vue
'
;
import
{
updateStoreOnScheduleCreate
}
from
'
../utils/cache_updates
'
;
export
const
i18n
=
{
cancel
:
__
(
'
Cancel
'
),
addSchedule
:
s__
(
'
OnCallSchedules|Add schedule
'
),
errorMsg
:
s__
(
'
OnCallSchedules|Failed to add schedule
'
),
};
export
default
{
i18n
,
inject
:
[
'
projectPath
'
,
'
timezones
'
],
components
:
{
GlModal
,
GlAlert
,
AddEditScheduleForm
,
},
props
:
{
modalId
:
{
type
:
String
,
required
:
true
,
},
},
data
()
{
return
{
loading
:
false
,
form
:
{
name
:
''
,
description
:
''
,
timezone
:
''
,
},
error
:
null
,
};
},
computed
:
{
actionsProps
()
{
return
{
primary
:
{
text
:
i18n
.
addSchedule
,
attributes
:
[
{
variant
:
'
info
'
},
{
loading
:
this
.
loading
},
{
disabled
:
this
.
isFormInvalid
},
],
},
cancel
:
{
text
:
i18n
.
cancel
,
},
};
},
isNameInvalid
()
{
return
!
this
.
form
.
name
.
length
;
},
isTimezoneInvalid
()
{
return
isEmpty
(
this
.
form
.
timezone
);
},
isFormInvalid
()
{
return
this
.
isNameInvalid
||
this
.
isTimezoneInvalid
;
},
},
methods
:
{
createSchedule
()
{
this
.
loading
=
true
;
const
{
projectPath
}
=
this
;
this
.
$apollo
.
mutate
({
mutation
:
createOncallScheduleMutation
,
variables
:
{
oncallScheduleCreateInput
:
{
projectPath
,
...
this
.
form
,
timezone
:
this
.
form
.
timezone
.
identifier
,
},
},
update
(
store
,
{
data
:
{
oncallScheduleCreate
},
},
)
{
updateStoreOnScheduleCreate
(
store
,
getOncallSchedulesQuery
,
oncallScheduleCreate
,
{
projectPath
,
});
},
})
.
then
(({
data
:
{
oncallScheduleCreate
:
{
errors
:
[
error
]
}
}
})
=>
{
if
(
error
)
{
throw
error
;
}
this
.
$refs
.
createScheduleModal
.
hide
();
this
.
$emit
(
'
scheduleCreated
'
);
})
.
catch
(
error
=>
{
this
.
error
=
error
;
})
.
finally
(()
=>
{
this
.
loading
=
false
;
});
},
hideErrorAlert
()
{
this
.
error
=
null
;
},
updateScheduleForm
({
type
,
value
})
{
this
.
form
[
type
]
=
value
;
},
},
};
</
script
>
<
template
>
<gl-modal
ref=
"createScheduleModal"
:modal-id=
"modalId"
size=
"sm"
:title=
"$options.i18n.addSchedule"
:action-primary=
"actionsProps.primary"
:action-cancel=
"actionsProps.cancel"
@
primary.prevent=
"createSchedule"
>
<gl-alert
v-if=
"error"
variant=
"danger"
class=
"gl-mt-n3 gl-mb-3"
@
dismiss=
"hideErrorAlert"
>
{{
error
||
$options
.
i18n
.
errorMsg
}}
</gl-alert>
<add-edit-schedule-form
:is-name-invalid=
"isNameInvalid"
:is-timezone-invalid=
"isTimezoneInvalid"
:form=
"form"
@
update-schedule-form=
"updateScheduleForm"
/>
</gl-modal>
</
template
>
ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
View file @
5fb1ec11
...
...
@@ -11,7 +11,7 @@ import { formatDate } from '~/lib/utils/datetime_utility';
import
{
s__
,
__
}
from
'
~/locale
'
;
import
ScheduleTimelineSection
from
'
./schedule/components/schedule_timeline_section.vue
'
;
import
DeleteScheduleModal
from
'
./delete_schedule_modal.vue
'
;
import
EditScheduleModal
from
'
./edit_schedule_modal.vue
'
;
import
EditScheduleModal
from
'
./
add_
edit_schedule_modal.vue
'
;
import
AddRotationModal
from
'
./rotations/components/add_rotation_modal.vue
'
;
import
{
getTimeframeForWeeksView
}
from
'
./schedule/utils
'
;
...
...
@@ -146,6 +146,11 @@ export default {
</gl-card>
<delete-schedule-modal
:schedule=
"schedule"
:modal-id=
"$options.deleteScheduleModalId"
/>
<edit-schedule-modal
:schedule=
"schedule"
:modal-id=
"$options.editScheduleModalId"
/>
<edit-schedule-modal
:schedule=
"schedule"
:modal-id=
"$options.editScheduleModalId"
is-edit-mode
/>
<add-rotation-modal
:schedule=
"schedule"
:modal-id=
"$options.addRotationModalId"
/>
</div>
</template>
ee/app/assets/javascripts/oncall_schedules/components/oncall_schedules_wrapper.vue
View file @
5fb1ec11
...
...
@@ -2,7 +2,7 @@
import
{
GlAlert
,
GlButton
,
GlEmptyState
,
GlLoadingIcon
,
GlModalDirective
}
from
'
@gitlab/ui
'
;
import
mockRotations
from
'
../../../../../spec/frontend/oncall_schedule/mocks/mock_rotation.json
'
;
import
*
as
Sentry
from
'
~/sentry/wrapper
'
;
import
AddScheduleModal
from
'
./add_schedule_modal.vue
'
;
import
AddScheduleModal
from
'
./add_
edit_
schedule_modal.vue
'
;
import
OncallSchedule
from
'
./oncall_schedule.vue
'
;
import
{
s__
}
from
'
~/locale
'
;
import
getOncallSchedulesQuery
from
'
../graphql/queries/get_oncall_schedules.query.graphql
'
;
...
...
ee/spec/frontend/oncall_schedule/__snapshots__/add_schedule_modal_spec.js.snap
deleted
100644 → 0
View file @
91d34112
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AddScheduleModal renders modal layout 1`] = `
<gl-modal-stub
actioncancel="[object Object]"
actionprimary="[object Object]"
modalclass=""
modalid="addScheduleModal"
size="sm"
title="Add schedule"
titletag="h4"
>
<!---->
<add-edit-schedule-form-stub
form="[object Object]"
schedule="[object Object]"
/>
</gl-modal-stub>
`;
ee/spec/frontend/oncall_schedule/__snapshots__/edit_schedule_modal_spec.js.snap
deleted
100644 → 0
View file @
91d34112
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`UpdateScheduleModal renders update schedule modal layout 1`] = `
<gl-modal-stub
actioncancel="[object Object]"
actionprimary="[object Object]"
data-testid="update-schedule-modal-37"
modalclass=""
modalid="editScheduleModal"
size="sm"
title="Edit schedule"
titletag="h4"
>
<!---->
<add-edit-schedule-form-stub
form="[object Object]"
schedule="[object Object]"
/>
</gl-modal-stub>
`;
ee/spec/frontend/oncall_schedule/edit_schedule_modal_spec.js
→
ee/spec/frontend/oncall_schedule/
add_
edit_schedule_modal_spec.js
View file @
5fb1ec11
import
{
shallowMount
,
createLocalVue
}
from
'
@vue/test-utils
'
;
import
{
createLocalVue
,
shallowMount
}
from
'
@vue/test-utils
'
;
import
VueApollo
from
'
vue-apollo
'
;
import
createMockApollo
from
'
jest/helpers/mock_apollo_helper
'
;
import
{
GlModal
,
GlAlert
}
from
'
@gitlab/ui
'
;
import
VueApollo
from
'
vue-apollo
'
;
import
waitForPromises
from
'
helpers/wait_for_promises
'
;
import
AddEditScheduleModal
,
{
i18n
,
}
from
'
ee/oncall_schedules/components/add_edit_schedule_modal.vue
'
;
import
{
addScheduleModalId
}
from
'
ee/oncall_schedules/components/oncall_schedules_wrapper
'
;
import
getOncallSchedulesQuery
from
'
ee/oncall_schedules/graphql/queries/get_oncall_schedules.query.graphql
'
;
import
updateOncallScheduleMutation
from
'
ee/oncall_schedules/graphql/mutations/update_oncall_schedule.mutation.graphql
'
;
import
UpdateScheduleModal
,
{
i18n
}
from
'
ee/oncall_schedules/components/edit_schedule_modal.vue
'
;
import
{
editScheduleModalId
}
from
'
ee/oncall_schedules/components/oncall_schedule
'
;
import
{
getOncallSchedulesQueryResponse
,
...
...
@@ -14,48 +17,28 @@ import {
}
from
'
./mocks/apollo_mock
'
;
import
mockTimezones
from
'
./mocks/mockTimezones.json
'
;
const
localVue
=
createLocalVue
();
const
projectPath
=
'
group/project
'
;
const
mutate
=
jest
.
fn
();
const
mockHideModal
=
jest
.
fn
();
const
schedule
=
getOncallSchedulesQueryResponse
.
data
.
project
.
incidentManagementOncallSchedules
.
nodes
[
0
];
localVue
.
use
(
VueApollo
);
describe
(
'
UpdateScheduleModal
'
,
()
=>
{
describe
(
'
AddScheduleModal
'
,
()
=>
{
let
wrapper
;
let
fakeApollo
;
const
localVue
=
createLocalVue
();
const
projectPath
=
'
group/project
'
;
const
mutate
=
jest
.
fn
();
const
mockHideModal
=
jest
.
fn
();
const
mockSchedule
=
getOncallSchedulesQueryResponse
.
data
.
project
.
incidentManagementOncallSchedules
.
nodes
[
0
];
let
updateScheduleHandler
;
const
findModal
=
()
=>
wrapper
.
find
(
GlModal
);
const
findAlert
=
()
=>
wrapper
.
find
(
GlAlert
);
async
function
awaitApolloDomMock
()
{
await
wrapper
.
vm
.
$nextTick
();
// kick off the DOM update
await
jest
.
runOnlyPendingTimers
();
// kick off the mocked GQL stuff (promises)
await
wrapper
.
vm
.
$nextTick
();
// kick off the DOM update for flash
}
async
function
updateSchedule
(
localWrapper
)
{
await
jest
.
runOnlyPendingTimers
();
await
localWrapper
.
vm
.
$nextTick
();
localWrapper
.
find
(
GlModal
).
vm
.
$emit
(
'
primary
'
,
{
preventDefault
:
jest
.
fn
()
});
}
const
createComponent
=
({
data
=
{},
props
=
{}
}
=
{})
=>
{
wrapper
=
shallowMount
(
UpdateScheduleModal
,
{
const
createComponent
=
({
schedule
,
isEditMode
,
modalId
}
=
{})
=>
{
wrapper
=
shallowMount
(
AddEditScheduleModal
,
{
data
()
{
return
{
...
data
,
form
:
schedule
,
form
:
mockSchedule
,
};
},
propsData
:
{
modalId
:
editScheduleModalId
,
modalId
,
schedule
,
...
props
,
isEditMode
,
},
provide
:
{
projectPath
,
...
...
@@ -67,12 +50,26 @@ describe('UpdateScheduleModal', () => {
},
},
});
wrapper
.
vm
.
$refs
.
updateScheduleModal
.
hide
=
mockHideModal
;
wrapper
.
vm
.
$refs
.
addUpdateScheduleModal
.
hide
=
mockHideModal
;
};
function
createComponentWithApollo
({
async
function
awaitApolloDomMock
()
{
await
wrapper
.
vm
.
$nextTick
();
// kick off the DOM update
await
jest
.
runOnlyPendingTimers
();
// kick off the mocked GQL stuff (promises)
await
wrapper
.
vm
.
$nextTick
();
// kick off the DOM update for flash
}
async
function
updateSchedule
(
localWrapper
)
{
await
jest
.
runOnlyPendingTimers
();
await
localWrapper
.
vm
.
$nextTick
();
localWrapper
.
find
(
GlModal
).
vm
.
$emit
(
'
primary
'
,
{
preventDefault
:
jest
.
fn
()
});
}
const
createComponentWithApollo
=
({
updateHandler
=
jest
.
fn
().
mockResolvedValue
(
updateScheduleResponse
),
}
=
{})
{
}
=
{})
=>
{
localVue
.
use
(
VueApollo
);
updateScheduleHandler
=
updateHandler
;
...
...
@@ -91,110 +88,153 @@ describe('UpdateScheduleModal', () => {
data
:
getOncallSchedulesQueryResponse
.
data
,
});
wrapper
=
shallowMount
(
Update
ScheduleModal
,
{
wrapper
=
shallowMount
(
AddEdit
ScheduleModal
,
{
localVue
,
apolloProvider
:
fakeApollo
,
data
()
{
return
{
form
:
s
chedule
,
form
:
mockS
chedule
,
};
},
propsData
:
{
modalId
:
editScheduleModalId
,
schedule
,
isEditMode
:
true
,
schedule
:
mockSchedule
,
},
provide
:
{
projectPath
,
timezones
:
mockTimezones
,
},
});
}
beforeEach
(()
=>
{
createComponent
();
});
};
afterEach
(()
=>
{
wrapper
.
destroy
();
wrapper
=
null
;
});
it
(
'
renders update schedule modal layout
'
,
()
=>
{
expect
(
wrapper
.
element
).
toMatchSnapshot
();
});
const
findModal
=
()
=>
wrapper
.
find
(
GlModal
);
const
findAlert
=
()
=>
wrapper
.
find
(
GlAlert
);
describe
(
'
renders update modal with the correct schedule information
'
,
()
=>
{
it
(
'
renders name of correct modal id
'
,
()
=>
{
expect
(
findModal
().
attributes
(
'
modalid
'
)).
toBe
(
editScheduleModalId
);
describe
(
'
Schedule create
'
,
()
=>
{
beforeEach
(
()
=>
{
createComponent
({
modalId
:
addScheduleModalId
}
);
});
it
(
'
renders name of schedule to update
'
,
()
=>
{
expect
(
findModal
().
html
()).
toContain
(
i18n
.
editSchedule
);
describe
(
'
renders create modal with the correct schedule information
'
,
()
=>
{
it
(
'
renders name of correct modal id
'
,
()
=>
{
expect
(
findModal
().
attributes
(
'
modalid
'
)).
toBe
(
addScheduleModalId
);
});
it
(
'
renders modal title
'
,
()
=>
{
expect
(
findModal
().
attributes
(
'
title
'
)).
toBe
(
i18n
.
addSchedule
);
});
});
});
describe
(
'
Schedule update apollo API call
'
,
()
=>
{
it
(
'
makes a request with `oncallScheduleUpdate` to update a schedule
'
,
()
=>
{
it
(
'
makes a request with form data to create a schedule
'
,
()
=>
{
mutate
.
mockResolvedValueOnce
({});
findModal
().
vm
.
$emit
(
'
primary
'
,
{
preventDefault
:
jest
.
fn
()
});
expect
(
mutate
).
toHaveBeenCalledWith
({
mutation
:
expect
.
any
(
Object
),
update
:
expect
.
any
thing
(
),
update
:
expect
.
any
(
Function
),
variables
:
{
iid
:
schedule
.
iid
,
projectPath
,
name
:
schedule
.
nam
e
,
description
:
schedule
.
description
,
timezone
:
schedule
.
timezone
.
identifier
,
oncallScheduleCreateInput
:
{
projectPath
,
...
mockSchedul
e
,
timezone
:
mockSchedule
.
timezone
.
identifier
,
}
,
},
});
});
it
(
'
hides the modal on successful schedule creation
'
,
async
()
=>
{
mutate
.
mockResolvedValueOnce
({
data
:
{
oncallSchedule
Upd
ate
:
{
errors
:
[]
}
}
});
mutate
.
mockResolvedValueOnce
({
data
:
{
oncallSchedule
Cre
ate
:
{
errors
:
[]
}
}
});
findModal
().
vm
.
$emit
(
'
primary
'
,
{
preventDefault
:
jest
.
fn
()
});
await
waitForPromises
();
expect
(
mockHideModal
).
toHaveBeenCalled
();
});
it
(
"
doesn't hide
the modal
on fail
"
,
async
()
=>
{
it
(
"
doesn't hide
a modal and shows error alert
on fail
"
,
async
()
=>
{
const
error
=
'
some error
'
;
mutate
.
mockResolvedValueOnce
({
data
:
{
oncallSchedule
Upd
ate
:
{
errors
:
[
error
]
}
}
});
mutate
.
mockResolvedValueOnce
({
data
:
{
oncallSchedule
Cre
ate
:
{
errors
:
[
error
]
}
}
});
findModal
().
vm
.
$emit
(
'
primary
'
,
{
preventDefault
:
jest
.
fn
()
});
await
waitForPromises
();
const
alert
=
findAlert
();
expect
(
mockHideModal
).
not
.
toHaveBeenCalled
();
expect
(
alert
.
exists
()).
toBe
(
true
);
expect
(
alert
.
text
()).
toContain
(
error
);
});
});
describe
(
'
with mocked Apollo client
'
,
()
=>
{
it
(
'
has the name of the schedule to update based on getOncallSchedulesQuery
'
,
async
()
=>
{
createComponentWithApollo
();
describe
(
'
Schedule update
'
,
()
=>
{
beforeEach
(()
=>
{
createComponent
({
schedule
:
mockSchedule
,
isEditMode
:
true
,
modalId
:
editScheduleModalId
});
});
await
jest
.
runOnlyPendingTimers
();
await
wrapper
.
vm
.
$nextTick
();
describe
(
'
renders update modal with the correct schedule information
'
,
()
=>
{
it
(
'
renders name of correct modal id
'
,
()
=>
{
expect
(
findModal
().
attributes
(
'
modalid
'
)).
toBe
(
editScheduleModalId
);
});
expect
(
findModal
().
attributes
(
'
data-testid
'
)).
toBe
(
`update-schedule-modal-
${
schedule
.
iid
}
`
);
it
(
'
renders modal title
'
,
()
=>
{
expect
(
findModal
().
attributes
(
'
title
'
)).
toBe
(
i18n
.
editSchedule
);
});
});
it
(
'
calls a mutation with correct parameters and updates a schedule
'
,
async
()
=>
{
createComponentWithApollo
();
describe
(
'
Schedule update apollo API call
'
,
()
=>
{
it
(
'
makes a request with `oncallScheduleUpdate` to update a schedule
'
,
()
=>
{
mutate
.
mockResolvedValueOnce
({});
findModal
().
vm
.
$emit
(
'
primary
'
,
{
preventDefault
:
jest
.
fn
()
});
expect
(
mutate
).
toHaveBeenCalledWith
({
mutation
:
expect
.
any
(
Object
),
update
:
expect
.
anything
(),
variables
:
{
iid
:
mockSchedule
.
iid
,
projectPath
,
name
:
mockSchedule
.
name
,
description
:
mockSchedule
.
description
,
timezone
:
mockSchedule
.
timezone
.
identifier
,
},
});
});
await
updateSchedule
(
wrapper
);
it
(
'
hides the modal on successful schedule creation
'
,
async
()
=>
{
mutate
.
mockResolvedValueOnce
({
data
:
{
oncallScheduleUpdate
:
{
errors
:
[]
}
}
});
findModal
().
vm
.
$emit
(
'
primary
'
,
{
preventDefault
:
jest
.
fn
()
});
await
waitForPromises
();
expect
(
mockHideModal
).
toHaveBeenCalled
();
});
expect
(
updateScheduleHandler
).
toHaveBeenCalled
();
it
(
"
doesn't hide the modal on fail
"
,
async
()
=>
{
const
error
=
'
some error
'
;
mutate
.
mockResolvedValueOnce
({
data
:
{
oncallScheduleUpdate
:
{
errors
:
[
error
]
}
}
});
findModal
().
vm
.
$emit
(
'
primary
'
,
{
preventDefault
:
jest
.
fn
()
});
await
waitForPromises
();
expect
(
mockHideModal
).
not
.
toHaveBeenCalled
();
});
});
it
(
'
displays alert if mutation had a recoverable error
'
,
async
()
=>
{
createComponentWithApollo
({
updateHandler
:
jest
.
fn
().
mockResolvedValue
(
updateScheduleResponseWithErrors
),
describe
(
'
with mocked Apollo client
'
,
()
=>
{
it
(
'
calls a mutation with correct parameters and updates a schedule
'
,
async
()
=>
{
createComponentWithApollo
();
await
updateSchedule
(
wrapper
);
expect
(
updateScheduleHandler
).
toHaveBeenCalled
();
});
await
updateSchedule
(
wrapper
);
await
awaitApolloDomMock
();
it
(
'
displays alert if mutation had a recoverable error
'
,
async
()
=>
{
createComponentWithApollo
({
updateHandler
:
jest
.
fn
().
mockResolvedValue
(
updateScheduleResponseWithErrors
),
});
const
alert
=
findAlert
();
expect
(
alert
.
exists
()).
toBe
(
true
);
expect
(
alert
.
text
()).
toContain
(
'
Houston, we have a problem
'
);
await
updateSchedule
(
wrapper
);
await
awaitApolloDomMock
();
const
alert
=
findAlert
();
expect
(
alert
.
exists
()).
toBe
(
true
);
expect
(
alert
.
text
()).
toContain
(
'
Houston, we have a problem
'
);
});
});
});
});
ee/spec/frontend/oncall_schedule/add_schedule_modal_spec.js
deleted
100644 → 0
View file @
91d34112
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
{
GlModal
,
GlAlert
}
from
'
@gitlab/ui
'
;
import
waitForPromises
from
'
helpers/wait_for_promises
'
;
import
AddScheduleModal
from
'
ee/oncall_schedules/components/add_schedule_modal.vue
'
;
import
{
addScheduleModalId
}
from
'
ee/oncall_schedules/components/oncall_schedules_wrapper
'
;
import
{
getOncallSchedulesQueryResponse
}
from
'
./mocks/apollo_mock
'
;
import
mockTimezones
from
'
./mocks/mockTimezones.json
'
;
describe
(
'
AddScheduleModal
'
,
()
=>
{
let
wrapper
;
const
projectPath
=
'
group/project
'
;
const
mutate
=
jest
.
fn
();
const
mockHideModal
=
jest
.
fn
();
const
formData
=
getOncallSchedulesQueryResponse
.
data
.
project
.
incidentManagementOncallSchedules
.
nodes
[
0
];
const
createComponent
=
({
data
=
{},
props
=
{}
}
=
{})
=>
{
wrapper
=
shallowMount
(
AddScheduleModal
,
{
data
()
{
return
{
form
:
formData
,
...
data
,
};
},
propsData
:
{
modalId
:
addScheduleModalId
,
...
props
,
},
provide
:
{
projectPath
,
timezones
:
mockTimezones
,
},
mocks
:
{
$apollo
:
{
mutate
,
},
},
});
wrapper
.
vm
.
$refs
.
createScheduleModal
.
hide
=
mockHideModal
;
};
beforeEach
(()
=>
{
createComponent
();
});
afterEach
(()
=>
{
wrapper
.
destroy
();
wrapper
=
null
;
});
const
findModal
=
()
=>
wrapper
.
find
(
GlModal
);
const
findAlert
=
()
=>
wrapper
.
find
(
GlAlert
);
it
(
'
renders modal layout
'
,
()
=>
{
expect
(
wrapper
.
element
).
toMatchSnapshot
();
});
describe
(
'
Schedule create
'
,
()
=>
{
it
(
'
makes a request with form data to create a schedule
'
,
()
=>
{
mutate
.
mockResolvedValueOnce
({});
findModal
().
vm
.
$emit
(
'
primary
'
,
{
preventDefault
:
jest
.
fn
()
});
expect
(
mutate
).
toHaveBeenCalledWith
({
mutation
:
expect
.
any
(
Object
),
update
:
expect
.
any
(
Function
),
variables
:
{
oncallScheduleCreateInput
:
{
projectPath
,
...
formData
,
timezone
:
formData
.
timezone
.
identifier
,
},
},
});
});
it
(
'
hides the modal on successful schedule creation
'
,
async
()
=>
{
mutate
.
mockResolvedValueOnce
({
data
:
{
oncallScheduleCreate
:
{
errors
:
[]
}
}
});
findModal
().
vm
.
$emit
(
'
primary
'
,
{
preventDefault
:
jest
.
fn
()
});
await
waitForPromises
();
expect
(
mockHideModal
).
toHaveBeenCalled
();
});
it
(
"
doesn't hide a modal and shows error alert on fail
"
,
async
()
=>
{
const
error
=
'
some error
'
;
mutate
.
mockResolvedValueOnce
({
data
:
{
oncallScheduleCreate
:
{
errors
:
[
error
]
}
}
});
findModal
().
vm
.
$emit
(
'
primary
'
,
{
preventDefault
:
jest
.
fn
()
});
await
waitForPromises
();
const
alert
=
findAlert
();
expect
(
mockHideModal
).
not
.
toHaveBeenCalled
();
expect
(
alert
.
exists
()).
toBe
(
true
);
expect
(
alert
.
text
()).
toContain
(
error
);
});
});
});
ee/spec/frontend/oncall_schedule/oncall_schedule_wrapper_spec.js
View file @
5fb1ec11
...
...
@@ -4,7 +4,7 @@ import OnCallScheduleWrapper, {
i18n
,
}
from
'
ee/oncall_schedules/components/oncall_schedules_wrapper.vue
'
;
import
OnCallSchedule
from
'
ee/oncall_schedules/components/oncall_schedule.vue
'
;
import
AddScheduleModal
from
'
ee/oncall_schedules/components/add_schedule_modal.vue
'
;
import
AddScheduleModal
from
'
ee/oncall_schedules/components/add_
edit_
schedule_modal.vue
'
;
import
createMockApollo
from
'
jest/helpers/mock_apollo_helper
'
;
import
getOncallSchedulesQuery
from
'
ee/oncall_schedules/graphql/queries/get_oncall_schedules.query.graphql
'
;
import
VueApollo
from
'
vue-apollo
'
;
...
...
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