 (deftest test-cian-tutorial
   (let [c (cellophane/add-root! cian-reconciler RootView nil)]
     (is (= (#'dom/render-to-str* c)
-           (remove-whitespace "<div data-reactid=\".0\">
-                                 <h2 data-reactid=\".0.0\">List A</h2>
-                                 <ul data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/one]\">
-                                   <li data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/one].$John\">
-                                     <label data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/one].$John.0\">John, points: 0</label>
-                                     <button data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/one].$John.1\">+</button>
-                                     <button data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/one].$John.2\">-</button>
+           (remove-whitespace "<div data-reactroot=\"\" data-reactid=\"1\">
+                                 <h2 data-reactid=\"2\">List A</h2>
+                                 <ul data-reactid=\"3\">
+                                   <li data-reactid=\"4\">
+                                     <label data-reactid=\"5\">John, points: 0</label>
+                                     <button data-reactid=\"6\">+</button>
+                                     <button data-reactid=\"7\">-</button>
                                    </li>
-                                   <li data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/one].$Mary\">
-                                     <label data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/one].$Mary.0\">Mary, points: 0</label>
-                                     <button data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/one].$Mary.1\">+</button>
-                                     <button data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/one].$Mary.2\">-</button>
+                                   <li data-reactid=\"8\">
+                                     <label data-reactid=\"9\">Mary, points: 0</label>
+                                     <button data-reactid=\"10\">+</button>
+                                     <button data-reactid=\"11\">-</button>
                                    </li>
-                                   <li data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/one].$Bob\">
-                                     <label data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/one].$Bob.0\">Bob, points: 0</label>
-                                     <button data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/one].$Bob.1\">+</button>
-                                     <button data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/one].$Bob.2\">-</button>
+                                   <li data-reactid=\"12\">
+                                     <label data-reactid=\"13\">Bob, points: 0</label>
+                                     <button data-reactid=\"14\">+</button>
+                                     <button data-reactid=\"15\">-</button>
                                    </li>
                                  </ul>
-                                 <h2 data-reactid=\".0.2\">List B</h2>
-                                 <ul data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/two]\">
-                                   <li data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/two].$Mary\">
-                                     <label data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/two].$Mary.0\">Mary, points: 0</label>
-                                     <button data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/two].$Mary.1\">+</button>
-                                     <button data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/two].$Mary.2\">-</button>
+                                 <h2 data-reactid=\"16\">List B</h2>
+                                 <ul data-reactid=\"17\">
+                                   <li data-reactid=\"18\">
+                                     <label data-reactid=\"19\">Mary, points: 0</label>
+                                     <button data-reactid=\"20\">+</button>
+                                     <button data-reactid=\"21\">-</button>
                                    </li>
-                                   <li data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/two].$Gwen\">
-                                     <label data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/two].$Gwen.0\">Gwen, points: 0</label>
-                                     <button data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/two].$Gwen.1\">+</button>
-                                     <button data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/two].$Gwen.2\">-</button>
+                                   <li data-reactid=\"22\">
+                                     <label data-reactid=\"23\">Gwen, points: 0</label>
+                                     <button data-reactid=\"24\">+</button>
+                                     <button data-reactid=\"25\">-</button>
                                    </li>
