diff --git a/client/src/components/WorkflowInvocationState/DatasetCollectionUIWrapper.test.js b/client/src/components/WorkflowInvocationState/DatasetCollectionUIWrapper.test.js
new file mode 100644
index 00000000000..f80be0f0a2d
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/DatasetCollectionUIWrapper.test.js
@@ -0,0 +1,61 @@
+import DatasetCollectionUIWrapper from "./DatasetCollectionUIWrapper";
+import DscUI from "../History/ContentItem/DatasetCollection/DscUI";
+import { shallowMount } from "@vue/test-utils";
+import datasetCollectionRaw from "../History/test/json/DatasetCollection.json";
+import datasetCollectionContent from "../History/test/json/DatasetCollection.nested.json";
+
+jest.mock("../History/caching");
+
+describe("DatasetUIWrapper.vue with Dataset", () => {
+    let wrapper;
+    let propsData;
+    let onHide;
+    let onUnhide;
+    let onDelete;
+    let onUndelete;
+
+    beforeEach(async () => {
+        propsData = {
+            item: datasetCollectionRaw,
+        };
+        onHide = jest.spyOn(DatasetCollectionUIWrapper.methods, "onHide").mockImplementation();
+        onUnhide = jest.spyOn(DatasetCollectionUIWrapper.methods, "onUnhide").mockImplementation();
+        onDelete = jest.spyOn(DatasetCollectionUIWrapper.methods, "onDelete").mockImplementation();
+        onUndelete = jest.spyOn(DatasetCollectionUIWrapper.methods, "onUndelete").mockImplementation();
+        wrapper = shallowMount(DatasetCollectionUIWrapper, {
+            propsData,
+        });
+    });
+
+    it("loads DscUI component", async () => {
+        expect(wrapper.findComponent(DscUI).exists()).toBeTruthy();
+    });
+
+    it("reacts to all emittted events", async () => {
+        expect(onHide).not.toHaveBeenCalled();
+        expect(onUnhide).not.toHaveBeenCalled();
+        expect(onDelete).not.toHaveBeenCalled();
+        expect(onUndelete).not.toHaveBeenCalled();
+        wrapper.findComponent(DscUI).vm.$emit("hideCollection");
+        expect(onHide).toHaveBeenCalled();
+        wrapper.findComponent(DscUI).vm.$emit("unhideCollection");
+        expect(onUnhide).toHaveBeenCalled();
+        wrapper.findComponent(DscUI).vm.$emit("deleteCollection");
+        expect(onDelete).toHaveBeenCalled();
+        wrapper.findComponent(DscUI).vm.$emit("undeleteCollection");
+        expect(onUndelete).toHaveBeenCalled();
+    });
+    it("creates DatasetCollection", async () => {
+        const datasetCollection = wrapper.vm.datasetCollection;
+        expect(datasetCollection.collectionType).toBe("list of pairs");
+    });
+    it("manages collection expansion", async () => {
+        expect(wrapper.vm.expand).toBeFalsy();
+        wrapper.findComponent(DscUI).vm.$emit("update:expanded", wrapper.vm.datasetCollection);
+        expect(wrapper.vm.expand).toBeTruthy();
+    });
+    it("build dsc from collection content", async () => {
+        wrapper.setProps({ item: datasetCollectionContent });
+        expect(wrapper.vm.datasetCollection.name).toBe(datasetCollectionContent.element_identifier);
+    });
+});
diff --git a/client/src/components/WorkflowInvocationState/DatasetCollectionUIWrapper.vue b/client/src/components/WorkflowInvocationState/DatasetCollectionUIWrapper.vue
index 4d439d1aa80..1821f3ca9dd 100644
--- a/client/src/components/WorkflowInvocationState/DatasetCollectionUIWrapper.vue
+++ b/client/src/components/WorkflowInvocationState/DatasetCollectionUIWrapper.vue
@@ -1,23 +1,18 @@
 <template>
     <div>
         <DscUI
-            v-if="dataset_collection"
+            v-if="datasetCollection"
             v-bind="$attrs"
             v-on="$listeners"
-            :dsc="dataset_collection"
+            :dsc="datasetCollection"
             :showTags="true"
-            v-on:update:expanded="expandCollection"
-            @hideCollection="onHide(dataset_collection)"
-            @unhideCollection="onUnhide(dataset_collection, $event)"
-            @deleteCollection="onDelete(dataset_collection, $event)"
-            @undeleteCollection="onUndelete(dataset_collection)"
+            @update:expanded="toggleExpand"
+            @hideCollection="onHide(datasetCollection)"
+            @unhideCollection="onUnhide(datasetCollection)"
+            @deleteCollection="onDelete(datasetCollection, $event)"
+            @undeleteCollection="onUndelete(datasetCollection)"
         />
-        <DatasetCollectionContentProvider
-            v-for="collection in expandedCollections"
-            :key="collection.id"
-            :id="collection.contents_url"
-            v-slot="{ item, loading }"
-        >
+        <DatasetCollectionContentProvider v-if="expand" :id="datasetCollection.contents_url" v-slot="{ item, loading }">
             <b-spinner v-if="loading">Loading Dataset Collection...</b-spinner>
             <DatasetCollectionContents v-else :collectionContents="item" />
         </DatasetCollectionContentProvider>
@@ -42,30 +37,24 @@ export default {
         element_count: { type: Number, required: false },
     },
     data() {
-        return { expandedCollections: [] };
+        return { expand: false };
     },
     computed: {
-        dataset_collection() {
+        datasetCollection() {
             var rawObject = this.item;
             if (rawObject.model_class === "DatasetCollectionElement") {
                 rawObject = this.item.object;
                 rawObject.name = this.item.element_identifier;
                 rawObject.contents_url = this.item.contents_url || rawObject.contents_url;
                 rawObject.element_count = this.element_count;
-                // TODO: dataset collections should probably be able to determine their own state?
                 rawObject.populated_state = "ok";
             }
             return new DatasetCollection(rawObject);
         },
     },
     methods: {
-        expandCollection(coll) {
-            const index = this.expandedCollections.indexOf(coll);
-            if (index > -1) {
-                this.expandedCollections.splice(index, 1);
-            } else {
-                this.expandedCollections.push(coll);
-            }
+        toggleExpand() {
+            this.expand = !this.expand;
         },
         async onDelete(collection, flags = {}) {
             const { recursive = false, purge = false } = flags;