Unit tests are consolidated and streamlined for components. Still wip…

… due to now deciding how to layout inside the individual components
uab-cgds-worthey · Feb 10, 2025 · 91fd725 · 91fd725
1 parent 235ac92
commit 91fd725
Show file tree

Hide file tree

Showing 19 changed files with 191 additions and 134 deletions.
diff --git a/frontend/src/components/AnnotationView/AllianceGenomeCard.vue b/frontend/src/components/AnnotationView/AllianceGenomeCard.vue
@@ -189,7 +189,7 @@ export default {
     },
     determineSectionTextColor(section) {
       // Added this check due to section being undefined at times even though it is expected to exist.
-      if(section === undefined || section=== null) {
+      if (section === undefined || section=== null) {
         return 'color: black';
       }
 

diff --git a/frontend/src/components/AnnotationView/DatasetLabel.vue b/frontend/src/components/AnnotationView/DatasetLabel.vue
@@ -7,7 +7,8 @@
 </template>
 
 <script setup>
-import {isDatasetAvailable} from '@/components/AnnotationView/datasetRenderingUtility.js'
+import {isDatasetAvailable} from '@/components/AnnotationView/datasetRenderingUtility.js';
+
 const props = defineProps({
   label: {
     type: String,
@@ -20,6 +21,6 @@ const props = defineProps({
 });
 
 const isAvailable = isDatasetAvailable(props.datasetValue);
-const dataAvailabilityColour =  isAvailable ? "black" : ".dataset-label-unavailable"
+const dataAvailabilityColour =  isAvailable ? 'black' : 'var(--annotation-dataset-unavailable)';
 
 </script>
diff --git a/frontend/src/components/AnnotationView/IconLinkoutDataset.vue b/frontend/src/components/AnnotationView/IconLinkoutDataset.vue
@@ -6,19 +6,19 @@
 
 <script setup>
 const props = defineProps({
-    value: {
-      type: String,
-    },
-    altText: {
-      type: String,
-      required: true,
-    },
-    imageFilename: {
-      type: String,
-      required: true,
-    },
-  });
+  value: {
+    type: String,
+  },
+  altText: {
+    type: String,
+    required: true,
+  },
+  imageFilename: {
+    type: String,
+    required: true,
+  },
+});
 
-  const linkoutStyle = (typeof(props.value) == 'undefined') ? { opacity: 0.25 } : { opacity: 1 };
-  const likoutImageSrc = new URL(`/src/assets/${props.imageFilename}`, import.meta.url);
+const linkoutStyle = (typeof(props.value) == 'undefined') ? {opacity: 0.25} : {opacity: 1};
+const likoutImageSrc = new URL(`/src/assets/${props.imageFilename}`, import.meta.url);
 </script>
diff --git a/frontend/src/components/AnnotationView/ScoreDataset.vue b/frontend/src/components/AnnotationView/ScoreDataset.vue
@@ -1,4 +1,4 @@
-<template>           
+<template>
   <div class="dataset-container">
     <DatasetLabel :label="label" :datasetValue="value"></DatasetLabel>
     <span>
@@ -32,27 +32,27 @@
 
 import DatasetLabel from '@/components/AnnotationView/DatasetLabel.vue';
 
-import {isDatasetAvailable} from '@/components/AnnotationView/datasetRenderingUtility.js'
+import {isDatasetAvailable} from '@/components/AnnotationView/datasetRenderingUtility.js';
 
 const props = defineProps({
   label: {
-      type: String,
-    },
-    value: {
-      type: [Number, String],
-    },
-    minimum: {
-      type: Number,
-    },
-    maximum: {
-      type: Number,
-    },
-    bounds: {
-      type: Object,
-    },
-    cutoff: {
-      type: Number,
-    },
+    type: String,
+  },
+  value: {
+    type: [Number, String],
+  },
+  minimum: {
+    type: Number,
+  },
+  maximum: {
+    type: Number,
+  },
+  bounds: {
+    type: Object,
+  },
+  cutoff: {
+    type: Number,
+  },
 });
 
 const styles =  {
@@ -83,7 +83,7 @@ const styles =  {
 };
 
 const scoreFillValue = (parseFloat(Math.abs(props.minimum) + props.value) /
-                      (Math.abs(props.minimum) + Math.abs(props.maximum)))
+                      (Math.abs(props.minimum) + Math.abs(props.maximum)));
 
 const scoreFillWidthPercentage = Math.floor(Math.abs(scoreFillValue) * 100) + '%';
 

diff --git a/frontend/src/components/AnnotationView/SetDataset.vue b/frontend/src/components/AnnotationView/SetDataset.vue
@@ -14,14 +14,14 @@
             {{ classificationText(item) }}
           </span>
         </span>
-      </span>
+    </span>
   </div>
 </template>
 
 <script setup>
 import DatasetLabel from '@/components/AnnotationView/DatasetLabel.vue';
 
-import {isDatasetAvailable} from '@/components/AnnotationView/datasetRenderingUtility.js'
+import {isDatasetAvailable} from '@/components/AnnotationView/datasetRenderingUtility.js';
 
 const props = defineProps({
   label: {
@@ -40,7 +40,7 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-})
+});
 
 const availableData = isDatasetAvailable(props.value);
 

diff --git a/frontend/src/components/AnnotationView/TagDataset.vue b/frontend/src/components/AnnotationView/TagDataset.vue
@@ -13,23 +13,23 @@ import DatasetLabel from '@/components/AnnotationView/DatasetLabel.vue';
 const props = defineProps({
   label: {
     type: String,
-    required: false
+    required: false,
   },
   linkout: {
     type: String,
     required: false,
   },
   value: {
     type: [String, Array],
-    default: ""
+    default: '',
   },
   delimeter: {
     type: String,
     default: ';   ',
   },
 });
 
-const content = (typeof(props.value) == 'object') ?  props.value : props.value.join(props.delimeter)
+const content = (typeof(props.value) == 'object') ?  props.value : props.value.split(props.delimeter);
 </script>
 
 
diff --git a/frontend/src/components/AnnotationView/TextDataset.vue b/frontend/src/components/AnnotationView/TextDataset.vue
@@ -6,21 +6,21 @@
 </template>
 
 <script setup>
-import {ref} from 'vue'
+import {ref} from 'vue';
 import DatasetLabel from '@/components/AnnotationView/DatasetLabel.vue';
 
 const props = defineProps({
   label: {
     type: String,
-    required: false
+    required: false,
   },
   linkout: {
     type: String,
     required: false,
   },
   value: {
     type: [String, Array],
-    default: "",
+    default: '',
   },
   delimeter: {
     type: String,
@@ -29,15 +29,14 @@ const props = defineProps({
 });
 
 function calculateContent() {
-  if(props.value == null || props.value == undefined) {
-
-    console.log(`Dataset ${props.label} not defined`)
-    return ""
+  if (props.value == null || props.value == undefined) {
+    console.log(`Dataset ${props.label} not defined`);
+    return '';
   }
 
-  return ( typeof(props.value) == 'object')?props.value.join(props.delimeter) : props.value
+  return ( typeof(props.value) == 'object')?props.value.join(props.delimeter) : props.value;
 }
 
-const content = ref(calculateContent())
+const content = ref(calculateContent());
 
 </script>
diff --git a/frontend/src/components/AnnotationView/TextHighlightDataset.vue b/frontend/src/components/AnnotationView/TextHighlightDataset.vue
@@ -11,15 +11,15 @@ import DatasetLabel from '@/components/AnnotationView/DatasetLabel.vue';
 
 const props = defineProps({
   label: {
-      type: String,
-    },
-    value: {
-      type: String,
-    },
-    highlight: {
-      type: Object,
-      required: true,
-    },
+    type: String,
+  },
+  value: {
+    type: String,
+  },
+  highlight: {
+    type: Object,
+    required: true,
+  },
 });
 
 function calculateHighlightStyle() {
@@ -43,6 +43,6 @@ function calculateHighlightStyle() {
   }
   return style;
 }
-const highlightStyle = calculateHighlightStyle()
+const highlightStyle = calculateHighlightStyle();
 
 </script>
diff --git a/frontend/src/components/AnnotationView/TranscriptDatasets.vue b/frontend/src/components/AnnotationView/TranscriptDatasets.vue
@@ -2,7 +2,9 @@
 <div class="dataset-container">
   <div v-for="transcript in value" :key="transcript.transcript_id" class="transcript-container">
     <div class="transcript-header">
-      <span class="transcript-header-text"> {{transcript['transcript_id'] || 'RefSeq Transcript ID Unavailable'}} </span>
+      <span class="transcript-header-text">
+        {{transcript['transcript_id'] || 'RefSeq Transcript ID Unavailable'}}
+      </span>
       <TextHighlightDataset
         label="Impact"
         :value="transcript['Impact']"
@@ -38,12 +40,11 @@ import TextDataset from '@/components/AnnotationView/TextDataset.vue';
 import TextHighlightDataset from '@/components/AnnotationView/TextHighlightDataset.vue';
 
 defineProps({
-    value: {
-      type: [Array],
-    },
+  value: {
+    type: [Array],
+  },
 });
 
-
 const impactConfiguration = {
   'MODERATE': 'Yellow',
   'MODIFIER': 'Green',

diff --git a/frontend/src/components/AnnotationView/datasetRenderingUtility.js b/frontend/src/components/AnnotationView/datasetRenderingUtility.js
@@ -1,3 +1,9 @@
 export function isDatasetAvailable(datasetValue) {
-  return datasetValue == '.' || datasetValue == 'null' || datasetValue == null;
-}
+  return !(
+    datasetValue == undefined ||
+    datasetValue == '.' ||
+    datasetValue == 'null' ||
+    datasetValue == null ||
+    datasetValue == ""
+  );
+}
diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -92,7 +92,6 @@ router.beforeEach(async (to) => {
 });
 
 const app = createApp(App);
-app.config.performance = true
 
 app.use(router);
 app.component('font-awesome-icon', FontAwesomeIcon);

diff --git a/frontend/src/styles/annotations.css b/frontend/src/styles/annotations.css
@@ -1,4 +1,7 @@
 /** transcript dataset-container padding: var(--p-0); **/
+html {
+  --annotation-dataset-unavailable: var(--rosalution-grey-100);
+}
 
 .dataset-container {
   /* display: flex; */

diff --git a/frontend/src/views/AnnotationView.vue b/frontend/src/views/AnnotationView.vue
@@ -124,7 +124,7 @@ export default {
   },
   computed: {
     renderReady() {
-      return !( Object.keys(this.annotations).length === 0 || this.rendering.length === 0 )
+      return !( Object.keys(this.annotations).length === 0 || this.rendering.length === 0 );
     },
     sectionAnchors() {
       return this.rendering.map((section) => {

diff --git a/frontend/test/components/AnnotationView/ClinvarDataset.spec.js b/frontend/test/components/AnnotationView/ClinvarDataset.spec.js
@@ -2,6 +2,7 @@ import {expect, describe, it} from 'vitest';
 import {shallowMount} from '@vue/test-utils';
 
 import ClinvarDataset from '@/components/AnnotationView/ClinvarDataset.vue';
+import DatasetLabel from '@/components/AnnotationView/DatasetLabel.vue';
 
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
@@ -32,18 +33,7 @@ describe('ClinVarDataset.vue', () => {
   it('renders the label as expected', () => {
     wrapper = getMountedComponent();
 
-    const textWrapper = wrapper.find('[data-test=text-label]');
-
-    expect(textWrapper.html()).to.contains('ClinVar');
-  });
-
-  it('renders the label as expected', () => {
-    wrapper = getMountedComponent();
-
-    const labelLinkout = wrapper.find('a');
-
-    expect(labelLinkout.html()).to.contains('ClinVar');
-    expect(labelLinkout.attributes('href')).to.equal('https://sites.uab.edu/cgds/');
-    expect(labelLinkout.attributes('target')).to.equal('_blank');
+    const labelWrapper = wrapper.findComponent(DatasetLabel);
+    expect(labelWrapper.props('label')).to.equal('ClinVar');
   });
 });