scommons / scommons-react Goto Github PK

View Code? Open in Web Editor NEW

5.0 2.0 1.0 685 KB

Scala.js facades for core React.js APIs, components and hooks

Home Page: https://scommons.github.io/scommons-react/

License: Apache License 2.0

Scala 99.13% JavaScript 0.23% HTML 0.29% Shell 0.35%

scalajs scala-js scalajs-reactjs reactjs react react-js react-test-renderer react-hooks scala-facade redux

scommons-react's Introduction

Scala Commons React

Scala.js facades for common React.js utilities and components.

It uses excellent scalajs-reactjs binding/facade library.

How to add it to your project

val scommonsReactVer = "1.0.0-SNAPSHOT"

libraryDependencies ++= Seq(
  "org.scommons.react" %%% "scommons-react-core" % scommonsReactVer,
  "org.scommons.react" %%% "scommons-react-dom" % scommonsReactVer,
  "org.scommons.react" %%% "scommons-react-redux" % scommonsReactVer,
  
  "org.scommons.react" %%% "scommons-react-test" % scommonsReactVer % "test",
  "org.scommons.react" %%% "scommons-react-test-dom" % scommonsReactVer % "test"
)

Latest SNAPSHOT version is published to Sonatype Repo, just make sure you added the proper dependency resolver to your build.sbt settings:

resolvers += "Sonatype Snapshots" at "https://oss.sonatype.org/content/repositories/snapshots/"

How to use it

Demo Application
- live demo => How to Build and Run
- AppMain
- AppState => tests
- CounterActions => tests
- CounterController => tests
- CounterPanel => tests
- CounterState => tests
Components:
- ClassComponent => tests
- ErrorBoundary => tests
- FunctionComponent => tests
- React.memo => tests
- React.Fragment => tests
React API
- React.createRef() => tests
- ReactDOM.createPortal()
React Hooks:
- useState => tests
- useReducer => tests
- useMemo/useCallback => tests
- useContext => tests
- useRef => tests
- useEffect => tests
- useLayoutEffect => tests

How to Build

To build and run all the tests use the following command:

sbt test

Documentation

You can find more documentation here

scommons-react's People

Contributors

Stargazers

Watchers

Forkers

finnmerlett

scommons-react's Issues

Add assertComponents test helper

So one can write:

    assertComponents(result.children, List(
      <.div()("Item #1"),
      <.div()("test 1")
    ))

instead of:

inside(result.children.toList) { case List(child1, child2) =>
    assertNativeComponent(child1, <.div()("Item #1"))
    assertNativeComponent(child2, <.div()("test 1"))
}

Add TestErrorBoundary to test module

It would be handy to have common reusable TestErrorBoundary test utility component to catch rendering/context errors in tests.

Improve component children count assertion

Currently its printing:

10 was not equal to 11

while more meaningful error message should be:

Count of children doesn't match for <component>:
  expected 11 but actual was 10

Add assertWrapped prop test helper

So it can be used in the render test cases like this:

val someChildComp: UiComponent[SomeChildProps] = mockUiComponent(???)

assertNativeComponent(result,
  <(someChildComp())(^.assertWrapped(inside(_) { case SomeChildProps(prop1, prop2) =>
    prop1 shouldBe ???
    prop2 shouldBe ???
  }))()
)

Add scommons.react.test package object

Define test types in package object for easy import:

import scommons.react.test._

Simplify redux related imports

Add type aliases to redux package object, so its possible to use single import:

import scommons.react.redux._

instead of:

import io.github.shogowada.scalajs.reactjs.redux.Action
import io.github.shogowada.scalajs.reactjs.redux.Redux.Dispatch

Improve findComponents test helper api to accept ReactClassElementSpec instances

Allow to pass instances of ReactClassElementSpec class to TestRendererUtils.findComponents method, so we can write:

findComponents(renderer.root, <.TextInput)

instead of:

findComponents(renderer.root, <.TextInput.reactClass)

Improve test assertions error messages

For example, currently we may see such failed assertion error when number of children doesn't match to the expected for component:

error: 2 was not equal to 1

but it's not clear for which parent element in the tree it failed.

Add mockUiComponent test helper

So one could write:

MyComponent.buttonComp = mockUiComponent("MuiButtonMock")

instead of:

MyComponent.buttonComp = () => "MuiButtonMock".asInstanceOf[ReactClass]

scommons / scommons-react Goto Github PK

scommons-react's Introduction

Scala Commons React

How to add it to your project

How to use it

How to Build

Documentation

scommons-react's People

Contributors

Stargazers

Watchers

Forkers

scommons-react's Issues

Recommend Projects

Recommend Topics

Recommend Org