Update tests to use it.each, thus testing multiple cards, not just if…

… there is a single card
learningequality · Feb 22, 2022 · 83dfbaf · 83dfbaf
1 parent ee407d8
commit 83dfbaf
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue b/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue
@@ -6,7 +6,7 @@
       <ResourceCard
         v-for="(content, idx) in contents"
         :key="`resource-${idx}`"
-        data-test="resource-card"
+        :data-test="'resource-card-' + idx"
         :contentNode="content"
         :to="genContentLink(content)"
         @openCopiesModal="$emit('openCopiesModal', content.copies)"
@@ -22,7 +22,7 @@
         v-for="(content, idx) in contents"
         :key="`resource-${idx}`"
         class="card-grid-item"
-        data-test="content-card"
+        :data-test="'content-card-' + idx"
         :isMobile="windowIsSmall"
         :content="content"
         :link="genContentLink(content)"
@@ -37,7 +37,7 @@
       :key="content.id"
       :content="content"
       class="card-grid-item"
-      data-test="card-list-view"
+      :data-test="'card-list-view-' + idx"
       :link="genContentLink(content)"
       :footerIcons="footerIcons"
       :createdDate="content.bookmark ? content.bookmark.created : null"
@@ -85,6 +85,9 @@
           return ['card', 'list'].includes(value);
         },
       },
+      // Used to define the "type" (number of columns) for <CardGrid />
+      // Currently only either `1` or `2`
+      // See props in CardGrid.vue for more details on # of cards per level
       gridType: {
         type: Number,
         required: true,

diff --git a/...bri/plugins/learn/assets/test/views/library-and-channel-browser-main-content-grid.spec.js b/...bri/plugins/learn/assets/test/views/library-and-channel-browser-main-content-grid.spec.js
@@ -6,17 +6,23 @@ describe('Library and Channel Browser Main Content', () => {
   beforeEach(() => {
     wrapper = shallowMount(LibraryAndChannelBrowserMainContent, {
       computed: { windowIsSmall: () => false, backRoute: 'test' },
-      propsData: { contents: [{ node: 1 }], currentCardViewStyle: 'card' },
+      propsData: {
+        contents: [{ node: 1 }, { node: 2 }, { node: 3 }],
+        currentCardViewStyle: 'card',
+      },
     });
   });
+
   it('smoke test', () => {
     expect(wrapper.exists()).toBe(true);
   });
   describe('When the user has a medium or large screen', () => {
     describe('When `currentCardViewStyle` is a card', () => {
       it('displays a `CardGrid`, and within the grid, a `HybridLearningContentCard` for each content node', () => {
         expect(wrapper.find('[data-test="non-mobile-card-grid"]').element).toBeTruthy();
-        expect(wrapper.find('[data-test="content-card"]').element).toBeTruthy();
+        it.each([{ node: 1 }, { node: 2 }, { node: 3 }], 'displays a card for each node n', n => {
+          expect(wrapper.find(`[data-test="content-card-"${n}]`).element).toBeTruthy();
+        });
       });
       it('does not display a `CardGrid` with a `ResourceCard` for each content node in a single, full-width column', () => {
         expect(wrapper.find('[data-test="mobile-card-grid"]').element).toBeFalsy();
@@ -34,7 +40,9 @@ describe('Library and Channel Browser Main Content', () => {
         });
       });
       it('displays a `HybridLearningContentCardListView` for each content node, in a single, full-width column', () => {
-        expect(wrapper.find('[data-test="card-list-view"]').element).toBeTruthy();
+        it.each([{ node: 1 }, { node: 2 }, { node: 3 }], 'displays a card for each node n', n => {
+          expect(wrapper.find(`[data-test="card-list-view-"${n}]`).element).toBeTruthy();
+        });
       });
       it('does not display a `CardGrid` with a `ResourceCard` for each content node in a single, full-width column', () => {
         expect(wrapper.find('[data-test="mobile-card-grid"]').element).toBeFalsy();
@@ -55,7 +63,13 @@ describe('Library and Channel Browser Main Content', () => {
     });
     it('displays a `CardGrid` with a `ResourceCard` for each content node in a single, full-width column', () => {
       expect(wrapper.find('[data-test="mobile-card-grid"]').element).toBeTruthy();
-      expect(wrapper.find('[data-test="resource-card"]').element).toBeTruthy();
+      it.each(
+        [{ node: 1 }, { node: 2 }, { node: 3 }],
+        'displays a `ResourceCard` for each node n',
+        n => {
+          expect(wrapper.find(`[data-test="resource-card-"${n}]`).element).toBeTruthy();
+        }
+      );
     });
     it('does not display a `CardGrid` with `HybridLearningContentCard`s in columns', () => {
       expect(wrapper.find('[data-test="non-mobile-card-grid"]').element).toBeFalsy();