 { ul, li } = React.DOM
 class TestsListingClass
   render: () ->
-    createItem = (testcase) ->
-      (li {}, [TestCaseListing testcase])
+    createSuite = (suite) ->
+      items = []
+      items.push (SuiteHeader suite)
+      for testcase in suite.cases
+        items.push (li {}, [TestCaseListing testcase])
+      return items
     (ul {className: 'horizontal-list'}, [
-      @props.cases.map createItem
+      @props.suites.map createSuite
     ])
 TestsListing = React.createFactory TestsListingClass
-# TODO: take the suites instead of cases as props
 
 
 # Main

  render: () ->
    (div {className: 'suite-header'}, [
      label {}, @props.name
      label {}, @props.component
    ])
SuiteHeader = React.createFactory SuiteHeaderClass



  fixture = id('fixture-microflo-toggleanimation').innerHTML
  suite = fbpspec.testsuite.loadYAML fixture
   
  React.render (TestsListing {suites: [suite]}), document.body
  console.log 'rendered'

main()
