Extract userlist sort and filter as selectors, add unit tests and wallaby config

Author: borisyankov

src/common/__tests__/__snapshots__/ZulipButton-test.js.snap

@@ -9,11 +9,11 @@ exports[`test renders correctly 1`] = `
         "borderRadius": 5,
         "height": 44,
         "justifyContent": "center",
-        "marginBottom": 10
+        "marginBottom": 10,
       },
       Object {
-        "backgroundColor": "#22693F"
-      }
+        "backgroundColor": "#22693F",
+      },
     ]
   }>
   <View
@@ -23,23 +23,23 @@ exports[`test renders correctly 1`] = `
     accessible={true}
     hitSlop={undefined}
     onLayout={undefined}
-    onResponderGrant={[Function bound touchableHandleResponderGrant]}
-    onResponderMove={[Function bound touchableHandleResponderMove]}
-    onResponderRelease={[Function bound touchableHandleResponderRelease]}
-    onResponderTerminate={[Function bound touchableHandleResponderTerminate]}
-    onResponderTerminationRequest={[Function bound touchableHandleResponderTerminationRequest]}
-    onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       Array [
         Object {
-          "backgroundColor": "transparent"
+          "backgroundColor": "transparent",
         },
         Object {
           "alignItems": "center",
           "alignSelf": "stretch",
           "flex": 1,
-          "justifyContent": "center"
-        }
+          "justifyContent": "center",
+        },
       ]
     }
     testID={undefined}>
