Add loading state test. Pre-review cleanup

Author: meissadia

src/geo/Geography.jsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
+import { isEqual } from 'lodash'
 import { getItemCSV, getSubsetCSV, getSubsetDetails } from '../api.js'
 import Header from '../common/Header.jsx'
-// import LEI_COUNTS from '../constants/leiCounts.js'
 import MSAMD_COUNTS from '../constants/msamdCounts.js'
 import STATE_COUNTS from '../constants/stateCounts.js'
 import { makeSearchFromState, makeStateFromSearch } from '../query.js'
@@ -12,7 +12,6 @@ import './Geography.css'
 import InstitutionSelect from './InstitutionSelect'
 import ItemSelect from './ItemSelect.jsx'
 import { fetchLeis, filterLeis } from './leiUtils'
-import { isEqual } from 'lodash'
 import {
   createItemOptions,
   createVariableOptions,
@@ -63,7 +62,7 @@ class Geography extends Component {
       leiDetails: {
         loading: true,
         counts: {},
-        leis: []
+        leis: {}
       }
     }
 
@@ -76,9 +75,7 @@ class Geography extends Component {
   componentDidMount(){
     this.fetchLeis()
     this.filterLeis()
-    this.setState({
-      isLargeFile: this.checkIfLargeFile(this.state.category, this.state.items)
-    })
+    this.setState({ isLargeFile: this.checkIfLargeFile(this.state.category, this.state.items) })
   }
 
   componentDidUpdate(prevProps, prevState){
@@ -88,9 +85,7 @@ class Geography extends Component {
     if(geographyChanged) this.fetchLeis()
     if(geographyChanged || leisReloaded) this.filterLeis()
     if(leisReloaded)
-      this.setState({
-        isLargeFile: this.checkIfLargeFile(this.state.category, this.state.items)
-      })
+      this.setState({ isLargeFile: this.checkIfLargeFile(this.state.category, this.state.items) })
   }
 
   updateSearch() {
@@ -167,8 +162,7 @@ class Geography extends Component {
   checkIfLargeCount(selected, countMap) {
     const MAX = 1048576
     if(!selected) return countMap > MAX
-    const count = selected.reduce((acc, curr) => acc + countMap[curr], 0)
-    return count > MAX
+    return selected.reduce((acc, curr) => acc + countMap[curr], 0) > MAX
   }
 
   onCategoryChange(catObj) {
@@ -268,7 +262,8 @@ class Geography extends Component {
   }
 
   render() {
-    const { category, items, leis, isLargeFile, variables, orderedVariables, details, loadingDetails, error } = this.state
+    const { category, details, error, isLargeFile, items, leiDetails, leis, 
+      loadingDetails, orderedVariables, variables } = this.state
 
     const nationwide = isNationwide(category)
     const enabled = nationwide || items.length
@@ -309,10 +304,7 @@ class Geography extends Component {
         <InstitutionSelect
           items={leis}
           onChange={this.onInstitutionChange}
-          options={this.itemOptions}
-          geoCategory={category}
-          geoItems={items}
-          leiDetails={this.state.leiDetails}
+          leiDetails={leiDetails}
         />
         <VariableSelect
           options={this.variableOptions}

src/geo/InstitutionSelect.jsx

@@ -60,7 +60,7 @@ const styleFn = {
 export function pruneLeiOptions(data, selected) {
   const selectedLeis = selected.map(s => s.value)
   const institutions = Object.values(data)
-  let opts = institutions
+  const opts = institutions
     .filter(institution => !selectedLeis.includes(institution.lei))
     .map(institution => ({ value: institution.lei, label: `${institution.name.toUpperCase()} - ${institution.lei}` }))
     .sort(sortByLabel)
@@ -70,17 +70,14 @@ export function pruneLeiOptions(data, selected) {
 
 export function itemPlaceholder(loading, hasItems, category, selectedValues) {
   if(loading) return 'Loading...'
-  if (!hasItems)
-    return (
-      'All institutions selected. ' +
-      makeItemPlaceholder(category, selectedValues) +
-      ' to filter'
-    )
-  return makeItemPlaceholder(category, selectedValues)
+  const placeholder = makeItemPlaceholder(category, selectedValues)
+  if (!hasItems) return `All institutions selected. ${placeholder} to filter`
+  return placeholder
 }
 
 InstitutionSelect.defaultProps = {
-  geoItems: []
+  items: [],
+  leiDetails: { leis: {}, loading: true}
 }
 
 export default InstitutionSelect

src/geo/InstitutionSelect.test.js

@@ -1,4 +1,15 @@
-import {pruneLeiOptions, itemPlaceholder} from './InstitutionSelect'
+import React from 'react'
+import { shallow } from 'enzyme'
+import InstitutionSelect, { itemPlaceholder, pruneLeiOptions } from './InstitutionSelect'
+
+describe('InstitutionSelect', () => {
+  it('renders loading states', () => {
+    const wrapper = shallow(<InstitutionSelect />)
+    expect(wrapper.find('Pills').length).toBe(0)
+    expect(wrapper.find('LoadingIcon').length).toBe(1)
+    expect(wrapper.find('StateManager').prop('placeholder')).toContain('Loading')
+  })
+})
 
 describe('pruneLeiOptions', () => {
   it('includes an all option', () => {

src/geo/leiUtils.js

@@ -5,30 +5,21 @@ export function keepValidLeis(valid, selected) {
   return selected.filter(s => valid[s])
 }
 
-export function countRecords(selected, counts) {
-  if (!selected) return 0
-  return selected.reduce((acc, selectOpt) => acc + counts[selectOpt.value], 0)
-}
-
 export function filterLeis() {
   const leis = this.state.leiDetails.leis
   if (Object.keys(leis).length) {
     const validLeis = keepValidLeis(leis, this.state.leis)
-    if (!isEqual(this.state.leis, validLeis)) {
+    if (!isEqual(this.state.leis, validLeis))
       this.onInstitutionChange(validLeis.map(v => ({ value: v })))
-    }
   }
 }
 
 export function fetchLeis() {
   const { category, items } = this.state
-  this.setState(state => ({
-    leiDetails: { ...state.leiDetails, loading: true }
-  }))
+  this.setState(state => ({ leiDetails: { ...state.leiDetails, loading: true }}))
   runFetch(makeFilersUrl({ category, items }))
     .then(data => {
-      const counts = {}
-      const leis = {}
+      const counts = {}, leis = {}
       data.institutions.forEach(institution => {
         counts[institution.lei] = institution.count
         leis[institution.lei] = {...institution}