Test case and cleanup for DatasetStorage.vue.

client/src/components/Dataset/DatasetStorage/DatasetStorage.test.js

@@ -0,0 +1,124 @@
+import { shallowMount } from "@vue/test-utils";
+import DatasetStorage from "./DatasetStorage";
+import { getLocalVue } from "jest/helpers";
+import flushPromises from "flush-promises";
+import MockAdapter from "axios-mock-adapter";
+import axios from "axios";
+import MarkdownIt from "markdown-it";
+
+const localVue = getLocalVue();
+
+const TEST_STORAGE_API_RESPONSE_WITHOUT_ID = {
+    object_store_id: null,
+};
+const TEST_STORAGE_API_RESPONSE_WITH_ID = {
+    object_store_id: "foobar",
+};
+const TEST_STORAGE_API_RESPONSE_WITH_NAME = {
+    object_store_id: "foobar",
+    name: "my cool storage",
+    description: "My cool **markdown**",
+};
+const TEST_DATASET_ID = "1";
+const TEST_STORAGE_URL = `/api/datasets/${TEST_DATASET_ID}/storage`;
+const TEST_RENDERED_MARKDOWN_AS_HTML = "<p>My cool <strong>markdown</strong>\n";
+const TEST_ERROR_MESSAGE = "Opps all errors.";
+
+// works fine without mocking but I guess it is more JS unit-y with the mock?
+jest.mock("markdown-it");
+MarkdownIt.mockImplementation(() => {
+    return {
+        render(markdown) {
+            return TEST_RENDERED_MARKDOWN_AS_HTML;
+        },
+    };
+});
+
+describe("Dataset Storage", () => {
+    let axiosMock;
+    let wrapper;
+
+    beforeEach(async () => {
+        axiosMock = new MockAdapter(axios);
+    });
+
+    function mount() {
+        wrapper = shallowMount(DatasetStorage, {
+            propsData: { datasetId: TEST_DATASET_ID },
+            localVue,
+            stubs: {
+                "loading-span": true,
+            },
+        });
+    }
+
+    async function mountWithResponse(response) {
+        axiosMock.onGet(TEST_STORAGE_URL).reply(200, response);
+        mount();
+        await flushPromises();
+    }
+
+    it("test loading...", async () => {
+        mount();
+        await wrapper.vm.$nextTick();
+        expect(wrapper.findAll("loading-span-stub").length).toBe(1);
+    });
+
+    it("test error rendering...", async () => {
+        axiosMock.onGet(TEST_STORAGE_URL).reply(400, {
+            err_msg: TEST_ERROR_MESSAGE,
+        });
+        mount();
+        await flushPromises();
+        expect(wrapper.findAll(".error").length).toBe(1);
+        expect(wrapper.findAll(".error").at(0).text()).toBe(TEST_ERROR_MESSAGE);
+        expect(wrapper.findAll("loading-span-stub").length).toBe(0);
+    });
+
+    it("test dataset storage with object store without id", async () => {
+        await mountWithResponse(TEST_STORAGE_API_RESPONSE_WITHOUT_ID);
+        expect(wrapper.findAll("loading-span-stub").length).toBe(0);
+        expect(wrapper.vm.descriptionRendered).toBeNull();
+        const header = wrapper.findAll("h3");
+        expect(header.length).toBe(1);
+        expect(header.at(0).text()).toBe("Dataset Storage");
+        const byIdSpan = wrapper.findAll(".display-os-by-id");
+        expect(byIdSpan.length).toBe(0);
+        const byNameSpan = wrapper.findAll(".display-os-by-name");
+        expect(byNameSpan.length).toBe(0);
+        const byDefaultSpan = wrapper.findAll(".display-os-default");
+        expect(byDefaultSpan.length).toBe(1);
+    });
+
+    it("test dataset storage with object store id", async () => {
+        await mountWithResponse(TEST_STORAGE_API_RESPONSE_WITH_ID);
+        expect(wrapper.findAll("loading-span-stub").length).toBe(0);
+        expect(wrapper.vm.storageInfo.object_store_id).toBe("foobar");
+        expect(wrapper.vm.descriptionRendered).toBeNull();
+        const header = wrapper.findAll("h3");
+        expect(header.length).toBe(1);
+        expect(header.at(0).text()).toBe("Dataset Storage");
+        const byIdSpan = wrapper.findAll(".display-os-by-id");
+        expect(byIdSpan.length).toBe(1);
+        const byNameSpan = wrapper.findAll(".display-os-by-name");
+        expect(byNameSpan.length).toBe(0);
+    });
+
+    it("test dataset storage with object store name", async () => {
+        await mountWithResponse(TEST_STORAGE_API_RESPONSE_WITH_NAME);
+        expect(wrapper.findAll("loading-span-stub").length).toBe(0);
+        expect(wrapper.vm.storageInfo.object_store_id).toBe("foobar");
+        expect(wrapper.vm.descriptionRendered).toBe(TEST_RENDERED_MARKDOWN_AS_HTML);
+        const header = wrapper.findAll("h3");
+        expect(header.length).toBe(1);
+        expect(header.at(0).text()).toBe("Dataset Storage");
+        const byIdSpan = wrapper.findAll(".display-os-by-id");
+        expect(byIdSpan.length).toBe(0);
+        const byNameSpan = wrapper.findAll(".display-os-by-name");
+        expect(byNameSpan.length).toBe(1);
+    });
+
+    afterEach(() => {
+        axiosMock.restore();
+    });
+});

