add test for tag, ref #1274 (#1516)

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

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "transparent",
+        "borderRadius": 3,
+        "flexDirection": "row",
+        "overflow": "visible",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "borderRadius": 3,
+          "borderStyle": "solid",
+          "borderWidth": 0.5,
+          "overflow": "hidden",
+          "paddingHorizontal": 15,
+          "paddingVertical": 6,
+        },
+        Object {},
+        Object {
+          "backgroundColor": "#fff",
+          "borderColor": "#ddd",
+        },
+      ]
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "fontSize": 12,
+            "textAlign": "center",
+          },
+          Object {},
+          Object {
+            "color": "#888",
+          },
+        ]
+      }
+    >
+      Basic
+       
+    </Text>
+  </View>
+</View>
+`;

components/tag/__tests__/__snapshots__/index.test.web.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SegmentedControl renders correctly 1`] = `
+<div
+  class="am-tag am-tag-normal"
+>
+  <div
+    class="am-tag-text"
+  >
+    Basic
+  </div>
+</div>
+`;

components/tag/__tests__/index.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Text } from 'react-native';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import Tag from '../index';
+
+describe('Tag', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<Tag>Basic</Tag>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('small size does not have closeDom', () => {
+    const wrapper = shallow(<Tag small closable>Basic</Tag>);
+    expect(wrapper.find('TouchableWithoutFeedback')).toHaveLength(1);
+    expect(wrapper.containsMatchingElement(<Text>x</Text>)).toBeFalsy();
+  });
+
+  it('onChange then selected', () => {
+    const onChange = jest.fn();
+    const wrapper = shallow(<Tag onChange={onChange}>Basic</Tag>);
+    expect(wrapper.state('selected')).toEqual(false);
+    wrapper.find('TouchableWithoutFeedback').at(0).simulate('press');
+    expect(wrapper.state('selected')).toEqual(true);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('onClose and removed', () => {
+    const onClose = jest.fn();
+    const afterClose = jest.fn();
+    const wrapper = shallow(<Tag closable onClose={onClose} afterClose={afterClose}>Basic</Tag>);
+    expect(wrapper.find('TouchableWithoutFeedback')).toHaveLength(2);
+    expect(wrapper.state('closed')).toEqual(false);
+    wrapper.find('TouchableWithoutFeedback').at(1).simulate('press');
+    expect(onClose).toHaveBeenCalled();
+    expect(wrapper.state('closed')).toEqual(true);
+    expect(afterClose).toHaveBeenCalled();
+    expect(wrapper.find('TouchableWithoutFeedback')).toHaveLength(0);
+  });
+});

components/tag/__tests__/index.test.web.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, shallow } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import Tag from '../index.web';
+
+describe('SegmentedControl', () => {
+  it('renders correctly', () => {
+    const wrapper = render(<Tag>Basic</Tag>);
+    expect(renderToJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('small size does not have closeDom', () => {
+    const wrapper = shallow(<Tag small closable>Basic</Tag>);
+    expect(wrapper.find('.am-tag-close')).toHaveLength(0);
+  });
+
+  it('onChange then selected', () => {
+    const onChange = jest.fn();
+    const wrapper = shallow(<Tag onChange={onChange}>Basic</Tag>);
+    expect(wrapper.state('selected')).toEqual(false);
+    wrapper.find('.am-tag').simulate('click');
+    expect(wrapper.state('selected')).toEqual(true);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('onClose and removed', () => {
+    const onClose = jest.fn();
+    const afterClose = jest.fn();
+    const wrapper = shallow(<Tag closable onClose={onClose} afterClose={afterClose}>Basic</Tag>);
+    expect(wrapper.find('.am-tag-close')).toHaveLength(1);
+    expect(wrapper.state('closed')).toEqual(false);
+    wrapper.find('.am-tag-close').simulate('click');
+    expect(onClose).toHaveBeenCalled();
+    expect(wrapper.state('closed')).toEqual(true);
+    expect(afterClose).toHaveBeenCalled();
+    expect(wrapper.find('.am-tag')).toHaveLength(0);
+  });
+});