testing react-redux-saga-router Toggles

EditGroupRoute.test.jsx

import React from 'react'
import { renderComponent } from '../../test_helper'
import EditGroupRoute, { check } from '../../../src/modules/groups/routes/EditGroupRoute'

describe('EditRoute', () => {
  const rendered = () => <div>rendered</div>
  const loading = () => <div>loading</div>
  const Else = () => <div>else</div>
  const E = () => <EditGroupRoute component={rendered} else={Else} loadingComponent={loading} />
  let state
  beforeEach(() => {
    state = {
      campers: {
        ids: [],
        campers: {}
      },
      ensembleTypes: {
        ids: [],
        ensembleTypes: {

        }
      },
      groups: {
        ids: [],
        groups: {},
        selectedGroup: false
      }
    }
  })
  it('does not render if a group is not selected', () => {
    const component = renderComponent(E, {}, state)
    expect(component.text()).eqls('else')
  })
  it('renders if a group is selected', () => {
    state.groups.ids = ['hi']
    state.groups.groups.hi = {
      _id: 'hi',
      type: 't',
      members: [ 'hoo' ]
    }
    state.campers.campers['hoo'] = {
      _id: 'hoo'
    }
    state.ensembleTypes.ensembleTypes['t'] = {
      _id: 't'
    }
    state.groups.selectedGroup = 'hi'
    const component = renderComponent(E, {}, state)
    expect(component.text()).eqls('rendered')
  })
  it('renders if all is well', () => {
    state.groups.selectedGroup = 'hi'
    state.groups.ids = ['hi']
    state.groups.groups.hi = {
      _id: 'hi',
      members: [false, 'hi', 'there']
    }
    state.campers.ids = ['there']
    state.campers.campers.there = {
      _id: 'there'
    }
    state.campers.campers.hi = {
      _id: 'hi'
    }
    const component = renderComponent(E, {}, state)
    expect(component.text()).eqls('rendered')
  })
  describe('render loading edge cases', () => {
    it('group does not exist yet', () => {
      state.groups.selectedGroup = 'hi'
      const component = renderComponent(E, {}, state)
      expect(component.text()).eqls('loading')
    })
    it('group id exists, group does not', () => {
      state.groups.selectedGroup = 'hi'
      state.groups.ids = ['hi']
      const component = renderComponent(E, {}, state)
      expect(component.text()).eqls('loading')
    })
    it('group ensemble type not loaded', () => {
      state.groups.selectedGroup = 'hi'
      state.groups.ids = ['hi']
      state.groups.groups.hi = {
        _id: 'hi',
        type: 'foo'
      }
      const component = renderComponent(E, {}, state)
      expect(component.text()).eqls('loading')
    })
    it('group members not loaded', () => {
      state.groups.selectedGroup = 'hi'
      state.groups.ids = ['hi']
      state.groups.groups.hi = {
        _id: 'hi',
        members: [false, 'hi', 'there']
      }
      state.campers.ids = ['there']
      state.campers.campers.there = {
        _id: 'there'
      }
      const component = renderComponent(E, {}, state)
      expect(component.text()).eqls('loading')
    })
  })
})

EditGroupToggle.jsx

import Toggle from 'react-redux-saga-router/Toggle'
import * as selectors from 'react-redux-saga-router/selectors'

export const check = state => selectors.stateExists(state, {
  campers: {
    ids: []
  },
  groups: {
    ids: [],
    groups: {},
    selectedGroup: (group, state) => {
      if (!group) return true
      if (state.groups.ids.indexOf(group) === -1) return false
      const g = state.groups.groups[group]
      if (!g) return false
      if (g.type && !state.ensembleTypes.ensembleTypes[g.type]) return false
      if (g.members.length) {
        if (g.members.some(m => m ? !state.campers.campers[m] : false)) return false
      }
      return true
    }
  },
  ensembleTypes: {
    ids: [],
  },
})

export default Toggle(state => state.groups.selectedGroup, check)