Use import for JSON fixtures

- spec/frontend/monitoring
- spec/frontend/notebook
- spec/frontend/notes

spec/frontend/monitoring/fixture_data.js

+import fixture from 'test_fixtures/metrics_dashboard/environment_metrics_dashboard.json';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { metricStates } from '~/monitoring/constants';
 import { mapToDashboardViewModel } from '~/monitoring/stores/utils';
@@ -5,10 +6,7 @@ import { stateAndPropsFromDataset } from '~/monitoring/utils';
 
 import { metricsResult } from './mock_data';
 
-// Use globally available `getJSONFixture` so this file can be imported by both karma and jest specs
-export const metricsDashboardResponse = getJSONFixture(
-  'metrics_dashboard/environment_metrics_dashboard.json',
-);
+export const metricsDashboardResponse = fixture;
 
 export const metricsDashboardPayload = metricsDashboardResponse.dashboard;
 

spec/frontend/notebook/cells/code_spec.js

 import Vue from 'vue';
+import fixture from 'test_fixtures/blob/notebook/basic.json';
 import CodeComponent from '~/notebook/cells/code.vue';
 
 const Component = Vue.extend(CodeComponent);
 
 describe('Code component', () => {
   let vm;
+
   let json;
 
   beforeEach(() => {
-    json = getJSONFixture('blob/notebook/basic.json');
+    // Clone fixture as it could be modified by tests
+    json = JSON.parse(JSON.stringify(fixture));
   });
 
   const setupComponent = (cell) => {

spec/frontend/notebook/cells/markdown_spec.js

 import { mount } from '@vue/test-utils';
 import katex from 'katex';
 import Vue from 'vue';
+import markdownTableJson from 'test_fixtures/blob/notebook/markdown-table.json';
+import basicJson from 'test_fixtures/blob/notebook/basic.json';
+import mathJson from 'test_fixtures/blob/notebook/math.json';
 import MarkdownComponent from '~/notebook/cells/markdown.vue';
 
 const Component = Vue.extend(MarkdownComponent);
@@ -35,7 +38,7 @@ describe('Markdown component', () => {
   let json;
 
   beforeEach(() => {
-    json = getJSONFixture('blob/notebook/basic.json');
+    json = basicJson;
 
     // eslint-disable-next-line prefer-destructuring
     cell = json.cells[1];
@@ -104,7 +107,7 @@ describe('Markdown component', () => {
 
   describe('tables', () => {
     beforeEach(() => {
-      json = getJSONFixture('blob/notebook/markdown-table.json');
+      json = markdownTableJson;
     });
 
     it('renders images and text', () => {
@@ -135,7 +138,7 @@ describe('Markdown component', () => {
 
   describe('katex', () => {
     beforeEach(() => {
-      json = getJSONFixture('blob/notebook/math.json');
+      json = mathJson;
     });
 
     it('renders multi-line katex', async () => {

spec/frontend/notebook/cells/output/index_spec.js

 import Vue from 'vue';
+import json from 'test_fixtures/blob/notebook/basic.json';
 import CodeComponent from '~/notebook/cells/output/index.vue';
 
 const Component = Vue.extend(CodeComponent);
 
 describe('Output component', () => {
   let vm;
-  let json;
 
   const createComponent = (output) => {
     vm = new Component({
@@ -17,11 +17,6 @@ describe('Output component', () => {
     vm.$mount();
   };
 
-  beforeEach(() => {
-    // This is the output after rendering a jupyter notebook
-    json = getJSONFixture('blob/notebook/basic.json');
-  });
-
   describe('text output', () => {
     beforeEach((done) => {
       const textType = json.cells[2];

spec/frontend/notebook/index_spec.js

 import { mount } from '@vue/test-utils';
 import Vue from 'vue';
+import json from 'test_fixtures/blob/notebook/basic.json';
+import jsonWithWorksheet from 'test_fixtures/blob/notebook/worksheets.json';
 import Notebook from '~/notebook/index.vue';
 
 const Component = Vue.extend(Notebook);
 
 describe('Notebook component', () => {
   let vm;
-  let json;
-  let jsonWithWorksheet;
-
-  beforeEach(() => {
-    json = getJSONFixture('blob/notebook/basic.json');
-    jsonWithWorksheet = getJSONFixture('blob/notebook/worksheets.json');
-  });
 
   function buildComponent(notebook) {
     return mount(Component, {

spec/frontend/notes/components/diff_with_note_spec.js

 import { shallowMount } from '@vue/test-utils';
+import discussionFixture from 'test_fixtures/merge_requests/diff_discussion.json';
+import imageDiscussionFixture from 'test_fixtures/merge_requests/image_diff_discussion.json';
 import { createStore } from '~/mr_notes/stores';
 import DiffWithNote from '~/notes/components/diff_with_note.vue';
 
-const discussionFixture = 'merge_requests/diff_discussion.json';
-const imageDiscussionFixture = 'merge_requests/image_diff_discussion.json';
-
 describe('diff_with_note', () => {
   let store;
   let wrapper;
@@ -35,7 +34,7 @@ describe('diff_with_note', () => {
 
   describe('text diff', () => {
     beforeEach(() => {
-      const diffDiscussion = getJSONFixture(discussionFixture)[0];
+      const diffDiscussion = discussionFixture[0];
 
       wrapper = shallowMount(DiffWithNote, {
         propsData: {
@@ -75,7 +74,7 @@ describe('diff_with_note', () => {
 
   describe('image diff', () => {
     beforeEach(() => {
-      const imageDiscussion = getJSONFixture(imageDiscussionFixture)[0];
+      const imageDiscussion = imageDiscussionFixture[0];
       wrapper = shallowMount(DiffWithNote, {
         propsData: { discussion: imageDiscussion, diffFile: {} },
         store,

spec/frontend/notes/components/noteable_discussion_spec.js

 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import discussionWithTwoUnresolvedNotes from 'test_fixtures/merge_requests/resolved_diff_discussion.json';
 import { trimText } from 'helpers/text_helper';
 import mockDiffFile from 'jest/diffs/mock_data/diff_file';
 import DiscussionNotes from '~/notes/components/discussion_notes.vue';
@@ -17,8 +18,6 @@ import {
   userDataMock,
 } from '../mock_data';
 
-const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json';
-
 describe('noteable_discussion component', () => {
   let store;
   let wrapper;
@@ -119,7 +118,7 @@ describe('noteable_discussion component', () => {
 
   describe('for resolved thread', () => {
     beforeEach(() => {
-      const discussion = getJSONFixture(discussionWithTwoUnresolvedNotes)[0];
+      const discussion = discussionWithTwoUnresolvedNotes[0];
       wrapper.setProps({ discussion });
     });
 
@@ -133,7 +132,7 @@ describe('noteable_discussion component', () => {
   describe('for unresolved thread', () => {
     beforeEach(() => {
       const discussion = {
-        ...getJSONFixture(discussionWithTwoUnresolvedNotes)[0],
+        ...discussionWithTwoUnresolvedNotes[0],
         expanded: true,
       };
       discussion.resolved = false;

spec/frontend/notes/stores/getters_spec.js

+import discussionWithTwoUnresolvedNotes from 'test_fixtures/merge_requests/resolved_diff_discussion.json';
 import { DESC, ASC } from '~/notes/constants';
 import * as getters from '~/notes/stores/getters';
 import {
@@ -17,8 +18,6 @@ import {
   draftDiffDiscussion,
 } from '../mock_data';
 
-const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json';
-
 // Helper function to ensure that we're using the same schema across tests.
 const createDiscussionNeighborParams = (discussionId, diffOrder, step) => ({
   discussionId,
@@ -123,7 +122,7 @@ describe('Getters Notes Store', () => {
 
   describe('resolvedDiscussionsById', () => {
     it('ignores unresolved system notes', () => {
-      const [discussion] = getJSONFixture(discussionWithTwoUnresolvedNotes);
+      const [discussion] = discussionWithTwoUnresolvedNotes;
       discussion.notes[0].resolved = true;
       discussion.notes[1].resolved = false;
       state.discussions.push(discussion);