@@ -50,9 +50,9 @@ exports[`test renders correctly 1`] = `
       style={
         Array [
           Object {
-            "color": "#FFFFFF"
+            "color": "#FFFFFF",
           },
-          undefined
+          undefined,
         ]
       } />
   </View>

src/events/eventActions.js

@@ -51,6 +51,9 @@ const processEvent = (dispatch, event) => {
     case 'subscription':
       // TODO
       break;
+    case 'update_message':
+      // TODO
+      break;
     case 'heartbeat':
       // ignore, no need to handle
       break;

src/userlist/UserList.js

@@ -4,6 +4,7 @@ import {
   ListView,
 } from 'react-native';
 import UserItem from './UserItem';
+import { sortUserList, filterUserList } from './userListSelectors';
 
 const styles = StyleSheet.create({
   container: {
@@ -12,25 +13,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const filterUsers = (users: any[], filter: string): any[] =>
-  users.filter(x =>
-    filter === '' ||
-    x.get('fullName').toLowerCase().includes(filter.toLowerCase()) ||
-    x.get('email').toLowerCase().includes(filter.toLowerCase())
-  );
-
-const statusOrder = {
-  active: 1,
-  idle: 2,
-  offline: 3,
-};
-
-const sortUsers = (users: any[]): any[] =>
-  users.sort((x1, x2) =>
-    statusOrder[x1.get('status')] - statusOrder[x2.get('status')] ||
-    x1.get('fullName').localeCompare(x2.get('fullName'))
-  );
-
 export default class UserList extends Component {
 
   props: {
@@ -42,7 +24,7 @@ export default class UserList extends Component {
   render() {
     const { users, filter, onNarrow } = this.props;
     const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
-    const shownUsers = sortUsers(filterUsers(users, filter));
+    const shownUsers = sortUserList(filterUserList(users, filter));
     const dataSource = ds.cloneWithRows(shownUsers.toJS());
 
     return (

src/userlist/__tests__/userListReducers-test.js

@@ -16,5 +16,5 @@ it('on unrecognized action, returns input state unchanged', () => {
 it('on GET_USER_RESPONSE stores user data', () => {
   const users = [{ full_name: 'user1' }, { full_name: 'user2' }];
   const newState = userListReducers(fromJS([]), { type: GET_USER_RESPONSE, users });
-  expect(newState).toEqual(users);
+  expect(newState.size).toEqual(2);
 });

src/userlist/__tests__/userListSelectors-test.js

@@ -0,0 +1,56 @@
+import { fromJS } from 'immutable';
+import { sortUserList, filterUserList } from '../userListSelectors';
+
+it('empty input to filterUserList results in empty list', () => {
+  const users = fromJS([]);
+  const filteredUsers = filterUserList(users, 'some filter');
+  expect(filteredUsers).toEqual(fromJS([]));
+});
+
+it('filterUserList returns same list if no filter', () => {
+  const users = fromJS([{ fullName: 'user1' }, { fullName: 'user2' }]);
+  const filteredUsers = filterUserList(users);
+  expect(filteredUsers).toEqual(users);
+});
+
+it('filterUserList searches in name, email and is case insensitive', () => {
+  const allUsers = fromJS([
+    { fullName: 'match', email: '[email protected]' },
+    { fullName: 'partial match', email: '[email protected]' },
+    { fullName: 'Case Insensitive MaTcH', email: '[email protected]' },
+    { fullName: 'Any Name', email: '[email protected]' },
+    { fullName: 'some name', email: '[email protected]' },
+  ]);
+  const shouldMatch = fromJS([
+    { fullName: 'match', email: '[email protected]' },
+    { fullName: 'partial match', email: '[email protected]' },
+    { fullName: 'Case Insensitive MaTcH', email: '[email protected]' },
+    { fullName: 'Any Name', email: '[email protected]' },
+  ]);
+  const filteredUsers = filterUserList(allUsers, 'match');
+  expect(filteredUsers).toEqual(shouldMatch);
+});
+
+it('sortUserList sorts by name', () => {
+  const users = fromJS([{ fullName: 'abc' }, { fullName: 'xyz' }, { fullName: 'jkl' }]);
+  const shouldMatch = fromJS([{ fullName: 'abc' }, { fullName: 'jkl' }, { fullName: 'xyz' }]);
+  const sortedUsers = sortUserList(users);
+  expect(sortedUsers).toEqual(shouldMatch);
+});
+
+it('sortUserList prioritizes status', () => {
+  const users = fromJS([
+    { fullName: 'abc', status: 'offline' },
+    { fullName: 'xyz', status: 'idle' },
+    { fullName: 'jkl', status: 'active' },
+    { fullName: 'abc', status: 'active' },
+  ]);
+  const shouldMatch = fromJS([
+    { fullName: 'abc', status: 'active' },
+    { fullName: 'jkl', status: 'active' },
+    { fullName: 'xyz', status: 'idle' },
+    { fullName: 'abc', status: 'offline' },
+  ]);
+  const sortedUsers = sortUserList(users);
+  expect(sortedUsers).toEqual(shouldMatch);
+});

src/userlist/userListReducers.js

@@ -35,7 +35,7 @@ const initialState = fromJS([]);
 const activityFromPresence = (presence: PresenceMap): UserStatus =>
   'active';
 
-const reducer = (state = initialState, action) => {
+export default (state = initialState, action) => {
   switch (action.type) {
     case PRESENCE_RESPONSE: {
       let newState = state;
@@ -64,5 +64,3 @@ const reducer = (state = initialState, action) => {
       return state;
   }
 };
-
-export default reducer;

src/userlist/userListSelectors.js

@@ -0,0 +1,18 @@
+const statusOrder = {
+  active: 1,
+  idle: 2,
+  offline: 3,
+};
+
+export const sortUserList = (users: any[]): any[] =>
+  users.sort((x1, x2) =>
+    statusOrder[x1.get('status')] - statusOrder[x2.get('status')] ||
+    x1.get('fullName').localeCompare(x2.get('fullName'))
+  );
+
+export const filterUserList = (users: any[], filter: string = ''): any[] =>
+  users.filter(x =>
+    filter === '' ||
+    x.get('fullName').toLowerCase().includes(filter.toLowerCase()) ||
+    x.get('email').toLowerCase().includes(filter.toLowerCase())
+  );

wallaby.js

@@ -0,0 +1,18 @@
+module.exports = (wallaby) => ({
+  files: ['src/**/*.js', '!src/**/__tests__/*.js'],
+  tests: ['src/**/__tests__/*.js'],
+  env: {
+    type: 'node',
+    runner: 'node',
+  },
+  testFramework: 'jest',
+  compilers: {
+    'src/**/*.js': wallaby.compilers.babel(),
+  },
+  setup: () =>
+    wallaby.testFramework.configure({
+     // https://facebook.github.io/jest/docs/api.html#config-options
+     // you may just pass `require('./package.json').jest`, if you use it for your Jest config
+     // don't forget to include package.json in the files list in this case
+    }),
+});