[FIX] Implemented logic to handle cases where no diagnosis/assessment…

… exist in the graph (#350) * Implemented logic for catching erros and handling cases with no options * Removed duplicate code * Updated `QueryForm` component test * Added tests for the new toasts * Added empty responses for the option retrieval requests * Modified `APIRequest` test cases' descriptions
neurobagel · Jan 7, 2024 · 2323de5 · 2323de5
1 parent 01d9792
commit 2323de5
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 34 deletions.
diff --git a/components/QueryForm.vue b/components/QueryForm.vue
@@ -100,11 +100,11 @@
           @update-categorical-field="updateField"
         />
         <div>
-            <hr>
-          </div>
-          <b-row>
-            <h5>Imaging fields</h5>
-          </b-row>
+          <hr>
+        </div>
+        <b-row>
+          <h5>Imaging fields</h5>
+        </b-row>
         <categorical-field
           name="Imaging modality"
           data-cy="modality-field"
@@ -168,14 +168,6 @@ export default {
       return url.endsWith('/') ? `${url}query/?` : `${url}/query/?`;
     },
   },
-  mounted() {
-    if (Object.keys(this.categoricalOptions.Diagnosis).length <= 1) {
-      this.displayToast('Failed to retrieve diagnosis options');
-    }
-    if (Object.keys(this.categoricalOptions['Assessment tool']).length <= 1) {
-      this.displayToast('Failed to retrieve assessment tool options');
-    }
-  },
   methods: {
     updateField(name, input) {
       switch (name) {

diff --git a/cypress/component/QueryForm.cy.js b/cypress/component/QueryForm.cy.js
@@ -195,16 +195,6 @@ describe('Query form', () => {
     cy.get('[data-cy=submit-query]').click();
     cy.wrap(getStub).should('have.been.calledWith', 'http://my.site.org/query/?');
   });
-  it('Displays a toast when diagnosis and assessment tool options are not retrieved', () => {
-    props.categoricalOptions.Diagnosis = { All: null };
-    props.categoricalOptions['Assessment tool'] = { All: null };
-    cy.mount(QueryForm, {
-      stubs,
-      propsData: props,
-    });
-    cy.contains('#b-toaster-top-right', 'Failed to retrieve diagnosis options');
-    cy.contains('#b-toaster-top-right', 'Failed to retrieve assessment tool options');
-  });
   it('Displays the healthy control tooltip', () => {
     cy.mount(QueryForm, {
       stubs,

diff --git a/cypress/e2e/APIRequest.cy.js b/cypress/e2e/APIRequest.cy.js
@@ -1,4 +1,4 @@
-import { mixedResponse } from '../fixtures/example-responses';
+import { mixedResponse, emptyDiagnosisOptions, emptyAssessmentToolOptions } from '../fixtures/example-responses';
 
 describe('API request', () => {
   it('Intercepts the request sent to the API and asserts over the request url', () => {
@@ -19,4 +19,34 @@ describe('API request', () => {
     cy.get('[data-cy="submit-query"]').click();
     cy.wait('@call').its('request.url').should('contains', '&min_age=10&max_age=30');
   });
+  it('Empty responses for diagnosis and Assessment make a toast appear', () => {
+    cy.intercept({
+      method: 'GET',
+      url: '/attributes/nb:Diagnosis',
+    }, emptyDiagnosisOptions).as('getDiagnosisOptions');
+    cy.intercept({
+      method: 'GET',
+      url: '/attributes/nb:Assessment',
+    }, emptyAssessmentToolOptions).as('getAssessmentToolOptions');
+    cy.visit('/');
+    cy.wait('@getDiagnosisOptions');
+    cy.contains('#b-toaster-top-right', 'No diagnosis options were available');
+    cy.wait('@getAssessmentToolOptions');
+    cy.contains('#b-toaster-top-right', 'No assessment tool options were available');
+  });
+  it('Failed responses for diagnosis and assessment make an error toast appear', () => {
+    cy.intercept({
+      method: 'GET',
+      url: '/attributes/nb:Diagnosis',
+    }, { statusCode: 500 }).as('getDiagnosisOptions');
+    cy.intercept({
+      method: 'GET',
+      url: '/attributes/nb:Assessment',
+    }, { statusCode: 500 }).as('getAssessmentToolOptions');
+    cy.visit('/');
+    cy.wait('@getDiagnosisOptions');
+    cy.contains('#b-toaster-top-right', 'Failed to retrieve diagnosis options');
+    cy.wait('@getAssessmentToolOptions');
+    cy.contains('#b-toaster-top-right', 'Failed to retrieve assessment tool options');
+  });
 });
diff --git a/cypress/fixtures/example-responses.js b/cypress/fixtures/example-responses.js
@@ -142,3 +142,11 @@ export const mixedResponse = [
   },
 
 ];
+
+export const emptyDiagnosisOptions = {
+  'nb:Diagnosis': [],
+};
+
+export const emptyAssessmentToolOptions = {
+  'nb:Assessment': [],
+};
diff --git a/pages/index.vue b/pages/index.vue
@@ -77,19 +77,39 @@ export default {
   async fetch() {
     const apiQueryURL = this.$config.apiQueryURL.endsWith('/') ? `${this.$config.apiQueryURL}` : `${this.$config.apiQueryURL}/`;
 
-    const diagnosisResponse = await this.$axios.get(`${apiQueryURL}attributes/nb:Diagnosis`);
-    const diagnosisOptions = diagnosisResponse.data['nb:Diagnosis'].reduce((tempArray, diagnosis) => ({
-      ...tempArray,
-      [diagnosis.Label]: diagnosis.TermURL,
-    }), {});
+    let diagnosisOptions = {};
+    try {
+      const diagnosisResponse = await this.$axios.get(`${apiQueryURL}attributes/nb:Diagnosis`);
+      if (diagnosisResponse.data['nb:Diagnosis'].length === 0) {
+        this.displayToast('No diagnosis options were available', 'Info', 'info');
+      } else {
+        diagnosisOptions = diagnosisResponse.data['nb:Diagnosis'].reduce((tempArray, diagnosis) => ({
+          ...tempArray,
+          [diagnosis.Label]: diagnosis.TermURL,
+        }), {});
+      }
+    } catch (err) {
+      this.displayToast('Failed to retrieve diagnosis options');
+    }
+
     diagnosisOptions.All = null;
     this.categoricalOptions.Diagnosis = diagnosisOptions;
 
-    const assessmentResponse = await this.$axios.get(`${apiQueryURL}attributes/nb:Assessment`);
-    const assessmentOptions = assessmentResponse.data['nb:Assessment'].reduce((tempArray, assessment) => ({
-      ...tempArray,
-      [assessment.Label]: assessment.TermURL,
-    }), {});
+    let assessmentOptions = {};
+    try {
+      const assessmentResponse = await this.$axios.get(`${apiQueryURL}attributes/nb:Assessment`);
+      if (assessmentResponse.data['nb:Assessment'].length === 0) {
+        this.displayToast('No assessment tool options were available', 'Info', 'info');
+      } else {
+        assessmentOptions = assessmentResponse.data['nb:Assessment']?.reduce((tempArray, assessment) => ({
+          ...tempArray,
+          [assessment.Label]: assessment.TermURL,
+        }), {});
+      }
+    } catch (err) {
+      this.displayToast('Failed to retrieve assessment tool options');
+    }
+
     assessmentOptions.All = null;
     this.categoricalOptions['Assessment tool'] = assessmentOptions;
 
@@ -188,6 +208,16 @@ export default {
     dismissAlert() {
       this.alertDismissed = true;
     },
+    displayToast(message, title = 'Error', variant = 'danger') {
+      this.$bvToast.toast(message, {
+        appendToast: true,
+        autoHideDelay: '5000',
+        noCloseButton: true,
+        solid: true,
+        title,
+        variant,
+      });
+    },
   },
 };
 </script>