Descriptions: add description component (#21129)

test/unit/specs/descriptions.spec.js

@@ -0,0 +1,159 @@
+// import Descriptions from 'packages/descriptions';
+// import DescriptionsItem from '../src/description-item';
+
+// import { createTest, destroyVM, createVue, waitImmediate, wait} from '../util';
+import { destroyVM, createVue, waitImmediate } from '../util';
+
+describe('Descriptions', () => {
+  let vm;
+
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('render test', () => {
+    vm = createVue(
+      {
+        template: `
+          <el-descriptions title="title" extra="extra">
+            <el-descriptions-item v-for="item in 4"></el-descriptions-item>
+          </el-descriptions>
+        `
+      },
+      true
+    );
+    const el = vm.$el;
+    expect(el.querySelector('.el-descriptions__title').textContent).to.equal('title');
+    expect(el.querySelector('.el-descriptions__extra').textContent).to.equal('extra');
+    expect(el.querySelectorAll('.el-descriptions-item__label').length).to.equal(4);
+  });
+
+  it('should render border props', () => {
+    vm = createVue(
+      {
+        template: `
+          <el-descriptions border>
+            <el-descriptions-item v-for="item in 3" :label="item">{{ item }}</el-descriptions-item>
+          </el-descriptions
+        `
+      },
+      true
+    );
+    const el = vm.$el;
+    expect(Array.from(el.querySelector('table').classList)).to.contain('is-bordered');
+  });
+
+  it('should render class props', () => {
+    vm = createVue(
+      {
+        template: `
+          <el-descriptions border label-class-name="label-class-name" content-class-name="content-class-name">
+            <el-descriptions-item v-for="item in 3" :label="item">{{ item }}</el-descriptions-item>
+          </el-descriptions>
+        `
+      },
+      true);
+
+    expect(Array.from(vm.$el.querySelector('.el-descriptions-item__label').classList)).to.contain('label-class-name');
+    expect(Array.from(vm.$el.querySelector('.el-descriptions-item__content').classList)).to.contain('content-class-name');
+  });
+
+  it('should render column props', async() => {
+    vm = createVue({
+      template: `
+      <el-descriptions :column="5" :border="border">
+        <el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
+      </el-descriptions>
+    `,
+      data() {
+        return {
+          border: false
+        };
+      }
+    }, true);
+
+    expect(vm.$el.querySelector('tr').children.length).to.equal(5);
+    vm.border = true;
+    await waitImmediate();
+    expect(vm.$el.querySelector('tr').children.length).to.equal(10);
+  });
+
+  it('should render direction props', async() => {
+    vm = createVue({
+
+      template: `
+      <el-descriptions :column="5" :direction="direction" border>
+        <el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
+      </el-descriptions>
+    `,
+      data() {
+        return {
+          direction: 'horizontal'
+        };
+      }
+    }, true);
+
+    expect(vm.$el.querySelector('tr').children.length).to.equal(10);
+    expect(vm.$el.querySelectorAll('tr')[0].children[0].innerHTML).to.equal(vm.$el.querySelectorAll('tr')[0].children[1].innerHTML);
+    vm.direction = 'vertical';
+    await waitImmediate();
+    expect(vm.$el.querySelector('tr').children.length).to.equal(5);
+    expect(vm.$el.querySelectorAll('tr')[0].children[0].innerHTML).to.equal(vm.$el.querySelectorAll('tr')[1].children[0].innerHTML);
+  });
+
+  it('should render title slots', async() => {
+    vm = createVue({
+      template: `
+      <el-descriptions>
+        <template slot="title">title</template>
+        <el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
+      </el-descriptions>
+    `
+    }, true);
+
+    expect(vm.$el.querySelector('.el-descriptions__title').innerText).to.equal('title');
+  });
+
+  it('should render span props', async() => {
+    vm = createVue({
+      template: `
+        <el-descriptions :column="3">
+          <el-descriptions-item label="1">1</el-descriptions-item>
+          <el-descriptions-item label="2" :span="2">2</el-descriptions-item>
+          <el-descriptions-item label="3">3</el-descriptions-item>
+        </el-descriptions>
+      `
+    }, true);
+
+    expect(vm.$el.querySelectorAll('td')[1].getAttribute('colSpan')).to.equal('2');
+  });
+
+  it('re-rendered when slots is updated', async() => {
+    const CHANGE_VALUE = 'company';
+    vm = createVue({
+      template: `
+        <div>
+          <el-descriptions v-for="(remark,index) in remarks" :key="index" :title="remark">
+            <el-descriptions-item label="remark">
+              <el-tag size="small">{{remark}}</el-tag>
+            </el-descriptions-item>
+          </el-descriptions>
+          <button @click="onClick">click</button>
+        </div>
+      `,
+      data() {
+        return {
+          remarks: ['school', 'hospital']
+        };
+      },
+      methods: {
+        onClick() {
+          this.$set(this.remarks, 0, CHANGE_VALUE);
+        }
+      }
+    }, true);
+    vm.$el.querySelector('button').click();
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-tag').innerText).to.equal(CHANGE_VALUE);
+  });
+});