Extract the mapping functions from state to properties so they can be…

… tested

One option for testing mapStateToProps directly would have required exporting private code as public, just for the purpose of testing.  That's a bit of a code smell.

Another option would be to pass a mock store into the component.  That was something we could do in react-redux v5 and which was restored in v7, but it was removed in v6, which is what we are on. See reduxjs/react-redux#1161

This seems like the best way of testing this mapping without upgrading react-redux or unnecessarily breaking encapsulation.

__tests__/selectors.test.js

@@ -0,0 +1,67 @@
+// Copyright 2019 Stanford University see LICENSE for license
+
+import { getCurrentUser, getCurrentSession, getAuthenticationError, getAuthenticationState } from '../src/selectors';
+
+describe('getCurrentUser', () => {
+  const currentUser = { hello: 'world' }
+
+  const state = {
+    authenticate: {
+      authenticationState: {
+        currentUser: currentUser
+      }
+    }
+  };
+
+  it('returns user', () => {
+    expect(getCurrentUser(state)).toBe(currentUser)
+  })
+})
+
+describe('getCurrentSession', () => {
+  const currentSession = { hello: 'world' }
+
+  const state = {
+    authenticate: {
+      authenticationState: {
+        currentSession: currentSession
+      }
+    }
+  };
+
+  it('returns currentSession', () => {
+    expect(getCurrentSession(state)).toBe(currentSession)
+  })
+})
+
+describe('getAuthenticationError', () => {
+  const authenticationError = { hello: 'world' }
+
+  const state = {
+    authenticate: {
+      authenticationState: {
+        authenticationError: authenticationError
+      }
+    }
+  };
+
+  it('returns authentication error', () => {
+    expect(getAuthenticationError(state)).toBe(authenticationError)
+  })
+})
+
+describe('getAuthenticationState', () => {
+  const authenticationState = { authenticationError: 'broken' }
+
+  const state = {
+    authenticate: {
+      authenticationState: authenticationState
+    }
+  };
+
+  it('returns a copy of the authentication state', () => {
+    const result = getAuthenticationState(state)
+    expect(result).not.toBe(authenticationState)
+    expect(result).toEqual(authenticationState)
+  })
+})

src/components/LoginPanel.jsx

@@ -6,7 +6,7 @@ import Config from '../Config'
 import CognitoUtils from '../CognitoUtils'
 import { connect } from 'react-redux'
 import { authenticationFailure, authenticationSuccess, signOutSuccess } from '../actions/index'
-
+import { getCurrentUser, getCurrentSession, getAuthenticationError } from '../selectors';
 
 class LoginPanel extends Component {
   constructor(props){
@@ -126,13 +126,11 @@ LoginPanel.propTypes = {
   signout: PropTypes.func
 }
 
-//TODO: make testing these part of the new tests you write (that is, unit test mapStateToProps and mapDispatchToProps, since
-// you're testing the bare WrappedComponent, and not the HoC generated by calling connect(...)(LoginPanel))
 const mapStateToProps = (state) => {
   return {
-    currentUser: state.authenticate.authenticationState ? state.authenticate.authenticationState.currentUser : null,
-    currentSession: state.authenticate.authenticationState ? state.authenticate.authenticationState.currentSession : null,
-    authenticationError: state.authenticate.authenticationState ? state.authenticate.authenticationState.authenticationError : null
+    currentUser: getCurrentUser(state),
+    currentSession: getCurrentSession(state),
+    authenticationError: getAuthenticationError(state)
   }
 }
 

src/components/editor/Editor.jsx

@@ -7,6 +7,8 @@ import PropTypes from 'prop-types'
 import ResourceTemplate from './ResourceTemplate'
 import Header from './Header'
 import RDFModal from './RDFModal'
+import { getAuthenticationState } from '../../selectors';
+
 const _ = require('lodash')
 
 class Editor extends Component {
@@ -87,7 +89,7 @@ Editor.propTypes = {
 
 const mapStateToProps = (state) => {
   return {
-    authenticationState: Object.assign({}, state.authenticate.authenticationState)
+    authenticationState: getAuthenticationState(state)
   }
 }
 

src/components/editor/ImportResourceTemplate.jsx

@@ -8,6 +8,7 @@ import SinopiaResourceTemplates from './SinopiaResourceTemplates'
 import UpdateResourceModal from './UpdateResourceModal'
 import { createResourceTemplate, updateResourceTemplate } from '../../sinopiaServer'
 import { connect } from 'react-redux'
+import { getAuthenticationState } from '../../selectors';
 
 class ImportResourceTemplate extends Component {
   constructor(props) {
@@ -164,7 +165,7 @@ ImportResourceTemplate.propTypes = {
 
 const mapStateToProps = (state) => {
   return {
-    authenticationState: Object.assign({}, state.authenticate.authenticationState)
+    authenticationState: getAuthenticationState(state)
   }
 }
 

src/selectors.js

@@ -0,0 +1,8 @@
+
+export const getCurrentUser = (state) => (getAuthenticationState(state)?.currentUser)
+
+export const getCurrentSession = (state) => (getAuthenticationState(state)?.currentSession)
+
+export const getAuthenticationError = (state) => (getAuthenticationState(state)?.authenticationError)
+
+export const getAuthenticationState = (state) => ({...state.authenticate.authenticationState})