[ONL-7877] change isCustomSlotShown prop usage and add missing test i…

…n ec-smart table
Ebury · Sep 19, 2023 · cd26da8 · cd26da8
1 parent 33baf64
commit cd26da8
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 4 deletions.
diff --git a/src/components/ec-smart-table/__snapshots__/ec-smart-table.spec.js.snap b/src/components/ec-smart-table/__snapshots__/ec-smart-table.spec.js.snap
@@ -93,6 +93,61 @@ exports[`EcSmartTable #slots should pass ec-table slots 1`] = `
 </tr>
 `;
 
+exports[`EcSmartTable #slots should render custom slot if window width is lower than 768px 1`] = `
+<div
+  class="ec-smart-table"
+  data-test="ec-smart-table"
+>
+  
+  <!--v-if-->
+  <!--v-if-->
+  
+  <div
+    class="ec-loading"
+    data-test="ec-loading"
+  >
+    <!--v-if-->
+    <div
+      class="ec-loading__content ec-loading__content--is-transparent"
+      data-test="ec-loading__content"
+    >
+      
+      <div>
+        <!--v-if-->
+        <div
+          class="ec-table-scroll-container"
+          data-test="ec-table-scroll-container"
+        >
+          <table
+            class="ec-table"
+          >
+            <!--v-if-->
+            <tbody>
+              
+              <tr
+                class=""
+                data-test="ec-table__row ec-table__row--0"
+              >
+                
+                
+                <div>
+                  Custom slot data: {"key":0,"row":[1,2,3]}
+                </div>
+                
+                
+              </tr>
+              
+            </tbody>
+            <!--v-if-->
+          </table>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EcSmartTable #slots should render empty data with custom template 1`] = `
 <div
   class="ec-smart-table"

diff --git a/src/components/ec-smart-table/ec-smart-table.spec.js b/src/components/ec-smart-table/ec-smart-table.spec.js
@@ -223,6 +223,27 @@ describe('EcSmartTable', () => {
       expect(wrapper.findByDataTest('ec-table__row--0').element).toMatchSnapshot();
     });
 
+    it('should render custom slot if window width is lower than 768px', () => {
+      window.matchMedia = jest.fn().mockImplementation(query => ({
+        matches: query === '(max-width: 768px)',
+        media: '',
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+      }));
+
+      const wrapper = mountEcSmartTableWithData(data, {
+        columns,
+      }, {
+        slots: {
+          default: props => h('div', `Custom slot data: ${JSON.stringify(props)}`),
+          col1: props => h('div', `Cell data: ${JSON.stringify(props)}`),
+        },
+      });
+
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
     it('should only render custom slot if "isCustomSlotShown" is true', () => {
       const wrapper = mountEcSmartTableWithData(data, {
         columns,

diff --git a/src/components/ec-smart-table/ec-smart-table.vue b/src/components/ec-smart-table/ec-smart-table.vue
@@ -167,7 +167,7 @@ const props = defineProps({
   error: [Error, Object, String],
   isCustomSlotShown: {
     type: Boolean,
-    default: () => false,
+    default: () => undefined,
   },
 });
 

diff --git a/src/components/ec-table/ec-table.spec.js b/src/components/ec-table/ec-table.spec.js
@@ -260,7 +260,13 @@ describe('EcTable', () => {
   });
 
   it('should render custom slot if window width is lower than 768px', () => {
-    global.innerWidth = 500;
+    window.matchMedia = jest.fn().mockImplementation(query => ({
+      matches: query === '(max-width: 768px)',
+      media: '',
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+    }));
 
     const wrapper = mountEcTable({
       columns: [

diff --git a/src/components/ec-table/ec-table.vue b/src/components/ec-table/ec-table.vue
@@ -106,13 +106,13 @@ const props = defineProps({
   title: String,
   isCustomSlotShown: {
     type: Boolean,
-    default: () => false,
+    default: () => undefined,
   },
 });
 
 const numberOfColumns = computed(() => (props.columns.length || (props.data[0] && props.data[0].length) || null));
 const maxHeightStyle = computed(() => (props.maxHeight ? { maxHeight: `${props.maxHeight}` } : null));
-const canShowCustomSlot = computed(() => (props.isCustomSlotShown || (hasSlot('default') && isInCustomSlotThreshold.value)));
+const canShowCustomSlot = computed(() => (props.isCustomSlotShown || (props.isCustomSlotShown === undefined && hasSlot('default') && isInCustomSlotThreshold.value)));
 
 function onSort(columnName) {
   emit('sort', columnName);