feat: Tag component

2020-07-05 16:44:14 +08:00
parent bd5651402a
commit 919161568a
9 changed files with 653 additions and 8 deletions
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div><span class="van-tag van-tag--default">标签</span> <span class="van-tag van-tag--primary">标签</span> <span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--warning">标签</span></div>
+  <div><span class="van-tag van-tag--round van-tag--default">标签</span> <span class="van-tag van-tag--round van-tag--primary">标签</span> <span class="van-tag van-tag--round van-tag--success">标签</span> <span class="van-tag van-tag--round van-tag--danger">标签</span> <span class="van-tag van-tag--round van-tag--warning">标签</span></div>
+  <div><span class="van-tag van-tag--mark van-tag--default">标签</span> <span class="van-tag van-tag--mark van-tag--primary">标签</span> <span class="van-tag van-tag--mark van-tag--success">标签</span> <span class="van-tag van-tag--mark van-tag--danger">标签</span> <span class="van-tag van-tag--mark van-tag--warning">标签</span></div>
+  <div><span class="van-tag van-tag--plain van-tag--default van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--primary van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--success van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--warning van-hairline--surround">标签</span></div>
+  <div><span class="van-tag van-tag--default" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">标签</span></div>
+  <div><span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--medium van-tag--success">标签</span> <span class="van-tag van-tag--large van-tag--success">标签</span></div>
+  <div><span class="van-tag van-tag--medium van-tag--primary" name="van-fade">
+      标签
+    <i class="van-icon van-icon-cross van-tag__close"><!----></i></span> <span class="van-tag van-tag--medium van-tag--success" name="van-fade">
+      标签
+    <i class="van-icon van-icon-cross van-tag__close"><!----></i></span></div>
+</div>
+`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
@@ -0,0 +1,54 @@
+import Tag from '..';
+import { mount } from '../../../test';
+
+test('click event', () => {
+  const click = jest.fn();
+  const wrapper = mount(Tag, {
+    context: {
+      on: {
+        click,
+      },
+    },
+  });
+
+  wrapper.trigger('click');
+  expect(click).toHaveBeenCalledTimes(1);
+});
+
+test('close event', () => {
+  const close = jest.fn();
+  const wrapper = mount(Tag, {
+    propsData: {
+      closeable: true,
+    },
+    context: {
+      on: {
+        close,
+      },
+    },
+  });
+
+  wrapper.find('.van-tag__close').trigger('click');
+  expect(close).toHaveBeenCalledTimes(1);
+});
+
+test('should not trigger click event when close', () => {
+  const close = jest.fn();
+  const click = jest.fn();
+
+  const wrapper = mount(Tag, {
+    propsData: {
+      closeable: true,
+    },
+    context: {
+      on: {
+        close,
+        click,
+      },
+    },
+  });
+
+  wrapper.find('.van-tag__close').trigger('click');
+  expect(close).toHaveBeenCalledTimes(1);
+  expect(click).toHaveBeenCalledTimes(0);
+});