import React from 'react';
import Item from './Item';
class List extends React.Component {

constructor() {
    super();
    this.test = "Hello";
    this.state = {
        "items" : []
    }
}
render(){
    return (
        <div>
            {/*This is the bit that's playing up.*/}
            {this.state.items.map(object => {
                return <Item key={object.title}/>
            })}

            {/*Below is used for testing purposes only at the moment*/}
            <input type="text" defaultValue={ this.test } />
            <button onClick = {() => this.add({"title":Math.random()})}>Test</button>
        </div>
    )
}

add(_item) {
    let items = this.state.items;

    items.forEach((item) => {
        if(item.title === _item.title){
            throw new Error('Item already exists');
        }
    })

    items.push(_item);
    this.setState({"items" : items});
}

}

export default List;

import React from 'react';
import { shallow, mount } from 'enzyme';
import { expect } from 'chai';
import List from './List';
import Item from './Item';

describe('List', () => {
    let wrapper, instance;

    beforeEach(() =>{
        wrapper = shallow(<List/>);
        instance = wrapper.instance();
    });

    it('Displays an item for each object in list', () =>{
        instance.add({"title":"Cut the grass"});
        instance.add({"title":"Mow the Lawn"});
        expect(wrapper.find(Item).length).to.equal(2);
    })
})

render(){
        return (
            <div>
                <Item/>

                <input type="text" defaultValue={ this.test } />
                <button onClick = {() => this.add({"title":Math.random()})}>Test</button>
            </div>
        )
    }