Skip to content

G
gitlab-ce
Commit ef947c73 authored by Savas Vedova's avatar Savas Vedova
Browse files
Options

Merge branch '228742-use-graphql-to-fetch-notes' into 'master' 

Fetch notes along discussions using GraphQL

See merge request gitlab-org/gitlab!69353
parents 1526d0da c67db405
Show whitespace changes
Inline Side-by-side
Showing with 242 additions and 372 deletions
ee/app/assets/javascripts/security_dashboard/graphql/queries/vulnerability_discussions.query.graphql
View file @ ef947c73
#import "../fragments/note.fragment.graphql"
query vulnerabilityDiscussions( query vulnerabilityDiscussions(
$id: VulnerabilityID! $id: VulnerabilityID!
$after: String $after: String
...@@ -11,6 +13,11 @@ query vulnerabilityDiscussions( ...@@ -11,6 +13,11 @@ query vulnerabilityDiscussions(
nodes { nodes {
id id
replyId replyId
notes {
nodes {
...SecurityDashboardNote
}
}
} }
} }
} }
......
ee/app/assets/javascripts/vulnerabilities/components/footer.vue
View file @ ef947c73
...@@ -9,18 +9,18 @@ import { VULNERABILITY_STATE_OBJECTS } from 'ee/vulnerabilities/constants'; ...@@ -9,18 +9,18 @@ import { VULNERABILITY_STATE_OBJECTS } from 'ee/vulnerabilities/constants';
import createFlash from '~/flash'; import createFlash from '~/flash';
import { TYPE_VULNERABILITY } from '~/graphql_shared/constants'; import { TYPE_VULNERABILITY } from '~/graphql_shared/constants';
import { convertToGraphQLId } from '~/graphql_shared/utils'; import { convertToGraphQLId } from '~/graphql_shared/utils';
import axios from '~/lib/utils/axios_utils'; import { s__ } from '~/locale';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
import Poll from '~/lib/utils/poll';
import { s__, __ } from '~/locale';
import initUserPopovers from '~/user_popovers'; import initUserPopovers from '~/user_popovers';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { normalizeGraphQLNote } from '../helpers';
import GenericReportSection from './generic_report/report_section.vue'; import GenericReportSection from './generic_report/report_section.vue';
import HistoryEntry from './history_entry.vue'; import HistoryEntry from './history_entry.vue';
import RelatedIssues from './related_issues.vue'; import RelatedIssues from './related_issues.vue';
import RelatedJiraIssues from './related_jira_issues.vue'; import RelatedJiraIssues from './related_jira_issues.vue';
import StatusDescription from './status_description.vue'; import StatusDescription from './status_description.vue';
const TEN_SECONDS = 10000;
export default { export default {
name: 'VulnerabilityFooter', name: 'VulnerabilityFooter',
components: { components: {
...@@ -48,9 +48,9 @@ export default { ...@@ -48,9 +48,9 @@ export default {
}, },
data() { data() {
return { return {
notesLoading: true, discussionsLoading: true,
discussions: [], discussions: [],
lastFetchedAt: null, lastFetchedDiscussionIndex: -1,
}; };
}, },
apollo: { apollo: {
...@@ -60,49 +60,24 @@ export default { ...@@ -60,49 +60,24 @@ export default {
return { id: convertToGraphQLId(TYPE_VULNERABILITY, this.vulnerability.id) }; return { id: convertToGraphQLId(TYPE_VULNERABILITY, this.vulnerability.id) };
}, },
update: ({ vulnerability }) => { update: ({ vulnerability }) => {
if (!vulnerability) { return (
return []; vulnerability?.discussions?.nodes.map((discussion) => ({
} ...discussion,
notes: discussion.notes.nodes.map(normalizeGraphQLNote),
return vulnerability.discussions.nodes.map((d) => ({ ...d, notes: [] })); })) || []
);
}, },
result({ error }) { result() {
if (!this.poll && !error) { this.discussionsLoading = false;
this.createNotesPoll(); this.notifyHeaderForStateChangeIfRequired();
this.startPolling();
if (!Visibility.hidden()) {
this.fetchDiscussions();
}
Visibility.change(() => {
if (Visibility.hidden()) {
this.poll.stop();
} else {
this.poll.restart();
}
});
}
}, },
error() { error() {
this.notesLoading = false; this.showGraphQLError();
createFlash({
message: s__(
'VulnerabilityManagement|Something went wrong while trying to retrieve the vulnerability history. Please try again later.',
),
});
}, },
}, },
}, },
computed: { computed: {
noteDictionary() {
return this.discussions
.flatMap((x) => x.notes)
.reduce((acc, note) => {
acc[note.id] = note;
return acc;
}, {});
},
project() { project() {
return { return {
url: this.vulnerability.project.fullPath, url: this.vulnerability.project.fullPath,
...@@ -137,78 +112,73 @@ export default { ...@@ -137,78 +112,73 @@ export default {
}; };
}, },
}, },
beforeDestroy() {
this.stopPolling();
},
updated() { updated() {
this.$nextTick(() => { this.$nextTick(() => {
initUserPopovers(this.$el.querySelectorAll('.js-user-link')); initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
}); });
}, },
beforeDestroy() {
if (this.poll) {
this.poll.stop();
}
},
methods: { methods: {
fetchDiscussions() { startPolling() {
return this.poll.makeRequest(); if (this.pollInterval) {
}, return;
findDiscussion(id) { }
return this.discussions.find((d) => d.id === id);
}, if (!Visibility.hidden()) {
createNotesPoll() { this.pollInterval = setInterval(this.fetchDiscussions, TEN_SECONDS);
// note: this polling call will be replaced when migrating the vulnerability details page to GraphQL }
// related epic: https://gitlab.com/groups/gitlab-org/-/epics/3657
this.poll = new Poll({ this.visibilityListener = Visibility.change(() => {
resource: { if (Visibility.hidden()) {
fetchNotes: () => this.stopPolling();
axios.get(this.vulnerability.notesUrl, { } else {
headers: { 'X-Last-Fetched-At': this.lastFetchedAt }, this.startPolling();
}), }
});
}, },
method: 'fetchNotes', stopPolling() {
successCallback: ({ data: { notes, last_fetched_at: lastFetchedAt } }) => { if (typeof this.pollInterval !== 'undefined') {
this.updateNotes(convertObjectPropsToCamelCase(notes, { deep: true })); clearInterval(this.pollInterval);
this.lastFetchedAt = lastFetchedAt; this.pollInterval = undefined;
this.notesLoading = false; }
if (typeof this.visibilityListener !== 'undefined') {
Visibility.unbind(this.visibilityListener);
this.visibilityListener = undefined;
}
}, },
errorCallback: () => { showGraphQLError() {
this.notesLoading = false;
createFlash({ createFlash({
message: __('Something went wrong while fetching latest comments.'), message: s__(
}); 'VulnerabilityManagement|Something went wrong while trying to retrieve the vulnerability history. Please try again later.',
}, ),
}); });
}, },
updateNotes(notes) { notifyHeaderForStateChangeIfRequired() {
let shallEmitVulnerabilityChangedEvent; const lastItemIndex = this.discussions.length - 1;
notes.forEach((note) => { if (this.lastFetchedDiscussionIndex === lastItemIndex) {
const discussion = this.findDiscussion(note.discussionId); return;
// If the note exists, update it.
if (this.noteDictionary[note.id]) {
discussion.notes = discussion.notes.map((curr) => (curr.id === note.id ? note : curr));
}
// If the note doesn't exist, but the discussion does, add the note to the discussion.
else if (discussion) {
discussion.notes.push(note);
} }
// If the discussion doesn't exist, create it.
else {
this.discussions.push({
id: note.discussionId,
replyId: note.discussionId,
notes: [note],
});
// If the vulnerability status has changed, the note will be a system note. // Do not notify on page load, or first mount.
// Emit an event that tells the header to refresh the vulnerability. if (this.lastFetchedDiscussionIndex !== -1) {
if (note.system === true) { this.$emit('vulnerability-state-change');
shallEmitVulnerabilityChangedEvent = true;
}
} }
});
if (shallEmitVulnerabilityChangedEvent) { this.lastFetchedDiscussionIndex = lastItemIndex;
this.$emit('vulnerability-state-change'); },
async fetchDiscussions(callback) {
try {
await this.$apollo.queries.discussions.refetch();
if (typeof callback === 'function') {
callback();
}
} catch {
this.showGraphQLError();
} }
}, },
}, },
...@@ -250,13 +220,14 @@ export default { ...@@ -250,13 +220,14 @@ export default {
</div> </div>
</div> </div>
<hr /> <hr />
<gl-loading-icon v-if="notesLoading" /> <gl-loading-icon v-if="discussionsLoading" />
<ul v-else-if="discussions.length" class="notes discussion-body"> <div v-else-if="discussions.length" class="notes discussion-body">
<history-entry <history-entry
v-for="discussion in discussions" v-for="discussion in discussions"
:key="discussion.id" :key="discussion.id"
:discussion="discussion" :discussion="discussion"
@onCommentUpdated="fetchDiscussions"
/> />
</ul> </div>
</div> </div>
</template> </template>
ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue
View file @ ef947c73
...@@ -8,7 +8,6 @@ import createFlash from '~/flash'; ...@@ -8,7 +8,6 @@ import createFlash from '~/flash';
import { TYPE_NOTE, TYPE_DISCUSSION, TYPE_VULNERABILITY } from '~/graphql_shared/constants'; import { TYPE_NOTE, TYPE_DISCUSSION, TYPE_VULNERABILITY } from '~/graphql_shared/constants';
import { convertToGraphQLId } from '~/graphql_shared/utils'; import { convertToGraphQLId } from '~/graphql_shared/utils';
import { __, s__ } from '~/locale'; import { __, s__ } from '~/locale';
import { normalizeGraphQLNote } from '../helpers';
import HistoryCommentEditor from './history_comment_editor.vue'; import HistoryCommentEditor from './history_comment_editor.vue';
export default { export default {
...@@ -63,21 +62,13 @@ export default { ...@@ -63,21 +62,13 @@ export default {
]; ];
}, },
initialComment() { initialComment() {
return this.comment?.note; return this.comment?.body;
}, },
canEditComment() { canEditComment() {
return this.comment.currentUser?.canEdit; return this.comment.userPermissions?.adminNote;
}, },
noteHtml() { noteHtml() {
return this.isSavingComment ? undefined : this.comment.noteHtml; return this.isSavingComment ? undefined : this.comment.bodyHtml;
},
},
watch: {
'comment.updatedAt': {
handler() {
this.isSavingComment = false;
},
}, },
}, },
...@@ -95,13 +86,11 @@ export default { ...@@ -95,13 +86,11 @@ export default {
}, },
}); });
const { note, errors } = data.createNote; const { errors } = data.createNote;
if (errors?.length > 0) { if (errors?.length > 0) {
throw errors; throw errors;
} }
this.$emit('onCommentAdded', normalizeGraphQLNote(note));
}, },
async updateComment(body) { async updateComment(body) {
const { data } = await this.$apollo.mutate({ const { data } = await this.$apollo.mutate({
...@@ -112,14 +101,11 @@ export default { ...@@ -112,14 +101,11 @@ export default {
}, },
}); });
const { note, errors } = data.updateNote; const { errors } = data.updateNote;
if (errors?.length > 0) { if (errors?.length > 0) {
throw errors; throw errors;
} }
this.cancelEditingComment();
this.$emit('onCommentUpdated', normalizeGraphQLNote(note));
}, },
async saveComment(body) { async saveComment(body) {
this.isSavingComment = true; this.isSavingComment = true;
...@@ -131,15 +117,20 @@ export default { ...@@ -131,15 +117,20 @@ export default {
} else { } else {
await this.insertComment(body); await this.insertComment(body);
} }
this.$emit('onCommentUpdated', () => {
this.isSavingComment = false;
this.cancelEditingComment();
});
} catch { } catch {
this.isSavingComment = false;
createFlash({ createFlash({
message: s__( message: s__(
'VulnerabilityManagement|Something went wrong while trying to save the comment. Please try again later.', 'VulnerabilityManagement|Something went wrong while trying to save the comment. Please try again later.',
), ),
}); });
} }
this.isSavingComment = false;
}, },
async deleteComment() { async deleteComment() {
this.isDeletingComment = true; this.isDeletingComment = true;
...@@ -156,16 +147,18 @@ export default { ...@@ -156,16 +147,18 @@ export default {
throw data.errors; throw data.errors;
} }
this.$emit('onCommentDeleted', this.comment); this.$emit('onCommentUpdated', () => {
this.isDeletingComment = false;
});
} catch { } catch {
this.isDeletingComment = false;
createFlash({ createFlash({
message: s__( message: s__(
'VulnerabilityManagement|Something went wrong while trying to delete the comment. Please try again later.', 'VulnerabilityManagement|Something went wrong while trying to delete the comment. Please try again later.',
), ),
}); });
} }
this.isDeletingComment = false;
}, },
cancelEditingComment() { cancelEditingComment() {
this.isEditingComment = false; this.isEditingComment = false;
......
ee/app/assets/javascripts/vulnerabilities/components/history_entry.vue
View file @ ef947c73
...@@ -3,19 +3,20 @@ import EventItem from 'ee/vue_shared/security_reports/components/event_item.vue' ...@@ -3,19 +3,20 @@ import EventItem from 'ee/vue_shared/security_reports/components/event_item.vue'
import HistoryComment from './history_comment.vue'; import HistoryComment from './history_comment.vue';
export default { export default {
components: { EventItem, HistoryComment }, components: {
EventItem,
HistoryComment,
},
props: { props: {
discussion: { discussion: {
type: Object, type: Object,
required: true, required: true,
}, },
}, },
data() {
return {
notes: this.discussion.notes,
};
},
computed: { computed: {
notes() {
return this.discussion.notes;
},
systemNote() { systemNote() {
return this.notes.find((x) => x.system === true); return this.notes.find((x) => x.system === true);
}, },
...@@ -23,35 +24,11 @@ export default { ...@@ -23,35 +24,11 @@ export default {
return this.notes.filter((x) => x !== this.systemNote); return this.notes.filter((x) => x !== this.systemNote);
}, },
}, },
watch: {
discussion(newDiscussion) {
this.notes = newDiscussion.notes;
},
},
methods: {
addComment(note) {
this.notes.push(note);
},
updateComment(note) {
const index = this.notes.findIndex((n) => Number(n.id) === note.id);
if (index > -1) {
this.notes.splice(index, 1, note);
}
},
removeComment(comment) {
const index = this.notes.indexOf(comment);
if (index > -1) {
this.notes.splice(index, 1);
}
},
},
}; };
</script> </script>
<template> <template>
<li v-if="systemNote" class="card border-bottom system-note p-0"> <div v-if="systemNote" class="card border-bottom system-note p-0">
<event-item <event-item
:id="systemNote.id" :id="systemNote.id"
:author="systemNote.author" :author="systemNote.author"
...@@ -60,27 +37,22 @@ export default { ...@@ -60,27 +37,22 @@ export default {
icon-class="timeline-icon m-0" icon-class="timeline-icon m-0"
class="m-3" class="m-3"
> >
<template #header-message>{{ systemNote.note }}</template> <template #header-message>{{ systemNote.body }}</template>
</event-item> </event-item>
<hr v-if="comments.length" class="gl-m-0" />
<template v-if="comments.length" ref="existingComments">
<hr class="m-3" />
<history-comment <history-comment
v-for="comment in comments" v-for="comment in comments"
:key="comment.id"
ref="existingComment" ref="existingComment"
:key="comment.id"
:comment="comment" :comment="comment"
:discussion-id="discussion.replyId" :discussion-id="discussion.replyId"
@onCommentUpdated="updateComment" v-on="$listeners"
@onCommentDeleted="removeComment"
/> />
</template>
<history-comment <history-comment
v-else v-if="!comments.length"
ref="newComment" ref="newComment"
:discussion-id="discussion.replyId" :discussion-id="discussion.replyId"
@onCommentAdded="addComment" v-on="$listeners"
/> />
</li> </div>
</template> </template>
ee/app/assets/javascripts/vulnerabilities/helpers.js
View file @ ef947c73
...@@ -37,11 +37,6 @@ export const normalizeGraphQLNote = (note) => { ...@@ -37,11 +37,6 @@ export const normalizeGraphQLNote = (note) => {
return { return {
...note, ...note,
id: getIdFromGraphQLId(note.id), id: getIdFromGraphQLId(note.id),
note: note.body,
noteHtml: note.bodyHtml,
currentUser: {
canEdit: note.userPermissions?.adminNote,
},
author: { author: {
...note.author, ...note.author,
id: getIdFromGraphQLId(note.author.id), id: getIdFromGraphQLId(note.author.id),
......
ee/spec/frontend/vulnerabilities/footer_spec.js
View file @ ef947c73
import { GlLoadingIcon } from '@gitlab/ui'; import { GlLoadingIcon } from '@gitlab/ui';
import MockAdapter from 'axios-mock-adapter'; import Visibility from 'visibilityjs';
import Vue from 'vue'; import Vue from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import Api from 'ee/api'; import Api from 'ee/api';
...@@ -13,15 +13,14 @@ import RelatedIssues from 'ee/vulnerabilities/components/related_issues.vue'; ...@@ -13,15 +13,14 @@ import RelatedIssues from 'ee/vulnerabilities/components/related_issues.vue';
import RelatedJiraIssues from 'ee/vulnerabilities/components/related_jira_issues.vue'; import RelatedJiraIssues from 'ee/vulnerabilities/components/related_jira_issues.vue';
import StatusDescription from 'ee/vulnerabilities/components/status_description.vue'; import StatusDescription from 'ee/vulnerabilities/components/status_description.vue';
import { VULNERABILITY_STATES } from 'ee/vulnerabilities/constants'; import { VULNERABILITY_STATES } from 'ee/vulnerabilities/constants';
import { normalizeGraphQLNote } from 'ee/vulnerabilities/helpers';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import createFlash from '~/flash'; import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
import initUserPopovers from '~/user_popovers'; import initUserPopovers from '~/user_popovers';
import { generateNote } from './mock_data';
const mockAxios = new MockAdapter(axios);
jest.mock('~/flash'); jest.mock('~/flash');
jest.mock('~/user_popovers'); jest.mock('~/user_popovers');
...@@ -45,11 +44,16 @@ describe('Vulnerability Footer', () => { ...@@ -45,11 +44,16 @@ describe('Vulnerability Footer', () => {
let discussion1; let discussion1;
let discussion2; let discussion2;
let notes;
const discussionsSuccessHandler = (nodes) => const discussionsHandler = ({
jest.fn().mockResolvedValue({ discussions: nodes,
errors = [],
success = true,
handler = jest.fn(),
}) =>
handler[success ? 'mockResolvedValueOnce' : 'mockRejectedValueOnce']({
data: { data: {
errors,
vulnerability: { vulnerability: {
id: `gid://gitlab/Vulnerability/${vulnerability.id}`, id: `gid://gitlab/Vulnerability/${vulnerability.id}`,
discussions: { discussions: {
...@@ -59,34 +63,14 @@ describe('Vulnerability Footer', () => { ...@@ -59,34 +63,14 @@ describe('Vulnerability Footer', () => {
}, },
}); });
const discussionsErrorHandler = () => const createWrapper = ({ properties, queryHandler, mountOptions } = {}) => {
jest.fn().mockRejectedValue({
errors: [{ message: 'Something went wrong' }],
});
const createNotesRequest = (notesArray, statusCode = 200) => {
return mockAxios
.onGet(vulnerability.notesUrl)
.replyOnce(statusCode, { notes: notesArray }, { date: Date.now() });
};
const createWrapper = ({ properties, discussionsHandler, mountOptions } = {}) => {
createNotesRequest(notes);
wrapper = shallowMountExtended(VulnerabilityFooter, { wrapper = shallowMountExtended(VulnerabilityFooter, {
propsData: { vulnerability: { ...vulnerability, ...properties } }, propsData: { vulnerability: { ...vulnerability, ...properties } },
apolloProvider: createMockApollo([[vulnerabilityDiscussionsQuery, discussionsHandler]]), apolloProvider: createMockApollo([[vulnerabilityDiscussionsQuery, queryHandler]]),
...mountOptions, ...mountOptions,
}); });
}; };
const createWrapperWithDiscussions = (props) => {
createWrapper({
...props,
discussionsHandler: discussionsSuccessHandler([discussion1, discussion2]),
});
};
const findDiscussions = () => wrapper.findAllComponents(HistoryEntry); const findDiscussions = () => wrapper.findAllComponents(HistoryEntry);
const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
const findMergeRequestNote = () => wrapper.findComponent(MergeRequestNote); const findMergeRequestNote = () => wrapper.findComponent(MergeRequestNote);
...@@ -97,143 +81,133 @@ describe('Vulnerability Footer', () => { ...@@ -97,143 +81,133 @@ describe('Vulnerability Footer', () => {
discussion1 = { discussion1 = {
id: 'gid://gitlab/Discussion/7b4aa2d000ec81ba374a29b3ca3ee4c5f274f9ab', id: 'gid://gitlab/Discussion/7b4aa2d000ec81ba374a29b3ca3ee4c5f274f9ab',
replyId: 'gid://gitlab/Discussion/7b4aa2d000ec81ba374a29b3ca3ee4c5f274f9ab', replyId: 'gid://gitlab/Discussion/7b4aa2d000ec81ba374a29b3ca3ee4c5f274f9ab',
notes: {
nodes: [generateNote({ id: 100 })],
},
}; };
discussion2 = { discussion2 = {
id: 'gid://gitlab/Discussion/0656f86109dc755c99c288c54d154b9705aaa796', id: 'gid://gitlab/Discussion/0656f86109dc755c99c288c54d154b9705aaa796',
replyId: 'gid://gitlab/Discussion/0656f86109dc755c99c288c54d154b9705aaa796', replyId: 'gid://gitlab/Discussion/0656f86109dc755c99c288c54d154b9705aaa796',
notes: {
nodes: [generateNote({ id: 200 })],
},
}; };
notes = [
{ id: 100, note: 'some note', discussion_id: discussion1.id },
{ id: 200, note: 'another note', discussion_id: discussion2.id },
];
}); });
afterEach(() => { afterEach(() => {
wrapper.destroy(); wrapper.destroy();
mockAxios.reset();
}); });
describe('discussions and notes', () => { describe('discussions', () => {
const createWrapperAndFetchNotes = async () => { const createWrapperAndFetchDiscussions = async ({ discussions, errors, success }) => {
createWrapperWithDiscussions(); createWrapper({ queryHandler: discussionsHandler({ discussions, errors, success }) });
await axios.waitForAll(); await waitForPromises();
expect(findDiscussions()).toHaveLength(2);
expect(findDiscussions().at(0).props('discussion').notes).toHaveLength(1);
}; };
const makePollRequest = async () => { const refetchDiscussions = async () => {
wrapper.vm.poll.makeRequest(); findDiscussions().at(0).vm.$emit('onCommentUpdated');
await axios.waitForAll(); await waitForPromises();
}; };
it('displays a loading spinner while fetching discussions', async () => { it('displays a loading spinner while fetching discussions', async () => {
createWrapperWithDiscussions(); createWrapper({ queryHandler: discussionsHandler({ discussions: [] }) });
expect(findDiscussions().exists()).toBe(false); expect(findDiscussions().exists()).toBe(false);
expect(findLoadingIcon().exists()).toBe(true); expect(findLoadingIcon().exists()).toBe(true);
await axios.waitForAll(); await waitForPromises();
expect(findLoadingIcon().exists()).toBe(false); expect(findLoadingIcon().exists()).toBe(false);
}); });
it('fetches discussions and notes on mount', async () => { it('fetches discussions and notes on mount', async () => {
await createWrapperAndFetchNotes(); await createWrapperAndFetchDiscussions({ discussions: [discussion1, discussion2] });
expect(findDiscussions().at(0).props()).toEqual({ expect(findDiscussions().at(0).props()).toStrictEqual({
discussion: { ...discussion1, notes: [convertObjectPropsToCamelCase(notes[0])] }, discussion: {
...discussion1,
notes: [normalizeGraphQLNote(discussion1.notes.nodes[0])],
},
}); });
expect(findDiscussions().at(1).props()).toEqual({ expect(findDiscussions().at(1).props()).toStrictEqual({
discussion: { ...discussion2, notes: [convertObjectPropsToCamelCase(notes[1])] }, discussion: {
...discussion2,
notes: [normalizeGraphQLNote(discussion2.notes.nodes[0])],
},
}); });
}); });
it('calls initUserPopovers when the component is updated', async () => { it('calls initUserPopovers when the component is updated', async () => {
createWrapperWithDiscussions(); createWrapper({ queryHandler: discussionsHandler({ discussions: [] }) });
expect(initUserPopovers).not.toHaveBeenCalled(); expect(initUserPopovers).not.toHaveBeenCalled();
await axios.waitForAll(); await waitForPromises();
expect(initUserPopovers).toHaveBeenCalled(); expect(initUserPopovers).toHaveBeenCalled();
}); });
it('shows an error the discussions could not be retrieved', async () => { it('shows an error the discussions could not be retrieved', async () => {
createWrapper({ discussionsHandler: discussionsErrorHandler() }); await createWrapperAndFetchDiscussions({
await waitForPromises(); errors: [{ message: 'Something went wrong' }],
success: false,
});
expect(createFlash).toHaveBeenCalledWith({ expect(createFlash).toHaveBeenCalledWith({
message: message:
'Something went wrong while trying to retrieve the vulnerability history. Please try again later.', 'Something went wrong while trying to retrieve the vulnerability history. Please try again later.',
}); });
}); });
it('adds a new note to an existing discussion if the note does not exist', async () => { it('polls the server every 10 seconds for new discussions and attaches a listener to visibility-js', async () => {
await createWrapperAndFetchNotes(); const setIntervalSpy = jest.spyOn(window, 'setInterval');
const visibilityChangeSpy = jest.spyOn(Visibility, 'change');
// Fetch a new note createWrapper({ queryHandler: discussionsHandler({ discussions: [] }) });
const note = { id: 101, note: 'new note', discussion_id: discussion1.id }; expect(setIntervalSpy).not.toHaveBeenCalled();
createNotesRequest([note]); expect(visibilityChangeSpy).not.toHaveBeenCalled();
await makePollRequest(); await waitForPromises();
expect(setIntervalSpy).toHaveBeenCalledWith(wrapper.vm.fetchDiscussions, 10000);
expect(findDiscussions()).toHaveLength(2); expect(visibilityChangeSpy).toHaveBeenCalled();
expect(findDiscussions().at(0).props('discussion').notes[1].note).toBe(note.note);
}); });
it('updates an existing note if it already exists', async () => { it('removes the poll and visibility listener when unmounted', async () => {
await createWrapperAndFetchNotes(); const clearIntervalSpy = jest.spyOn(window, 'clearInterval');
const visibilityUnbindSpy = jest.spyOn(Visibility, 'unbind');
const note = { ...notes[0], note: 'updated note' }; await createWrapperAndFetchDiscussions({ discussions: [] });
createNotesRequest([note]); wrapper.destroy();
await makePollRequest(); expect(clearIntervalSpy).toHaveBeenCalled();
expect(visibilityUnbindSpy).toHaveBeenCalled();
expect(findDiscussions()).toHaveLength(2);
expect(findDiscussions().at(0).props('discussion').notes).toHaveLength(1);
expect(findDiscussions().at(0).props('discussion').notes[0].note).toBe(note.note);
}); });
it('creates a new discussion with a new note if the discussion does not exist', async () => { it('emits the vulnerability-state-change event when the system note is new', async () => {
await createWrapperAndFetchNotes(); const eventName = 'vulnerability-state-change';
const queryHandler = discussionsHandler({ discussions: [discussion1] }); // first call
const note = { discussionsHandler({ discussions: [discussion1], handler: queryHandler }); // second call is the same
id: 300, discussionsHandler({ discussions: [discussion1, discussion2], handler: queryHandler }); // for the third call we change the number of discussions
note: 'new note on a new discussion',
discussion_id: 'new-discussion-id',
};
createNotesRequest([note]);
await makePollRequest();
expect(findDiscussions()).toHaveLength(3); createWrapper({
expect(findDiscussions().at(2).props('discussion').notes).toHaveLength(1); queryHandler,
expect(findDiscussions().at(2).props('discussion').notes[0].note).toBe(note.note);
}); });
it('shows an error if the notes poll fails', async () => { // Wait that the initial call has been made
await createWrapperAndFetchNotes(); await waitForPromises();
createNotesRequest([], 500); // At this stage the handler should not be called because it's the first call (so page load).
await makePollRequest(); expect(wrapper.emitted(eventName)).toBeUndefined();
expect(createFlash).toHaveBeenCalledWith({ // Fetch again with same data
message: 'Something went wrong while fetching latest comments.', await refetchDiscussions();
});
});
it('emits the vulnerability-state-change event when the system note is new', async () => {
await createWrapperAndFetchNotes();
const handler = jest.fn(); // There should be no new discussions so the event should be emitted once
wrapper.vm.$on('vulnerability-state-change', handler); expect(wrapper.emitted(eventName)).toBeUndefined();
const note = { system: true, id: 1, discussion_id: 'some-new-discussion-id' }; // Fetch again with different data
createNotesRequest([note]); await refetchDiscussions();
await makePollRequest();
expect(handler).toHaveBeenCalledTimes(1); // The event should be emitted once as there is a new discussion
expect(wrapper.emitted(eventName)).toHaveLength(1);
}); });
}); });
describe('solution card', () => { describe('solution card', () => {
it('does show solution card when there is one', () => { it('does show solution card when there is one', () => {
const properties = { remediations: [{ diff: [{}] }], solution: 'some solution' }; const properties = { remediations: [{ diff: [{}] }], solution: 'some solution' };
createWrapper({ properties, discussionsHandler: discussionsSuccessHandler([]) }); createWrapper({ properties, discussionsHandler: discussionsHandler({ discussions: [] }) });
expect(wrapper.find(SolutionCard).exists()).toBe(true); expect(wrapper.find(SolutionCard).exists()).toBe(true);
expect(wrapper.find(SolutionCard).props()).toEqual({ expect(wrapper.find(SolutionCard).props()).toEqual({
......
ee/spec/frontend/vulnerabilities/history_comment_spec.js
View file @ ef947c73
...@@ -12,6 +12,7 @@ import waitForPromises from 'helpers/wait_for_promises'; ...@@ -12,6 +12,7 @@ import waitForPromises from 'helpers/wait_for_promises';
import createFlash from '~/flash'; import createFlash from '~/flash';
import { TYPE_DISCUSSION, TYPE_VULNERABILITY } from '~/graphql_shared/constants'; import { TYPE_DISCUSSION, TYPE_VULNERABILITY } from '~/graphql_shared/constants';
import { convertToGraphQLId } from '~/graphql_shared/utils'; import { convertToGraphQLId } from '~/graphql_shared/utils';
import { generateNote } from './mock_data';
jest.mock('~/flash'); jest.mock('~/flash');
Vue.use(VueApollo); Vue.use(VueApollo);
...@@ -59,28 +60,7 @@ describe('History Comment', () => { ...@@ -59,28 +60,7 @@ describe('History Comment', () => {
}); });
}; };
const note = { const note = generateNote();
id: 'gid://gitlab/DiscussionNote/1295',
body: 'Created a note.',
bodyHtml: '\u003cp\u003eCreated a note\u003c/p\u003e',
updatedAt: '2021-08-25T16:21:18Z',
system: false,
systemNoteIconName: null,
userPermissions: {
adminNote: true,
},
author: {
id: 'gid://gitlab/User/1',
name: 'Administrator',
username: 'root',
webPath: '/root',
},
};
// Needed for now. Will be removed when fetching notes will be done through GraphQL.
note.note = note.body;
note.noteHtml = note.bodyHtml;
note.currentUser = { canEdit: note.userPermissions.adminNote };
beforeEach(() => { beforeEach(() => {
createNoteMutationSpy = jest createNoteMutationSpy = jest
...@@ -95,8 +75,8 @@ describe('History Comment', () => { ...@@ -95,8 +75,8 @@ describe('History Comment', () => {
}); });
const addCommentButton = () => wrapper.find({ ref: 'addCommentButton' }); const addCommentButton = () => wrapper.find({ ref: 'addCommentButton' });
const commentEditor = () => wrapper.find(HistoryCommentEditor); const commentEditor = () => wrapper.findComponent(HistoryCommentEditor);
const eventItem = () => wrapper.find(EventItem); const eventItem = () => wrapper.findComponent(EventItem);
const editButton = () => wrapper.find('[title="Edit Comment"]'); const editButton = () => wrapper.find('[title="Edit Comment"]');
const deleteButton = () => wrapper.find('[title="Delete Comment"]'); const deleteButton = () => wrapper.find('[title="Delete Comment"]');
const confirmDeleteButton = () => wrapper.find({ ref: 'confirmDeleteButton' }); const confirmDeleteButton = () => wrapper.find({ ref: 'confirmDeleteButton' });
...@@ -228,10 +208,10 @@ describe('History Comment', () => { ...@@ -228,10 +208,10 @@ describe('History Comment', () => {
}; };
describe.each` describe.each`
desc | propsData | expectedEvent | expectedVars | mutationSpyFn | queryName desc | propsData | expectedVars | mutationSpyFn | queryName
${'inserting a new note'} | ${{}} | ${'onCommentAdded'} | ${EXPECTED_CREATE_VARS} | ${() => createNoteMutationSpy} | ${CREATE_NOTE} ${'inserting a new note'} | ${{}} | ${EXPECTED_CREATE_VARS} | ${() => createNoteMutationSpy} | ${CREATE_NOTE}
${'updating an existing note'} | ${{ comment: note }} | ${'onCommentUpdated'} | ${EXPECTED_UPDATE_VARS} | ${() => updateNoteMutationSpy} | ${UPDATE_NOTE} ${'updating an existing note'} | ${{ comment: note }} | ${EXPECTED_UPDATE_VARS} | ${() => updateNoteMutationSpy} | ${UPDATE_NOTE}
`('$desc', ({ propsData, expectedEvent, expectedVars, mutationSpyFn, queryName }) => { `('$desc', ({ propsData, expectedVars, mutationSpyFn, queryName }) => {
let mutationSpy; let mutationSpy;
beforeEach(() => { beforeEach(() => {
...@@ -258,25 +238,19 @@ describe('History Comment', () => { ...@@ -258,25 +238,19 @@ describe('History Comment', () => {
expect(commentEditor().props('isSaving')).toBe(true); expect(commentEditor().props('isSaving')).toBe(true);
}); });
it('emits event when mutation is successful', async () => { it('emits event when mutation is successful with a callback function that resets the state', async () => {
createWrapper({ propsData }); createWrapper({ propsData });
const listener = jest.fn().mockImplementation((callback) => callback());
wrapper.vm.$on('onCommentUpdated', listener);
await editAndSaveNewContent('new comment'); await editAndSaveNewContent('new comment');
expect(commentEditor().props('isSaving')).toBe(true);
await waitForPromises(); await waitForPromises();
expect(wrapper.emitted(expectedEvent)).toEqual([ expect(wrapper.emitted('onCommentUpdated')).toEqual([[expect.any(Function)]]);
[ expect(listener).toHaveBeenCalled();
{ expect(commentEditor().exists()).toBe(false);
...note,
id: 1295,
author: {
...note.author,
id: 1,
path: note.author.webPath,
},
},
],
]);
}); });
describe('when mutation has data error', () => { describe('when mutation has data error', () => {
...@@ -316,7 +290,7 @@ describe('History Comment', () => { ...@@ -316,7 +290,7 @@ describe('History Comment', () => {
}); });
describe('deleting a note', () => { describe('deleting a note', () => {
it('deletes the comment when the confirm delete button is clicked', async () => { it('deletes the comment when the confirm delete button is clicked and submits an event to refect the discussions', async () => {
createWrapper({ createWrapper({
propsData: { comment: note }, propsData: { comment: note },
}); });
...@@ -331,8 +305,8 @@ describe('History Comment', () => { ...@@ -331,8 +305,8 @@ describe('History Comment', () => {
expect(cancelDeleteButton().props('disabled')).toBe(true); expect(cancelDeleteButton().props('disabled')).toBe(true);
await waitForPromises(); await waitForPromises();
expect(wrapper.emitted().onCommentDeleted).toBeTruthy(); expect(wrapper.emitted().onCommentUpdated).toBeTruthy();
expect(wrapper.emitted().onCommentDeleted[0][0]).toEqual(note); expect(wrapper.emitted().onCommentUpdated[0][0]).toEqual(expect.any(Function));
}); });
it('sends mutation to delete note', async () => { it('sends mutation to delete note', async () => {
...@@ -383,7 +357,7 @@ describe('History Comment', () => { ...@@ -383,7 +357,7 @@ describe('History Comment', () => {
it('does not show the edit/delete buttons if the current user has no edit permissions', () => { it('does not show the edit/delete buttons if the current user has no edit permissions', () => {
createWrapper({ createWrapper({
propsData: { propsData: {
comment: { ...note, userPermissions: undefined, currentUser: { canEdit: false } }, comment: { ...note, userPermissions: { adminNote: false } },
}, },
}); });
......
ee/spec/frontend/vulnerabilities/history_entry_spec.js
View file @ ef947c73
...@@ -8,7 +8,7 @@ describe('History Entry', () => { ...@@ -8,7 +8,7 @@ describe('History Entry', () => {
const systemNote = { const systemNote = {
system: true, system: true,
id: 1, id: 1,
note: 'changed vulnerability status to dismissed', body: 'changed vulnerability status to dismissed',
systemNoteIconName: 'cancel', systemNoteIconName: 'cancel',
updatedAt: new Date().toISOString(), updatedAt: new Date().toISOString(),
author: { author: {
...@@ -20,11 +20,8 @@ describe('History Entry', () => { ...@@ -20,11 +20,8 @@ describe('History Entry', () => {
const commentNote = { const commentNote = {
id: 2, id: 2,
note: 'some note', body: 'some note',
author: {}, author: {},
currentUser: {
canEdit: true,
},
}; };
const createWrapper = (...notes) => { const createWrapper = (...notes) => {
...@@ -33,7 +30,6 @@ describe('History Entry', () => { ...@@ -33,7 +30,6 @@ describe('History Entry', () => {
wrapper = shallowMount(HistoryEntry, { wrapper = shallowMount(HistoryEntry, {
propsData: { propsData: {
discussion, discussion,
notesUrl: '/notes',
}, },
stubs: { EventItem }, stubs: { EventItem },
}); });
...@@ -49,7 +45,7 @@ describe('History Entry', () => { ...@@ -49,7 +45,7 @@ describe('History Entry', () => {
it('passes the expected values to the event item component', () => { it('passes the expected values to the event item component', () => {
createWrapper(systemNote); createWrapper(systemNote);
expect(eventItem().text()).toContain(systemNote.note); expect(eventItem().text()).toContain(systemNote.body);
expect(eventItem().props()).toMatchObject({ expect(eventItem().props()).toMatchObject({
id: systemNote.id, id: systemNote.id,
author: systemNote.author, author: systemNote.author,
...@@ -80,33 +76,4 @@ describe('History Entry', () => { ...@@ -80,33 +76,4 @@ describe('History Entry', () => {
expect(commentAt(0).props('comment')).toEqual(commentNote); expect(commentAt(0).props('comment')).toEqual(commentNote);
expect(commentAt(1).props('comment')).toEqual(commentNoteClone); expect(commentAt(1).props('comment')).toEqual(commentNoteClone);
}); });
it('adds a new comment correctly', async () => {
createWrapper(systemNote);
newComment().vm.$emit('onCommentAdded', commentNote);
await wrapper.vm.$nextTick();
expect(newComment().exists()).toBe(false);
expect(existingComments()).toHaveLength(1);
expect(commentAt(0).props('comment')).toEqual(commentNote);
});
it('updates an existing comment correctly', async () => {
const updatedNote = { ...commentNote, note: 'new note' };
createWrapper(systemNote, commentNote);
commentAt(0).vm.$emit('onCommentUpdated', updatedNote);
await wrapper.vm.$nextTick();
expect(commentAt(0).props('comment')).toBe(updatedNote);
});
it('deletes an existing comment correctly', async () => {
createWrapper(systemNote, commentNote);
await commentAt(0).vm.$emit('onCommentDeleted', commentNote);
expect(newComment().exists()).toBe(true);
expect(existingComments()).toHaveLength(0);
});
}); });
ee/spec/frontend/vulnerabilities/mock_data.js 0 → 100644
View file @ ef947c73
export const generateNote = ({ id = 1295 } = {}) => ({
id: `gid://gitlab/DiscussionNote/${id}`,
body: 'Created a note.',
bodyHtml: '\u003cp\u003eCreated a note\u003c/p\u003e',
updatedAt: '2021-08-25T16:21:18Z',
system: false,
systemNoteIconName: null,
userPermissions: {
adminNote: true,
},
author: {
id: 'gid://gitlab/User/1',
name: 'Administrator',
username: 'root',
webPath: '/root',
},
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7