Added Sel to test module

Author: japgolly

HISTORY.md

@@ -27,6 +27,8 @@ History
 * Added `ScalazReact.ReactS.liftR` of type `(S ⇒ ReactST[M,S,A]) ⇒ ReactST[M,S,A]`.
 * `ScalazReact`'s `~~>` and `runState` functions are now lazy.
 * Upgrade [Scalatags](https://github.com/lihaoyi/scalatags) to 0.4.2.
+* Added `Sel` to easily lookup DOM in your tests.
+  Eg. `Sel("div.inner a.active.blue span") find c`
 
 ### 0.4.1 ([commit log](https://github.com/japgolly/scalajs-react/compare/v0.4.0...v0.4.1))
 

README.md

@@ -138,6 +138,15 @@ val s = Simulation.focusChangeBlur("hi")
 s run component
 ```
 
+
+DOM lookup is much easier than using `ReactTestUtils` directly by instead using `Sel`.
+`Sel` allows you to use a jQuery/CSS-like selector to lookup a DOM element or subset.
+Example:
+```scala
+val dom = Sel(".inner a.active.new") find myComponent
+```
+
+
 Also included is [DebugJs](https://github.com/japgolly/scalajs-react/blob/master/test/src/main/scala/japgolly/scalajs/react/test/DebugJs.scala), a dumping ground for functionality useful when testing JS. `inspectObject` can be tremendously useful.
 
 #### SBT

test/src/main/scala/japgolly/scalajs/react/test/Sel.scala

@@ -0,0 +1,92 @@
+package japgolly.scalajs.react.test
+
+import scala.scalajs.js.Array
+import ReactTestUtils._
+
+/**
+ * Path to a subset of DOM.
+ * Much easier and more powerful than what you find in ReactTestUtils.
+ * 
+ * Example: Sel("div.inner a.active.blue span") find c
+ */
+sealed abstract class Sel {
+  import Sel._
+
+  final def &(s: Sel): Sel =
+    this match {
+      case Tag(_) | Cls(_) => And(this, s :: Nil)
+      case And(h, t)       => And(s, h :: t)
+      case Descent(p, c)   => Descent(p, c & s)
+      case E               => s
+      case ∅               => ∅
+    }
+
+  final def >>(s: Sel): Sel = Descent(this, s)
+
+  final def findAll(i: ComponentM): Array[ComponentM] = this match {
+    case Tag(n)        => scryRenderedDOMComponentsWithTag(i, n)
+    case Cls(n)        => scryRenderedDOMComponentsWithClass(i, n)
+    case And(h, t)     => (h.findAll(i) /: t)((q, s) => q intersect s.findAll(i))
+    case Descent(p, c) => val r = p findAll i; r flatMap c.findAll filterNot (r contains _)
+    case E             => Array(i)
+    case ∅             => Array()
+  }
+
+  final def findE(i: ComponentM): Either[String, ComponentM] = {
+    val a = findAll(i)
+    a.length match {
+      case 1 => Right(a(0))
+      case 0 => Left(s"DOM not found for [$this]")
+      case n => Left(s"Too many DOM elements ($n) found for [$this]")
+    }
+  }
+
+  final def findO(i: ComponentM): Option[ComponentM] =
+    findE(i).right.toOption
+
+  final def find(i: ComponentM): ComponentM =
+    findE(i).fold(sys.error, identity)
+}
+
+object Sel {
+  @inline final def id: Sel = E
+
+  case object E extends Sel {
+    override def toString = "*"
+  }
+
+  case object ∅ extends Sel {
+    override def toString = "∅"
+  }
+
+  final case class Tag(tag: String) extends Sel {
+    override def toString = tag
+  }
+
+  final case class Cls(cls: String) extends Sel {
+    override def toString = "." + cls
+  }
+
+  final case class And(h: Sel, t: List[Sel]) extends Sel {
+    override def toString = (h :: t).mkString("(", " & ", ")")
+  }
+
+  final case class Descent(p: Sel, c: Sel) extends Sel {
+    override def toString = p + " >> " + c
+  }
+
+  def apply(css: String): Sel = {
+    def lvl(s: String): Sel =
+      (id /: s.split("(?=\\.)").filter(_.nonEmpty))((q,a) => q & elem(a))
+      // .filter here ↗ due to https://github.com/scala-js/scala-js/issues/1171
+    def elem(s: String): Sel =
+      if (s.isEmpty) ∅
+      else if (s == "*") id
+      else if (s.head == '.') Cls(s.tail)
+      else Tag(s)
+    css.split("\\s+").filter(_.nonEmpty).toList match {
+      case Nil => ∅
+      case l1 :: ln => (lvl(l1) /: ln)((q, l) => q >> lvl(l))
+    }
+  }
+}

test/src/test/scala/japgolly/scalajs/react/test/SelTest.scala

@@ -0,0 +1,61 @@
+package japgolly.scalajs.react.test
+
+import utest._
+import japgolly.scalajs.react._, vdom.ReactVDom._, all._
+
+object SelTest extends TestSuite {
+
+  lazy val C = ReactComponentB[Unit]("C").render(_ =>
+    div(
+      h1(span("Monuments"), "2014"),
+      p(span("The Amanuensis")),
+      h3("Quasimodo"),
+      h4(cls := "monuments t3", "Atlas"),
+      div(cls := "mastodon t3", "High road"),
+      div(cls := "mastodon t5", "Chimes at midnight")
+    )
+  ).buildU
+
+  val tests = TestSuite {
+    val c = ReactTestUtils renderIntoDocument C()
+
+    def test1(s: String, e: String) = {
+      val a = Sel(s).find(c).getDOMNode().innerHTML
+      assert(a == e)
+    }
+
+    def testF(errFrag: String) = (s: String) => {
+      val a: Either[String, String] = Sel(s).findE(c).right.map(_.getDOMNode().innerHTML)
+      if (a.isRight) println(Sel(s))
+      assert(a.isLeft, a.toString contains errFrag)
+    }
+    def testNonUnique = testF("Too many")
+    def testNotFound = testF("not found")
+
+    'tag - test1("h3", "Quasimodo")
+
+    'cls - test1(".t5", "Chimes at midnight")
+
+    'cls2 {
+      test1(".t3.mastodon", "High road")
+      test1(".mastodon.t3", "High road")
+    }
+
+    'tagAndCls {
+      test1("h4.t3", "Atlas")
+      testNotFound("h4.t0")
+      test1("div.t3", "High road")
+      test1("div.mastodon.t3", "High road")
+    }
+
+    'decent {
+      test1("h1 span", "Monuments")
+      test1("p span", "The Amanuensis")
+      test1("div p span", "The Amanuensis")
+      testNonUnique("div span")
+      testNotFound("p h3")
+      testNotFound("h3 div")
+      testNotFound(".t3 .mastodon")
+    }
+  }
+}