update test case

learningequality · Aug 19, 2024 · aebd688 · aebd688
1 parent 5e15166
commit aebd688
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 22 deletions.
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
@@ -17,16 +17,15 @@
         :headingLevel="2"
         layout="vertical"
         thumbnailDisplay="small"
-        preserveAboveTitle
-        preserveFooter
+        :preserveFooter="true"
         :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
         title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
       >
         <template #belowTitle>
           <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
         </template>
 
-        <!-- <template #footer>
+        <template #footer>
           <div>
             <div class="footer-top-header">
               <span>
@@ -62,7 +61,7 @@
               </KGridItem>
             </KGrid>
           </div>
-        </template> -->
+        </template> 
       </KCard>
 
       <KCard

diff --git a/lib/KCard/__tests__/KCard.spec.js b/lib/KCard/__tests__/KCard.spec.js
@@ -128,55 +128,76 @@ describe('KCard', () => {
       expect(footerSlot.text()).toBe('footer slot content goes here');
     });
   });
-  describe('it renders aboveTitle slot  to occupy the area designated for it or not ', () => {
-    it('preserves above-title space when preserveAboveTitle is true', () => {
+  describe('it renders slot behaviors', () => {
+    it('preserves space when preserve prop is true', () => {
       const wrapper = makeWrapper({
         propsData: {
           to: { path: '/some-link' },
           title: 'sample title ',
           headingLevel: 4,
           preserveAboveTitle: true,
+          preserveBelowTitle: true,
+          preserveFooter: true,
         },
         slots: {
           aboveTitle: 'above title',
+          belowTitle: 'below title',
+          footer: 'footer slot content goes here',
         },
       });
-
-      const aboveTitle = wrapper.find('[data-test="aboveTitle"]');
-      expect(aboveTitle.exists()).toBe(true);
-      expect(aboveTitle.classes()).not.toContain('above-title-empty');
+      const aboveTitleSlot = wrapper.find('[data-test="aboveTitle"]');
+      const belowTitleSlot = wrapper.find('[data-test="belowTitle"]');
+      const footerSlot = wrapper.find('[data-test="footer"]');
+      expect(aboveTitleSlot.exists()).toBe(true);
+      expect(belowTitleSlot.exists()).toBe(true);
+      expect(footerSlot.exists()).toBe(true);
     });
-
-    it('removes above-title space when preserveAboveTitle is false and slot is empty', () => {
+    it('removes space when preserve prop is false and slot is empty', () => {
       const wrapper = makeWrapper({
         propsData: {
           to: { path: '/some-link' },
           title: 'sample title ',
           headingLevel: 4,
           preserveAboveTitle: false,
+          preserveBelowTitle: false,
+          preserveFooter: false,
         },
         slots: {
-          aboveTitle: 'above title',
+          aboveTitle: '',
+          belowTitle: '',
+          footer: '',
         },
       });
-      const aboveTitle = wrapper.find('[data-test="aboveTitle"]');
-      expect(aboveTitle.exists()).toBe(true);
+      const aboveTitleSlot = wrapper.find('[data-test="aboveTitle"]');
+      const belowTitleSlot = wrapper.find('[data-test="belowTitle"]');
+      const footerSlot = wrapper.find('[data-test="footer"]');
+      expect(aboveTitleSlot.exists()).toBe(false);
+      expect(belowTitleSlot.exists()).toBe(false);
+      expect(footerSlot.exists()).toBe(false);
     });
-    it('shows above-title content regardless of preserveAboveTitle value', () => {
+
+    it('shows slots content regardless of whether the preserve prop is true', () => {
       const wrapper = makeWrapper({
         propsData: {
           to: { path: '/some-link' },
           title: 'sample title ',
           headingLevel: 4,
-          preserveAboveTitle: false,
+          preserveAboveTitle: true,
+          preserveBelowTitle: true,
+          preserveFooter: true,
         },
         slots: {
-          aboveTitle: '<div>Above Title Content</div>',
+          aboveTitle: 'above title',
+          belowTitle: 'below title',
+          footer: 'footer slot content goes here',
         },
       });
-      const aboveTitle = wrapper.find('[data-test="aboveTitle"]');
-      expect(aboveTitle.exists()).toBe(true);
-      expect(aboveTitle.text()).toBe('Above Title Content');
+      const aboveTitleSlot = wrapper.find('[data-test="aboveTitle"]');
+      const belowTitleSlot = wrapper.find('[data-test="belowTitle"]');
+      const footerSlot = wrapper.find('[data-test="footer"]');
+      expect(aboveTitleSlot.text()).toBe('above title');
+      expect(belowTitleSlot.text()).toBe('below title');
+      expect(footerSlot.text()).toBe('footer slot content goes here');
     });
   });
 });
diff --git a/lib/KCard/index.vue b/lib/KCard/index.vue
@@ -62,7 +62,6 @@
       </div>
       <div
         v-if="$slots.footer || preserveFooter"
-        v-show="$slots.footer || preserveFooter"
         data-test="footer"
         :class="['footer', { 'footer--empty': preserveFooter && !$slots.footer }]"
       >