From 17c3dcf691c950eb71c9649aea8c94764459416d Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Mon, 15 Mar 2021 23:52:07 -0600 Subject: [PATCH 1/5] Add a mutation to set the MR Metadata into state --- .../javascripts/mr_notes/stores/modules/index.js | 1 + .../javascripts/mr_notes/stores/mutation_types.js | 1 + app/assets/javascripts/mr_notes/stores/mutations.js | 3 +++ spec/frontend/mr_notes/stores/mutations_spec.js | 12 ++++++++++++ 4 files changed, 17 insertions(+) diff --git a/app/assets/javascripts/mr_notes/stores/modules/index.js b/app/assets/javascripts/mr_notes/stores/modules/index.js index 6e228c62a72e59..52e12ba664c73b 100644 --- a/app/assets/javascripts/mr_notes/stores/modules/index.js +++ b/app/assets/javascripts/mr_notes/stores/modules/index.js @@ -6,6 +6,7 @@ export default () => ({ state: { endpoints: {}, activeTab: null, + mrMetadata: {}, }, actions, getters, diff --git a/app/assets/javascripts/mr_notes/stores/mutation_types.js b/app/assets/javascripts/mr_notes/stores/mutation_types.js index 67fa63f882d68e..88cf6e48988b5e 100644 --- a/app/assets/javascripts/mr_notes/stores/mutation_types.js +++ b/app/assets/javascripts/mr_notes/stores/mutation_types.js @@ -1,4 +1,5 @@ export default { SET_ACTIVE_TAB: 'SET_ACTIVE_TAB', SET_ENDPOINTS: 'SET_ENDPOINTS', + SET_MR_METADATA: 'SET_MR_METADATA', }; diff --git a/app/assets/javascripts/mr_notes/stores/mutations.js b/app/assets/javascripts/mr_notes/stores/mutations.js index 3843103f4d01b7..6af6adb4e188c0 100644 --- a/app/assets/javascripts/mr_notes/stores/mutations.js +++ b/app/assets/javascripts/mr_notes/stores/mutations.js @@ -7,4 +7,7 @@ export default { [types.SET_ENDPOINTS](state, endpoints) { Object.assign(state, { endpoints }); }, + [types.SET_MR_METADATA](state, metadata) { + Object.assign(state, { mrMetadata: metadata }); + }, }; diff --git a/spec/frontend/mr_notes/stores/mutations_spec.js b/spec/frontend/mr_notes/stores/mutations_spec.js index 422db3d5a3805e..35b8a2e4be2844 100644 --- a/spec/frontend/mr_notes/stores/mutations_spec.js +++ b/spec/frontend/mr_notes/stores/mutations_spec.js @@ -12,4 +12,16 @@ describe('MR Notes Mutations', () => { expect(state.endpoints).toEqual(endpoints); }); }); + + describe(mutationTypes.SET_MR_METADATA, () => { + it('store the provided MR Metadata in the state', () => { + const state = {}; + const metadata = { propA: 'A', propB: 'B' }; + + mutations[mutationTypes.SET_MR_METADATA](state, metadata); + + expect(state.mrMetadata.propA).toBe('A'); + expect(state.mrMetadata.propB).toBe('B'); + }); + }); }); -- GitLab From 9a326fa7076f88348b7a8892768b71a7a86a6b44 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Tue, 16 Mar 2021 00:06:17 -0600 Subject: [PATCH 2/5] Add a mutator action to set the MR Metadata --- .../javascripts/mr_notes/stores/actions.js | 4 ++++ spec/frontend/mr_notes/stores/actions_spec.js | 22 ++++++++++++++++++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/mr_notes/stores/actions.js b/app/assets/javascripts/mr_notes/stores/actions.js index d1874dcb214abc..78cc77a04f0296 100644 --- a/app/assets/javascripts/mr_notes/stores/actions.js +++ b/app/assets/javascripts/mr_notes/stores/actions.js @@ -7,3 +7,7 @@ export function setActiveTab({ commit }, tab) { export function setEndpoints({ commit }, endpoints) { commit(types.SET_ENDPOINTS, endpoints); } + +export function setMrMetadata({ commit }, metadata) { + commit(types.SET_MR_METADATA, metadata); +} diff --git a/spec/frontend/mr_notes/stores/actions_spec.js b/spec/frontend/mr_notes/stores/actions_spec.js index dbceedface1277..ff1cf0f44f043e 100644 --- a/spec/frontend/mr_notes/stores/actions_spec.js +++ b/spec/frontend/mr_notes/stores/actions_spec.js @@ -1,5 +1,5 @@ import testAction from 'helpers/vuex_action_helper'; -import { setEndpoints } from '~/mr_notes/stores/actions'; +import { setEndpoints, setMrMetadata } from '~/mr_notes/stores/actions'; import mutationTypes from '~/mr_notes/stores/mutation_types'; describe('MR Notes Mutator Actions', () => { @@ -22,4 +22,24 @@ describe('MR Notes Mutator Actions', () => { ); }); }); + + describe('setMrMetadata', () => { + it('should trigger the SET_MR_METADATA state mutation', (done) => { + const mrMetadata = { propA: 'a', propB: 'b' }; + + testAction( + setMrMetadata, + mrMetadata, + {}, + [ + { + type: mutationTypes.SET_MR_METADATA, + payload: mrMetadata, + }, + ], + [], + done, + ); + }); + }); }); -- GitLab From 7b46b28e903259150d35bcf3511cbb1372d12eee Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Fri, 19 Mar 2021 20:49:32 -0600 Subject: [PATCH 3/5] Add a network action to fetch the MR Metadata from the API endpoint --- .../javascripts/mr_notes/stores/actions.js | 19 +++++++ spec/frontend/mr_notes/stores/actions_spec.js | 50 ++++++++++++++++++- 2 files changed, 68 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/mr_notes/stores/actions.js b/app/assets/javascripts/mr_notes/stores/actions.js index 78cc77a04f0296..bc66d1dd68fb8d 100644 --- a/app/assets/javascripts/mr_notes/stores/actions.js +++ b/app/assets/javascripts/mr_notes/stores/actions.js @@ -1,3 +1,5 @@ +import axios from '~/lib/utils/axios_utils'; + import types from './mutation_types'; export function setActiveTab({ commit }, tab) { @@ -11,3 +13,20 @@ export function setEndpoints({ commit }, endpoints) { export function setMrMetadata({ commit }, metadata) { commit(types.SET_MR_METADATA, metadata); } + +export function fetchMrMetadata({ dispatch, state }) { + if (state.endpoints?.metadata) { + axios + .get(state.endpoints.metadata) + .then((response) => { + dispatch('setMrMetadata', response.data); + }) + .catch(() => { + // https://gitlab.com/gitlab-org/gitlab/-/issues/324740 + // We can't even do a simple console warning here because + // the pipeline will fail. However, the issue above will + // eventually handle errors appropriately. + // console.warn('Failed to load MR Metadata for the Overview tab.'); + }); + } +} diff --git a/spec/frontend/mr_notes/stores/actions_spec.js b/spec/frontend/mr_notes/stores/actions_spec.js index ff1cf0f44f043e..b1f661624ef09d 100644 --- a/spec/frontend/mr_notes/stores/actions_spec.js +++ b/spec/frontend/mr_notes/stores/actions_spec.js @@ -1,5 +1,9 @@ +import MockAdapter from 'axios-mock-adapter'; + import testAction from 'helpers/vuex_action_helper'; -import { setEndpoints, setMrMetadata } from '~/mr_notes/stores/actions'; +import axios from '~/lib/utils/axios_utils'; + +import { setEndpoints, setMrMetadata, fetchMrMetadata } from '~/mr_notes/stores/actions'; import mutationTypes from '~/mr_notes/stores/mutation_types'; describe('MR Notes Mutator Actions', () => { @@ -42,4 +46,48 @@ describe('MR Notes Mutator Actions', () => { ); }); }); + + describe('fetchMrMetadata', () => { + const mrMetadata = { meta: true, data: 'foo' }; + const state = { + endpoints: { + metadata: 'metadata', + }, + }; + let getSpy; + let mock; + + beforeEach(() => { + getSpy = jest.spyOn(axios, 'get'); + mock = new MockAdapter(axios); + + mock.onGet(state.endpoints.metadata).reply(200, mrMetadata); + }); + + afterEach(() => { + getSpy.mockRestore(); + mock.restore(); + }); + + it('should fetch the data from the API', async () => { + await fetchMrMetadata({ state, dispatch: () => {} }); + + expect(axios.get).toHaveBeenCalledWith(state.endpoints.metadata); + }); + + it('should set the fetched data into state', () => { + return testAction( + fetchMrMetadata, + {}, + state, + [], + [ + { + type: 'setMrMetadata', + payload: mrMetadata, + }, + ], + ); + }); + }); }); -- GitLab From ce92275f6dbc83e9b76159a00158a69c2269617c Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Tue, 16 Mar 2021 09:22:28 -0600 Subject: [PATCH 4/5] Fetch the MR Metadata when the MR Notes app loads --- app/assets/javascripts/mr_notes/init_notes.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/mr_notes/init_notes.js b/app/assets/javascripts/mr_notes/init_notes.js index ff194d1a171610..d85fd10be458b3 100644 --- a/app/assets/javascripts/mr_notes/init_notes.js +++ b/app/assets/javascripts/mr_notes/init_notes.js @@ -58,6 +58,8 @@ export default () => { created() { this.setActiveTab(window.mrTabs.getCurrentAction()); this.setEndpoints(this.endpoints); + + this.fetchMrMetadata(); }, mounted() { this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge'); @@ -69,7 +71,7 @@ export default () => { window.mrTabs.eventHub.$off('MergeRequestTabChange', this.setActiveTab); }, methods: { - ...mapActions(['setActiveTab', 'setEndpoints']), + ...mapActions(['setActiveTab', 'setEndpoints', 'fetchMrMetadata']), updateDiscussionTabCounter() { this.notesCountBadge.text(this.discussionTabCounter); }, -- GitLab From f35d1ccc0b32f790d760ef5f73a2ed0f5fc3f07b Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Tue, 23 Mar 2021 22:07:30 -0600 Subject: [PATCH 5/5] Update with review notes about unit tests --- spec/frontend/mr_notes/stores/actions_spec.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/spec/frontend/mr_notes/stores/actions_spec.js b/spec/frontend/mr_notes/stores/actions_spec.js index b1f661624ef09d..c6578453d853e8 100644 --- a/spec/frontend/mr_notes/stores/actions_spec.js +++ b/spec/frontend/mr_notes/stores/actions_spec.js @@ -28,10 +28,10 @@ describe('MR Notes Mutator Actions', () => { }); describe('setMrMetadata', () => { - it('should trigger the SET_MR_METADATA state mutation', (done) => { + it('should trigger the SET_MR_METADATA state mutation', async () => { const mrMetadata = { propA: 'a', propB: 'b' }; - testAction( + await testAction( setMrMetadata, mrMetadata, {}, @@ -42,7 +42,6 @@ describe('MR Notes Mutator Actions', () => { }, ], [], - done, ); }); }); @@ -54,25 +53,25 @@ describe('MR Notes Mutator Actions', () => { metadata: 'metadata', }, }; - let getSpy; let mock; beforeEach(() => { - getSpy = jest.spyOn(axios, 'get'); mock = new MockAdapter(axios); mock.onGet(state.endpoints.metadata).reply(200, mrMetadata); }); afterEach(() => { - getSpy.mockRestore(); mock.restore(); }); it('should fetch the data from the API', async () => { await fetchMrMetadata({ state, dispatch: () => {} }); - expect(axios.get).toHaveBeenCalledWith(state.endpoints.metadata); + await axios.waitForAll(); + + expect(mock.history.get).toHaveLength(1); + expect(mock.history.get[0].url).toBe(state.endpoints.metadata); }); it('should set the fetched data into state', () => { -- GitLab