Merge pull request #2132 from sanger/y24-521-fix-for-uploaded-files-n…

…ot-displayed-in-file-tab

fix(file-list): Fix for uploaded files not displayed in file tab

app/frontend/javascript/file-list/components/FileList.spec.js

@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils'
+import FileList from './FileList.vue'
+
+describe('FileList.vue', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(FileList, {
+      data() {
+        return {
+          qc_files: [],
+          loading: true,
+        }
+      },
+    })
+  })
+
+  it('renders loading spinner when loading is true', () => {
+    expect(wrapper.find('.spinner-dark').exists()).toBe(true)
+  })
+
+  it('does not render loading spinner when loading is false', async () => {
+    await wrapper.setData({ loading: false })
+    expect(wrapper.find('.spinner-dark').exists()).toBe(false)
+  })
+
+  it('renders "No files attached" when noFiles is true', async () => {
+    await wrapper.setData({ loading: false, qc_files: [] })
+    expect(wrapper.find('.list-group-item').text()).toBe('No files attached')
+  })
+
+  it('renders qc_files when they are present', async () => {
+    const mockFiles = [
+      { uuid: '1', filename: 'file1.txt', created: '2023-01-01' },
+      { uuid: '2', filename: 'file2.txt', created: '2023-01-02' },
+    ]
+    await wrapper.setData({ loading: false, qc_files: mockFiles })
+    const fileLinks = wrapper.findAll('.list-group-item')
+    expect(fileLinks.length).toBe(2)
+    expect(fileLinks.at(0).text()).toBe('file1.txt - 2023-01-01')
+    expect(fileLinks.at(1).text()).toBe('file2.txt - 2023-01-02')
+  })
+
+  it('computed noFiles returns true when qc_files is empty and loading is false', async () => {
+    await wrapper.setData({ loading: false, qc_files: [] })
+    expect(wrapper.vm.noFiles).toBe(true)
+  })
+
+  it('computed noFiles returns false when qc_files is not empty', async () => {
+    await wrapper.setData({ loading: false, qc_files: [{ uuid: '1', filename: 'file1.txt', created: '2023-01-01' }] })
+    expect(wrapper.vm.noFiles).toBe(false)
+  })
+
+  it('calls fetchData on mount', () => {
+    const fetchDataSpy = vi.spyOn(FileList.methods, 'fetchData')
+    mount(FileList)
+    expect(fetchDataSpy).toHaveBeenCalled()
+  })
+})

app/frontend/javascript/file-list/components/FileList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="list-group list-group-flush" @click="handleClick">
+  <div class="list-group list-group-flush">
     <div v-if="loading" class="spinner-dark">Updating...</div>
     <a v-for="qc_file in qc_files" :key="qc_file.uuid" class="list-group-item" :href="'/qc_files/' + qc_file.uuid">
       {{ qc_file.filename }} - {{ qc_file.created }}
@@ -23,6 +23,9 @@ export default {
       return this.qc_files && this.qc_files.length === 0 && !this.loading
     },
   },
+  mounted() {
+    this.fetchData()
+  },
   methods: {
     fetchData: function () {
       let self = this
@@ -35,9 +38,6 @@ export default {
       }
       xhr.send()
     },
-    handleClick() {
-      this.fetchData()
-    },
   },
 }
 </script>

app/frontend/javascript/vue_app.js

@@ -102,7 +102,7 @@ const elements = [
     component: CustomTaggedPlate,
   },
   {
-    id: 'file-list',
+    id: 'files-list',
     component: FileList,
   },
   {