diff --git a/frontend/src/components/Dialogs/InputDialog.vue b/frontend/src/components/Dialogs/InputDialog.vue
index ace509b7..4c1573b2 100644
--- a/frontend/src/components/Dialogs/InputDialog.vue
+++ b/frontend/src/components/Dialogs/InputDialog.vue
@@ -1,68 +1,253 @@
 <template>
-  <div v-if="dialog.state.active" class="modal-background">
-    <div :class="['modal-container', dialog.state.message ? 'limit-width' : '']">
+  <div v-if="state.active" class="modal-background">
+    <div :class="['modal-container', state.message ? 'limit-width' : '']">
       <div class="tab-header">
         <button
-          v-for="(tab, index) in dialog.state.tabs"
+          v-for="(tab, index) in state.tabs"
           :key="`button-${tab.name}-${index}`"
-          :class="tab.name == dialog.state.activeTabName ? 'tab-button-active' : ''"
+          :class="tab.name == activeTabName ? 'tab-button-active' : ''"
           class="tab-button"
-          @click="dialog.state.activeTabName = tab.name"
+          @click="toggleTab(tab.name)"
           :data-test="`button-${tab.name}`"
         >
-          <img
-            v-if="tab.icon == 'phenotips'"
-            src="@/assets/phenotips-favicon-96x96.png"
-          />
-          <font-awesome-icon v-else
-            :icon="'file' == tab.icon ? ['far', 'file'] : tab.icon"
-            size="2xl">
+          <img v-if="tab.icon == 'phenotips'" src="@/assets/phenotips-favicon-96x96.png"/>
+          <font-awesome-icon v-else :icon="'file' == tab.icon ? ['far', 'file'] : tab.icon" size="2xl">
           </font-awesome-icon>
         </button>
       </div>
-      <div v-if="dialog.state.message"
+      <div v-if="state.message"
         class="warning-message"
-        v-html="dialog.state.message"
+        v-html="state.message"
         data-test="warning-message">
       </div>
-        <component v-bind:is="dialog.state.activeTabName"
-          :userInput = "dialog.activeTab().input"
-          v-bind="dialog.activeTab().props"
-          @update:userInput="dialog.updateActiveTabInput"
+        <component v-bind:is="activeTabName"
+          :userInput = "activeTabInput"
+          v-bind="activeTabProps"
+          @update:userInput="updateActiveTabInput"
+          :data-test = 'activeTabName'
         />
       <div class="button-row">
-        <button class="secondary-button" @click="dialog.cancel()" data-test="cancel">
-          {{ dialog.state.cancelText }}
+        <button class="secondary-button" @click="cancel()" data-test="cancel">
+          {{ state.cancelText }}
         </button>
-        <button class="secondary-button" v-if="dialog.state.deleteText!=''" @click="dialog.delete()" data-test="delete">
-          {{ dialog.state.deleteText }}
+        <button class="secondary-button" v-if="deleteEnabled" @click="remove()" data-test="remove">
+          {{ state.removeText }}
         </button>
-        <button class="primary-button" @click="dialog.confirmation(dialog.activeTab().input)" data-test="confirm">
-          {{ dialog.state.confirmText }}
+        <button class="primary-button" @click="confirmation(activeTab.input)" data-test="confirm">
+          {{ state.confirmText }}
         </button>
       </div>
   </div>
   </div>
 </template>
 
