test: add NotificationListItem component tests

.gitignore

@@ -63,3 +63,5 @@ haste-map-react-native-packager*
 # editors
 .vscode
 .idea
+
+coverage

__tests__/tests/components/NotificationListItem.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import { shallow, render } from 'enzyme';
+import { NotificationListItem } from 'components';
+import { View, TouchableOpacity } from 'react-native';
+
+const defaultProps = {
+  id: 1,
+  notification: {
+    subject: {
+      type: 'Commit',
+    },
+  },
+  iconAction() {},
+  navigationAction() {},
+};
+
+describe('<NotificationListItem />', () => {
+  it("should render a View component if notification type is 'Commit'", () => {
+    const wrapper = shallow(<NotificationListItem {...defaultProps} />);
+
+    const result = wrapper.instance().getComponentType();
+
+    expect(result).toBe(View);
+  });
+
+  it("should render a TouchableOpacity component if notification type is not 'Commit'", () => {
+    const notification = {
+      subject: {
+        type: 'not a commit',
+      },
+    };
+    const wrapper = shallow(
+      <NotificationListItem {...defaultProps} notification={notification} />
+    );
+
+    const result = wrapper.instance().getComponentType();
+
+    expect(result).toBe(TouchableOpacity);
+  });
+
+  it('should call navigation when user presses TitleComponent', () => {
+    const notification = {
+      subject: {
+        type: 'not a commit',
+      },
+    };
+    const navigationActionMock = jest.fn();
+    const wrapper = shallow(
+      <NotificationListItem
+        {...defaultProps}
+        notification={notification}
+        navigationAction={navigationActionMock}
+      />
+    );
+
+    wrapper.find({ nativeId: 'TitleComponent' }).simulate('press');
+
+    expect(navigationActionMock).toHaveBeenCalledWith(notification);
+  });
+
+  it('should return the correct icon name', () => {
+    const wrapper = shallow(<NotificationListItem {...defaultProps} />);
+
+    expect(wrapper.instance().getIconName('commit')).toEqual('git-commit');
+    expect(wrapper.instance().getIconName('pullRequest')).toEqual(
+      'git-pull-request'
+    );
+    expect(wrapper.instance().getIconName('wrong data')).toEqual(
+      'issue-opened'
+    );
+  });
+
+  it('should call iconAction on press and notification is unread', () => {
+    const notification = {
+      id: 1,
+      subject: {
+        type: 'Commit',
+      },
+      unread: true,
+    };
+    const iconActionMock = jest.fn();
+    const wrapper = shallow(
+      <NotificationListItem
+        {...defaultProps}
+        notification={notification}
+        iconAction={iconActionMock}
+      />
+    );
+
+    wrapper.find({ nativeId: 'notification-unread' }).simulate('press');
+
+    expect(iconActionMock).toHaveBeenCalledWith(1);
+    expect(iconActionMock).toHaveBeenCalledTimes(1);
+  });
+});

src/components/notification-list-item.component.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
 
-import React from 'react';
+import React, { Component } from 'react';
 import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
 import { Icon } from 'react-native-elements';
 
@@ -48,48 +48,63 @@ const styles = StyleSheet.create({
   },
 });
 
-export const NotificationListItem = ({
-  notification,
-  iconAction,
-  navigationAction,
-}: Props) => {
-  const TitleComponent =
-    notification.subject.type === 'Commit' ? View : TouchableOpacity;
+export class NotificationListItem extends Component {
+  props: Props;
 
-  return (
-    <View style={styles.container}>
-      <View style={styles.wrapper}>
-        <TitleComponent
-          style={styles.notificationInfo}
-          onPress={() => navigationAction(notification)}
-        >
-          <Icon
-            color={colors.grey}
-            size={22}
-            name={
-              notification.subject.type === 'Commit'
-                ? 'git-commit'
-                : notification.subject.type === 'PullRequest'
-                  ? 'git-pull-request'
-                  : 'issue-opened'
-            }
-            type="octicon"
-          />
+  getComponentType = () => {
+    const { notification } = this.props;
 
-          <View style={styles.titleContainer}>
-            <Text style={styles.title}>{notification.subject.title}</Text>
-          </View>
-        </TitleComponent>
+    return notification.subject.type === 'Commit' ? View : TouchableOpacity;
+  };
 
-        {notification.unread && (
-          <TouchableOpacity
-            style={styles.iconContainer}
-            onPress={() => iconAction(notification.id)}
+  getIconName = type => {
+    switch (type) {
+      case 'commit':
+        return 'git-commit';
+      case 'pullRequest':
+        return 'git-pull-request';
+      default:
+        return 'issue-opened';
+    }
+  };
+
+  render() {
+    const { notification, iconAction, navigationAction } = this.props;
+
+    const TitleComponent = this.getComponentType();
+    const iconName = this.getIconName(notification.subject.type);
+
+    return (
+      <View style={styles.container}>
+        <View style={styles.wrapper}>
+          <TitleComponent
+            nativeId="TitleComponent"
+            style={styles.notificationInfo}
+            onPress={() => navigationAction(notification)}
           >
-            <Icon color={colors.grey} size={22} name="check" type="octicon" />
-          </TouchableOpacity>
-        )}
+            <Icon
+              color={colors.grey}
+              size={22}
+              name={iconName}
+              type="octicon"
+            />
+
+            <View style={styles.titleContainer}>
+              <Text style={styles.title}>{notification.subject.title}</Text>
+            </View>
+          </TitleComponent>
+
+          {notification.unread && (
+            <TouchableOpacity
+              nativeId="notification-unread"
+              style={styles.iconContainer}
+              onPress={() => iconAction(notification.id)}
+            >
+              <Icon color={colors.grey} size={22} name="check" type="octicon" />
+            </TouchableOpacity>
+          )}
+        </View>
       </View>
-    </View>
-  );
-};
+    );
+  }
+}