diff --git a/components/tag/__tests__/__snapshots__/index.test.js.snap b/components/tag/__tests__/__snapshots__/index.test.js.snap
new file mode 100644
index 000000000..667a1aa8e
--- /dev/null
+++ b/components/tag/__tests__/__snapshots__/index.test.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = `
`;
+
+exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `
`;
+
+exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = `
`;
+
+exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `
`;
+
+exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `
`;
+
+exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `
`;
diff --git a/components/tag/__tests__/index.test.js b/components/tag/__tests__/index.test.js
index 9420ddeb7..eb68438d9 100644
--- a/components/tag/__tests__/index.test.js
+++ b/components/tag/__tests__/index.test.js
@@ -3,30 +3,25 @@ import { asyncExpect } from '@/tests/utils'
import Tag from '..'
describe('Tag', () => {
- beforeAll(() => {
- jest.useFakeTimers()
- })
-
- afterAll(() => {
- jest.useRealTimers()
- })
-
- it('should be closable', () => {
+ it('should be closable', async () => {
const onClose = jest.fn()
const wrapper = mount({
render () {
return
},
+ }, { sync: false, attachToDocument: true })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.anticon-close').length).toBe(1)
+ expect(wrapper.findAll('.ant-tag').length).toBe(1)
+ wrapper.find('.anticon-close').trigger('click')
+ expect(onClose).toBeCalled()
})
- expect(wrapper.findAll('.anticon-cross').length).toBe(1)
- expect(wrapper.findAll('.ant-tag').length).toBe(1)
- wrapper.find('.anticon-cross').trigger('click')
- expect(onClose).toBeCalled()
- jest.runAllTimers()
- expect(wrapper.findAll('.ant-tag').length).toBe(0)
+ // await asyncExpect(() => {
+ // expect(wrapper.findAll('.ant-tag').length).toBe(0)
+ // })
})
- it('should not be closed when prevent default', () => {
+ it('should not be closed when prevent default', async () => {
const onClose = (e) => {
e.preventDefault()
}
@@ -34,11 +29,43 @@ describe('Tag', () => {
render () {
return
},
+ }, { sync: false })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.anticon-close').length).toBe(1)
+ expect(wrapper.findAll('.ant-tag').length).toBe(1)
+ wrapper.find('.anticon-close').trigger('click')
+ })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-tag').length).toBe(1)
+ }, 0)
+ })
+ describe('visibility', () => {
+ it('can be controlled by visible with visible as initial value', async () => {
+ const wrapper = mount(Tag, { propsData: { visible: true }, sync: false })
+ await asyncExpect(() => {
+ expect(wrapper.html()).toMatchSnapshot()
+ wrapper.setProps({ visible: false })
+ })
+ await asyncExpect(() => {
+ expect(wrapper.html()).toMatchSnapshot()
+ wrapper.setProps({ visible: true })
+ })
+ await asyncExpect(() => {
+ expect(wrapper.html()).toMatchSnapshot()
+ })
+ })
+
+ it('can be controlled by visible with hidden as initial value', async () => {
+ const wrapper = mount(Tag, { propsData: { visible: false }, sync: false })
+ await asyncExpect(() => {
+ expect(wrapper.html()).toMatchSnapshot()
+ wrapper.setProps({ visible: true })
+ })
+ await asyncExpect(() => {
+ expect(wrapper.html()).toMatchSnapshot()
+ wrapper.setProps({ visible: false })
+ })
+ await asyncExpect(() => { expect(wrapper.html()).toMatchSnapshot() })
})
- expect(wrapper.findAll('.anticon-cross').length).toBe(1)
- expect(wrapper.findAll('.ant-tag').length).toBe(1)
- wrapper.find('.anticon-cross').trigger('click')
- jest.runAllTimers()
- expect(wrapper.findAll('.ant-tag').length).toBe(1)
})
})
diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md
index 2c04ef110..61953cbab 100644
--- a/components/tag/demo/control.md
+++ b/components/tag/demo/control.md
@@ -14,11 +14,11 @@ It's based on `afterClose` event, which will be triggered while the close animat
-
+
{{`${tag.slice(0, 20)}...`}}
-
+
{{tag}}
diff --git a/components/tag/demo/controlled.md b/components/tag/demo/controlled.md
index 029d48532..744450360 100644
--- a/components/tag/demo/controlled.md
+++ b/components/tag/demo/controlled.md
@@ -13,7 +13,7 @@ By using the `visible` prop, you can control the close state of Tag.
Movies
diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md
index fec89ff0c..1c3e56974 100644
--- a/components/tag/index.en-US.md
+++ b/components/tag/index.en-US.md
@@ -9,7 +9,7 @@
| afterClose | Callback executed when close animation is completed | () => void | - |
| closable | Whether the Tag can be closed | boolean | `false` |
| color | Color of the Tag | string | - |
-| visible | Whether the Tag is closed or not | boolean | `true` |
+| visible(v-model) | Whether the Tag is closed or not | boolean | `true` |
### Tag Events
diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md
index a6957fd8a..d1d7cd014 100644
--- a/components/tag/index.zh-CN.md
+++ b/components/tag/index.zh-CN.md
@@ -9,7 +9,7 @@
| afterClose | 关闭动画完成后的回调 | () => void | - |
| closable | 标签是否可以关闭 | boolean | false |
| color | 标签色 | string | - |
-| visible | 是否显示标签 | boolean | `true` |
+| visible(v-model) | 是否显示标签 | boolean | `true` |
### 事件
| 事件名称 | 说明 | 回调参数 |