diff --git a/client/src/components/Markdown/MarkdownVisualization.test.js b/client/src/components/Markdown/MarkdownVisualization.test.js
new file mode 100644
index 00000000000..76d583688df
--- /dev/null
+++ b/client/src/components/Markdown/MarkdownVisualization.test.js
@@ -0,0 +1,42 @@
+import MarkdownVisualization from "./MarkdownVisualization";
+import { shallowMount } from "@vue/test-utils";
+import Vue from "vue";
+
+describe("Markdown/MarkdownVisualization", () => {
+    it("test wizard", async () => {
+        const wrapper = shallowMount(MarkdownVisualization, {
+            propsData: {
+                argumentName: "name",
+                argumentPayload: {
+                    settings: [{}, {}],
+                    groups: [{}],
+                },
+                history: "history_id",
+                labels: [],
+                useLabels: false,
+            },
+        });
+        await Vue.nextTick();
+        expect(wrapper.vm.labelShow).toBe(false);
+        expect(Object.keys(wrapper.vm.formInputs).length).toBe(3);
+        wrapper.vm.onData("history_dataset_id");
+        expect(wrapper.vm.dataShow).toBe(false);
+        expect(wrapper.vm.dataTag).toBe("history_dataset_id=history_dataset_id");
+        expect(wrapper.vm.formShow).toBe(true);
+    });
+
+    it("test wizard", async () => {
+        const wrapper = shallowMount(MarkdownVisualization, {
+            propsData: {
+                argumentName: "name",
+                argumentPayload: {},
+                history: "history_id",
+                labels: [],
+                useLabels: true,
+            },
+        });
+        await Vue.nextTick();
+        expect(wrapper.vm.labelShow).toBe(true);
+        expect(wrapper.vm.formInputs).toBe(null);
+    });
+});
diff --git a/client/src/components/Markdown/MarkdownVisualization.vue b/client/src/components/Markdown/MarkdownVisualization.vue
index dd5f36723da..e6f6e654d5d 100644
--- a/client/src/components/Markdown/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/MarkdownVisualization.vue
@@ -25,10 +25,14 @@
 </template>
 
 <script>
+import Vue from "vue";
+import BootstrapVue from "bootstrap-vue";
 import MarkdownSelector from "./MarkdownSelector";
 import DataDialog from "components/DataDialog/DataDialog";
 import Form from "components/Form/Form";
 
+Vue.use(BootstrapVue);
+
 export default {
     components: {
         MarkdownSelector,
@@ -70,11 +74,11 @@ export default {
         formInputs() {
             let settings = null;
             if (this.argumentPayload.settings && this.argumentPayload.settings.length > 0) {
-                settings = Object.assign({}, this.argumentPayload.settings);
+                settings = this.argumentPayload.settings.slice();
             }
             if (this.argumentPayload.groups && this.argumentPayload.groups.length > 0) {
-                settings = settings || {};
-                settings.groups = {
+                settings = settings || [];
+                settings.push({
                     type: "repeat",
                     title: "Columns",
                     name: "groups",
@@ -85,7 +89,7 @@ export default {
                         }
                         return x;
                     }),
-                };
+                });
             }
             return settings;
         },