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 index d8a99e973..9924f4a9d 100644 --- 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`] = ` `; +exports[`EcSmartTable #slots should render custom slot if window width is lower than 768px 1`] = ` +
+ + + + +
+ +
+ +
+ +
+ + + + + + + +
+ Custom slot data: {"key":0,"row":[1,2,3]} +
+ + + + + + +
+
+
+ +
+
+
+`; + exports[`EcSmartTable #slots should render empty data with custom template 1`] = `
{ 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 index 087e25e4b..93f37ec91 100644 --- 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 index 114a931c7..fd404756b 100644 --- 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 index c2fd328b0..b9e554948 100644 --- 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);