Update the fortify configuration to retrieve a list of values from the...

Update the fortify configuration to retrieve a list of values from the backend. References platform-one/party-bus/valkyrie/valkyrie-api#2

src/api/services/missionApp.js

-import { createBaseHttp } from "@/api/http-common";
+import { createBaseHttp, HTTP } from "@/api/http-common";
 
 export default {
   async postMissionApp(missionApp) {
     return createBaseHttp().post("/mission-app", missionApp);
   },
+  async getFortifyValues() {
+    return HTTP.get("/mission-app/fortify-values");
+  },
 };

src/components/MissionAppFortifyConfig.vue

@@ -3,17 +3,25 @@
     <h4 class="text-xl-left text-lg-left ml-xl-0 ml-lg-0 pl-lg-0 pl-lg-0 mb-8">
       Fortify Configuration (Optional)
     </h4>
-
-    <v-text-field
-      class="mb-8"
-      label="Language"
+    <v-select
+      v-if="!loading"
       v-model="fortifyConfiguration.language"
-      hint="* optional, ie: javascript"
-      persistent-hint
+      :items="fortifyValues"
+      item-text="name"
+      item-value="value"
+      class="mb-8"
+      label="Select Fortify Language"
+      outlined
+      clearable
+      color="primary"
     />
+    <span v-else>"Loading fortify values..."</span>
   </div>
 </template>
 <script>
+import { SET_ERROR_DIALOG, SET_ERROR_MESSAGE } from "@/store/mutation-types";
+import MissionAppApi from "@/api/services/missionApp";
+
 export default {
   name: "MissionAppFortifyConfig",
   props: {
@@ -22,6 +30,27 @@ export default {
       required: true,
     },
   },
+  created() {
+    this.retrieveFortifyValues();
+  },
+  data: () => ({
+    loading: true,
+    fortifyValues: null,
+  }),
+  methods: {
+    async retrieveFortifyValues() {
+      try {
+        this.fortifyValues = await MissionAppApi.getFortifyValues();
+        this.loading = false;
+      } catch {
+        this.$store.commit(
+          SET_ERROR_MESSAGE,
+          "Failed to retrieve fortify values."
+        );
+        this.$store.commit(SET_ERROR_DIALOG, true);
+      }
+    },
+  },
   watch: {
     fortifyConfiguration() {
       this.$emit("input", this.fortifyConfiguration);

src/components/MissionAppProjects.vue

@@ -34,7 +34,12 @@
       >
         <div class="projectInfo mb-8">
           <h4
-            class="text-xl-left text-lg-left ml-xl-0 ml-lg-0 pl-lg-0 pl-lg-0 mb-8"
+            class="
+              text-xl-left text-lg-left
+              ml-xl-0 ml-lg-0
+              pl-lg-0 pl-lg-0
+              mb-8
+            "
           >
             Project Info
           </h4>

tests/unit/api/services/missionApp.spec.js

@@ -16,7 +16,7 @@ const mockMissionAppBody = {
   productionUrl: "product.dso.mil",
 };
 describe("mission app service", () => {
-  describe("should call HTTP", () => {
+  describe("Posting Mission App", () => {
     let postFn;
     beforeEach(() => {
       postFn = jest.fn().mockResolvedValue();
@@ -30,4 +30,14 @@ describe("mission app service", () => {
       expect(postFn).toHaveBeenCalledWith("/mission-app", mockMissionAppBody);
     });
   });
+
+  describe("Retrieving fortify values", () => {
+    it("should retrieve the fortify mission values", async () => {
+      const mockFortifyValues = [{ value: "C++", name: "C++" }];
+      jest.spyOn(HTTP_HELPERS.HTTP, "get").mockResolvedValue(mockFortifyValues);
+      expect(await MissionAppService.getFortifyValues()).toBe(
+        mockFortifyValues
+      );
+    });
+  });
 });

tests/unit/components/MissionAppFortifyConfig.spec.js

@@ -2,6 +2,7 @@ import Vuex from "vuex";
 import Vuetify from "vuetify";
 import { mount, createLocalVue } from "@vue/test-utils";
 import MissionAppFortifyConfig from "@/components/MissionAppFortifyConfig";
+import MissionAppApi from "@/api/services/missionApp";
 
 const localVue = createLocalVue();
 const vuetify = new Vuetify();
@@ -10,20 +11,45 @@ localVue.use(vuetify);
 
 describe("Mission App Dns Form Section", () => {
   let wrapper;
-  let inputs;
+  let mockFortifyValue;
   beforeEach(() => {
+    mockFortifyValue = {
+      name: "Fortify Lanuage Name",
+      value: "Fortify Language Value",
+    };
+    jest
+      .spyOn(MissionAppApi, "getFortifyValues")
+      .mockResolvedValue([mockFortifyValue]);
     wrapper = mount(MissionAppFortifyConfig, {
       localVue,
       vuetify,
       propsData: {
         fortifyConfiguration: {},
       },
+      mocks: {
+        $store: {},
+      },
     });
-    inputs = wrapper.findAll("input");
   });
 
-  it("sets the fortify language", () => {
-    inputs.at(0).setValue("javascript");
-    expect(wrapper.props().fortifyConfiguration.language).toEqual("javascript");
+  it("populates the fortify values on create", () => {
+    expect(MissionAppApi.getFortifyValues).toHaveBeenCalledTimes(1);
+  });
+
+  it("Sets the fortifyConfiguration language", () => {
+    wrapper.find("input").setValue(mockFortifyValue.value);
+    expect(wrapper.props().fortifyConfiguration.language).toBe(
+      mockFortifyValue.value
+    );
+  });
+
+  it("should handle error", async () => {
+    wrapper.vm.$store.commit = jest.fn();
+    console.error = jest.fn();
+    jest
+      .spyOn(MissionAppApi, "getFortifyValues")
+      .mockRejectedValue(new Error("Some Error"));
+    await wrapper.vm.retrieveFortifyValues();
+    expect(wrapper.vm.$store.commit).toHaveBeenCalled();
   });
 });