Added showcase counter example and tests

viktor-podzigun · viktor-podzigun · commit 6e84c8b384ad · 2019-06-20T12:31:57.000+02:00
diff --git a/README.md b/README.md
@@ -34,8 +34,13 @@ resolvers += "Sonatype Snapshots" at "https://oss.sonatype.org/content/repositor
 ### How to use it
 
 * Demo Application
-  * [app](showcase/src/main/scala/scommons/react/showcase/app/ShowcaseReactApp.scala) => [tests](showcase/src/test/scala/scommons/react/showcase/app/ShowcaseReactAppSpec.scala)
-  * [live](https://scommons.org/scommons-react/showcase/) => [How to Build and Run](showcase/README.md)
+  * [live demo](https://scommons.org/scommons-react/showcase/) => [How to Build and Run](showcase/README.md)
+  * [AppMain](showcase/src/main/scala/scommons/react/showcase/app/ShowcaseReactApp.scala) => [tests](showcase/src/test/scala/scommons/react/showcase/app/ShowcaseReactAppSpec.scala)
+  * [AppState](showcase/src/main/scala/scommons/react/showcase/app/ShowcaseState.scala) => [tests](showcase/src/test/scala/scommons/react/showcase/app/ShowcaseStateReducerSpec.scala)
+  * [CounterActions](showcase/src/main/scala/scommons/react/showcase/app/counter/CounterActions.scala) => [tests](showcase/src/test/scala/scommons/react/showcase/app/counter/CounterActionsSpec.scala)
+  * [CounterController](showcase/src/main/scala/scommons/react/showcase/app/counter/CounterController.scala) => [tests](showcase/src/test/scala/scommons/react/showcase/app/counter/CounterControllerSpec.scala)
+  * [CounterPanel](showcase/src/main/scala/scommons/react/showcase/app/counter/CounterPanel.scala) => [tests](showcase/src/test/scala/scommons/react/showcase/app/counter/CounterPanelSpec.scala)
+  * [CounterState](showcase/src/main/scala/scommons/react/showcase/app/counter/CounterState.scala) => [tests](showcase/src/test/scala/scommons/react/showcase/app/counter/CounterStateReducerSpec.scala)
 
 * Components:
   * [ClassComponent](showcase/src/main/scala/scommons/react/showcase/ClassComponentDemo.scala) => [tests](showcase/src/test/scala/scommons/react/showcase/ClassComponentDemoSpec.scala)
diff --git a/docs/showcase/assets/scommons-react-showcase-opt-library.js b/docs/showcase/assets/scommons-react-showcase-opt-library.js
diff --git a/docs/showcase/assets/scommons-react-showcase-opt.js b/docs/showcase/assets/scommons-react-showcase-opt.js
diff --git a/project/src/main/scala/definitions/ReactShowcase.scala b/project/src/main/scala/definitions/ReactShowcase.scala
@@ -39,6 +39,7 @@ object ReactShowcase extends ScalaJsModule {
   override val internalDependencies: Seq[ClasspathDep[ProjectReference]] = Seq(
     ReactCore.definition,
     ReactDom.definition,
+    ReactRedux.definition,
     ReactTest.definition % "test",
     ReactTestDom.definition % "test"
   )
diff --git a/redux/src/test/scala/scommons/react/redux/task/FutureTaskSpec.scala b/redux/src/test/scala/scommons/react/redux/task/FutureTaskSpec.scala
@@ -0,0 +1,30 @@
+package scommons.react.redux.task
+
+import org.scalamock.scalatest.AsyncMockFactory
+import org.scalatest.{AsyncFlatSpec, Matchers, Succeeded}
+
+import scala.concurrent.{ExecutionContext, Future}
+import scala.scalajs.concurrent.JSExecutionContext
+import scala.util.{Success, Try}
+
+class FutureTaskSpec extends AsyncFlatSpec
+  with Matchers
+  with AsyncMockFactory {
+
+  implicit override val executionContext: ExecutionContext = JSExecutionContext.queue
+
+  it should "call future.onComplete when onComplete" in {
+    //given
+    val future = Future.successful(())
+    val task = FutureTask("test message", future)
+    val f = mockFunction[Try[_], Unit]
+    
+    //then
+    f.expects(Success(()))
+    
+    //when
+    task.onComplete(f)
+
+    future.map(_ => Succeeded)
+  }
+}
diff --git a/showcase/src/main/scala/scommons/react/showcase/app/ShowcaseReactApp.scala b/showcase/src/main/scala/scommons/react/showcase/app/ShowcaseReactApp.scala
@@ -1,9 +1,12 @@
 package scommons.react.showcase.app
 
 import io.github.shogowada.scalajs.reactjs.ReactDOM
+import io.github.shogowada.scalajs.reactjs.redux.ReactRedux._
+import io.github.shogowada.scalajs.reactjs.redux.Redux
 import org.scalajs.dom.document
 import scommons.react._
 import scommons.react.showcase.ErrorBoundaryDemo
+import scommons.react.showcase.app.counter.{CounterActions, CounterController}
 
 object ShowcaseReactApp {
 
@@ -12,10 +15,15 @@ object ShowcaseReactApp {
 
     document.title = "scommons-react-showcase"
 
+    val store = Redux.createStore(ShowcaseStateReducer.reduce)
+    
+    val counterActions = new CounterActions
+    val counterController = new CounterController(counterActions)
+
     ReactDOM.render(
-      <(ErrorBoundaryDemo())()(
-        <.p()(
-          "Hello World!"
+      <.Provider(^.store := store)(
+        <(ErrorBoundaryDemo())()(
+          <(counterController()).empty
         )
       ),
       mountNode
diff --git a/showcase/src/main/scala/scommons/react/showcase/app/ShowcaseState.scala b/showcase/src/main/scala/scommons/react/showcase/app/ShowcaseState.scala
@@ -0,0 +1,21 @@
+package scommons.react.showcase.app
+
+import scommons.react.redux.task.{AbstractTask, TaskReducer}
+import scommons.react.showcase.app.counter.{CounterState, CounterStateReducer}
+
+trait ShowcaseStateDef {
+
+  def currentTask: Option[AbstractTask]
+  def counterState: CounterState
+}
+
+case class ShowcaseState(currentTask: Option[AbstractTask],
+                         counterState: CounterState) extends ShowcaseStateDef
+
+object ShowcaseStateReducer {
+
+  def reduce(state: Option[ShowcaseState], action: Any): ShowcaseState = ShowcaseState(
+    currentTask = TaskReducer(state.flatMap(_.currentTask), action),
+    counterState = CounterStateReducer(state.map(_.counterState), action)
+  )
+}
diff --git a/showcase/src/main/scala/scommons/react/showcase/app/counter/CounterActions.scala b/showcase/src/main/scala/scommons/react/showcase/app/counter/CounterActions.scala
@@ -0,0 +1,38 @@
+package scommons.react.showcase.app.counter
+
+import io.github.shogowada.scalajs.reactjs.redux.Action
+import io.github.shogowada.scalajs.reactjs.redux.Redux.Dispatch
+import scommons.react.redux.task.{FutureTask, TaskAction}
+import scommons.react.showcase.app.counter.CounterActions._
+
+import scala.concurrent.ExecutionContext.Implicits.global
+import scala.concurrent.Future
+import scala.util.Success
+
+class CounterActions {
+
+  def changeCounter(dispatch: Dispatch, counter: Int, dx: Int): CounterChangeAction = {
+    
+    // in real App may call some API here
+    val future = Future.successful(counter + dx).andThen {
+      case Success(result) => dispatch(CounterChangedAction(result))
+      
+      // Errors should be handled generally by the UI Task Manager
+      //case Failure(e) => onError(())(e)
+    }
+
+    CounterChangeAction(FutureTask("Changing Counter", future))
+  }
+}
+
+object CounterActions {
+
+  /** Asynchronous, potentially calling some API, actions should extend [[TaskAction]],
+    * so the UI Task Manager will be able to display status/loading
+    */
+  case class CounterChangeAction(task: FutureTask[Int]) extends TaskAction
+
+  /** Simple actions just extend redux Action
+    */
+  case class CounterChangedAction(counter: Int) extends Action
+}
diff --git a/showcase/src/main/scala/scommons/react/showcase/app/counter/CounterController.scala b/showcase/src/main/scala/scommons/react/showcase/app/counter/CounterController.scala
@@ -0,0 +1,17 @@
+package scommons.react.showcase.app.counter
+
+import io.github.shogowada.scalajs.reactjs.React.Props
+import io.github.shogowada.scalajs.reactjs.redux.Redux.Dispatch
+import scommons.react.UiComponent
+import scommons.react.redux.BaseStateController
+import scommons.react.showcase.app.ShowcaseStateDef
+
+class CounterController(actions: CounterActions)
+  extends BaseStateController[ShowcaseStateDef, CounterPanelProps] {
+
+  lazy val uiComponent: UiComponent[CounterPanelProps] = CounterPanel
+
+  def mapStateToProps(dispatch: Dispatch, state: ShowcaseStateDef, props: Props[Unit]): CounterPanelProps = {
+    CounterPanelProps(dispatch, actions, state.counterState)
+  }
+}
diff --git a/showcase/src/main/scala/scommons/react/showcase/app/counter/CounterPanel.scala b/showcase/src/main/scala/scommons/react/showcase/app/counter/CounterPanel.scala
@@ -0,0 +1,33 @@
+package scommons.react.showcase.app.counter
+
+import io.github.shogowada.scalajs.reactjs.events.MouseSyntheticEvent
+import io.github.shogowada.scalajs.reactjs.redux.Redux.Dispatch
+import scommons.react._
+
+case class CounterPanelProps(dispatch: Dispatch,
+                             actions: CounterActions,
+                             state: CounterState)
+
+object CounterPanel extends FunctionComponent[CounterPanelProps] {
+
+  protected def render(compProps: Props): ReactElement = {
+    val props = compProps.wrapped
+    
+    <.>()(
+      <.p()(
+        "Welcome to the React Counter showcase example App." +
+          " Use buttons bellow to increase/decrease the counter:"
+      ),
+      
+      <.p()(s"${props.state.value}"),
+      
+      <.button(^.onClick := { _: MouseSyntheticEvent =>
+        props.dispatch(props.actions.changeCounter(props.dispatch, props.state.value, 1))
+      })("+"),
+      
+      <.button(^.onClick := { _: MouseSyntheticEvent =>
+        props.dispatch(props.actions.changeCounter(props.dispatch, props.state.value, -1))
+      })("-")
+    )
+  }
+}
diff --git a/showcase/src/main/scala/scommons/react/showcase/app/counter/CounterState.scala b/showcase/src/main/scala/scommons/react/showcase/app/counter/CounterState.scala
@@ -0,0 +1,17 @@
+package scommons.react.showcase.app.counter
+
+import scommons.react.showcase.app.counter.CounterActions._
+
+case class CounterState(value: Int = 0)
+
+object CounterStateReducer {
+
+  def apply(state: Option[CounterState], action: Any): CounterState = {
+    reduce(state.getOrElse(CounterState()), action)
+  }
+
+  private def reduce(state: CounterState, action: Any): CounterState = action match {
+    case CounterChangedAction(counter) => state.copy(value = counter)
+    case _ => state
+  }
+}
diff --git a/showcase/src/test/scala/scommons/react/showcase/app/ShowcaseReactAppSpec.scala b/showcase/src/test/scala/scommons/react/showcase/app/ShowcaseReactAppSpec.scala
@@ -18,8 +18,12 @@ class ShowcaseReactAppSpec extends TestSpec with TestDOMUtils {
     
     assertDOMElement(domContainer, <.div(^.id := "root")(
       <.p()(
-        "Hello World!"
-      )
+        "Welcome to the React Counter showcase example App." +
+          " Use buttons bellow to increase/decrease the counter:"
+      ),
+      <.p()("0"),
+      <.button()("+"),
+      <.button()("-")
     ))
   }
 }
diff --git a/showcase/src/test/scala/scommons/react/showcase/app/ShowcaseStateReducerSpec.scala b/showcase/src/test/scala/scommons/react/showcase/app/ShowcaseStateReducerSpec.scala
@@ -0,0 +1,36 @@
+package scommons.react.showcase.app
+
+import scommons.react.redux.task.{AbstractTask, FutureTask}
+import scommons.react.showcase.app.counter.CounterActions.CounterChangeAction
+import scommons.react.showcase.app.counter.CounterState
+import scommons.react.test.TestSpec
+
+import scala.concurrent.Future
+
+class ShowcaseStateReducerSpec extends TestSpec {
+
+  it should "return initial state" in {
+    //when
+    val result = ShowcaseStateReducer.reduce(None, "")
+    
+    //then
+    inside(result) {
+      case ShowcaseState(currentTask, counterState) =>
+        currentTask shouldBe None
+        counterState shouldBe CounterState()
+    }
+  }
+  
+  it should "set currentTask when TaskAction" in {
+    //given
+    val currTask = mock[AbstractTask]
+    val state = ShowcaseState(Some(currTask), CounterState())
+    val task = FutureTask("test task", Future.successful(0))
+    
+    //when
+    val result = ShowcaseStateReducer.reduce(Some(state), CounterChangeAction(task))
+    
+    //then
+    result.currentTask shouldBe Some(task)
+  }
+}
diff --git a/showcase/src/test/scala/scommons/react/showcase/app/counter/CounterActionsSpec.scala b/showcase/src/test/scala/scommons/react/showcase/app/counter/CounterActionsSpec.scala
@@ -0,0 +1,28 @@
+package scommons.react.showcase.app.counter
+
+import scommons.react.redux.task.FutureTask
+import scommons.react.showcase.app.counter.CounterActions._
+import scommons.react.test.dom.AsyncTestSpec
+
+class CounterActionsSpec extends AsyncTestSpec {
+
+  it should "dispatch CounterChangedAction when companyCreate" in {
+    //given
+    val actions = new CounterActions
+    val dispatch = mockFunction[Any, Any]
+    val expectedRes = 3
+
+    //then
+    dispatch.expects(CounterChangedAction(expectedRes))
+    
+    //when
+    val CounterChangeAction(FutureTask(message, future)) =
+      actions.changeCounter(dispatch, 2, 1)
+    
+    //then
+    message shouldBe "Changing Counter"
+    future.map { res =>
+      res shouldBe expectedRes
+    }
+  }
+}
diff --git a/showcase/src/test/scala/scommons/react/showcase/app/counter/CounterControllerSpec.scala b/showcase/src/test/scala/scommons/react/showcase/app/counter/CounterControllerSpec.scala
@@ -0,0 +1,39 @@
+package scommons.react.showcase.app.counter
+
+import io.github.shogowada.scalajs.reactjs.React.Props
+import io.github.shogowada.scalajs.reactjs.redux.Redux.Dispatch
+import scommons.react.showcase.app.ShowcaseStateDef
+import scommons.react.test.TestSpec
+
+class CounterControllerSpec extends TestSpec {
+
+  it should "return component" in {
+    //given
+    val actions = mock[CounterActions]
+    val controller = new CounterController(actions)
+    
+    //when & then
+    controller.uiComponent shouldBe CounterPanel
+  }
+  
+  it should "map state to props" in {
+    //given
+    val actions = mock[CounterActions]
+    val props = mock[Props[Unit]]
+    val controller = new CounterController(actions)
+    val dispatch = mock[Dispatch]
+    val counterState = mock[CounterState]
+    val state = mock[ShowcaseStateDef]
+    (state.counterState _).expects().returning(counterState)
+
+    //when
+    val result = controller.mapStateToProps(dispatch, state, props)
+    
+    //then
+    inside(result) { case CounterPanelProps(disp, resActions, resCounterState) =>
+      disp shouldBe dispatch
+      resActions shouldBe resActions
+      resCounterState shouldBe counterState
+    }
+  }
+}
diff --git a/showcase/src/test/scala/scommons/react/showcase/app/counter/CounterPanelSpec.scala b/showcase/src/test/scala/scommons/react/showcase/app/counter/CounterPanelSpec.scala
diff --git a/showcase/src/test/scala/scommons/react/showcase/app/counter/CounterStateReducerSpec.scala b/showcase/src/test/scala/scommons/react/showcase/app/counter/CounterStateReducerSpec.scala

Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,7 @@ object ReactShowcase extends ScalaJsModule {`
`39`	`39`	`override val internalDependencies: Seq[ClasspathDep[ProjectReference]] = Seq(`
`40`	`40`	`ReactCore.definition,`
`41`	`41`	`ReactDom.definition,`
	`42`	`+ ReactRedux.definition,`
`42`	`43`	`ReactTest.definition % "test",`
`43`	`44`	`ReactTestDom.definition % "test"`
`44`	`45`	`)`