Hi guys, I am using meteor Meteor 1.3.4.1 and i’m trying to figure out a better way to ensure my props are ready (running into issues with the way i’m doing it for testing)
I have a Prospect Component:
imports/client/prospects/Prospect.jsx
import React from 'react'
import { FlowRouter as Router } from 'meteor/kadira:flow-router'
import { createContainer } from 'meteor/react-meteor-data'
import { Residents } from '/imports/collections/residents.jsx'
import Griddle from 'griddle-react'
import dbHelpers from '/imports/helpers/db_helpers'
class Prospects extends React.Component {
componentWillReceiveProps(props){
this.setState({prospects: props.prospects})
}
constructor(props) {
super(props)
this.filterProspects = this.filterProspects.bind(this)
}
prospectShow(id) {
Router.go('prospectShow', {id: id});
}
filterProspects(items,query) {
Meteor.call('residents.query', query, (error, result) => {
this.setState({prospects: dbHelpers.griddleFormat(result)})
})
}
render() {
if(!this.props.ready){
return(
<span>Loading...</span>
)
}
return(
<div>
<Griddle
results={this.state.prospects}
showFilter={true}
showSettings={true}
useCustomFilterer={true}
customFilterer={this.filterProspects}
noDataMessage={"No Prospects Yet. Click 'Add Prospects' to create one"}
/>
</div>
)
}
}
export default createContainer(() => {
const residents = Meteor.subscribe('residents')
const ready = residents.ready()
return {
prospects: ready ?
dbHelpers.griddleFormat(Residents.find({}, {sort: {'name.first': 1 }} ).fetch())
: [],
ready,
}
}, Prospects)
The part in question is how i’m using the const ready to signal that the props are ready. Is there a better way to do this? Currently when I use Enzyme to Render my component, all it sees is