fix: hide output message while fetching annotation search results (#2519

)

* Visually hide output message while fetching

* Add and fix unit tests

packages/portal/src/components/media/MediaAnnotationSearch.vue

@@ -39,7 +39,7 @@
     <output
       form="media-annotation-search-form"
       class="px-3"
-      :class="{ 'visually-hidden': !noResults }"
+      :class="{ 'visually-hidden': !noResults || !annotationsFetched }"
     >
       {{ noResults ? $t('noResults') : $t('searchHasLoaded', [$n(annotationsCount)]) }}
     </output>
@@ -77,6 +77,7 @@
     data() {
       return {
         annotationsCount: null,
+        annotationsFetched: false,
         annoQuery: this.$route.query.fulltext || null,
         query: this.$route.query.fulltext || null
       };
@@ -96,6 +97,7 @@
 
     methods: {
       handleSubmitForm() {
+        this.annotationsFetched = false;
         this.$router.push({ ...this.$route, query: { ...this.$route.query, fulltext: this.query } });
       },
 
@@ -110,6 +112,7 @@
 
       handleAnnotationsFetched(annotationsLength) {
         this.annotationsCount = annotationsLength;
+        this.annotationsFetched = true;
       }
     }
   };

packages/portal/tests/unit/components/media/MediaAnnotationSearch.spec.js

@@ -1,9 +1,11 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
+import BootstrapVue from 'bootstrap-vue';
 import sinon from 'sinon';
 
 import MediaAnnotationSearch from '@/components/media/MediaAnnotationSearch.vue';
 
 const localVue = createLocalVue();
+localVue.use(BootstrapVue);
 const routerPushSpy = sinon.spy();
 const fulltext = 'something';
 
@@ -25,7 +27,7 @@ const factory = ({ data, propsData, mocks } = {}) => shallowMount(MediaAnnotatio
     ...mocks
   },
   localVue,
-  stubs: ['b-button', 'b-form', 'b-form-group', 'b-form-input', 'MediaAnnotationList']
+  stubs: ['MediaAnnotationList']
 });
 
 describe('components/media/MediaAnnotationSearch', () => {
@@ -68,15 +70,29 @@ describe('components/media/MediaAnnotationSearch', () => {
 
       expect(text).toBe('noResults');
     });
+  });
+
+  describe('on form submit', () => {
+    it('updates the route and resets the fetch state', async() => {
+      const query = 'euro';
+      const wrapper = factory({ data: { query } });
+
+      wrapper.find('#media-annotation-search-form').trigger('submit.prevent');
+      await wrapper.vm.$nextTick();
+
+      expect(routerPushSpy.calledWith({ query: { fulltext: 'euro' } })).toBe(true);
+      expect(wrapper.vm.annotationsFetched).toEqual(false);
+    });
+
+    it('hides the no results message while fetching new results', async() => {
+      const wrapper = factory({ data: { annoQuery: 'euro' } });
+      wrapper.vm.annotationsFetched = true;
 
-    // FIXME: submit.prevent trigger isn't working here (but does when rendered)
-    // it('updates the route when the form is submitted', async() => {
-    //   const wrapper = factory({ data: { query } });
-    //
-    //   wrapper.find('#media-annotation-search-form').trigger('submit.prevent');
-    //   await wrapper.vm.$nextTick();
-    //
-    //   expect(routerPushSpy.calledWith({ query: { query } })).toBe(true);
-    // });
+      wrapper.find('#media-annotation-search-form').trigger('submit.prevent');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.annotationsFetched).toEqual(false);
+      expect(wrapper.find('output.visually-hidden').exists()).toBe(true);
+    });
   });
 });