Use TestRenderer instead of ShallowRenderer

scommons · Aug 20, 2021 · 528ef6e · 528ef6e
1 parent 627d8a2
commit 528ef6e
Show file tree

Hide file tree

Showing 35 changed files with 504 additions and 477 deletions.
diff --git a/project/src/main/scala/common/Libs.scala b/project/src/main/scala/common/Libs.scala
@@ -7,7 +7,7 @@ import scommons.sbtplugin.project.CommonLibs
 object Libs extends CommonLibs {
 
   val scommonsNodejsVersion = "0.5.0"
-  val scommonsReactVersion = "0.5.0"
+  val scommonsReactVersion = "1.0.0-SNAPSHOT"
   private val scommonsApiVersion = "0.5.0"
   private val sjsReactJsVer = "0.15.0"
 

diff --git a/showcase/src/main/scala/scommons/client/showcase/table/TablePanelDemo.scala b/showcase/src/main/scala/scommons/client/showcase/table/TablePanelDemo.scala
@@ -4,16 +4,19 @@ import scommons.react._
 
 object TablePanelDemo extends FunctionComponent[Unit] {
 
+  private[table] var simpleTablePanel: UiComponent[Unit] = SimpleTablePanel
+  private[table] var customTablePanel: UiComponent[Unit] = CustomTablePanel
+
   protected def render(props: Props): ReactElement = {
     <.>()(
       <.h2()("TablePanel"),
       <.p()("Demonstrates table functionality"),
 
       <.h3()("Simple TablePanel"),
-      <(SimpleTablePanel()).empty,
+      <(simpleTablePanel()).empty,
 
       <.h3()("TablePanel with custom cell renderer"),
-      <(CustomTablePanel()).empty
+      <(customTablePanel()).empty
     )
   }
 }
diff --git a/showcase/src/test/scala/scommons/client/showcase/table/CustomTablePanelSpec.scala b/showcase/src/test/scala/scommons/client/showcase/table/CustomTablePanelSpec.scala
@@ -3,23 +3,21 @@ package scommons.client.showcase.table
 import scommons.client.showcase.table.CustomTablePanel._
 import scommons.client.ui.table.TablePanelCss._
 import scommons.client.ui.table._
-import scommons.react.test.TestSpec
-import scommons.react.test.util.ShallowRendererUtils
+import scommons.react.test._
 
-class CustomTablePanelSpec extends TestSpec with ShallowRendererUtils {
+class CustomTablePanelSpec extends TestSpec with TestRendererUtils {
 
   it should "select row when onSelect" in {
     //given
-    val renderer = createRenderer()
-    renderer.render(<(CustomTablePanel())()())
-    val tableProps = findComponentProps(renderer.getRenderOutput(), tableComp)
+    val renderer = createTestRenderer(<(CustomTablePanel())()())
+    val tableProps = findComponentProps(renderer.root, tableComp)
     tableProps.selectedIds shouldBe Set.empty
 
     //when
     tableProps.onSelect(tableProps.rows(1))
 
     //then
-    val updatedProps = findComponentProps(renderer.getRenderOutput(), tableComp)
+    val updatedProps = findComponentProps(renderer.root, tableComp)
     updatedProps.selectedIds shouldBe Set(2)
   }
 
@@ -28,10 +26,10 @@ class CustomTablePanelSpec extends TestSpec with ShallowRendererUtils {
     val component = <(CustomTablePanel())()()
 
     //when
-    val result = shallowRender(component)
+    val result = testRender(component)
 
     //then
-    assertComponent(result, tableComp) {
+    assertTestComponent(result, tableComp) {
       case TablePanelProps(header, rows, keyExtractor, rowClassExtractor, cellRenderer, selectedIds, _) =>
         header shouldBe List(
           TableColumnData("Id"),

diff --git a/showcase/src/test/scala/scommons/client/showcase/table/SimpleTablePanelSpec.scala b/showcase/src/test/scala/scommons/client/showcase/table/SimpleTablePanelSpec.scala
@@ -1,23 +1,21 @@
 package scommons.client.showcase.table
 
 import scommons.client.ui.table._
-import scommons.react.test.TestSpec
-import scommons.react.test.util.ShallowRendererUtils
+import scommons.react.test._
 
-class SimpleTablePanelSpec extends TestSpec with ShallowRendererUtils {
+class SimpleTablePanelSpec extends TestSpec with TestRendererUtils {
 
   it should "select row when onSelect" in {
     //given
-    val renderer = createRenderer()
-    renderer.render(<(SimpleTablePanel())()())
-    val tableProps = findComponentProps(renderer.getRenderOutput(), TablePanel)
+    val renderer = createTestRenderer(<(SimpleTablePanel())()())
+    val tableProps = findComponentProps(renderer.root, TablePanel)
     tableProps.selectedIds shouldBe Set.empty
 
     //when
     tableProps.onSelect(tableProps.rows(1))
 
     //then
-    val updatedProps = findComponentProps(renderer.getRenderOutput(), TablePanel)
+    val updatedProps = findComponentProps(renderer.root, TablePanel)
     updatedProps.selectedIds shouldBe Set("2")
   }
 
@@ -26,10 +24,10 @@ class SimpleTablePanelSpec extends TestSpec with ShallowRendererUtils {
     val component = <(SimpleTablePanel())()()
 
     //when
-    val result = shallowRender(component)
+    val result = testRender(component)
 
     //then
-    assertComponent(result, TablePanel) {
+    assertTestComponent(result, TablePanel) {
       case TablePanelProps(header, rows, keyExtractor, rowClassExtractor, cellRenderer, selectedIds, _) =>
         header shouldBe List(
           TableColumnData("Id"),

diff --git a/showcase/src/test/scala/scommons/client/showcase/table/TablePanelDemoSpec.scala b/showcase/src/test/scala/scommons/client/showcase/table/TablePanelDemoSpec.scala
@@ -1,30 +1,30 @@
 package scommons.client.showcase.table
 
+import scommons.client.showcase.table.TablePanelDemo._
 import scommons.react._
-import scommons.react.test.TestSpec
-import scommons.react.test.util.ShallowRendererUtils
+import scommons.react.test._
 
-class TablePanelDemoSpec extends TestSpec with ShallowRendererUtils {
+class TablePanelDemoSpec extends TestSpec with TestRendererUtils {
+
+  TablePanelDemo.simpleTablePanel = () => "SimpleTablePanel".asInstanceOf[ReactClass]
+  TablePanelDemo.customTablePanel = () => "CustomTablePanel".asInstanceOf[ReactClass]
 
   it should "render component" in {
     //given
     val component = <(TablePanelDemo())()()
 
     //when
-    val result = shallowRender(component)
+    val result = createTestRenderer(component).root
 
     //then
-    assertNativeComponent(result,
-      <.>()(
-        <.h2()("TablePanel"),
-        <.p()("Demonstrates table functionality"),
-
-        <.h3()("Simple TablePanel"),
-        <(SimpleTablePanel()).empty,
-
-        <.h3()("TablePanel with custom cell renderer"),
-        <(CustomTablePanel()).empty
-      )
-    )
+    inside(result.children.toList) {
+      case List(header1, p, header2, simpleTable, header3, customTable) =>
+        assertNativeComponent(header1, <.h2()("TablePanel"))
+        assertNativeComponent(p, <.p()("Demonstrates table functionality"))
+        assertNativeComponent(header2, <.h3()("Simple TablePanel"))
+        assertNativeComponent(simpleTable, <(simpleTablePanel()).empty)
+        assertNativeComponent(header3, <.h3()("TablePanel with custom cell renderer"))
+        assertNativeComponent(customTable, <(customTablePanel()).empty)
+    }
   }
 }
diff --git a/ui/src/main/scala/scommons/client/app/AppMainPanel.scala b/ui/src/main/scala/scommons/client/app/AppMainPanel.scala
@@ -9,15 +9,18 @@ case class AppMainPanelProps(name: String = "App",
 
 object AppMainPanel extends FunctionComponent[AppMainPanelProps] {
 
+  private[app] var appHeaderComp: UiComponent[AppHeaderProps] = AppHeader
+  private[app] var appFooterComp: UiComponent[AppFooterProps] = AppFooter
+
   protected def render(compProps: Props): ReactElement = {
     val props = compProps.wrapped
 
     <.>()(
-      <(AppHeader())(^.wrapped := AppHeaderProps(props.name, props.user))(),
+      <(appHeaderComp())(^.wrapped := AppHeaderProps(props.name, props.user))(),
       <.div(^.className := "container-fluid")(
         compProps.children
       ),
-      <(AppFooter())(^.wrapped := AppFooterProps(props.copyright, props.version))()
+      <(appFooterComp())(^.wrapped := AppFooterProps(props.copyright, props.version))()
     )
   }
 }
diff --git a/ui/src/main/scala/scommons/client/app/AppTaskManagerUi.scala b/ui/src/main/scala/scommons/client/app/AppTaskManagerUi.scala
@@ -21,6 +21,10 @@ object AppTaskManagerUi extends FunctionComponent[TaskManagerUiProps] {
     }
   }
 
+  private[app] var statusPopup: UiComponent[StatusPopupProps] = StatusPopup
+  private[app] var loadingPopup: UiComponent[Unit] = LoadingPopup
+  private[app] var errorPopup: UiComponent[ErrorPopupProps] = ErrorPopup
+
   protected def render(compProps: Props): ReactElement = {
     val props = compProps.wrapped
     val showStatus = props.status.isDefined
@@ -30,18 +34,18 @@ object AppTaskManagerUi extends FunctionComponent[TaskManagerUiProps] {
 
     <.>()(
       if (showStatus) Some(
-        <(StatusPopup())(^.wrapped := StatusPopupProps(
+        <(statusPopup())(^.wrapped := StatusPopupProps(
           statusMessage,
           onHide = props.onHideStatus
         ))()
       ) else None,
 
       if (props.showLoading) Some(
-        <(LoadingPopup())()()
+        <(loadingPopup())()()
       ) else None,
 
       if (showError) Some(
-        <(ErrorPopup())(^.wrapped := ErrorPopupProps(
+        <(errorPopup())(^.wrapped := ErrorPopupProps(
           errorMessage,
           details = props.errorDetails,
           onClose = props.onCloseErrorPopup

diff --git a/ui/src/main/scala/scommons/client/ui/popup/ErrorPopup.scala b/ui/src/main/scala/scommons/client/ui/popup/ErrorPopup.scala
@@ -15,6 +15,9 @@ object ErrorPopup extends FunctionComponent[ErrorPopupProps] {
   private case class ErrorPopupState(showDetails: Boolean = false,
                                      opened: Boolean = false)
 
+  private[popup] var modalComp: UiComponent[ModalProps] = Modal
+  private[popup] var htmlComp: UiComponent[HTMLProps] = HTML
+
   protected def render(compProps: Props): ReactElement = {
     val (state, setState) = useStateUpdater(() => ErrorPopupState())
 
@@ -25,7 +28,7 @@ object ErrorPopup extends FunctionComponent[ErrorPopupProps] {
     )
     val closeBtn = SimpleButtonData("close", "Close", primary = true)
 
-    <(Modal())(^.wrapped := ModalProps(
+    <(modalComp())(^.wrapped := ModalProps(
       header = None,
       buttons = if (props.details.isDefined) List(detailsBtn, closeBtn) else List(closeBtn),
       actions = ActionsData(Set(detailsBtn.command, closeBtn.command), _ => {
@@ -42,7 +45,7 @@ object ErrorPopup extends FunctionComponent[ErrorPopupProps] {
     ))(
       <.div(^.className := "row-fluid")(
         <.img(^.className := IconCss.dialogError, ^.src := UiSettings.imgClearCacheUrl)(),
-        <(HTML())(^.wrapped := HTMLProps(
+        <(htmlComp())(^.wrapped := HTMLProps(
           if (state.showDetails) getFullText(props)
           else props.error
           ,

diff --git a/ui/src/main/scala/scommons/client/ui/popup/InputPopup.scala b/ui/src/main/scala/scommons/client/ui/popup/InputPopup.scala
@@ -17,6 +17,9 @@ object InputPopup extends FunctionComponent[InputPopupProps] {
                                      actionCommands: Set[String],
                                      opened: Boolean = false)
 
+  private[popup] var modalComp: UiComponent[ModalProps] = Modal
+  private[popup] var textFieldComp: UiComponent[TextFieldProps] = TextField
+
   protected def render(compProps: Props): ReactElement = {
     val props = compProps.wrapped
     val (state, setState) = useStateUpdater { () =>
@@ -25,7 +28,7 @@ object InputPopup extends FunctionComponent[InputPopupProps] {
 
     val onOk = () => props.onOk(state.value)
 
-    <(Modal())(^.wrapped := ModalProps(
+    <(modalComp())(^.wrapped := ModalProps(
       header = None,
       buttons = List(Buttons.OK, Buttons.CANCEL),
       actions = ActionsData(state.actionCommands, _ => {
@@ -40,7 +43,7 @@ object InputPopup extends FunctionComponent[InputPopupProps] {
       <.div(^.className := "row-fluid")(
         <.p()(props.message),
         <.div(^.className := "control-group")(
-          <(TextField())(^.wrapped := TextFieldProps(
+          <(textFieldComp())(^.wrapped := TextFieldProps(
             state.value,
             onChange = { value =>
               setState(_.copy(value = value, actionCommands = getActionCommands(value)))

diff --git a/ui/src/main/scala/scommons/client/ui/popup/LoadingPopup.scala b/ui/src/main/scala/scommons/client/ui/popup/LoadingPopup.scala
@@ -5,8 +5,10 @@ import scommons.react._
 
 object LoadingPopup extends FunctionComponent[Unit] {
 
+  private[popup] var popupComp: UiComponent[PopupProps] = Popup
+
   protected def render(compProps: Props): ReactElement = {
-    <(Popup())(^.wrapped := PopupProps(
+    <(popupComp())(^.wrapped := PopupProps(
       onClose = () => (),
       closable = false,
       focusable = false,

diff --git a/ui/src/main/scala/scommons/client/ui/popup/Modal.scala b/ui/src/main/scala/scommons/client/ui/popup/Modal.scala
@@ -15,21 +15,26 @@ case class ModalProps(header: Option[String],
 
 object Modal extends FunctionComponent[ModalProps] {
 
+  private[popup] var popupComp: UiComponent[PopupProps] = Popup
+  private[popup] var modalHeaderComp: UiComponent[ModalHeaderProps] = ModalHeader
+  private[popup] var modalBodyComp: UiComponent[Unit] = ModalBody
+  private[popup] var modalFooterComp: UiComponent[ModalFooterProps] = ModalFooter
+
   protected def render(compProps: Props): ReactElement = {
     val props = compProps.wrapped
 
-    <(Popup())(^.wrapped := PopupProps(
+    <(popupComp())(^.wrapped := PopupProps(
       onClose = props.onClose,
       closable = props.closable,
       onOpen = props.onOpen
     ))(
       props.header.map { header =>
-        <(ModalHeader())(^.wrapped := ModalHeaderProps(header, props.onClose, closable = props.closable))()
+        <(modalHeaderComp())(^.wrapped := ModalHeaderProps(header, props.onClose, closable = props.closable))()
       },
-      <(ModalBody())()(
+      <(modalBodyComp())()(
         compProps.children
       ),
-      <(ModalFooter())(^.wrapped := ModalFooterProps(props.buttons, props.actions, props.dispatch))()
+      <(modalFooterComp())(^.wrapped := ModalFooterProps(props.buttons, props.actions, props.dispatch))()
     )
   }
 }
diff --git a/ui/src/main/scala/scommons/client/ui/popup/OkPopup.scala b/ui/src/main/scala/scommons/client/ui/popup/OkPopup.scala
@@ -13,12 +13,14 @@ object OkPopup extends FunctionComponent[OkPopupProps] {
 
   private case class OkPopupState(opened: Boolean = false)
 
+  private[popup] var modalComp: UiComponent[ModalProps] = Modal
+
   protected def render(compProps: Props): ReactElement = {
     val (state, setState) = useStateUpdater(() => OkPopupState())
 
     val props = compProps.wrapped
 
-    <(Modal())(^.wrapped := ModalProps(
+    <(modalComp())(^.wrapped := ModalProps(
       header = None,
       buttons = List(Buttons.OK),
       actions = ActionsData(Set(Buttons.OK.command), _ => {

diff --git a/ui/src/main/scala/scommons/client/ui/popup/SaveCancelPopup.scala b/ui/src/main/scala/scommons/client/ui/popup/SaveCancelPopup.scala
@@ -29,6 +29,8 @@ private object SaveCancelPopup extends FunctionComponent[SaveCancelPopupProps] {
 
   private case class SaveCancelPopupState(data: Any, opened: Boolean = false)
 
+  private[popup] var modalComp: UiComponent[ModalProps] = Modal
+
   protected def render(compProps: Props): ReactElement = {
     val props = compProps.wrapped
     val (state, setState) = useStateUpdater(() => SaveCancelPopupState(props.initialData))
@@ -46,7 +48,7 @@ private object SaveCancelPopup extends FunctionComponent[SaveCancelPopupProps] {
     val data = state.data.asInstanceOf[props.DataType]
     val actionCommands = if (props.isSaveEnabled(data)) enabledActions else disabledActions
 
-    <(Modal())(^.wrapped := ModalProps(
+    <(modalComp())(^.wrapped := ModalProps(
       header = Some(props.title),
       buttons = List(Buttons.SAVE.copy(
         image = ButtonImagesCss.dbSave,

diff --git a/ui/src/main/scala/scommons/client/ui/popup/StatusPopup.scala b/ui/src/main/scala/scommons/client/ui/popup/StatusPopup.scala
@@ -7,16 +7,19 @@ case class StatusPopupProps(text: String,
 
 object StatusPopup extends FunctionComponent[StatusPopupProps] {
 
+  private[popup] var popupComp: UiComponent[PopupProps] = Popup
+  private[popup] var withAutoHideComp: UiComponent[WithAutoHideProps] = WithAutoHide
+
   protected def render(compProps: Props): ReactElement = {
     val props = compProps.wrapped
 
-    <(Popup())(^.wrapped := PopupProps(
+    <(popupComp())(^.wrapped := PopupProps(
       onClose = () => (),
       focusable = false,
       overlayClass = "scommons-modal-no-overlay",
       popupClass = PopupCss.statusContent
     ))(
-      <(WithAutoHide())(^.wrapped := WithAutoHideProps(props.onHide))(props.text)
+      <(withAutoHideComp())(^.wrapped := WithAutoHideProps(props.onHide))(props.text)
     )
   }
 }
diff --git a/ui/src/main/scala/scommons/client/ui/popup/YesNoCancelPopup.scala b/ui/src/main/scala/scommons/client/ui/popup/YesNoCancelPopup.scala
@@ -13,12 +13,14 @@ case class YesNoCancelPopupProps(message: String,
 
 object YesNoCancelPopup extends FunctionComponent[YesNoCancelPopupProps] {
 
+  private[popup] var modalComp: UiComponent[ModalProps] = Modal
+
   protected def render(compProps: Props): ReactElement = {
     val (opened, setOpened) = useState(false)
 
     val props = compProps.wrapped
 
-    <(Modal())(^.wrapped := ModalProps(
+    <(modalComp())(^.wrapped := ModalProps(
       header = None,
       buttons = List(
         SimpleButtonData(Yes.command, "Yes", props.selected == Yes),