client/src/components/Dataset/DatasetStorage/DatasetStorage.vue

@@ -1,18 +1,18 @@
 <template>
     <div>
         <h3 v-if="includeTitle">Dataset Storage</h3>
-        <loading-span v-if="storageInfo == null"> </loading-span>
+        <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
+        <loading-span v-else-if="storageInfo == null"> </loading-span>
         <div v-else>
-            <p v-if="storageInfo.name">
-                This data is stored in a Galaxy ObjectStore named <b>{{ storageInfo.name }}</b
-                >.
-            </p>
-            <p v-else-if="storageInfo.object_store_id">
-                This data is stored in a Galaxy ObjectStore with id <b>{{ storageInfo.object_store_id }}</b
-                >.
-            </p>
-            <p v-else>
-                This data is stored in the default configured Galaxy ObjectStore.
+            <p>
+                This dataset is stored in
+                <span class="display-os-by-name" v-if="storageInfo.name">
+                    a Galaxy object store named <b>{{ storageInfo.name }}</b>
+                </span>
+                <span class="display-os-by-id" v-else-if="storageInfo.object_store_id">
+                    a Galaxy object store with id <b>{{ storageInfo.object_store_id }}</b>
+                </span>
+                <span class="display-os-default" v-else> the default configured Galaxy object store </span>.
             </p>
             <div v-html="descriptionRendered"></div>
         </div>
@@ -24,8 +24,7 @@ import axios from "axios";
 import { getAppRoot } from "onload/loadConfig";
 import LoadingSpan from "components/LoadingSpan";
 import MarkdownIt from "markdown-it";
-
-const md = MarkdownIt();
+import { errorMessageAsString } from "utils/simple-error";
 
 export default {
     components: {
@@ -48,24 +47,29 @@ export default {
         return {
             storageInfo: null,
             descriptionRendered: null,
+            errorMessage: null,
         };
     },
     created() {
         const datasetId = this.datasetId;
         const datasetType = this.datasetType;
         axios
-            .get(`${getAppRoot()}api/datasets/${datasetId}/storage?hda_ldda=${datasetType}`)
+            .get(`${getAppRoot()}api/datasets/${datasetId}/storage`, { hda_ldda: datasetType })
             .then(this.handleResponse)
-            .catch(this.handleError);
+            .catch((errorMessage) => {
+                this.errorMessage = errorMessageAsString(errorMessage);
+            });
     },
     methods: {
         handleResponse(response) {
-            console.log(response);
-            this.storageInfo = response.data;
-            this.descriptionRendered = md.render(this.storageInfo.description);
-        },
-        handleError(err) {
-            console.log(err);
+            const storageInfo = response.data;
+            const description = storageInfo.description;
+            this.storageInfo = storageInfo;
+            if (description) {
+                this.descriptionRendered = MarkdownIt().render(storageInfo.description);
+            } else {
+                this.descriptionRendered = null;
+            }
         },
     },
 };

client/src/utils/simple-error.js

@@ -1,7 +1,9 @@
 export function errorMessageAsString(e) {
     let message = "Request failed.";
-    if (e.response) {
-        message = e.response.data.err_msg || `${e.response.statusText} (${e.response.status})`;
+    if (e && e.response && e.response.data && e.response.data.err_msg) {
+        message = e.response.data.err_msg;
+    } else if (e && e.response) {
+        message = `${e.response.statusText} (${e.response.status})`;
     } else if (typeof e == "string") {
         message = e;
     }