Merge pull request #13088 from Abhishek-Punhani/Issue12894

Fixed:UserTable Tests
learningequality · Feb 19, 2025 · d37e210 · d37e210
2 parents 5e3fc4f + 60d6175
commit d37e210
Showing 1 changed file with 25 additions and 32 deletions.
diff --git a/packages/kolibri-common/components/UserTable/__tests__/index.spec.js b/packages/kolibri-common/components/UserTable/__tests__/index.spec.js
@@ -11,7 +11,6 @@ function makeWrapper({ propsData } = {}) {
     propsData,
   });
 }
-
 const getSelectAllCheckbox = wrapper => wrapper.find('[data-test="selectAllCheckbox"]');
 const getFullNameHeader = wrapper => wrapper.find('[data-test="fullNameHeader"]');
 const getUsernameHeader = wrapper => wrapper.find('[data-test="usernameHeader"]');
@@ -166,39 +165,29 @@ describe(`UserTable`, () => {
     });
 
     describe(`unchecking the select all checkbox`, () => {
-      /*
-      FIXME These tests depend on `KCheckbox` emitting the updated value of the checkbox
-      but this is information that the parent component manages - KCheckbox does not have
-      internal state but rather reflects the value of the props given to it.
-
-      The UserTable component emits the value correctly, but unless the parent component
-      is then updating the value of the `selected` prop, then the user being added won't
-      be reflected.
-
-      Fix all tests that call the `xit()` function (instead of `it()`)
-
-      This is likely best to be done by forcing the value of the selected prop, however,
-      when I tried using `wrapper.setProps({value: ['id-coach']})` to emulate what
-      the parent's v-model value would be after a click, it was not being reflected as I
-      expected.
-      */
-      xit(`emits the 'input' event with no users in its payload`, () => {
+      it(`emits the 'input' event with no users in its payload`, async () => {
         const wrapper = makeWrapper({
           propsData: { users: TEST_USERS, selectable: true, value: [] },
         });
-        getSelectAllCheckbox(wrapper).trigger('click');
-        getSelectAllCheckbox(wrapper).trigger('click');
+        await getSelectAllCheckbox(wrapper).trigger('click');
+        await wrapper.setProps({ value: ['id-learner', 'id-coach'] });
+        await getSelectAllCheckbox(wrapper).trigger('click');
         expect(wrapper.emitted().input.length).toBe(2);
         expect(wrapper.emitted().input[1][0]).toEqual([]);
       });
 
       // see commit 6a060ba
-      xit(`preserves users that were previously in 'value' in the payload`, () => {
+      it(`preserves users that were previously in 'value' in the payload`, async () => {
         const wrapper = makeWrapper({
-          propsData: { users: TEST_USERS, selectable: true, value: ['id-to-be-preserved'] },
+          propsData: {
+            selectable: true,
+            value: ['id-to-be-preserved'],
+            users: TEST_USERS,
+          },
         });
-        getSelectAllCheckbox(wrapper).trigger('click');
-        getSelectAllCheckbox(wrapper).trigger('click');
+        await getSelectAllCheckbox(wrapper).trigger('click');
+        await wrapper.setProps({ value: ['id-to-be-preserved', 'id-learner', 'id-coach'] });
+        await getSelectAllCheckbox(wrapper).trigger('click');
         expect(wrapper.emitted().input.length).toBe(2);
         expect(wrapper.emitted().input[1][0]).toEqual(['id-to-be-preserved']);
       });
@@ -250,25 +239,29 @@ describe(`UserTable`, () => {
         expect(wrapper.emitted().input[0][0]).toEqual(['id-to-be-preserved', 'id-coach']);
       });
     });
-
     describe(`unchecking a user checkbox`, () => {
-      xit(`emits the 'input' event with the user removed from the payload`, () => {
+      it(`emits the 'input' event with the user removed from the payload`, async () => {
         const wrapper = makeWrapper({
           propsData: { users: TEST_USERS, selectable: true, value: [] },
         });
-        getUserCheckboxes(wrapper).at(1).trigger('click');
-        getUserCheckboxes(wrapper).at(1).trigger('click');
+        // First click selects the user
+        await getUserCheckboxes(wrapper).at(1).trigger('click');
+        await wrapper.setProps({ value: ['id-coach'] }); // Simulate parent update
+        // Second click unselects the user
+        await getUserCheckboxes(wrapper).at(1).trigger('click');
         expect(wrapper.emitted().input.length).toBe(2);
         expect(wrapper.emitted().input[1][0]).toEqual([]);
       });
 
-      // see commit 6a060ba
-      xit(`preserves users that were previously in 'value' in the payload`, () => {
+      it(`preserves users that were previously in 'value' in the payload`, async () => {
         const wrapper = makeWrapper({
           propsData: { users: TEST_USERS, selectable: true, value: ['id-to-be-preserved'] },
         });
-        getUserCheckboxes(wrapper).at(1).trigger('click');
-        getUserCheckboxes(wrapper).at(1).trigger('click');
+        // First click adds "id-coach"
+        await getUserCheckboxes(wrapper).at(1).trigger('click');
+        await wrapper.setProps({ value: ['id-to-be-preserved', 'id-coach'] }); // Parent update
+        // Second click removes "id-coach"
+        await getUserCheckboxes(wrapper).at(1).trigger('click');
         expect(wrapper.emitted().input.length).toBe(2);
         expect(wrapper.emitted().input[1][0]).toEqual(['id-to-be-preserved']);
       });