Merge pull request #5465 from akolson/fix-undefined-split

Adds defensive check when generating language text in the language dropdown

Author: bjester

contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue

@@ -499,6 +499,7 @@
   } from 'shared/constants';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
   import { crossComponentTranslator } from 'shared/i18n';
+  import { LanguagesNames } from 'shared/leUtils/Languages';
 
   function getValueFromResults(results) {
     if (results.length === 0) {
@@ -715,7 +716,17 @@
         },
       },
       role: generateGetterSetter('role_visibility'),
-      language: generateGetterSetter('language'),
+      language: {
+        get() {
+          const value = this.getValueFromNodes('language');
+          return value === nonUniqueValue ? LanguagesNames.MUL : value;
+        },
+        set(value) {
+          if (!(value === LanguagesNames.MUL && this.language === LanguagesNames.MUL)) {
+            this.update({ language: value });
+          }
+        },
+      },
       accessibility: generateNestedNodesGetterSetter('accessibility_labels'),
       contentLevel: generateNestedNodesGetterSetterObject('grade_levels'),
       resourcesNeeded: generateNestedNodesGetterSetterObject('learner_needs'),

contentcuration/contentcuration/frontend/shared/views/__tests__/languageDropdown.spec.js

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import LanguageDropdown from '../LanguageDropdown.vue';
 import TestForm from './TestForm.vue';
 import { LanguagesList } from 'shared/leUtils/Languages';
@@ -61,4 +61,24 @@ describe('languageDropdown', () => {
     await wrapper.vm.$nextTick();
     expect(wrapper.find('.error--text').exists()).toBe(true);
   });
+
+  it('returns formatted language text when native_name is present', () => {
+    const wrapper = shallowMount(LanguageDropdown, {
+      mocks: {
+        $tr: (key, params) => `${params.language} (${params.code})`,
+      },
+    });
+    const item = { native_name: 'Español,Spanish', id: 'es' };
+    expect(wrapper.vm.languageText(item)).toBe('Español (es)');
+  });
+
+  it('returns formatted language text when native_name is an empty string', () => {
+    const wrapper = shallowMount(LanguageDropdown, {
+      mocks: {
+        $tr: (key, params) => `${params.language} (${params.code})`,
+      },
+    });
+    const item = { native_name: '', id: 'de' };
+    expect(wrapper.vm.languageText(item)).toBe(' (de)');
+  });
 });