Improved unit tests coverage in the package (react-native-elements#2974)

* improved avatar unit tests coverage * improved switch unit tests * improved checkbox unit tests * improved themeprovider and fab unit tests * improved input tests * added more unit tests * improved withBadge unit tests * Added more tests for button and ListItem
tt0mmy · Apr 25, 2021 · 031c05d · 031c05d
1 parent ce1b94a
commit 031c05d
Show file tree

Hide file tree

Showing 24 changed files with 1,599 additions and 19 deletions.
diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
@@ -74,8 +74,8 @@ const AvatarComponent: Avatar = ({
   children,
   ...attributes
 }: React.PropsWithChildren<AvatarProps>) => {
-  const width =
-    typeof size === 'number' ? size : avatarSizes[size] || avatarSizes.small;
+  let width = avatarSizes.small;
+  width = typeof size === 'number' ? size : avatarSizes[size];
   const height = width;
   const titleSize = width / 2;
   const iconSize = width / 2;

diff --git a/src/avatar/__tests__/Avatar.js b/src/avatar/__tests__/Avatar.js
@@ -118,6 +118,14 @@ describe('Avatar Component', () => {
       expect(component.length).toBe(1);
       expect(toJson(component)).toMatchSnapshot();
     });
+
+    it('default', () => {
+      const component = shallow(
+        <Avatar source={{ uri: 'https://i.imgur.com/0y8Ftya.jpg' }} />
+      );
+      expect(component.length).toBe(1);
+      expect(toJson(component)).toMatchSnapshot();
+    });
   });
 
   describe('Placeholders', () => {
@@ -170,6 +178,19 @@ describe('Avatar Component', () => {
       expect(toJson(component)).toMatchSnapshot();
     });
 
+    it('renders using image with imageProps', () => {
+      const component = shallow(
+        <Avatar
+          source={{ uri: 'https://i.imgur.com/0y8Ftya.jpg' }}
+          iconStyle={{
+            backgroundColor: 'red',
+          }}
+          imageProps={{ containerStyle: {} }}
+        />
+      );
+      expect(toJson(component)).toMatchSnapshot();
+    });
+
     it("shouldn't show placeholder if not using source", () => {
       const component = shallow(
         <Avatar

diff --git a/src/avatar/__tests__/__snapshots__/Avatar.js.snap b/src/avatar/__tests__/__snapshots__/Avatar.js.snap
@@ -93,6 +93,40 @@ exports[`Avatar Component Placeholders renders using icon with defaults 1`] = `
 </View>
 `;
 
+exports[`Avatar Component Placeholders renders using image with imageProps 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "transparent",
+      "height": 34,
+      "width": 34,
+    }
+  }
+>
+  <ForwardRef(Themed.Image)
+    ImageComponent={[Function]}
+    containerStyle={
+      Object {
+        "flex": 1,
+      }
+    }
+    placeholderStyle={Object {}}
+    source={
+      Object {
+        "uri": "https://i.imgur.com/0y8Ftya.jpg",
+      }
+    }
+    style={
+      Object {
+        "flex": 1,
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</View>
+`;
+
 exports[`Avatar Component Placeholders shouldn't show placeholder if not using source 1`] = `
 <View
   style={
@@ -413,6 +447,40 @@ exports[`Avatar Component Sizes accepts xlarge 1`] = `
 </View>
 `;
 
+exports[`Avatar Component Sizes default 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "transparent",
+      "height": 34,
+      "width": 34,
+    }
+  }
+>
+  <ForwardRef(Themed.Image)
+    ImageComponent={[Function]}
+    containerStyle={
+      Object {
+        "flex": 1,
+      }
+    }
+    placeholderStyle={Object {}}
+    source={
+      Object {
+        "uri": "https://i.imgur.com/0y8Ftya.jpg",
+      }
+    }
+    style={
+      Object {
+        "flex": 1,
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</View>
+`;
+
 exports[`Avatar Component allows custom imageProps 1`] = `
 <View
   style={

diff --git a/src/badge/__tests__/__snapshots__/withBadge.js.snap b/src/badge/__tests__/__snapshots__/withBadge.js.snap
@@ -27,6 +27,32 @@ exports[`withBadge HOC just value should render when given a function as value 1
 </View>
 `;
 
+exports[`withBadge HOC just value should render when no value 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+      "position": "relative",
+    }
+  }
+>
+  <ForwardRef />
+  <Themed.Badge
+    containerStyle={
+      Object {
+        "bottom": undefined,
+        "left": undefined,
+        "position": "absolute",
+        "right": -3,
+        "top": 3,
+      }
+    }
+    status="error"
+  />
+</View>
+`;
+
 exports[`withBadge HOC just value should render with just a value 1`] = `
 <View
   style={

diff --git a/src/badge/__tests__/withBadge.js b/src/badge/__tests__/withBadge.js
@@ -19,6 +19,13 @@ describe('withBadge HOC', () => {
       expect(component.length).toBe(1);
       expect(toJson(component)).toMatchSnapshot();
     });
+
+    it('should render when no value', () => {
+      const BadgedComponent = withBadge()(TouchableOpacity);
+      const component = shallow(<BadgedComponent />);
+      expect(component.length).toBe(1);
+      expect(toJson(component)).toMatchSnapshot();
+    });
   });
 
   describe('with options', () => {

diff --git a/src/buttons/__tests__/Button.js b/src/buttons/__tests__/Button.js
@@ -8,6 +8,20 @@ import { ThemeProvider } from '../../config';
 import ThemedButton, { Button } from '../Button';
 
 describe('Button Component', () => {
+  beforeEach(() => {
+    let useEffect = jest.spyOn(React, 'useEffect');
+    useEffect.mockImplementation((f) => f());
+    const app = shallow(
+      <Button
+        theme={theme}
+        linearGradientProps={{
+          colors: ['#4c669f', '#3b5998', '#192f6a'],
+        }}
+        ViewComponent={null}
+      />
+    );
+    expect(app.length).toBe(1);
+  });
   it('should render without issues', () => {
     const component = shallow(<Button theme={theme} />);
     expect(component.length).toBe(1);

diff --git a/src/buttons/__tests__/ButtonGroup.js b/src/buttons/__tests__/ButtonGroup.js
@@ -175,6 +175,7 @@ describe('ButtonGroup Component', () => {
         buttonStyle={{ backgroundColor: 'blue' }}
         textStyle={{ color: 'pink' }}
         vertical
+        innerBorderStyle={{}}
       />
     );
     expect(component.length).toBe(1);

diff --git a/src/buttons/__tests__/FAB.js b/src/buttons/__tests__/FAB.js
@@ -5,11 +5,52 @@ import toJson from 'enzyme-to-json';
 import theme from '../../config/theme';
 
 describe('FAB Component', () => {
+  beforeEach(() => {
+    let useEffect = jest.spyOn(React, 'useEffect');
+    useEffect.mockImplementation((f) => f());
+    const app = shallow(<FAB theme={theme} />);
+    expect(app.length).toBe(1);
+  });
   it('should render without issues', () => {
     const app = shallow(<FAB theme={theme} />);
     expect(app.length).toBe(1);
     expect(toJson(app)).toMatchSnapshot();
   });
+  it('should render with placement', () => {
+    const app = shallow(<FAB theme={theme} placement="left" />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
+  it('should render with title and size small', () => {
+    const app = shallow(<FAB theme={theme} title="test" size="small" />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
+  it('should render with title and size large', () => {
+    const app = shallow(<FAB theme={theme} title="test" size="large" />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
+  it('should render without title and size small', () => {
+    const app = shallow(<FAB theme={theme} size="small" />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
+  it('should render without title and size large', () => {
+    const app = shallow(<FAB theme={theme} size="large" />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
+  it('should render with disabled', () => {
+    const app = shallow(<FAB theme={theme} disabled={true} />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
+  it('should render with upperCase', () => {
+    const app = shallow(<FAB theme={theme} upperCase={true} />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
   it('should render invisible', () => {
     const app = shallow(<FAB theme={theme} visible={false} />);
     expect(app.length).toBe(1);

diff --git a/src/buttons/__tests__/SpeedDial.js b/src/buttons/__tests__/SpeedDial.js
@@ -5,11 +5,17 @@ import toJson from 'enzyme-to-json';
 import theme from '../../config/theme';
 
 describe('Speed Dial Component', () => {
+  beforeEach(() => {
+    let useEffect = jest.spyOn(React, 'useEffect');
+    useEffect.mockImplementation((f) => f());
+    const app = shallow(<SpeedDial open theme={theme} />);
+    expect(app.length).toBe(1);
+  });
   it('should render without issues', () => {
     const app = shallow(
       <SpeedDial
         theme={theme}
-        open={true}
+        isOpen={true}
         icon={{ name: 'edit', color: '#fff' }}
         openIcon={{ name: 'close', color: '#fff' }}
       >