-                                   <li data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/two].$Jeff\">
-                                     <label data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/two].$Jeff.0\">Jeff, points: 0</label>
-                                     <button data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/two].$Jeff.1\">+</button>
-                                     <button data-reactid=\".0.$cellophane$om_tutorials_test$ListView_[=2list/two].$Jeff.2\">-</button>
+                                   <li data-reactid=\"26\">
+                                     <label data-reactid=\"27\">Jeff, points: 0</label>
+                                     <button data-reactid=\"28\">+</button>
+                                     <button data-reactid=\"29\">-</button>
                                    </li>
                                  </ul>
                                </div>")))))

  (let [c (cellophane/add-root! links-reconciler LinksSomeList nil)]
    (is (= (#'dom/render-to-str* c)
           (remove-whitespace
             "<div data-reactid=\".0\">
                <h2 data-reactid=\".0.0\">A List!</h2>
                <ul data-reactid=\".0.1\">
                  <li data-reactid=\".0.1.$cellophane$om_tutorials_test$LinksItem_[=2items 0]\">
                    <div data-reactid=\".0.1.$cellophane$om_tutorials_test$LinksItem_[=2items 0].0\">Foo</div>
                    <div data-reactid=\".0.1.$cellophane$om_tutorials_test$LinksItem_[=2items 0].1\">bob.smith@gmail.com</div>
                  </li>
                  <li data-reactid=\".0.1.$cellophane$om_tutorials_test$LinksItem_[=2items 1]\">
                    <div data-reactid=\".0.1.$cellophane$om_tutorials_test$LinksItem_[=2items 1].0\">Bar</div>
                    <div data-reactid=\".0.1.$cellophane$om_tutorials_test$LinksItem_[=2items 1].1\">bob.smith@gmail.com</div>
                  </li>
                  <li data-reactid=\".0.1.$cellophane$om_tutorials_test$LinksItem_[=2items 2]\">
                    <div data-reactid=\".0.1.$cellophane$om_tutorials_test$LinksItem_[=2items 2].0\">Baz</div>
                    <div data-reactid=\".0.1.$cellophane$om_tutorials_test$LinksItem_[=2items 2].1\">bob.smith@gmail.com</div>
                  </li>
                </ul>
              </div>")))))

    (let [c (cellophane/add-root! union-reconciler Dashboard nil)]
      (is (= (#'dom/render-to-str* c)
            (remove-whitespace
              "<ul style=\"padding:0;\" data-reactroot=\"\" data-reactid=\"1\">
                <li style=\"padding:10px;border-bottom:1px solid black;\" data-reactid=\"2\">
                  <div data-reactid=\"3\">
                    <div data-reactid=\"4\">
                      <h3 data-reactid=\"5\">A Post!</h3>
                      <h4 data-reactid=\"6\">Laura Smith</h4>
                      <p data-reactid=\"7\">Lorem ipsum dolor sit amet, quem atomorum te quo</p>
                    </div>
                  </div>
                  <div data-reactid=\"8\">
                    <p data-reactid=\"9\">Favorites: 0</p>
                    <button data-reactid=\"10\">Favorite!</button>
                  </div>
                </li>
                <li style=\"padding:10px;border-bottom:1px solid black;\" data-reactid=\"11\">
                  <div data-reactid=\"12\">
                    <div data-reactid=\"13\">
                      <h3 data-reactid=\"14\">Photo: A Photo!</h3>
                      <div data-reactid=\"15\">photo.jpg</div>
                      <p data-reactid=\"16\">Caption: </p>
                    </div>
                  </div>
                  <div data-reactid=\"17\">
                    <p data-reactid=\"18\">Favorites: 0</p>
                    <button data-reactid=\"19\">Favorite!</button>
                  </div>
                </li>
                <li style=\"padding:10px;border-bottom:1px solid black;\" data-reactid=\"20\">
                  <div data-reactid=\"21\">
                    <div data-reactid=\"22\">
                      <h3 data-reactid=\"23\">Another Post!</h3>
                      <h4 data-reactid=\"24\">Jim Jacobs</h4>
                      <p data-reactid=\"25\">Lorem ipsum dolor sit amet, quem atomorum te quo</p>
                    </div>
                  </div>
                  <div data-reactid=\"26\">
                    <p data-reactid=\"27\">Favorites: 0</p>
                    <button data-reactid=\"28\">Favorite!</button>
                  </div>
                </li>
                <li style=\"padding:10px;border-bottom:1px solid black;\" data-reactid=\"29\">
                  <div data-reactid=\"30\">
                    <div data-reactid=\"31\">
                      <h3 data-reactid=\"32\">Graphic: Charts and Stufff!</h3>
                      <div data-reactid=\"33\">chart.jpg</div>
                    </div>
                  </div>
                  <div data-reactid=\"34\">
                    <p data-reactid=\"35\">Favorites: 0</p>
                    <button data-reactid=\"36\">Favorite!</button>
                  </div>
                </li>
                <li style=\"padding:10px;border-bottom:1px solid black;\" data-reactid=\"37\">
                  <div data-reactid=\"38\">
                    <div data-reactid=\"39\">
                      <h3 data-reactid=\"40\">Yet Another Post!</h3>
                      <h4 data-reactid=\"41\">May Fields</h4>
                      <p data-reactid=\"42\">Lorem ipsum dolor sit amet, quem atomorum te quo</p>
                    </div>
                  </div>
                  <div data-reactid=\"43\">
                    <p data-reactid=\"44\">Favorites: 0</p>
                    <button data-reactid=\"45\">Favorite!</button>
                  </div>
                </li>
              </ul>")))))
