test(cell): add test case

packages/varlet-ui/src/cell/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test cell example 1`] = `
+"<div>
+  <div class=\\"app-type\\">基本使用</div>
+  <div class=\\"var-cell\\">
+    <!--v-if-->
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+  <div class=\\"var-cell\\">
+    <!--v-if-->
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</div>
+<div>
+  <div class=\\"app-type\\">显示图标</div>
+  <div class=\\"var-cell\\">
+    <div class=\\"var-cell__icon\\"><i class=\\"var-icon var-icon--set var-icon-fire var--flex\\" style=\\"transition: all 0ms;\\"></i></div>
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <!--v-if-->
+    </div>
+    <div class=\\"var-cell__extra\\"><i class=\\"var-icon var-icon--set var-icon-information\\" style=\\"transition: all 0ms;\\"></i></div>
+  </div>
+  <div class=\\"var-cell\\">
+    <div class=\\"var-cell__icon\\"><i class=\\"var-icon var-icon--set var-icon-fire var--flex\\" style=\\"transition: all 0ms;\\"></i></div>
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <!--v-if-->
+    </div>
+    <div class=\\"var-cell__extra\\"><i class=\\"var-icon var-icon--set var-icon-information\\" style=\\"transition: all 0ms;\\"></i></div>
+  </div>
+</div>
+<div>
+  <div class=\\"app-type\\">显示描述</div>
+  <div class=\\"var-cell\\">
+    <div class=\\"var-cell__icon\\"><i class=\\"var-icon var-icon--set var-icon-fire var--flex\\" style=\\"transition: all 0ms;\\"></i></div>
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <div class=\\"var-cell__desc\\">描述</div>
+    </div>
+    <div class=\\"var-cell__extra\\"><i class=\\"var-icon var-icon--set var-icon-information\\" style=\\"transition: all 0ms;\\"></i></div>
+  </div>
+  <div class=\\"var-cell\\">
+    <!--v-if-->
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <div class=\\"var-cell__desc\\">描述</div>
+    </div>
+    <!--v-if-->
+  </div>
+</div>
+<div>
+  <div class=\\"app-type\\">显示边框</div>
+  <div class=\\"var-cell var-cell--border\\">
+    <!--v-if-->
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+  <div class=\\"var-cell var-cell--border\\">
+    <!--v-if-->
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`test cell props 1`] = `
+"<div class=\\"var-cell var-cell--border\\">
+  <div class=\\"var-cell__icon test-icon-class\\"><i class=\\"var-icon var-icon--set var-icon-fire var--flex\\" style=\\"transition: all 0ms;\\"></i></div>
+  <div class=\\"var-cell__content\\">
+    <div class=\\"var-cell__title test-title-class\\">This is Cell</div>
+    <div class=\\"var-cell__desc test-desc-class\\">This is desc</div>
+  </div>
+  <div class=\\"var-cell__extra test-extra-class\\">text</div>
+</div>"
+`;

packages/varlet-ui/src/cell/__tests__/index.spec.js

@@ -0,0 +1,37 @@
+import example from '../example'
+import Cell from '..'
+import VarCell from '../Cell'
+import { mount } from '@vue/test-utils'
+import { createApp } from 'vue'
+
+test('test cell example', () => {
+  const wrapper = mount(example)
+
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
+test('test cell plugin', () => {
+  const app = createApp({}).use(Cell)
+  expect(app.component(Cell.name)).toBeTruthy()
+})
+
+test('test cell props', async () => {
+  const wrapper = mount(VarCell, {
+    props: {
+      title: 'This is Cell',
+      desc: 'This is desc',
+      border: true,
+      iconClass: 'test-icon-class',
+      titleClass: 'test-title-class',
+      descClass: 'test-desc-class',
+      extraClass: 'test-extra-class',
+      icon: 'fire'
+    },
+    slots: {
+      extra: () => 'text'
+    }
+  })
+
+
+  expect(wrapper.html()).toMatchSnapshot()
+})