Make sure our JS dependencies reflect what we actually depend on.

Author: rtibbles

__mocks__/backbone.js

@@ -1,4 +1,3 @@
-import _ from 'underscore';
 import Vue from 'vue';
 import Vuetify from 'vuetify';
 import { mount } from '@vue/test-utils';
@@ -18,19 +17,16 @@ function makeWrapper(kind) {
 }
 
 describe('ContentNodeIcon', () => {
-  it('should display the correct icon', () => {
-    function test(kind) {
-      let wrapper = makeWrapper(kind.value);
-      expect(wrapper.find('.v-icon').text()).toContain(kind.icon);
-    }
-    let testIcons = [
-      { value: 'topic', icon: 'folder' },
-      { value: 'video', icon: 'ondemand_video' },
-      { value: 'audio', icon: 'music_note' },
-      { value: 'exercise', icon: 'assignment' },
-      { value: 'document', icon: 'class' },
-      { value: 'html5', icon: 'widgets' },
-    ];
-    _.each(testIcons, test);
+  const testIcons = [
+    { value: 'topic', icon: 'folder' },
+    { value: 'video', icon: 'ondemand_video' },
+    { value: 'audio', icon: 'music_note' },
+    { value: 'exercise', icon: 'assignment' },
+    { value: 'document', icon: 'class' },
+    { value: 'html5', icon: 'widgets' },
+  ];
+  it.each(testIcons)('should display the correct icon $value', kind => {
+    const wrapper = makeWrapper(kind.value);
+    expect(wrapper.find('.v-icon').text()).toContain(kind.icon);
   });
 });

__mocks__/vue.js

@@ -1,4 +1,3 @@
-import _ from 'underscore';
 import Vue from 'vue';
 import Vuetify from 'vuetify';
 import { mount } from '@vue/test-utils';
@@ -18,7 +17,7 @@ function makeWrapper() {
   });
 }
 
-let testLanguages = _.first(LanguagesList, 10);
+const testLanguages = LanguagesList.slice(0, 10);
 
 describe('languageDropdown', () => {
   let wrapper;
@@ -27,16 +26,13 @@ describe('languageDropdown', () => {
     formWrapper = makeWrapper();
     wrapper = formWrapper.find(LanguageDropdown);
   });
-  it('updating the language should emit input event', () => {
+  it.each(testLanguages)('updating language $id should emit input event', language => {
     expect(wrapper.emitted('input')).toBeFalsy();
-    function test(language, i) {
-      // It looks like v-autocomplete doesn't trigger correctly, so call
-      // method directly until resolved
-      wrapper.find('.v-autocomplete').vm.$emit('input', language.id);
-      expect(wrapper.emitted('input')).toBeTruthy();
-      expect(wrapper.emitted('input')[i][0]).toEqual(language.id);
-    }
-    _.each(testLanguages, test);
+    // It looks like v-autocomplete doesn't trigger correctly, so call
+    // method directly until resolved
+    wrapper.find('.v-autocomplete').vm.$emit('input', language.id);
+    expect(wrapper.emitted('input')).toBeTruthy();
+    expect(wrapper.emitted('input')[0][0]).toEqual(language.id);
   });
   it('setting readonly should prevent any edits', () => {
     expect(wrapper.find('input[readonly]').exists()).toBe(false);

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

@@ -1,4 +1,3 @@
-import _ from 'underscore';
 import Vue from 'vue';
 import Vuetify from 'vuetify';
 import { mount } from '@vue/test-utils';
@@ -19,7 +18,7 @@ function makeWrapper() {
 }
 
 describe('licenseDropdown', () => {
-  let specialPermissions = _.findWhere(LicensesList, { is_custom: true });
+  const specialPermissions = LicensesList.find(l => l.is_custom);
   let wrapper;
   let formWrapper;
   beforeEach(() => {
@@ -28,27 +27,25 @@ describe('licenseDropdown', () => {
   });
 
   describe('on load', () => {
-    it('all license options should be an option to select', () => {
-      _.each(LicensesList, license => {
-        expect(wrapper.find('.v-list').text()).toContain(license.license_name);
-      });
+    it.each(LicensesList)('%s license option should be an option to select', license => {
+      expect(wrapper.find('.v-list').text()).toContain(license.license_name);
     });
-    it('should render a license when value is set to a license id', () => {
-      function test(license) {
+    it.each(LicensesList)(
+      'should render license when value is set to a license id $id',
+      license => {
         wrapper.setProps({ value: { license: license.id } });
         expect(wrapper.vm.$refs.license.value).toEqual(license.id);
         expect(wrapper.find('.v-textarea').exists()).toBe(license.is_custom);
       }
-      _.each(LicensesList, test);
-    });
-    it('should render a license when value is set to a license name', () => {
-      function test(license) {
+    );
+    it.each(LicensesList)(
+      'should render license when value is set to a license name $name',
+      license => {
         wrapper.setProps({ value: { license: license.license_name } });
         expect(wrapper.vm.$refs.license.value).toEqual(license.id);
         expect(wrapper.find('.v-textarea').exists()).toBe(license.is_custom);
       }
-      _.each(LicensesList, test);
-    });
+    );
     it('should display licenseDescription prop', () => {
       wrapper.setProps({
         value: { license: specialPermissions.id, license_description: 'test description' },

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

@@ -1,4 +1,3 @@
-import _ from 'underscore';
 import { mount } from '@vue/test-utils';
 import VisibilityDropdown from '../VisibilityDropdown.vue';
 import TestForm from './TestForm.vue';
@@ -15,6 +14,8 @@ function makeWrapper() {
   });
 }
 
+const RolesArray = Array.from(Roles);
+
 describe('visibilityDropdown', () => {
   let wrapper;
   let formWrapper;
@@ -24,17 +25,12 @@ describe('visibilityDropdown', () => {
   });
 
   describe('on load', () => {
-    it('all visibility options should be an option to select', () => {
-      Roles.forEach(role => {
-        expect(wrapper.find('.v-list').text()).toContain(constantStrings.$tr(role));
-      });
+    it.each(RolesArray)('all visibility options should be an option to select', role => {
+      expect(wrapper.find('.v-list').text()).toContain(constantStrings.$tr(role));
     });
-    it('should render according to visibility prop', () => {
-      function test(visibility) {
-        wrapper.setProps({ value: visibility });
-        expect(wrapper.vm.$refs.visibility.value).toEqual(visibility);
-      }
-      _.each(Roles, test);
+    it.each(RolesArray)('should render according to visibility prop %s', visibility => {
+      wrapper.setProps({ value: visibility });
+      expect(wrapper.vm.$refs.visibility.value).toEqual(visibility);
     });
   });
   describe('props', () => {