-<script>
-import InputDialogAttachUrl from '@/components/Dialogs/InputDialogAttachUrl.vue';
-import InputDialogUploadFile from '@/components/Dialogs/InputDialogUploadFile.vue';
-
-import dialog from '@/inputDialog.js';
-
-export default {
-  name: 'input-dialog',
-  components: {
-    InputDialogAttachUrl,
-    InputDialogUploadFile,
-  },
-  data: function() {
-    return {
-      dialog,
-    };
-  },
+<script setup>
+import {computed, reactive} from 'vue';
+
+const state = reactive({
+  tabs: [],
+  active: false,
+  activeTabName: '',
+  confirmText: 'Ok',
+  cancelText: 'Cancel',
+  removeText: '',
+  message: '',
+});
+
+
+const activeTab = computed(() => {
+  if ('' == state.activeTabName) {
+    return undefined;
+  }
+
+  console.log(`InputDialog computed  ${state.activeTabName}`)
+  console.log(state.tabs.find((tab) => tab.name === state.activeTabName))
+  return state.tabs.find((tab) => tab.name === state.activeTabName);
+})
+
+const activeTabName = computed(() => {
+  console.log(`InputDialog:ActiveTabName Computed = ${state.activeTabName}`)
+  return state.activeTabName;
+});
+
+const activeTabInput = computed(() => {
+  return activeTab.input
+});
+
+const activeTabProps = computed(() => {
+  return activeTab.props
+});
+
+const deleteEnabled = computed(() => {
+ return state.removeText!=''
+});
+
+// -----------------------------------
+// Private Methods
+// -----------------------------------
+let close;
+
+const dialogPromise = () => new Promise((resolve) => (close = resolve));
+
+const open = () => {
+  state.active = true;
+  return dialogPromise();
 };
+
+const reset = () => {
+  state.tabs.splice(0),
+  state.active = false;
+  state.activeTabName = '';
+  state.confirmText = 'Ok';
+  state.cancelText = 'Cancel';
+  state.removeText = '';
+  state.message = '';
+};
+
+function toggleTab(newActiveTabName) {
+  console.log(`INPUTDialog - Toggle Tab New Active Tab Name- ${newActiveTabName}`);
+  // console.log(state);
+  state.activeTabName = newActiveTabName;
+  // console.log(state);
+}
+
+// -----------------------------------
+// Public Methods
+// -----------------------------------
+
+function confirmText(text) {
+  state.confirmText = text;
+  return this;
+}
+
+function cancelText(text) {
+  state.cancelText = text;
+  return this;
+}
+
+function removeText(text) {
+  state.remove = text;
+  return this;
+}
+
+function message(text) {
+  state.message = text;
+  return this;
+}
+
+function file(includeComments=false, includeIcon='file', fileTypesAccept='.json') {
+  console.log('InputDialog:File - Called Beginning');
+  const fileInput = {
+    name: 'input-dialog-upload-file',
+    icon: includeIcon,
+    input: {
+      data: '',
+      ...(includeComments) && {comments: ''},
+      type: 'file',
+    },
+    props: {
+      fileTypeAccept: fileTypesAccept,
+    },
+  };
+
+  state.tabs.push(fileInput);
+  state.activeTabName = fileInput.name;
+  console.log('InputDialog:File - Call Ended, State Before');
+  return this;
+}
+
+function url(includeComments=false, includeName=false) {
+  const attachUrlInput = {
+    name: 'input-dialog-attach-url',
+    icon: 'link',
+    input: {
+      ...(includeName) && {name: ''},
+      data: '',
+      ...(includeComments) && {comments: ''},
+      type: 'link',
+    },
+    props: {
+    },
+  };
+  state.tabs.push(attachUrlInput);
+  state.activeTabName = attachUrlInput.name;
+  return this;
+}
+
+function edit(attachmentInput) {
+  const attachUrlInput = {
+    name: attachmentInput.type == 'link' ? 'input-dialog-attach-url' : 'input-dialog-upload-file',
+    icon: attachmentInput.type == 'link' ? 'link' : 'file',
+    input: {
+      ...attachmentInput,
+      data: attachmentInput.type == 'file' ? {name: attachmentInput.name} : attachmentInput.data,
+    },
+  };
+  state.tabs.push(attachUrlInput);
+  state.activeTabName = attachUrlInput.name;
+  return this;
+}
+
+function prompt() {
+  console.log('InputDialog:prompt called');
+  if (0 == state.tabs.length) {
+    throw Error('InputDialog requires either a file or url to be configured for render');
+  }
+  return open();
+}
+
+function cancel() {
+  close(false);
+  reset();
+}
+
+function confirmation(userInput) {
+  close(userInput);
+  reset();
+}
+
+function remove() {
+  close('DELETE');
+  reset();
+}
+
+function updateActiveTabInput(updatedUserInput) {
+  const tab = state.tabs.find((tab) => tab.name === state.activeTabName);
+  tab.input = updatedUserInput;
+}
+
+// const operations = {
+//   confirmText,
+//   cancelText,
+//   removeText,
+//   message,
+//   file,
+//   url,
+//   edit,
+//   prompt,
+//   cancel,
+//   confirmation,
+//   remove,
+//   activeTab,
+//   updateActiveTabInput,
+// };
+
+defineExpose({
+  confirmText,
+  cancelText,
+  removeText,
+  message,
+  file,
+  url,
+  edit,
+  prompt,
+  cancel,
+  confirmation,
+  remove,
+  activeTab,
+  updateActiveTabInput,
+});
+
 </script>
 
 <style scoped>
diff --git a/frontend/src/inputDialog.js b/frontend/src/inputDialog.js
deleted file mode 100644
index c0c5fa55..00000000
--- a/frontend/src/inputDialog.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import {reactive} from 'vue';
-
-const state = reactive({
-  tabs: [],
-  active: false,
-  activeTabName: '',
-  confirmText: 'Ok',
-  cancelText: 'Cancel',
-  deleteText: '',
-  message: '',
-});
-
-// -----------------------------------
-// Private Methods
-// -----------------------------------
-let close;
-
-const dialogPromise = () => new Promise((resolve) => (close = resolve));
-
-const open = () => {
-  state.active = true;
-  return dialogPromise();
-};
-
-const reset = () => {
-  state.tabs.splice(0),
-  state.active = false;
-  state.activeTabName = '';
-  state.confirmText = 'Ok';
-  state.cancelText = 'Cancel';
-  state.deleteText = '';
-  state.message = '';
-};
-
-// -----------------------------------
-// Public interface
-// -----------------------------------
-
-export default {
-  get state() {
-    return state;
-  },
-  confirmText(text) {
-    state.confirmText = text;
-    return this;
-  },
-  cancelText(text) {
-    state.cancelText = text;
-    return this;
-  },
-  deleteText(text) {
-    state.deleteText = text;
-    return this;
-  },
-  message(text) {
-    state.message = text;
-    return this;
-  },
-  file(includeComments=false, includeIcon='file', fileTypesAccept='.json') {
-    const fileInput = {
-      name: 'input-dialog-upload-file',
-      icon: includeIcon,
-      input: {
-        data: '',
-        ...(includeComments) && {comments: ''},
-        type: 'file',
-      },
-      props: {
-        fileTypeAccept: fileTypesAccept,
-      },
-    };
-
-    state.tabs.push(fileInput);
-    state.activeTabName = fileInput.name;
-    return this;
-  },
-  url(includeComments=false, includeName=false) {
-    const attachUrlInput = {
-      name: 'input-dialog-attach-url',
-      icon: 'link',
-      input: {
-        ...(includeName) && {name: ''},
-        data: '',
-        ...(includeComments) && {comments: ''},
-        type: 'link',
-      },
-      props: {
-      },
-    };
-    state.tabs.push(attachUrlInput);
-    state.activeTabName = attachUrlInput.name;
-    return this;
-  },
-  edit(attachmentInput) {
-    const attachUrlInput = {
-      name: attachmentInput.type == 'link' ? 'input-dialog-attach-url' : 'input-dialog-upload-file',
-      icon: attachmentInput.type == 'link' ? 'link' : 'file',
-      input: {
-        ...attachmentInput,
-        data: attachmentInput.type == 'file' ? {name: attachmentInput.name} : attachmentInput.data,
-      },
-    };
-    state.tabs.push(attachUrlInput);
-    state.activeTabName = attachUrlInput.name;
-    return this;
-  },
-  prompt() {
-    if (0 == state.tabs.length) {
-      throw Error('InputDialog requires either a file or url to be configured for render');
-    }
-    return open();
-  },
-  cancel() {
-    close(false);
-    reset();
-  },
-  confirmation(userInput) {
-    close(userInput);
-    reset();
-  },
-  delete() {
-    close('DELETE');
-    reset();
-  },
-  activeTab() {
-    if ('' == state.activeTabName) {
-      return undefined;
-    }
-    return state.tabs.find((tab) => tab.name === state.activeTabName);
-  },
-  updateActiveTabInput(updatedUserInput) {
-    const tab = state.tabs.find((tab) => tab.name === state.activeTabName);
-    tab.input = updatedUserInput;
-  },
-};
-
diff --git a/frontend/src/views/AnalysisListingView.vue b/frontend/src/views/AnalysisListingView.vue
index e410a699..c05a98d4 100644
--- a/frontend/src/views/AnalysisListingView.vue
+++ b/frontend/src/views/AnalysisListingView.vue
@@ -26,14 +26,14 @@
     />
   </app-content>
   <app-footer>
-    <InputDialog data-test="phenotips-import-dialog"/>
+    <InputDialog ref="input-dialog" data-test="phenotips-import-dialog"/>
     <NotificationDialog data-test="notification-dialog" />
-    <AnalysisListingLegend @filtered-changed="filteredUpdated"/>
+    <AnalysisListingLegend @filter-changed="filteredChanged.value = $event"/>
   </app-footer>
 </div>
 </template>
 
-<script>
+<script setup>
 import Analyses from '@/models/analyses.js';
 import AnalysisCard from '@/components/AnalysisListing/AnalysisCard.vue';
 import AnalysisCreateCard from '@/components/AnalysisListing/AnalysisCreateCard.vue';
@@ -43,110 +43,113 @@ import AnalysisListingLegend from '@/components/AnalysisListing/AnalysisListingL
 import InputDialog from '@/components/Dialogs/InputDialog.vue';
 import NotificationDialog from '@/components/Dialogs/NotificationDialog.vue';
 
-import inputDialog from '@/inputDialog.js';
 import notificationDialog from '@/notificationDialog.js';
 
 import {authStore} from '@/stores/authStore.js';
 
-export default {
-  name: 'analysis-listing-view',
-  components: {
-    AnalysisCard,
-    AnalysisCreateCard,
-    AnalysisListingHeader,
-    AnalysisListingLegend,
-    InputDialog,
-    NotificationDialog,
-  },
-  data: function() {
-    return {
-      auth: authStore,
-      searchText: '',
-      analysisList: [],
-      filteredChanged: [],
-    };
-  },
-  computed: {
-    filteredAnalysisListing() {
-      return this.analysisList.filter((analysis) => {
-        return this.filteredChanged.length === 0 ||
-          this.filteredChanged.includes(analysis.latest_status);
-      });
-    },
-    searchedAnalysisListing() {
-      const lowerCaseSearchText = this.searchText.toLowerCase();
-
-      return this.searchText === '' ? this.filteredAnalysisListing : this.filteredAnalysisListing.filter((analysis) => {
-        return [analysis.name,
-          analysis.created_date,
-          analysis.last_modified_date,
-          analysis.nominated_by,
-        ].some((content) => content.toLowerCase().includes(lowerCaseSearchText)) ||
-          analysis.genomic_units.some((unit) => {
-            return (unit.gene && unit.gene.toLowerCase().includes(lowerCaseSearchText)) ||
-              (unit.transcripts &&
-                unit.transcripts.some((transcript) => transcript.toLowerCase().includes(lowerCaseSearchText))) ||
-              (unit.variants && unit.variants.some((variant) => variant.toLowerCase().includes(lowerCaseSearchText)));
-          });
+import {useRouter} from 'vue-router';
+
+
+const router = useRouter();
+
+const searchText = ref('');
+const analysisList = ref([])
+const filteredChanged = ref([])
+
+const inputDialogRef = useTemplateRef('input-dialog');
+let inputDialog = {}
+
+const username = computed(() => {
+  return authStore.getUsername();
+});
+
+const hasWritePermissions = computed(() => {
+  return authStore.hasWritePermissions();
+});
+
+const filteredAnalysisListing = computed(() => {
+  return analysisList.filter((analysis) => {
+    return filteredChanged.length === 0 ||
+      filteredChanged.includes(analysis.latest_status);
+  })
+})
+
+const searchedAnalysisListing = computed( ()=> {
+  const lowerCaseSearchText = searchText.toLowerCase();
+
+  return searchText === '' ? filteredAnalysisListing : filteredAnalysisListing.filter((analysis) => {
+    return [analysis.name,
+      analysis.created_date,
+      analysis.last_modified_date,
+      analysis.nominated_by,
+    ].some((content) => content.toLowerCase().includes(lowerCaseSearchText)) ||
+      analysis.genomic_units.some((unit) => {
+        return (unit.gene && unit.gene.toLowerCase().includes(lowerCaseSearchText)) ||
+          (unit.transcripts &&
+            unit.transcripts.some((transcript) => transcript.toLowerCase().includes(lowerCaseSearchText))) ||
+          (unit.variants && unit.variants.some((variant) => variant.toLowerCase().includes(lowerCaseSearchText)));
       });
-    },
-  },
-  created() {
-    this.getListing();
-  },
-  methods: {
-    filteredUpdated(filteredChanged) {
-      this.filteredChanged = filteredChanged;
-    },
-    async getListing() {
-      this.analysisList.length = 0;
-      const analyses = await Analyses.all();
-
-      // TODO: Handle Unauthorized error
-      // Right now this is how we're handling unauthorization errors
-      // There needs to be a proper way to manage these errors, otherwise each function will
-      // have their own error message
-      if (analyses.error) {
-        console.warn('Cannot retrieve Analyses. User is not authorized or token is expired.');
-        return;
-      }
-
-      this.analysisList.push(...analyses);
-    },
-    async importPhenotipsAnalysis() {
-      const includeComments = false;
-      const includeIcon = 'phenotips';
-
-      const importFile = await inputDialog
-          .confirmText('Upload')
-          .cancelText('Cancel')
-          .message(`Rosalution is <span style="color: var(--rosalution-red-200)">not authorized to store any
-             Protected Health Information (PHI).</span> Double check the *.json files before importing them to create
-             a new analysis.`)
-          .file(includeComments, includeIcon)
-          .prompt('Temp for file upload');
-
-      if (!importFile) {
-        return;
-      }
-
-      try {
-        await Analyses.importPhenotipsAnalysis(importFile.data);
-        await notificationDialog
-            .title('Successful import')
-            .alert('');
-        await this.getListing();
-      } catch (error) {
-        await notificationDialog
-            .title('Failed to import phenotips analysis')
-            .alert(error);
-      }
-    },
-    async onLogout() {
-      this.$router.push({name: 'logout'});
-    },
-  },
-};
+  });
+});
+
+
+async function importPhenotipsAnalysis() {
+  const includeComments = false;
+  const includeIcon = 'phenotips';
+
+  const importFile = await inputDialog
+      .confirmText('Upload')
+      .cancelText('Cancel')
+      .message(`Rosalution is <span style="color: var(--rosalution-red-200)">not authorized to store any
+          Protected Health Information (PHI).</span> Double check the *.json files before importing them to create
+          a new analysis.`)
+      .file(includeComments, includeIcon)
+      .prompt('Temp for file upload');
+
+  if (!importFile) {
+    return;
+  }
+
+  try {
+    await Analyses.importPhenotipsAnalysis(importFile.data);
+    await notificationDialog
+        .title('Successful import')
+        .alert('');
+    await getListing();
+  } catch (error) {
+    await notificationDialog
+        .title('Failed to import phenotips analysis')
+        .alert(error);
+  }
+}
+
+async onLogout() {
+  router.push({name: 'logout'});
+}
+
+async function getListing() {
+  analysisList.length = 0;
+  const analyses = await Analyses.all();
+
+  // TODO: Handle Unauthorized error
+  // Right now this is how we're handling unauthorization errors
+  // There needs to be a proper way to manage these errors, otherwise each function will
+  // have their own error message
+  if (analyses.error) {
+    console.warn('Cannot retrieve Analyses. User is not authorized or token is expired.');
+    return;
+  }
+
+  analysisList.push(...analyses);
+},
+
+/**
+ * When view is mounted, queries the analysis' state.
+ */
+onMounted(async () => {
+  await getListing()
+  inputDialog = inputDialogRef.value;
+});
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/AnalysisView.vue b/frontend/src/views/AnalysisView.vue
index 016152d0..e5ad2c7b 100644
--- a/frontend/src/views/AnalysisView.vue
+++ b/frontend/src/views/AnalysisView.vue
@@ -57,7 +57,7 @@
         @edit="editSupportingEvidence"
         @download="downloadSupportingEvidence"
       />
-      <InputDialog />
+      <InputDialog ref="input-dialog"/>
       <NotificationDialog data-test="notification-dialog" />
       <SaveModal
         class="save-modal"
@@ -82,7 +82,6 @@ import SupplementalFormList from '@/components/AnalysisView/SupplementalFormList
 import SaveModal from '@/components/AnalysisView/SaveModal.vue';
 import DiscussionSection from '@/components/AnalysisView/DiscussionSection.vue';
 
-import inputDialog from '@/inputDialog.js';
 import notificationDialog from '@/notificationDialog.js';
 
 import {authStore} from '@/stores/authStore.js';
@@ -102,7 +101,9 @@ const props = defineProps({
 const edit = ref(false);
 
 const toastRef = useTemplateRef('rosalution-toast');
+const inputDialogRef = useTemplateRef('input-dialog');
 let toast = {};
+let inputDialog = {}
 
 const analysisName = computed(() => {
   return analysisStore.analysisName();
@@ -244,7 +245,6 @@ async function attachSectionImage(sectionName, field) {
 
   const attachment = await inputDialog
       .confirmText('Attach')
-      .cancelText('Cancel')
       .file(includeComments, 'file', '.png, .jpg, .jpeg, .bmp')
       .prompt();
 
@@ -595,6 +595,7 @@ function copyToClipboard(copiedText) {
 onMounted(async () => {
   await analysisStore.getAnalysis(props.analysis_name);
   toast = toastRef.value;
+  inputDialog = inputDialogRef.value;
 });
 </script>
 
diff --git a/frontend/test/components/Dialogs/InputDialog.spec.js b/frontend/test/components/Dialogs/InputDialog.spec.js
index 7e3e1bfe..1f00ec35 100644
--- a/frontend/test/components/Dialogs/InputDialog.spec.js
+++ b/frontend/test/components/Dialogs/InputDialog.spec.js
@@ -1,16 +1,15 @@
 import {it, expect, describe, beforeEach} from 'vitest';
-import {shallowMount} from '@vue/test-utils';
+import {shallowMount, mount} from '@vue/test-utils';
 
 import InputDialog from '@/components/Dialogs/InputDialog.vue';
 import InputDialogAttachUrl from '@/components/Dialogs/InputDialogAttachUrl.vue';
 import InputDialogUploadFile from '@/components/Dialogs/InputDialogUploadFile.vue';
 
-import inputDialog from '@/inputDialog.js';
-
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
 describe('InputDialog.vue', () => {
   let wrapper;
+  let inputDialog;
 
   beforeEach(() => {
     wrapper = shallowMount(InputDialog, {
@@ -20,6 +19,8 @@ describe('InputDialog.vue', () => {
         },
       },
     });
+
+    inputDialog = wrapper.vm;
   });
 
   describe('when prompting to input a URL and File', () => {
@@ -65,15 +66,26 @@ describe('InputDialog.vue', () => {
     });
 
     it('Should show the attach url tab when clicking on the link tab', async () => {
+      console.log(wrapper.html());
       await wrapper.find('[data-test=button-input-dialog-attach-url]').trigger('click');
-      const attachUrlComponent = wrapper.findComponent(InputDialogAttachUrl);
+      console.log(wrapper.html());
+
+      const attachUrlComponent = wrapper.find('[data-test=input-dialog-attach-url]');
       expect(attachUrlComponent.exists()).to.be.true;
     });
 
-    it('Should show the upload file tab when clicking the file tab', async () => {
+    it.only('Should show the upload file tab when clicking the file tab', async () => {
+      // console.log(wrapper.html());
+      // console.log(wrapper.find('[data-test=button-input-dialog-upload-file]').html());
+      // expect(wrapper.vm.state.activeTabName).to.equal('expectedTabName');
+
+      console.log("Unit Test-About to click to switch")
       await wrapper.find('[data-test=button-input-dialog-upload-file]').trigger('click');
-      const uploadFileComponent = wrapper.findComponent(InputDialogUploadFile);
-      expect(uploadFileComponent.exists()).to.be.true;
+      console.log("Unit Test-clicked to switch complete")
+
+      // await wrapper.vm.$nextTick();
+      const uploadFileComponent = wrapper.find('[data-test=input-dialog-attach-file]');
+      console.log(uploadFileComponent.html());
     });
 
     it('Should show the warning message when one is set', async () => {
diff --git a/frontend/test/components/Dialogs/RosalutionToast.spec.js b/frontend/test/components/Dialogs/RosalutionToast.spec.js
index ffe52d39..025d5708 100644
--- a/frontend/test/components/Dialogs/RosalutionToast.spec.js
+++ b/frontend/test/components/Dialogs/RosalutionToast.spec.js
@@ -1,6 +1,5 @@
-import {it, expect, describe, beforeEach, beforeAll, afterEach} from 'vitest';
+import {it, expect, describe, beforeEach} from 'vitest';
 import {shallowMount} from '@vue/test-utils';
-import sinon from 'sinon';
 
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
@@ -8,13 +7,8 @@ import RosalutionToast from '@/components/Dialogs/RosalutionToast.vue';
 
 describe('Toast.vue', () => {
   let wrapper;
-  let sandbox;
   let toast;
 
-  beforeAll(() => {
-    sandbox = sinon.createSandbox();
-  });
-
   beforeEach(() => {
     wrapper = shallowMount(RosalutionToast, {
       global: {
@@ -29,10 +23,6 @@ describe('Toast.vue', () => {
     toast = wrapper.vm;
   });
 
-  afterEach(() => {
-    sandbox.resetHistory();
-  });
-
   it('should render the info title for info type messages', async () => {
     toast.info();
     await wrapper.vm.$nextTick();