Merge pull request #478 from yaob421123/yb

test(Flex): add test

Author: ChenlingasMx

packages/core/src/Flex/index.tsx

@@ -55,7 +55,7 @@ export default class Flex extends Component<FlexProps> {
       sty.alignItems = align.replace(/^start$/g, 'flex-start').replace(/^end$/g, 'flex-end') as FlexStyle['alignItems'];
     }
     return (
-      <View style={[sty, style]}>
+      <View testID="RNE__Flex__wrap" style={[sty, style]}>
         {children &&
           React.Children.map(children, (child: React.ReactNode) => {
             if (!React.isValidElement(child)) {

test-ci/src/__tests__/divider.tsx

@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 import 'react-native';
 import React from 'react';
 import Divider from '../lib/Divider';
-import { render, fireEvent } from '@testing-library/react-native';
-import { keys, colorRgb, toObject } from '../utils';
+import { render } from '@testing-library/react-native';
+import { keys, toObject } from '../utils';
 
 const TYPES: keys = {
   horizontal: 'row',

test-ci/src/__tests__/flex.tsx

@@ -0,0 +1,121 @@
+import 'react-native';
+import React from 'react';
+import Flex from '../lib/Flex';
+import Button from '../lib/Button';
+import { render } from '@testing-library/react-native';
+import { keys, toObject } from '../utils';
+
+const JUSTIFYS: keys = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  between: 'space-between',
+  around: 'space-around',
+};
+
+const ALIGNS: keys = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  stretch: 'stretch',
+  baseline: 'baseline',
+};
+
+describe('Flex', () => {
+  describe.each`
+    direction
+    ${'row'}
+    ${'column'}
+    ${'row-reverse'}
+    ${'column-reverse'}
+  `('$direction', ({ direction }) => {
+    it(`should display direction ${direction} flex`, () => {
+      const { getByTestId } = render(
+        <Flex direction={direction}>
+          <Flex.Item>
+            <Button>A</Button>
+          </Flex.Item>
+          <Flex.Item>
+            <Button>B</Button>
+          </Flex.Item>
+        </Flex>,
+      );
+      const component = getByTestId('RNE__Flex__wrap');
+      const styles = toObject(component.props.style);
+      expect(styles.flexDirection).toBe(direction);
+    });
+  });
+
+  describe.each`
+    justify
+    ${'start'}
+    ${'end'}
+    ${'center'}
+    ${'between'}
+    ${'around'}
+  `('$justify', ({ justify }) => {
+    it(`should display justify ${justify} flex`, () => {
+      const { getByTestId } = render(
+        <Flex justify={justify}>
+          <Flex.Item>
+            <Button>A</Button>
+          </Flex.Item>
+          <Flex.Item>
+            <Button>B</Button>
+          </Flex.Item>
+        </Flex>,
+      );
+      const component = getByTestId('RNE__Flex__wrap');
+      const styles = toObject(component.props.style);
+      expect(styles.justifyContent).toBe(JUSTIFYS[justify]);
+    });
+  });
+
+  describe.each`
+    align
+    ${'start'}
+    ${'end'}
+    ${'center'}
+    ${'stretch'}
+    ${'baseline'}
+  `('$align', ({ align }) => {
+    it(`should display align ${align} flex`, () => {
+      const { getByTestId } = render(
+        <Flex align={align}>
+          <Flex.Item>
+            <Button>A</Button>
+          </Flex.Item>
+          <Flex.Item>
+            <Button>B</Button>
+          </Flex.Item>
+        </Flex>,
+      );
+      const component = getByTestId('RNE__Flex__wrap');
+      const styles = toObject(component.props.style);
+      expect(styles.alignItems).toBe(ALIGNS[align]);
+    });
+  });
+
+  describe.each`
+    wrap
+    ${'wrap'}
+    ${'nowrap'}
+    ${'wrap-reverse'}
+  `('$wrap', ({ wrap }) => {
+    it(`should display align ${wrap} flex`, () => {
+      const { getByTestId } = render(
+        <Flex wrap={wrap}>
+          <Flex.Item>
+            <Button>A</Button>
+          </Flex.Item>
+          <Flex.Item>
+            <Button>B</Button>
+          </Flex.Item>
+        </Flex>,
+      );
+      const component = getByTestId('RNE__Flex__wrap');
+      const styles = toObject(component.props.style);
+      expect(styles.flexWrap).toBe(wrap);
+    });
+  });
+});