I have a ServicesContainer that looks for the servicesReducer to render a list of ServiceCards.
ServicesContainer
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { ServiceCard } from '../../components'
export class ServicesContainer extends Component {
constructor(props) {
super(props);
this.state = {
services: props.state.servicesReducer.services
}
}
onFormSubmit(e, user) {
e.preventDefault();
this.props.searchUser(user)
}
render() {
const services = this.state.services;
return (
<div className='services-container'>
<ul>
{ services.map(service =>
<ServiceCard
key={ service.name }
name={ service.name }
description={ service.description }
admins={ service.admins }
group={ service.group } />) }
</ul>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
state
}
}
const ServicesListContainer = ServicesContainer;
export default connect(mapStateToProps, null)(ServicesListContainer)
ServicesContainer.test
Everything works fine here, but the test does not like the state I'm passing into it:
import React from 'react'
import * as enzyme from 'enzyme'
import toJson from 'enzyme-to-json'
import { ServicesContainer } from './ServicesContainer'
import ServiceCard from '../../components/Services/serviceCard'
import { initialServicesState } from '../../reducers/Services/servicesReducer'
const state = {
servicesReducer: {
services: initialServicesState
}
}
const servicesContainer = enzyme.shallow(<ServicesContainer state={ state }/>);
describe('<ServicesContainer /> component', () => {
it('should render', () => {
const tree = toJson(servicesContainer);
expect(tree).toMatchSnapshot();
});
});
^ the initialServicesState from the servicesReducer
export const initialServicesState = {
services: [
{
_id: _id,
name: "GeoStore",
description: "Manage store delivery zones",
admins: [ "Chuck Roe", "Steve Wonder" ],
group: "Black Flag"
},
{
_id: _id2,
name: "Rights Manager UI",
description: "Manage all internal applications and services",
admins: [ "Chuck Roe", "Steve Wonder" ],
group: "Black Flag"
}
]
}
ServiceCard component
import React, { Component } from 'react'
export default class ServiceCard extends React.Component {
constructor(props) {
super(props);
}
render () {
const name = this.props.name;
const description = this.props.description;
const admins = this.props.admins;
const group = this.props.group;
return (
<section className="service-card">
<h4>{ name }</h4>
<p>{ description }</p>
<em>{ group }</em>
<div className="services-admins">
<ul>
<li>
{ admins.map(admin => admin) }
</li>
</ul>
</div>
</section>
)
}
}
This is what the Redux State looks like in the ServicesContainer:
Aucun commentaire:
Enregistrer un commentaire