test: add descriptions test

components/descriptions/Col.jsx

@@ -10,20 +10,24 @@ const ColProps = {
 };
 
 const Col = {
+  functional: true,
   props: ColProps,
-  render() {
+  render(h, ctx) {
-    const { child, bordered, colon, type, layout } = this.$props;
+    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`, {
+      class: [
+        `${prefixCls}-item-label`,
+        {
           [`${prefixCls}-item-colon`]: colon,
           [`${prefixCls}-item-no-label`]: !label,
-      }],
+        },
-      key: 'label',
+      ],
+      key: `${key}-label`,
     };
     if (layout === 'vertical') {
       labelProps.attrs.colSpan = span * 2 - 1;
@@ -34,7 +38,7 @@ const Col = {
         return <th {...labelProps}>{label}</th>;
       }
       return (
-        <td class={`${prefixCls}-item-content`} key="content" colSpan={span * 2 - 1}>
+        <td class={`${prefixCls}-item-content`} key={`${key}-content`} colSpan={span * 2 - 1}>
           {slots.default}
         </td>
       );
@@ -43,7 +47,7 @@ const Col = {
       if (type === 'content') {
         return (
           <td colSpan={span} class={`${prefixCls}-item`}>
-            <span class={`${prefixCls}-item-content`} key="content">
+            <span class={`${prefixCls}-item-content`} key={`${key}-content`}>
               {slots.default}
             </span>
           </td>
@@ -53,7 +57,7 @@ const Col = {
         <td colSpan={span} class={`${prefixCls}-item`}>
           <span
             class={[`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon }]}
-            key="label"
+            key={`${key}-label`}
           >
             {label}
           </span>
@@ -63,7 +67,7 @@ const Col = {
     return (
       <td colSpan={span} class={`${prefixCls}-item`}>
         <span {...labelProps}>{label}</span>
-        <span class={`${prefixCls}-item-content`} key="content">
+        <span class={`${prefixCls}-item-content`} key={`${key}-content`}>
           {slots.default}
         </span>
       </td>

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`] = `
+<div class="ant-descriptions">
+  <div class="ant-descriptions-view">
+    <table>
+      <tbody>
+        <tr class="ant-descriptions-row">
+          <td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`Descriptions Descriptions support style 1`] = `
+<div class="ant-descriptions" style="background-color: rgb(232, 232, 232);">
+  <div class="ant-descriptions-view">
+    <table>
+      <tbody>
+        <tr class="ant-descriptions-row">
+          <td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon ant-descriptions-item-no-label"></span><span class="ant-descriptions-item-content">Cloud Database</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`Descriptions Descriptions.Item support className 1`] = `
+<div class="ant-descriptions">
+  <div class="ant-descriptions-view">
+    <table>
+      <tbody>
+        <tr class="ant-descriptions-row">
+          <td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`Descriptions column is number 1`] = `
+<div class="ant-descriptions">
+  <div class="ant-descriptions-view">
+    <table>
+      <tbody>
+        <tr class="ant-descriptions-row">
+          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
+          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td>
+          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">time</span><span class="ant-descriptions-item-content">18:00:00</span></td>
+        </tr>
+        <tr class="ant-descriptions-row">
+          <td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</span><span class="ant-descriptions-item-content">$80.00</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`Descriptions vertical layout 1`] = `
+<div class="ant-descriptions">
+  <div class="ant-descriptions-view">
+    <table>
+      <tbody>
+        <tr class="ant-descriptions-row">
+          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span></td>
+          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</span></td>
+          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">time</span></td>
+        </tr>
+        <tr class="ant-descriptions-row">
+          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content">Cloud Database</span></td>
+          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content">Prepaid</span></td>
+          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content">18:00:00</span></td>
+        </tr>
+        <tr class="ant-descriptions-row">
+          <td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</span></td>
+        </tr>
+        <tr class="ant-descriptions-row">
+          <td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-content">$80.00</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`Descriptions when item is rendered conditionally 1`] = `
+<div class="ant-descriptions">
+  <div class="ant-descriptions-view">
+    <table>
+      <tbody>
+        <tr class="ant-descriptions-row">
+          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
+          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td>
+          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">time</span><span class="ant-descriptions-item-content">18:00:00</span></td>
+        </tr>
+        <tr class="ant-descriptions-row">
+          <td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</span><span class="ant-descriptions-item-content">$80.00</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;

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 (
+            <Descriptions ref="descriptions" column={{ xs: 8, sm: 16, md: 24 }}>
+              <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+              <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+              <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+              <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+            </Descriptions>
+          );
+        },
+      },
+      { 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 (
+          <Descriptions column="3">
+            <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+            <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+            <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+            <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+          </Descriptions>
+        );
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+    wrapper.destroy();
+  });
+
+  it('warning if ecceed the row span', () => {
+    resetWarned();
+
+    mount({
+      render() {
+        return (
+          <Descriptions column={3}>
+            <Descriptions.Item label="Product" span={2}>
+              Cloud Database
+            </Descriptions.Item>
+            <Descriptions.Item label="Billing" span={2}>
+              Prepaid
+            </Descriptions.Item>
+          </Descriptions>
+        );
+      },
+    });
+    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 (
+          <Descriptions>
+            <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+            <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+            <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+            <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+            {hasDiscount && <Descriptions.Item label="Discount">$20.00</Descriptions.Item>}
+          </Descriptions>
+        );
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+    wrapper.destroy();
+  });
+
+  it('vertical layout', () => {
+    // eslint-disable-next-line global-require
+    const wrapper = mount({
+      render() {
+        return (
+          <Descriptions layout="vertical">
+            <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+            <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+            <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+            <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+          </Descriptions>
+        );
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+    wrapper.destroy();
+  });
+
+  it('Descriptions.Item support className', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <Descriptions>
+            <Descriptions.Item label="Product" className="my-class">
+              Cloud Database
+            </Descriptions.Item>
+          </Descriptions>
+        );
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('Descriptions support colon', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <Descriptions colon={false}>
+            <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+          </Descriptions>
+        );
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('Descriptions support style', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <Descriptions style={{ backgroundColor: '#e8e8e8' }}>
+            <Descriptions.Item>Cloud Database</Descriptions.Item>
+          </Descriptions>
+        );
+      },
+    });
+    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 (
+            <Descriptions>
+              <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+              <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+              <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+              <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+              <Descriptions.Item>No-Label</Descriptions.Item>
+            </Descriptions>
+          );
+        },
+      },
+      { 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 (
+            <Descriptions column={{ xs: 2 }}>
+              <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+              <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+              <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+              <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+            </Descriptions>
+          );
+        },
+      },
+      { sync: false, attachToDocument: true },
+    );
+    await asyncExpect(() => {});
+    expect(wrapper.findAll('tr')).toHaveLength(2);
+
+    enquire.callunmatch();
+    wrapper.destroy();
+
+    await asyncExpect(() => {});
+    await asyncExpect(() => {});
+    await asyncExpect(() => {});
+    await asyncExpect(() => {});
+  });
+});

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 (
       <div
-        class={[prefixCls, {
+        class={[
+          prefixCls,
+          {
             [`${prefixCls}-${size}`]: size !== 'default',
             [`${prefixCls}-bordered`]: !!bordered,
-        }]}
+          },
+        ]}
       >
         {title && <div class={`${prefixCls}-title`}>{title}</div>}
         <div class={`${prefixCls}-view`}>

tests/__snapshots__/index.test.js.snap

@@ -63,6 +63,7 @@ Array [
   "Comment",
   "ConfigProvider",
   "Empty",
+  "Result",
   "Descriptions",
   "default",
 ]