test(Icon): add Icon test

Author: yaob421123

packages/core/src/Icon/index.tsx

@@ -19,29 +19,34 @@ export interface IconsProps extends SvgProps {
   xml?: string;
 }
 
-export default class Icons extends React.Component<IconsProps> {
-  static displayName = 'uiwm.Icon';
-  static defaultProps: IconsProps = {
-    size: 26,
-  };
-  render() {
-    const { name, size, fill = '#000000', stroke, xml, paths, color, ...otherProps } = this.props;
-    if (xml) {
-      return <SvgXml xml={xml} height={size} width={size} {...otherProps} />;
-    }
-    let pathData = paths;
-    if (!pathData) {
-      if (!name || !svgPaths[name]) {
-        return null;
-      }
-      pathData = svgPaths[name] as string[];
+export default (props: IconsProps) => {
+  const { size = 26, name, fill = '#000000', stroke, xml, paths, color, ...otherProps } = props;
+
+  if (xml) {
+    return <SvgXml testID="RNE__Icon__svgXml" xml={xml} height={size} width={size} {...otherProps} />;
+  }
+
+  let pathData = paths;
+  if (!pathData) {
+    if (!name || !svgPaths[name]) {
+      return null;
     }
-    return (
-      <Svg fill={color || fill} stroke={stroke} height={size} width={size} viewBox="0 0 20 20" {...otherProps}>
-        {pathData.map((d: string, i: number) => (
-          <Path key={i} d={d} fillRule="evenodd" />
-        ))}
-      </Svg>
-    );
+    pathData = svgPaths[name] as string[];
   }
-}
+
+  return (
+    <Svg
+      testID="RNE__Icon__svg"
+      fill={color || fill}
+      stroke={stroke}
+      height={size}
+      width={size}
+      viewBox="0 0 20 20"
+      {...otherProps}
+    >
+      {pathData.map((d: string, i: number) => (
+        <Path key={i} d={d} fillRule="evenodd" />
+      ))}
+    </Svg>
+  );
+};

test-ci/src/__tests__/buttonGroup.tsx

@@ -1,7 +1,3 @@
-// import ButtonGroup from '../lib/ButtonGroup';
-// import Button from '../lib/Button';
-// import renderer from 'react-test-renderer';
-
 import 'react-native';
 import React from 'react';
 import ButtonGroup from '../lib/ButtonGroup';

test-ci/src/__tests__/icon.tsx

@@ -0,0 +1,63 @@
+import 'react-native';
+import React from 'react';
+import Icon from '../lib/Icon';
+import { render, fireEvent } from '@testing-library/react-native';
+import svgPaths from '@uiw/icons/fonts/w-icon.json';
+
+describe('Icon', () => {
+  // it('name', () => {
+  //   const { getByTestId } = render(<Icon name='apple' />);
+  //   const component = getByTestId('RNE__Icon__svg');
+  //   const svg = component.props.children.props.children[0].props.d;
+  //   expect(svg).toBe(svgPaths['apple'][0]);
+  // });
+
+  it('fill', () => {
+    const { getByTestId } = render(<Icon name="apple" fill="#ff0000" />);
+    const component = getByTestId('RNE__Icon__svg');
+    expect(component.props.fill).toBe('#ff0000');
+  });
+
+  it('stroke', () => {
+    const { getByTestId } = render(<Icon name="apple" stroke="#ffff00" />);
+    const component = getByTestId('RNE__Icon__svg');
+    expect(component.props.stroke).toBe('#ffff00');
+  });
+
+  it('xml', () => {
+    const xml = `
+      <svg width="20" height="20" viewBox="0 0 20 20">
+        <path
+          fill-rule="evenodd"
+          fill="#000"
+          d="M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z"
+        />
+      </svg>
+    `;
+    const { getByTestId } = render(<Icon xml={xml} />);
+    const component = getByTestId('RNE__Icon__svgXml');
+    expect(component.props.xml).toBe(xml);
+  });
+
+  it('size', () => {
+    const { getByTestId } = render(<Icon name="apple" size={21} />);
+    const component = getByTestId('RNE__Icon__svg');
+    expect(component.props.width).toBe(21);
+    expect(component.props.height).toBe(21);
+  });
+
+  it('width and height', () => {
+    const { getByTestId } = render(<Icon name="apple" width={21} height={22} />);
+    const component = getByTestId('RNE__Icon__svg');
+    expect(component.props.width).toBe(21);
+    expect(component.props.height).toBe(22);
+  });
+
+  it('onPress', () => {
+    const fn = jest.fn();
+    const { getByTestId } = render(<Icon name="apple" onPress={fn} />);
+    const component = getByTestId('RNE__Icon__svg');
+    fireEvent(component, 'press');
+    expect(fn).toHaveBeenCalled();
+  });
+});