Fix tests

Author: AlexVelezLl

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js

@@ -75,6 +75,18 @@ const makeWrapper = ({
       confirmationMessage: 'edited',
       ...restOptions,
     },
+    scopedSlots: {
+      input: function (props) {
+        return this.$createElement(CategoryOptions, {
+          props: {
+            ...props,
+            expanded: true,
+            hideLabel: true,
+            nodeIds,
+          }
+        });
+      }
+    }
   });
 };
 

contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js

@@ -5,13 +5,22 @@ import CategoryOptions from '../CategoryOptions.vue';
 
 Vue.use(Vuetify);
 
+function makeWrapper({ value = {}, nodeIds = ["node1"] } = {}) {
+  return shallowMount(CategoryOptions, {
+    propsData: {
+      value,
+      nodeIds,
+    },
+  });
+};
+
 describe('CategoryOptions', () => {
   it('smoke test', () => {
-    const wrapper = shallowMount(CategoryOptions);
+    const wrapper = makeWrapper();
     expect(wrapper.isVueInstance()).toBe(true);
   });
   it('emits expected data', () => {
-    const wrapper = shallowMount(CategoryOptions);
+    const wrapper = makeWrapper();
     const value = 'string';
     wrapper.vm.$emit('input', value);
 
@@ -22,14 +31,14 @@ describe('CategoryOptions', () => {
 
   describe('display', () => {
     it('has a tooltip that displays the tree for value of an item', () => {
-      const wrapper = shallowMount(CategoryOptions);
+      const wrapper = makeWrapper();
       const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; // 'Dance'
       const expectedToolTip = 'School - Arts - Dance';
 
       expect(wrapper.vm.tooltipText(item)).toEqual(expectedToolTip);
     });
     it(`dropdown has 'levels' key necessary to display the nested structure of categories`, () => {
-      const wrapper = shallowMount(CategoryOptions);
+      const wrapper = makeWrapper();
       const dropdown = wrapper.vm.categoriesList;
       const everyCategoryHasLevelsKey = dropdown.every(item => 'level' in item);
 
@@ -39,37 +48,37 @@ describe('CategoryOptions', () => {
 
   describe('interactions', () => {
     it('when user checks an item, that is emitted to the parent component', () => {
-      const wrapper = shallowMount(CategoryOptions);
+      const wrapper = makeWrapper();
       const item = 'abcd';
       wrapper.vm.$emit = jest.fn();
       wrapper.vm.add(item);
 
       expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
-      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual([item]);
+      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual({ abcd: ["node1"] });
     });
     it('when user unchecks an item, that is emitted to the parent component', () => {
-      const wrapper = shallowMount(CategoryOptions);
+      const wrapper = makeWrapper();
       const item = 'defj';
       wrapper.vm.$emit = jest.fn();
       wrapper.vm.remove(item);
 
       expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
-      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual([]);
+      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual({});
     });
   });
 
   describe('close button on chip interactions', () => {
-    it('in the autocomplete bar, the chip is removed when user clicks on its close button', () => {
-      const wrapper = shallowMount(CategoryOptions, {
-        data() {
-          return { selected: ['remove me', 'abc', 'def', 'abc.'] };
-        },
+    it('in the autocomplete bar, the chip is removed when user clicks on its close button', async () => {
+      const wrapper = makeWrapper({
+        value: {
+          'remove me': ['node1'],
+          'keep me': ['node1'],
+        }
       });
-      const originalChipsLength = wrapper.vm.selected.length;
+      const originalChipsLength = Object.keys(wrapper.vm.selected).length;
       wrapper.vm.remove('remove me');
-      const chips = wrapper.vm.selected;
 
-      expect(chips.length).toEqual(originalChipsLength - 1);
+      expect(wrapper.emitted().input.length).toEqual(originalChipsLength - 1);
     });
   });
 });

contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js

@@ -6,10 +6,11 @@ import { LearningActivities } from 'shared/constants';
 
 Vue.use(Vuetify);
 
-function makeWrapper(value) {
+function makeWrapper({ value = {}, nodeIds = ['node1'] } = {}) {
   return mount(LearningActivityOptions, {
     propsData: {
       value,
+      nodeIds,
     },
   });
 }
@@ -21,7 +22,7 @@ describe('LearningActivityOptions', () => {
   });
 
   it('number of items in the dropdown should be equal to number of items available in ', async () => {
-    const wrapper = makeWrapper([]);
+    const wrapper = makeWrapper();
     await wrapper.find('.v-input__slot').trigger('click');
 
     const numberOfDropdownItems = Object.keys(LearningActivities).length;
@@ -32,27 +33,35 @@ describe('LearningActivityOptions', () => {
 
   describe('updating state', () => {
     it('should update learning_activity field with new values received from a parent', () => {
-      const learningActivity = ['activity_1', 'activity_2'];
-      const wrapper = makeWrapper(learningActivity);
+      const learningActivity = {
+        activity_1: ['node1'],
+        activity_2: ['node1'],
+      };
+      const wrapper = makeWrapper({ value: learningActivity, nodeIds: ["node1"] });
       const dropdown = wrapper.find({ name: 'v-select' });
 
-      expect(dropdown.props('value')).toEqual(learningActivity);
+      expect(dropdown.props('value')).toEqual(['activity_1', 'activity_2']);
 
       wrapper.setProps({
-        value: ['activity_4'],
+        value: {
+          activity_4: ['node1'],
+        }
       });
       expect(dropdown.props('value')).toEqual(['activity_4']);
     });
 
     it('should emit new input values', () => {
-      const learningActivity = ['activity_1', 'activity_2', 'activity_3'];
-      const wrapper = makeWrapper({});
+      const learningActivity = ['activity_1', 'activity_2'];
+      const wrapper = makeWrapper();
       const dropdown = wrapper.find({ name: 'v-select' });
       dropdown.vm.$emit('input', learningActivity);
 
       return Vue.nextTick().then(() => {
         const emittedLevels = wrapper.emitted('input').pop()[0];
-        expect(emittedLevels).toEqual(learningActivity);
+        expect(emittedLevels).toEqual({
+          activity_1: ['node1'],
+          activity_2: ['node1'],
+        });
       });
     });
   });

contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js

@@ -6,10 +6,11 @@ import { ContentLevels } from 'shared/constants';
 
 Vue.use(Vuetify);
 
-function makeWrapper(value) {
+function makeWrapper({ value = {}, nodeIds = ['node1'] } = {}) {
   return mount(LevelsOptions, {
     propsData: {
       value,
+      nodeIds,
     },
   });
 }
@@ -22,7 +23,7 @@ describe('LevelsOptions', () => {
   });
 
   it('number of items in the dropdown should be equal to number of items available in ContentLevels', async () => {
-    const wrapper = makeWrapper([]);
+    const wrapper = makeWrapper();
     await wrapper.find('.v-input__slot').trigger('click');
 
     const numberOfAvailableLevels = Object.keys(ContentLevels).length;
@@ -33,27 +34,37 @@ describe('LevelsOptions', () => {
 
   describe('updating state', () => {
     it('should update levels field with new values received from a parent', () => {
-      const levels = ['abc', 'gefo'];
-      const wrapper = makeWrapper(levels);
+      const value = {
+        abc: ['node1'],
+        gefo: ['node1'],
+      };
+      const wrapper = makeWrapper({ value, nodeIds: ["node1"] });
       const dropdown = wrapper.find({ name: 'v-select' });
 
-      expect(dropdown.props('value')).toEqual(levels);
+      expect(dropdown.props('value')).toEqual(['abc', 'gefo']);
 
       wrapper.setProps({
-        value: ['def'],
+        value: {
+          def: ['node1'],
+        }
       });
       expect(dropdown.props('value')).toEqual(['def']);
     });
 
     it('should emit new input values', () => {
-      const levels = ['abc', 'gefo', '8hw'];
-      const wrapper = makeWrapper({});
+      const value = {
+        abc: ['node1'],
+      };
+      const wrapper = makeWrapper({ value, nodeIds: ["node1"] });
       const dropdown = wrapper.find({ name: 'v-select' });
-      dropdown.vm.$emit('input', levels);
+      dropdown.vm.$emit('input', ['abc', 'gefo']);
 
       return Vue.nextTick().then(() => {
         const emittedLevels = wrapper.emitted('input').pop()[0];
-        expect(emittedLevels).toEqual(levels);
+        expect(emittedLevels).toEqual({
+          abc: ['node1'],
+          gefo: ['node1'],
+        });
       });
     });
   });

contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js

@@ -5,44 +5,55 @@ import ResourcesNeededOptions from '../ResourcesNeededOptions.vue';
 
 Vue.use(Vuetify);
 
-function makeWrapper(value) {
+function makeWrapper({ value = {}, nodeIds = ['node1'] } = {}) {
   return mount(ResourcesNeededOptions, {
     propsData: {
       value,
+      nodeIds,
     },
   });
 }
 
 describe('ResourcesNeededOptions', () => {
   it('smoke test', () => {
-    const wrapper = shallowMount(ResourcesNeededOptions);
+    const wrapper = makeWrapper();
 
     expect(wrapper.isVueInstance()).toBe(true);
   });
 
   describe('updating state', () => {
     it('should update resources field with new values received from a parent', () => {
-      const resourcesNeeded = ['person', 'book'];
-      const wrapper = makeWrapper(resourcesNeeded);
+      const value = {
+        person: ['node1'],
+        book: ['node1'],
+      };
+      const wrapper = makeWrapper({ value, nodeIds: ["node1"] });
       const dropdown = wrapper.find({ name: 'v-select' });
 
-      expect(dropdown.props('value')).toEqual(resourcesNeeded);
+      expect(dropdown.props('value')).toEqual(['person', 'book']);
 
       wrapper.setProps({
-        value: ['cat'],
+        value: {
+          train: ['node1'],
+        }
       });
-      expect(dropdown.props('value')).toEqual(['cat']);
+      expect(dropdown.props('value')).toEqual(['train']);
     });
 
-    it('should emit new input values', () => {
-      const resourcesNeeded = ['person', 'book', 'train'];
-      const wrapper = makeWrapper([]);
+    it('should emit new input values', async () => {
+      const resourcesNeeded = {
+        person: ['node1'],
+      };
+      const wrapper = makeWrapper({ value: resourcesNeeded, nodeIds: ["node1"] });
       const dropdown = wrapper.find({ name: 'v-select' });
-      dropdown.vm.$emit('input', resourcesNeeded);
+      dropdown.vm.$emit('input', ['person', 'book']);
 
-      return Vue.nextTick().then(() => {
-        const emittedLevels = wrapper.emitted('input').pop()[0];
-        expect(emittedLevels).toEqual(resourcesNeeded);
+      await wrapper.vm.$nextTick();
+
+      const emittedLevels = wrapper.emitted('input').pop()[0];
+      expect(emittedLevels).toEqual({
+        person: ['node1'],
+        book: ['node1'],
       });
     });
   });