import React from "react"
import { shallow } from "enzyme"
import { expect } from "chai"

import UserList from "../../web/static/js/components/user_list"

describe("passed an array of users", () => {
  const users = [{
    name: "treezy",
    online_at: 803
  }, {
    name: "zander",
    online_at: 801,
  }]

  it("is renders a list item for each user", () => {
    const wrapper = shallow(<UserList users={users} />)
    expect(wrapper.find("li")).to.have.length(2)
  })

  it("sorts the users by their arrival in the room, ascending", () => {
    const wrapper = shallow(<UserList users={users} />)
    expect(wrapper.find("li").first().text()).to.equal("zander")
  })
})

@@ -35,16 +35,24 @@
  shallow
+, render
  %7D from 
@@ -60,16 +60,16 @@
 enzyme%22%0A
-
 import %7B
@@ -154,16 +154,89 @@
 er_list%22
+%0Aimport UserListItem from %22../../web/static/js/components/user_list_item%22
 %0A%0Adescri
@@ -518,20 +518,28 @@
 er.find(
-%22li%22
+UserListItem
 )).to.ha
@@ -641,39 +641,38 @@
 const wrapper = 
-shallow
+render
 (%3CUserList users
@@ -692,67 +692,96 @@
     
-expect(wrapper.find(%22li%22).first().text()).to.equal(%22zander%22
+const names = wrapper.find(UserList)%0A    expect(wrapper.text()).to.match(/zandertreezy/i
 )%0A  

Update mocha specs to account for new markup heirarchy