diff --git a/components/descriptions/Col.jsx b/components/descriptions/Col.jsx index f0c456adf..f777c7306 100644 --- a/components/descriptions/Col.jsx +++ b/components/descriptions/Col.jsx @@ -10,20 +10,24 @@ const ColProps = { }; const Col = { + functional: true, props: ColProps, - render() { - const { child, bordered, colon, type, layout } = this.$props; + render(h, ctx) { + const { child, bordered, colon, type, layout } = ctx.props; const { prefixCls, span = 1 } = getOptionProps(child); - + const { key } = ctx.data; const label = getComponentFromProp(child, 'label'); const slots = getSlots(child); const labelProps = { attrs: {}, - class: [`${prefixCls}-item-label`, { - [`${prefixCls}-item-colon`]: colon, - [`${prefixCls}-item-no-label`]: !label, - }], - key: 'label', + class: [ + `${prefixCls}-item-label`, + { + [`${prefixCls}-item-colon`]: colon, + [`${prefixCls}-item-no-label`]: !label, + }, + ], + key: `${key}-label`, }; if (layout === 'vertical') { labelProps.attrs.colSpan = span * 2 - 1; @@ -34,7 +38,7 @@ const Col = { return {label}; } return ( - + {slots.default} ); @@ -43,7 +47,7 @@ const Col = { if (type === 'content') { return ( - + {slots.default} @@ -53,7 +57,7 @@ const Col = { {label} @@ -63,7 +67,7 @@ const Col = { return ( {label} - + {slots.default} diff --git a/components/descriptions/__tests__/__snapshots__/index.test.js.snap b/components/descriptions/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 000000000..732faa92d --- /dev/null +++ b/components/descriptions/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,108 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Descriptions Descriptions support colon 1`] = ` +
+
+ + + + + + +
ProductCloud Database
+
+
+`; + +exports[`Descriptions Descriptions support style 1`] = ` +
+
+ + + + + + +
Cloud Database
+
+
+`; + +exports[`Descriptions Descriptions.Item support className 1`] = ` +
+
+ + + + + + +
ProductCloud Database
+
+
+`; + +exports[`Descriptions column is number 1`] = ` +
+
+ + + + + + + + + + + +
ProductCloud DatabaseBillingPrepaidtime18:00:00
Amount$80.00
+
+
+`; + +exports[`Descriptions vertical layout 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + +
ProductBillingtime
Cloud DatabasePrepaid18:00:00
Amount
$80.00
+
+
+`; + +exports[`Descriptions when item is rendered conditionally 1`] = ` +
+
+ + + + + + + + + + + +
ProductCloud DatabaseBillingPrepaidtime18:00:00
Amount$80.00
+
+
+`; diff --git a/components/descriptions/__tests__/index.test.js b/components/descriptions/__tests__/index.test.js new file mode 100644 index 000000000..330650908 --- /dev/null +++ b/components/descriptions/__tests__/index.test.js @@ -0,0 +1,234 @@ +import { mount } from '@vue/test-utils'; +import MockDate from 'mockdate'; +import Descriptions from '..'; +import { resetWarned } from '../../_util/warning'; +import { asyncExpect } from '@/tests/utils'; + +jest.mock('enquire.js', () => { + let that; + let unmatchFun; + return { + unregister: jest.fn(), + register: (media, options) => { + if (media === '(max-width: 575px)') { + that = this; + options.match.call(that); + unmatchFun = options.unmatch; + } + }, + callunmatch() { + unmatchFun.call(that); + }, + }; +}); + +describe('Descriptions', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + + afterEach(() => { + MockDate.reset(); + errorSpy.mockReset(); + }); + + afterAll(() => { + errorSpy.mockRestore(); + }); + + it('when typeof column is object', async () => { + const wrapper = mount( + { + render() { + return ( + + Cloud Database + Prepaid + 18:00:00 + $80.00 + + ); + }, + }, + { sync: false, attachToDocument: true }, + ); + await asyncExpect(() => { + expect(wrapper.vm.$refs.descriptions.getColumn()).toBe(8); + }, 100); + wrapper.destroy(); + }); + + it('column is number', () => { + // eslint-disable-next-line global-require + const wrapper = mount({ + render() { + return ( + + Cloud Database + Prepaid + 18:00:00 + $80.00 + + ); + }, + }); + expect(wrapper.html()).toMatchSnapshot(); + wrapper.destroy(); + }); + + it('warning if ecceed the row span', () => { + resetWarned(); + + mount({ + render() { + return ( + + + Cloud Database + + + Prepaid + + + ); + }, + }); + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: [ant-design-vue: Descriptions] Sum of column `span` in a line exceeds `column` of Descriptions.', + ); + }); + + it('when item is rendered conditionally', () => { + const hasDiscount = false; + const wrapper = mount({ + render() { + return ( + + Cloud Database + Prepaid + 18:00:00 + $80.00 + {hasDiscount && $20.00} + + ); + }, + }); + expect(wrapper.html()).toMatchSnapshot(); + wrapper.destroy(); + }); + + it('vertical layout', () => { + // eslint-disable-next-line global-require + const wrapper = mount({ + render() { + return ( + + Cloud Database + Prepaid + 18:00:00 + $80.00 + + ); + }, + }); + expect(wrapper.html()).toMatchSnapshot(); + wrapper.destroy(); + }); + + it('Descriptions.Item support className', () => { + const wrapper = mount({ + render() { + return ( + + + Cloud Database + + + ); + }, + }); + expect(wrapper.html()).toMatchSnapshot(); + }); + + it('Descriptions support colon', () => { + const wrapper = mount({ + render() { + return ( + + Cloud Database + + ); + }, + }); + expect(wrapper.html()).toMatchSnapshot(); + }); + + it('Descriptions support style', () => { + const wrapper = mount({ + render() { + return ( + + Cloud Database + + ); + }, + }); + expect(wrapper.html()).toMatchSnapshot(); + }); + + it('when max-width: 575px，column=1', async () => { + // eslint-disable-next-line global-require + const enquire = require('enquire.js'); + const wrapper = mount( + { + render() { + return ( + + Cloud Database + Prepaid + 18:00:00 + $80.00 + No-Label + + ); + }, + }, + { sync: false, attachToDocument: true }, + ); + await asyncExpect(() => { + expect(wrapper.findAll('tr')).toHaveLength(5); + expect(wrapper.findAll('.ant-descriptions-item-no-label')).toHaveLength(1); + }); + + enquire.callunmatch(); + wrapper.destroy(); + }); + + it('when max-width: 575px，column=2', async () => { + // eslint-disable-next-line global-require + const enquire = require('enquire.js'); + const wrapper = mount( + { + render() { + return ( + + Cloud Database + Prepaid + 18:00:00 + $80.00 + + ); + }, + }, + { sync: false, attachToDocument: true }, + ); + await asyncExpect(() => {}); + expect(wrapper.findAll('tr')).toHaveLength(2); + + enquire.callunmatch(); + wrapper.destroy(); + + await asyncExpect(() => {}); + await asyncExpect(() => {}); + await asyncExpect(() => {}); + await asyncExpect(() => {}); + }); +}); diff --git a/components/descriptions/index.jsx b/components/descriptions/index.jsx index 39742d3b7..5d18b6d0e 100644 --- a/components/descriptions/index.jsx +++ b/components/descriptions/index.jsx @@ -87,7 +87,7 @@ const generateChildrenRows = (children, column) => { warning( leftSpans === 0 && lastSpanSame, - 'Descriptions: Sum of column `span` in a line exceeds `column` of Descriptions.', + '[ant-design-vue: Descriptions] Sum of column `span` in a line exceeds `column` of Descriptions.', ); } }); @@ -226,10 +226,13 @@ const Descriptions = { const childrenArray = generateChildrenRows(cloneChildren, column); return (
{title &&
{title}
}
diff --git a/tests/__snapshots__/index.test.js.snap b/tests/__snapshots__/index.test.js.snap index 8329ddeef..b285684df 100644 --- a/tests/__snapshots__/index.test.js.snap +++ b/tests/__snapshots__/index.test.js.snap @@ -63,6 +63,7 @@ Array [ "Comment", "ConfigProvider", "Empty", + "Result", "Descriptions", "default", ]