test: add avatar badge icon modal unit test

components/avatar/__tests__/Avatar.test.js

@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils'
+import Avatar from '..'
+
+describe('Avatar Render', () => {
+  it('Render long string correctly', () => {
+    const wrapper = mount(Avatar, {
+      slots: {
+        default: 'TestString',
+      },
+    })
+    const children = wrapper.findAll('.ant-avatar-string')
+    expect(children.length).toBe(1)
+  })
+})

components/badge/__tests__/index.test.js

@@ -0,0 +1,21 @@
+import { mount } from '@vue/test-utils'
+import Badge from '../index'
+
+describe('Badge', () => {
+  test('badge dot not scaling count > 9', () => {
+    const badge = mount({
+      render () {
+        return <Badge count={10} dot />
+      },
+    })
+    expect(badge.findAll('.ant-card-multiple-words').length).toBe(0)
+  })
+  test('badge dot not showing count == 0', () => {
+    const badge = mount({
+      render () {
+        return <Badge count={0} dot />
+      },
+    })
+    expect(badge.findAll('.ant-badge-dot').length).toBe(0)
+  })
+})

components/icon/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon should render to a <i class="xxx"></i> 1`] = `<i class="anticon anticon-appstore my-icon-classname"></i>`;

components/icon/__tests__/index.test.js

@@ -0,0 +1,13 @@
+import { mount } from '@vue/test-utils'
+import Icon from '..'
+
+describe('Icon', () => {
+  it('should render to a <i class="xxx"></i>', () => {
+    const wrapper = mount({
+      render (h) {
+        return <Icon type='appstore' class='my-icon-classname' />
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

components/modal/__tests__/Modal.test.js

@@ -0,0 +1,56 @@
+import { mount } from '@vue/test-utils'
+import Modal from '..'
+
+const ModalTester = {
+  props: ['footer', 'visible'],
+  methods: {
+    getContainer () {
+      return this.$refs.container
+    },
+  },
+
+  render () {
+    const modalProps = {
+      props: {
+        ...this.$props,
+        getContainer: this.getContainer,
+      },
+    }
+    return (
+      <div>
+        <div ref='container' />
+        <Modal
+          {...modalProps}
+        >
+          Here is content of Modal
+        </Modal>
+      </div>
+    )
+  },
+}
+
+describe('Modal', () => {
+  it('render correctly', () => {
+    const wrapper = mount(ModalTester)
+    expect(wrapper.html()).toMatchSnapshot()
+    const wrapper1 = mount(
+      {
+        render () {
+          return <ModalTester visible />
+        },
+      }
+    )
+    expect(wrapper1.html()).toMatchSnapshot()
+  })
+
+  it('render without footer', () => {
+    const wrapper = mount(
+      {
+        render () {
+          return <ModalTester visible footer={null} />
+        },
+      }
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

components/modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal render correctly 1`] = `
+<div>
+  <div></div>
+  <!---->
+</div>
+`;
+
+exports[`Modal render correctly 2`] = `
+<div>
+  <div>
+    <div>
+      <div class="ant-modal-mask"></div>
+      <div tabindex="-1" role="dialog" class="ant-modal-wrap ">
+        <div role="document" class="ant-modal" style="width: 520px;">
+          <div class="ant-modal-content">
+            <button aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"></span></button>
+            <div class="ant-modal-body">Here is content of Modal</div>
+            <div class="ant-modal-footer">
+              <div>
+                <button type="button" class="ant-btn ant-btn-default"><span>Cancel</span></button>
+                <button type="button" class="ant-btn ant-btn-primary"><span>OK</span></button>
+              </div>
+            </div>
+          </div>
+          <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinel</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`Modal render without footer 1`] = `
+<div>
+  <div>
+    <div>
+      <div class="ant-modal-mask"></div>
+      <div tabindex="-1" role="dialog" class="ant-modal-wrap ">
+        <div role="document" class="ant-modal" style="width: 520px;">
+          <div class="ant-modal-content">
+            <button aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"></span></button>
+            <div class="ant-modal-body">Here is content of Modal</div>
+          </div>
+          <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinel</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!---->
+</div>
+`;

tests/setup.js

@@ -1,3 +1,5 @@
+import Vue from 'vue'
+Vue.config.silent = true
 
 /* eslint-disable global-require */
 if (typeof window !== 'undefined') {