Skip to content

Instantly share code, notes, and snippets.

@meetzaveri
Last active February 2, 2019 08:36
Show Gist options
  • Save meetzaveri/001ce641ffde1e92c6f0048d92f89990 to your computer and use it in GitHub Desktop.
Save meetzaveri/001ce641ffde1e92c6f0048d92f89990 to your computer and use it in GitHub Desktop.
test-state validation wrapper

This utility is exclusively applicable for react component's state only.

Use-case:

Suppose there's a table of data containing user list. The data of user(here in userArr) is stored in state in array format.

Now I create a user, API gets executed, response gets returned and now there is a new user. So when user gets created, we need to add him(append him to users array userArr).

So everytime, a new uer gets created, we need to make sure that he gets added in to table hence appending him into userArr.

About the utility:

Now utility helps as part of validation, that always when there is create user action dispatched, pass a state's property(i.e. userArr) and criteria to validate if user was added into state's property. If validation fails, then it will throw warning just like when proptypes test fails.

Same use-case extends for Update and delete operation.

Some extra functionality by utility

  • resetState(suppliedState, stateKeyToCompare) : This ensures given state property (key) should be reset. Either to empty string,empty arr,empty obj or null.
  • statePropertyChangeLogger() : This will do diff comparision with previous state and will log out which state keys(properties) have been changed.
  • getStateHistory() : It can contain of state history array upto previous 10 state snapshots.

Open Scenario for testState:

  • Check use case : When a user CRUDS a data from list, state/local state should be updated as list should be updated.
  • Check use case : If current logged in user's details has been updated, then it should reflect everywhere
  • When user fills out form, form state should be reset as values should be " " or null (empty [] or {} in some cases).

Form of utility:

  • It can be used as wrapper or like react component.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment