Fix issue with file type displaying incorrectly in aggregate works wi…

…th multiple file types. Consolidates file type determination in one place. (#1651)

static/js/vue-cdr-access/src/components/listDisplay.vue

@@ -34,6 +34,7 @@ Renders search results in a list view display format
 <script>
     import thumbnail from '@/components/full_record/thumbnail.vue';
     import displayUtils from '../mixins/displayUtils';
+    import fileUtils from '../mixins/fileUtils';
     import permissionUtils from '../mixins/permissionUtils';
     import { format } from 'date-fns';
 
@@ -42,7 +43,7 @@ Renders search results in a list view display format
 
         components: {thumbnail},
 
-        mixins: [displayUtils, permissionUtils],
+        mixins: [displayUtils, fileUtils, permissionUtils],
 
         props: {
             recordList: {
@@ -92,35 +93,6 @@ Renders search results in a list view display format
                 return '';
             },
 
-            /**
-             * @param record
-             * @returns {string} File Type value for a work or file object. Will return the descriptive
-             *      form of the file type if available, and fall back to the mimetype if not
-             */
-            getFileType(record) {
-                let fileType = this.determineFileType(record.fileDesc);
-                if (!fileType) {
-                    fileType = this.determineFileType(record.fileType);
-                }
-                return fileType || '';
-            },
-
-            /**
-             * Determines which filetype should be shown
-             * For multiple filetypes it de-dupes the array and if only one value show that, otherwise show 'Various'
-             * @param fileTypes
-             * @returns {string|*|undefined}
-             */
-            determineFileType(fileTypes) {
-                if (fileTypes && fileTypes.length === 1) {
-                    return fileTypes[0];
-                } else if (fileTypes && fileTypes.length > 1) {
-                    return ([...new Set(fileTypes)].length === 1) ? fileTypes[0] : 'Various';
-                } else {
-                    return undefined;
-                }
-            },
-
             showCollection(record) {
                 return record.type !== 'AdminUnit' && record.type !== 'Collection' &&
                     record.objectPath[2].collectionId !== null;

static/js/vue-cdr-access/src/mixins/fileUtils.js

@@ -15,21 +15,35 @@ export default {
             return '';
         },
 
+        /**
+         * @param record
+         * @returns {string} File Type value for a work or file object. Will return the descriptive
+         *      form of the file type if available, and fall back to the mimetype if not
+         */
         getFileType(record) {
-            let fileTypes = record.fileDesc;
-            let fileType;
-            if (fileTypes && fileTypes.length > 0) {
-                fileType = fileTypes[0];
-            }
+            let fileType = this.determineFileType(record.fileDesc);
             if (!fileType) {
-                fileTypes = record.fileType;
-                if (fileTypes && fileTypes.length > 0) {
-                    fileType = fileTypes[0];
-                }
+                fileType = this.determineFileType(record.fileType);
             }
             return fileType || '';
         },
 
+        /**
+         * Determines which filetype should be shown
+         * For multiple filetypes it de-dupes the array and if only one value show that, otherwise show 'Various'
+         * @param fileTypes
+         * @returns {string|*|undefined}
+         */
+        determineFileType(fileTypes) {
+            if (fileTypes && fileTypes.length === 1) {
+                return fileTypes[0];
+            } else if (fileTypes && fileTypes.length > 1) {
+                return ([...new Set(fileTypes)].length === 1) ? fileTypes[0] : 'Various';
+            } else {
+                return undefined;
+            }
+        },
+
         formatFilesize(bytes) {
             const fileBytes = parseInt(bytes);
             if (isNaN(fileBytes) || fileBytes === 0) {

static/js/vue-cdr-access/tests/fixtures/recordListFixture.js

@@ -0,0 +1,110 @@
+export const records_list = [
+    {
+        "added": "2019-10-31T18:11:02.238Z",
+        "counts": {
+            "child": 0
+        },
+        "title": "boingo",
+        "type": "Folder",
+        "contentStatus": [
+            "Not Described"
+        ],
+        "rollup": "87e49168-551b-4127-8252-9d13ed8abe24",
+        "objectPath": [
+            {
+                "pid": "collections",
+                "name": "Content Collections Root",
+                "container": true
+            },
+            {
+                "pid": "0410e5c1-a036-4b7c-8d7d-63bfda2d6a36",
+                "name": "testAdminUnit",
+                "container": true
+            },
+            {
+                "pid": "d77fd8c9-744b-42ab-8e20-5ad9bdf8194e",
+                "name": "testCollection",
+                "container": true
+            },
+            {
+                "pid": "87e49168-551b-4127-8252-9d13ed8abe24",
+                "name": "boingo",
+                "container": true,
+                "collectionId": null
+            }
+        ],
+        "id": "87e49168-551b-4127-8252-9d13ed8abe24",
+        "updated": "2019-10-31T18:22:41.858Z",
+        "timestamp": 1572621100487
+    },
+    {
+        "added": "2019-07-29T19:50:43.588Z",
+        "counts": {
+            "child": 0
+        },
+        "thumbnail_url": "https:\/\/localhost:8080\/services\/api\/thumb\/aaa66f91-4870-4937-b7ba-06b015959e4f\/large",
+        "title": "Imagy",
+        "type": "Work",
+        "contentStatus": [
+            "Described",
+            "Has Primary Object"
+        ],
+        "rollup": "e3931f0d-a32f-4b84-b6a4-4baf0ca9b576",
+        "objectPath": [
+            {
+                "pid": "collections",
+                "name": "Content Collections Root",
+                "container": true
+            },
+            {
+                "pid": "0410e5c1-a036-4b7c-8d7d-63bfda2d6a36",
+                "name": "testAdminUnit",
+                "container": true
+            },
+            {
+                "pid": "d77fd8c9-744b-42ab-8e20-5ad9bdf8194e",
+                "name": "testCollection",
+                "container": true
+            },
+            {
+                "pid": "e3931f0d-a32f-4b84-b6a4-4baf0ca9b576",
+                "name": "Imagy",
+                "container": true,
+                "collectionId": null
+            }
+        ],
+        "datastream": [
+            "techmd_fits|text\/xml|aaa66f91-4870-4937-b7ba-06b015959e4f.xml|xml|5480|urn:sha1:82c71472051b8279a0fbaa537a340c57e3d842f6|aaa66f91-4870-4937-b7ba-06b015959e4f",
+            "original_file|image\/png|Screen+Shot+2018-10-17+at+3.02.53+PM.png|png|232738|urn:md5:f5397b230bb5dfa4d53f57ad35514405|aaa66f91-4870-4937-b7ba-06b015959e4f",
+            "thumbnail_small|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|2454||aaa66f91-4870-4937-b7ba-06b015959e4f",
+            "thumbnail_large|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|5892||aaa66f91-4870-4937-b7ba-06b015959e4f"
+        ],
+        "fileDesc": [
+            "Portable Network Graphics"
+        ],
+        "fileType": [
+            "image/png"
+        ],
+        "fileCategory": [
+            "Image"
+        ],
+        "ancestorPath": [
+            {
+                "id": "collections",
+                "title": "collections"
+            },
+            {
+                "id": "0410e5c1-a036-4b7c-8d7d-63bfda2d6a36",
+                "title": "0410e5c1-a036-4b7c-8d7d-63bfda2d6a36"
+            },
+            {
+                "id": "d77fd8c9-744b-42ab-8e20-5ad9bdf8194e",
+                "title": "d77fd8c9-744b-42ab-8e20-5ad9bdf8194e"
+            }
+        ],
+        "_version_": 1.6490127429584e+18,
+        "id": "e3931f0d-a32f-4b84-b6a4-4baf0ca9b576",
+        "updated": "2019-10-29T17:22:01.830Z",
+        "timestamp": 1572621100384
+    }
+]

static/js/vue-cdr-access/tests/unit/fileUtils.spec.js

@@ -1,11 +1,10 @@
 import { shallowMount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router';
-import fileList from '@/components/full_record/fileList.vue';
 import displayWrapper from '@/components/displayWrapper.vue';
+import listDisplay from '@/components/listDisplay.vue';
 import {createI18n} from 'vue-i18n';
 import translations from '@/translations';
-
-const recordData = {}
+import {records_list} from "../fixtures/recordListFixture";
 
 let wrapper, router;
 
@@ -28,12 +27,12 @@ describe('fileUtils', () => {
             ]
         });
 
-        wrapper = shallowMount(fileList, {
+        wrapper = shallowMount(listDisplay, {
             global: {
                 plugins: [i18n, router]
             },
             props: {
-                recordData: recordData
+                recordList: records_list
             }
         });
     });
@@ -57,21 +56,142 @@ describe('fileUtils', () => {
         expect(wrapper.vm.formatFilesize('bad data')).toEqual('0 B');
     });
 
-    it("determines a file type from record file type", () => {
-        const briefObj = {
-            fileType: ['audio/mpeg']
-        }
-        expect(wrapper.vm.getFileType(briefObj)).toEqual('audio/mpeg');
+    it("file type empty when no file format info", () => {
+        expect(wrapper.vm.getFileType(wrapper.vm.recordList[0])).toEqual('');
+    });
+
+    it("file type from description", () => {
+        expect(wrapper.vm.getFileType(wrapper.vm.recordList[1])).toEqual('Portable Network Graphics');
+    });
+
+    it("file type from description and displays 'Various' if more than one fileType and they are different", () => {
+        expect(wrapper.vm.getFileType({
+            "title": "Imagy File",
+            "type": "File",
+            "datastream": [
+                "techmd_fits|text\/xml|aaa66f91-4870-4937-b7ba-06b015959e4f.xml|xml|5480|urn:sha1:82c71472051b8279a0fbaa537a340c57e3d842f6|aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "original_file|image\/png|Screen+Shot+2018-10-17+at+3.02.53+PM.png|png|232738|urn:md5:f5397b230bb5dfa4d53f57ad35514405|aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "thumbnail_small|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|2454||aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "thumbnail_large|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|5892||aaa66f91-4870-4937-b7ba-06b015959e4f"
+            ],
+            "fileDesc": ["Portable Network Graphics", "Joint Photographic Experts Group"],
+            "fileType": [
+                "image/png", "image/jpeg"
+            ],
+            "fileCategory": [
+                "Image"
+            ],
+            "id": "e3931f0d-a32f-4b84-b6a4-4baf0ca9b576",
+            "updated": "2019-10-29T17:22:01.830Z",
+        })).toEqual('Various');
+    });
+
+    it("file type from description and displays the filetype if more than one fileType and they are the same", () => {
+        expect(wrapper.vm.getFileType({
+            "title": "Imagy File",
+            "type": "File",
+            "datastream": [
+                "techmd_fits|text\/xml|aaa66f91-4870-4937-b7ba-06b015959e4f.xml|xml|5480|urn:sha1:82c71472051b8279a0fbaa537a340c57e3d842f6|aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "original_file|image\/png|Screen+Shot+2018-10-17+at+3.02.53+PM.png|png|232738|urn:md5:f5397b230bb5dfa4d53f57ad35514405|aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "thumbnail_small|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|2454||aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "thumbnail_large|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|5892||aaa66f91-4870-4937-b7ba-06b015959e4f"
+            ],
+            "fileDesc": ["Portable Network Graphics", "Portable Network Graphics"],
+            "fileType": [
+                "image/png", "image/png"
+            ],
+            "fileCategory": [
+                "Image"
+            ],
+            "id": "e3931f0d-a32f-4b84-b6a4-4baf0ca9b576",
+            "updated": "2019-10-29T17:22:01.830Z",
+        })).toEqual('Portable Network Graphics');
+    });
+
+    it("file type falls back to mimetype when description empty", () => {
+        expect(wrapper.vm.getFileType({
+            "title": "Imagy File",
+            "type": "File",
+            "datastream": [
+                "techmd_fits|text\/xml|aaa66f91-4870-4937-b7ba-06b015959e4f.xml|xml|5480|urn:sha1:82c71472051b8279a0fbaa537a340c57e3d842f6|aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "original_file|image\/png|Screen+Shot+2018-10-17+at+3.02.53+PM.png|png|232738|urn:md5:f5397b230bb5dfa4d53f57ad35514405|aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "thumbnail_small|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|2454||aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "thumbnail_large|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|5892||aaa66f91-4870-4937-b7ba-06b015959e4f"
+            ],
+            "fileDesc": [],
+            "fileType": [
+                "image/png"
+            ],
+            "fileCategory": [
+                "Image"
+            ],
+            "id": "e3931f0d-a32f-4b84-b6a4-4baf0ca9b576",
+            "updated": "2019-10-29T17:22:01.830Z",
+        })).toEqual('image/png');
+    });
+
+    it("file type falls back to mimetype when there's no description and displays 'Various' if more than one fileType", () => {
+        expect(wrapper.vm.getFileType({
+            "title": "Imagy File",
+            "type": "File",
+            "datastream": [
+                "techmd_fits|text\/xml|aaa66f91-4870-4937-b7ba-06b015959e4f.xml|xml|5480|urn:sha1:82c71472051b8279a0fbaa537a340c57e3d842f6|aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "original_file|image\/png|Screen+Shot+2018-10-17+at+3.02.53+PM.png|png|232738|urn:md5:f5397b230bb5dfa4d53f57ad35514405|aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "thumbnail_small|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|2454||aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "thumbnail_large|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|5892||aaa66f91-4870-4937-b7ba-06b015959e4f"
+            ],
+            "fileDesc": [],
+            "fileType": [
+                "image/png", "image/jpeg"
+            ],
+            "fileCategory": [
+                "Image"
+            ],
+            "id": "e3931f0d-a32f-4b84-b6a4-4baf0ca9b576",
+            "updated": "2019-10-29T17:22:01.830Z",
+        })).toEqual('Various');
     });
 
-    it("determines a file type from record file description", () => {
-        const briefObj = {
-            fileDesc: ['MP3']
-        }
-        expect(wrapper.vm.getFileType(briefObj)).toEqual('MP3');
+    it("file type falls back to mimetype when there's no description and displays filetype if all filetypes are the same", () => {
+        expect(wrapper.vm.getFileType({
+            "title": "Imagy File",
+            "type": "File",
+            "datastream": [
+                "techmd_fits|text\/xml|aaa66f91-4870-4937-b7ba-06b015959e4f.xml|xml|5480|urn:sha1:82c71472051b8279a0fbaa537a340c57e3d842f6|aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "original_file|image\/png|Screen+Shot+2018-10-17+at+3.02.53+PM.png|png|232738|urn:md5:f5397b230bb5dfa4d53f57ad35514405|aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "thumbnail_small|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|2454||aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "thumbnail_large|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|5892||aaa66f91-4870-4937-b7ba-06b015959e4f"
+            ],
+            "fileDesc": [],
+            "fileType": [
+                "image/png", "image/png"
+            ],
+            "fileCategory": [
+                "Image"
+            ],
+            "id": "e3931f0d-a32f-4b84-b6a4-4baf0ca9b576",
+            "updated": "2019-10-29T17:22:01.830Z",
+        })).toEqual('image/png');
     });
 
-    it("returns an empty string if no file type is available", () => {
-        expect(wrapper.vm.getFileType({})).toEqual('');
+    it("file type falls back to mimetype when description not present", () => {
+        expect(wrapper.vm.getFileType({
+            "title": "Imagy File",
+            "type": "File",
+            "datastream": [
+                "techmd_fits|text\/xml|aaa66f91-4870-4937-b7ba-06b015959e4f.xml|xml|5480|urn:sha1:82c71472051b8279a0fbaa537a340c57e3d842f6|aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "original_file|image\/png|Screen+Shot+2018-10-17+at+3.02.53+PM.png|png|232738|urn:md5:f5397b230bb5dfa4d53f57ad35514405|aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "thumbnail_small|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|2454||aaa66f91-4870-4937-b7ba-06b015959e4f",
+                "thumbnail_large|image\/png|aaa66f91-4870-4937-b7ba-06b015959e4f.png|png|5892||aaa66f91-4870-4937-b7ba-06b015959e4f"
+            ],
+            "fileType": [
+                "image/png"
+            ],
+            "fileCategory": [
+                "Image"
+            ],
+            "id": "e3931f0d-a32f-4b84-b6a4-4baf0ca9b576",
+            "updated": "2019-10-29T17:22:01.830Z",
+        })).toEqual('image/png');
     });
 });