fix & add to tests

learningequality · Nov 9, 2023 · 703e1e9 · 703e1e9
1 parent 31e0674
commit 703e1e9
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 18 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/ResumableContentGrid.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/ResumableContentGrid.vue
@@ -40,6 +40,7 @@
     <!-- if all items in initial backend response are not already being shown -->
     <KButton
       v-if="moreContentCards && !showMoreContentCards"
+      data-test="show-more-resumable-nodes-button"
       appearance="basic-link"
       @click="handleShowMoreContentCards"
     >
@@ -49,7 +50,7 @@
     <!-- if there are 13+ recent items & the first 12 are currently visible -->
     <KButton
       v-if="moreResumableContentNodes && showMoreContentCards"
-      data-test="more-resumable-nodes-button"
+      data-test="view-more-resumable-nodes-button"
       appearance="basic-link"
       @click="fetchMoreResumableContentNodes"
     >

diff --git a/kolibri/plugins/learn/assets/test/views/resumable-content-grid.spec.js b/kolibri/plugins/learn/assets/test/views/resumable-content-grid.spec.js
@@ -13,12 +13,25 @@ describe('when there are nodes with progress that can be resumed', () => {
     useLearnerResources.mockImplementation(() =>
       useLearnerResourcesMock({
         /*
-         * moreResumableContentNodes having length would realistically mean
-         * that there are a significant number of resumableContentNodes but we
+         * moreResumableContentNodes existing would realistically mean
+         * that there are 13+ resumableContentNodes but we
          * rely on useSearch to handle the details of that implementation
          */
-        resumableContentNodes: [{ node: 1 }],
-        moreResumableContentNodes: [{ node: 2 }],
+        resumableContentNodes: [
+          { node: 1 },
+          { node: 2 },
+          { node: 3 },
+          { node: 4 },
+          { node: 5 },
+          { node: 6 },
+          { node: 7 },
+          { node: 8 },
+          { node: 9 },
+          { node: 10 },
+          { node: 11 },
+          { node: 12 },
+        ],
+        moreResumableContentNodes: { cursor: 'rogkor2', resume: true },
       })
     )
   );
@@ -47,20 +60,53 @@ describe('when there are nodes with progress that can be resumed', () => {
     expect(wrapper.find('[data-test="resumable-content-card-grid"').element).toBeTruthy();
   });
 
-  it('displays button to show more resumableContentNodes when there are moreResumableContentNodes', () => {
-    const wrapper = shallowMount(ResumableContentGrid, {});
-    expect(wrapper.find('[data-test="more-resumable-nodes-button"').element).toBeTruthy();
+  it('displays button to "show more" when more items exist than currently shown', () => {
+    const wrapper = shallowMount(ResumableContentGrid, {
+      data: function() {
+        return { showMoreContentCards: false };
+      },
+      computed: { moreContentCards: () => true },
+    });
+    expect(wrapper.find('[data-test="show-more-resumable-nodes-button"').element).toBeTruthy();
   });
 
-  it('does not show a button to show more resumableContentNodes when there are no moreResumableContentNodes', () => {
-    jest.clearAllMocks();
-    useLearnerResources.mockImplementation(() =>
-      useLearnerResourcesMock({
-        resumableContentNodes: [{ node: 1 }],
-        moreResumableContentNodes: [],
-      })
-    );
-    const wrapper = shallowMount(ResumableContentGrid, {});
-    expect(wrapper.find('[data-test="more-resumable-nodes-button"').element).toBeFalsy();
+  it('does not show a button to "show more" if button already pressed', () => {
+    const wrapper = shallowMount(ResumableContentGrid, {
+      data: function() {
+        return { showMoreContentCards: true };
+      },
+      computed: { moreContentCards: () => false },
+    });
+    expect(wrapper.find('[data-test="show-more-resumable-nodes-button"').element).toBeFalsy();
+  });
+
+  it('does not show a button to "show more" if number of items does not exceed that displayed', () => {
+    const wrapper = shallowMount(ResumableContentGrid, {
+      data: function() {
+        return { showMoreContentCards: true };
+      },
+      computed: { moreContentCards: () => false },
+    });
+    expect(wrapper.find('[data-test="show-more-resumable-nodes-button"').element).toBeFalsy();
+  });
+
+  it('displays button to view more resumableContentNodes when there are 13+ recent items & 12 are currently displayed', () => {
+    const wrapper = shallowMount(ResumableContentGrid, {
+      data: function() {
+        return { showMoreContentCards: true };
+      },
+      computed: { moreContentCards: () => true },
+    });
+    expect(wrapper.find('[data-test="view-more-resumable-nodes-button"').element).toBeTruthy();
+  });
+
+  it('does not show a button to view more resumableContentNodes if "show more" has not been exhausted', () => {
+    const wrapper = shallowMount(ResumableContentGrid, {
+      data: function() {
+        return { showMoreContentCards: false };
+      },
+      computed: { moreContentCards: () => true },
+    });
+    expect(wrapper.find('[data-test="view-more-resumable-nodes-button"').element).toBeFalsy();
   });
 });