
This is second part of the MobX tutorial series, today we'll setup project and add our MobX stores.

## Table Of Contents

1. [What is MobX](/posts/react-native-mobx-tutorial)
2. [Making ReactNative app](#)
2. [Testing stores](#)
2. [Testing views with Enzyme](#)

## Setting Up

OK, enough rolling dice, let's do the real thing.

We'll use `create-react-native-app` to setup our project structure.

Run the following commands:

```sh
$ yarn global add create-react-native-app
$ create-react-native-app binance-tracker
$ cd binance-tracker
```

Now you can execute `yarn start` to run the project in __Expo__ app or execute your app in simulator running `yarn ios` or `yarn android`.

Install dependencies:

```sh
$ yarn add mobx mobx-react react-navigation
```

* MobX is needed for state management
* `mobx-react` will provide the `@observer` decorator 
* `react-navigation` will provide necessary navigation capabilities

Let's start adding functionality.

## Application structure

Our application will have two screens. `ProfileScreen` where we'll allow to update Binance credentials and `HomeScreen` where we'll show balances and some additional info.

Here is how our `App.js` will look:

```jsx
import React from "react";
import { StyleSheet, View, Text, SafeAreaView } from "react-native";
import { StackNavigator } from "react-navigation";
import HomeScreen from "./src/HomeScreen";
import ProfileScreen from "./src/ProfileScreen";
import { Provider } from "mobx-react";
import stores from "./src/stores";

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: "#272C36"
  },
  navigator: {
    backgroundColor: "#272C36"
  }
});

const Navigator = StackNavigator(
  {
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen }
  },
  {
    mode: "modal",
    headerMode: "none"
  }
);

export default class App extends React.Component {
  render() {
    return (
      <Provider {...stores}>
        <SafeAreaView style={styles.safeArea}>
          <Navigator style={styles.navigator} />
        </SafeAreaView>
      </Provider>
    );
  }
}
```

Here we use `StackNavigator` from `react-navigation` package to be able to temporarily add `ProfileScreen` on top of `HomeScreen`. It handles the animation and history. So we can easily get back to our previous screen.

`SafeAreaView` is needed only for IphoneX, it adds vertical margins to not interfere with it's form factor.

And then we wrap everything into `Provider`. It allows to inject defined stores to it's child components using `@inject` decorator (or function, if you are not big fan of decorators).

Stores are defined in `src/stores/index.js` that exports them in an object:

```js
import ApiKeysStore from './ApiKeysStore';
import BinanceApiStore from './BinanceApiStore';

const apiKeysStore = new ApiKeysStore()
const binanceApiStore = new BinanceApiStore(apiKeysStore)

export default {
  apiKeysStore: apiKeysStore,
  binanceApiStore: binanceApiStore,
};
```

Now we'll be able to inject them into components using this object keys.

Like this:

```js
@inject('apiKeysStore')
@observer
export default class ProfileScreen extends React.Component {
```

## Getting API Keys

In order to communicate with Binance we first need to get the `API_KEY` and `API_SECRET`. To do that – [create new account there](https://www.binance.com/?ref=12930619) (yes, it's my affiliate link, remove the `ref` attribute if you don't want me to get any affiliate commissions from you).

From your account page go to [API setup page](https://www.binance.com/userCenter/createApi.html).

Create API key/secret and save somewhere, we'll use them later.

## Adding First Screen

We need to be able to save those API keys somehow. Let's create our first screen with two inputs and submit button.

![binance tracker](/binance_profile.png)

```jsx
/* Imports omitted */

/* Style declarations omitted */

@inject("apiKeysStore")
@observer
export default class ProfileScreen extends Component {
  /* Handler functions omitted */

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          onChangeText={this.props.apiKeysStore.setApiKey}
          value={this.props.apiKeysStore.apiKey}
          placeholder="API_KEY"
        />

        <TextInput
          style={styles.input}
          onChangeText={this.props.apiKeysStore.setApiSecret}
          value={this.props.apiKeysStore.apiSecret}
          placeholder="API_SECRET"
          placeholderTextColor="#DDBC44"
        />

        <View style={styles.buttonsContainer}>
          <TouchableOpacity style={styles.button} onPress={this.updateKeys}>
            <Text style={styles.buttonText}>Save</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.button}
            onPress={this.handlePressCancel}
          >
            <Text style={styles.buttonText}>Cancel</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
```

As you can see here, after we injected `apiKeyStore` it became accessible as `prop` variable.

## ApiKeysStore

```js
import {observable, computed, action} from 'mobx';
import { AsyncStorage } from 'react-native';

export default class ApiKeysStore {
  @observable apiKey = '';
  @observable apiSecret = '';

  async saveApiKeys() {
    try{
      await AsyncStorage.setItem('@ApiKeysStore:apiKey', this.apiKey);
      await AsyncStorage.setItem('@ApiKeysStore:apiSecret', this.apiSecret);
    } catch(e) {
      console.log(e)
    }
  }

  @action setApiKey(apiKey) {
    this.apiKey = apiKey;
  }

  @action setApiSecret(apiSecret) {
    this.apiSecret = apiSecret;
  }

  @action async loadApiKeys() {
    try {
      this.apiKey = await AsyncStorage.getItem('@ApiKeysStore:apiKey');
      this.apiSecret = await AsyncStorage.getItem('@ApiKeysStore:apiSecret');
    } catch (e) {
      console.log(e);
    }
  }

  @computed get apiKeysExist() {
    return this.apiKey && this.apiSecret;
  }
}
```

The store is pretty simple, it has two observable properties (`apiKey` and `apiSecret`), actions to set those properties and functions to save and load those keys with `AsyncStorage`.

## Getting Data From API

`BinanceApiStore` has reference to `ApiKeysStore`, so it can use the keys to access Binance API.

`BinanceApiStore` has a function to get account data (that has info on amounts of owned cryptos) and a function to get current tickers (containing price for every crypto).

It updates it's observable properties and provides a bunch of computed properties so we can display our data.

```js
/* Imports ommited */

export default class BinanceApiStore {
  constructor(apiKeysStore){
    this.apiKeysStore = apiKeysStore;
  }

  @observable apiKeysStore = null;
  @observable balances = [];
  @observable oldBalances = [];
  @observable tickers = [];

  @computed get tickersMap() {
    /* Function content ommited */
  }

  @computed get oldBalancesMap() {
    /* Function content ommited */
  }

  @computed get computedBalances() {
    /* Function content ommited */
  }

  @action setTickers(tickers) {
    this.tickers = tickers;
  }

  @action setBalances(balances) {
    this.balances = balances;
  }

  @action setOldBalances(balances) {
    this.oldBalances = balances;
  }

  async loadBookTickers() {
    /* Function content ommited */
  }

  async loadAccountData() {
    /* Function content ommited */
  }

  async loadOldComputedBalances() {
    const balancesJson = await AsyncStorage.getItem('@BinanceApiStore:oldComputedBalances');
    const balances = JSON.parse(balancesJson)
    this.setOldBalances(balances)
  }

  saveComputedBalancesDisposer = autorunAsync(() => {
    this.computedBalances.length && AsyncStorage.setItem('@BinanceApiStore:oldComputedBalances',
      JSON.stringify(this.computedBalances));
  }, 0)
}
```

Also it stores old computed values to `AsyncStorage` and allows to calculate difference with the last time you checked your balances.

## Displaying Data

Here is the `HomeScreen` layout.

```jsx
/* Imports ommited */

/* Styles ommited */

@inject("apiKeysStore", "binanceApiStore")
@observer
export default class HomeScreen extends Component {
  async componentDidMount() {
    const { apiKeysStore, binanceApiStore, navigation } = this.props;

    await apiKeysStore.loadApiKeys();
    try {
      await binanceApiStore.loadBookTickers();
      await binanceApiStore.loadAccountData();
      await binanceApiStore.loadOldComputedBalances();
    } catch (e) {
      navigation.navigate("Profile");
    }
  }

  render() {
    const { binanceApiStore, navigation } = this.props;

    return (
      <View style={styles.container}>
        <CurrenciesListHeader />
        <FlatList
          style={styles.list}
          data={binanceApiStore.computedBalances}
          keyExtractor={item => item.asset}
          renderItem={({ item }) => (
            <View style={styles.item}>
              <SymbolAndAmount style={styles.itemSection} item={item} />
              <AmountInBtcAndUsd
                style={styles.itemSection}
                volUsd={item.amountInUsd}
                volBtc={item.amountInBtc}
              />
              <ChangePercentage
                style={styles.itemSection}
                value={item.priceChange}
              />
            </View>
          )}
        />
        <TouchableOpacity
          style={styles.secretsButton}
          onPress={() => navigation.navigate("Profile")}
        >
          <Text style={styles.secretsButtonText}>Set API_KEY & API_SECRET</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
```

First we make `ApiKeyStore` load the API keys, then we `try` to load the account and tickers data and if we get an error – we navigate user to `ProfileScreen` to enter valid credentials.

When everything is fine and we got the `computedBalances` we display them using `FlatList`. We'll take closer look on rendered components in last article where we'll cover them with view tests using `Enzyme`.

## Summary

In this article I omitted a lot of code, we'll take a closer look on our stores in next article when we'll cover them with tests.


React Native Mobx Tutorial - Part 2


__MobX__ is state management solution that is gaining popularity very fast. I'll show you
how to create a simple __React-Native__ app using __MobX__.

## What Are We Going To Build

I have a few crypto coins on some exchanges. Not like I'm trading or something, I just bought some tokens that I liked and now just hold them and buy/sell occasionally.

On [Binance](https://www.binance.com/?ref=12930619) you can see how many coins you have and what's their worth in bitcoin and even in dollars, but you can't see what's the difference since the last time you've checked it.

We are going to build portfolio tracker for it. On first run we'll save all the coins prices and then we'll show the difference.

It'll look somewhat like this:

![binance tracker](/binance_tracker.png)

We'll learn how to store data locally, use flatlist, navigator and do multi-screen applications, also we'll learn how to manage state using MobX.

## Table Of Contents

1. [What is MobX](#)
2. [Making ReactNative app](/posts/react-native-mobx-tutorial-part-2)
2. [Testing stores](#)
2. [Testing views with Enzyme](#)

## Why MobX?

MobX is usually faster than Redux, requires less boilerplate and in general it's easier to grasp for novice.

MobX has very few core concepts:

* [Observables](#observables)
* [Computed values](#computed_values)
* [Reactions](#reactions)
* [Actions](#actions)

<a name='observables'></a>
### Observables

Observables allow you to subscribe for their changes. You can annotate your class properties with `@observable` decorator and then track their values with `observers`. So every time the values will change – `observers` will be updated accordingly.

Here is simple example. It's a rolling dice – every time you press __ROLL__ button – it re-rolls the dice and displays resulting number from 1 to 6.

```jsx
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { observable } from 'mobx';
import { observer } from 'mobx-react';

@observer class Dice extends Component {
  @observable value = 1;

  render() {
    return (
      <div style={this.styles.container}>
        <div style={this.styles.result}>Result: {this.value}</div>
        <button onClick={this.handleRoll}>ROLL</button>
      </div>
    )
  }

  handleRoll = () => {
    this.value = Math.floor(Math.random()*6) + 1;
  }

  styles = {
    container: {
      padding: '16px 0px'
    },
    result: {
      fontSize: 22,
      marginBottom: 10
    }
  }
}
ReactDOM.render(<Dice />, document.getElementById('dice'));
```

<p>
  <div id="dice"></div>
  <script type="text/javascript" src="https://maksimivanov.com/javascripts/dice.js" charset="utf-8"></script>
</p>

<a name='computed_values'></a>
### Computed values

Computed values can be derived from observables and will be updated automatically when the latter will be changed. Keep in mind, that in order to be updated `computed` has to be observed.

```jsx
@computed get computedValue() {
  return this.value > 3 ? 'WIN' : 'LOOSE'
}

render() {
  return (
    <div style={this.styles.container}>
      <div style={this.styles.result}>Result: {this.value}</div>
      <div style={this.styles.result}>Computed Result: {this.computedValue}</div>
      <button onClick={this.handleRoll}>ROLL</button>
    </div>
  )
}
```

<p>
  <div id="computed_dice"></div>
  <script type="text/javascript" src="https://maksimivanov.com/javascripts/computed_dice.js" charset="utf-8"></script>
</p>

<a name='reactions'></a>
### Reactions

Reactions are very similar to computed values but instead of returning new value they are used to produce side-effects (making network requests, patching DOM etc.)

MobX provides 3 types of reaction functions [when](https://mobx.js.org/refguide/when.html), [autorun](https://mobx.js.org/refguide/autorun.html) and [reaction](https://mobx.js.org/refguide/reaction.html)

* `when` accepts two functions: predicate and effect. It runs and observes predicate until it returns `true`, and then runs the `effect` function. After that it disposes, and stops reacting observed property.
* `autorun` is for cases when you need reactive function that will fire every time the observed value is updated. Unlike `computed` it doesn't have to be observed itself.
* `reaction` is like `autorun` but gives you more control over what properties to observe. It accepts two functions `data-function` and `side-effect-function`. `data-function` is tracked and returns data that is used in `side-effect-function`.

Here is an example of `autorun`:

```html
constructor() {
  super();
  autorun(
    ()=> (this.value > 3) && alert('WIN')
  )
}
```

<p>
  <div id="reaction_dice"></div>
  <script type="text/javascript" src="https://maksimivanov.com/javascripts/reaction_dice.js" charset="utf-8"></script>
</p>

<a name='actions'></a>
### Actions

Actions are anything that alters the state. So you can use them to explicitly mark that functions with `@action` decorator.

This decorator takes function and wraps it into `transaction`, `untracked` and `allowStateChanges`.

* `transaction` is used to batch state updates so no observers will be notified until that function is completed. So you can update multiple properties at once.
* `untracked` allows you to run code without establishing observers (just like reactions, or unlike computed's)
* `allowStateChanges` is used to allow/disallow state changes for certain function. By default allows `action` to make changes (and disallows for `computed` and `observer`).

## Observers

Strictly speaking `observers` aren't part of MobX core. They are provided by the `mobx-react` package. But anyway…

They are used to make your views "observe" `observables` and re-render on change.

But I'll cover it in next part.




React Native Mobx Tutorial - Part 1


When you develop for web you have a lot of options to set up your e2e tests. _Protractor, CasperJS, PhantomJS, DalekJS_ and a lot of others. That's not the case in the world of mobile development. But worry not, I'm going to show you the best way (__in my opinion__) to test your application from __users point of view__.

I think everyone will agree that having bugs is lame. Testing your application manually is also lame: it requires a lot of time, and you can forget to test certain scenarios or just overlook bugs.

If only you could make robots do your job!

## E2E Automation

![test pyramid](/testing_pyramid.png)

Tests we are going to discuss here sit on top of the Martin Fowler's [Test Pyramid](https://martinfowler.com/bliki/TestPyramid.html). They are the slowest and most expensive to support. Every time you change any part of your system – you might break one of those. So as a rule of thumb __keep them low__. Test only required scenarios, and don't use them to test things that can be tested with __unit tests__. 

But even though they are slow, expensive and brittle – it's still much better than a meat-bag poking your app with his sausage fingers.

## Real Example

I'm going to assume that you are using React Native, but AFAIK the setup and workflow won't change much even if you write __native apps__.

Make sure you have Node v6 or later and XCode 8 or later installed. I recommend to use [n](https://www.npmjs.com/package/n) to manage node versions. Also make sure to install [yarn](https://yarnpkg.com/en/).

```sh
$ yarn global add create-react-native-app
$ create-react-native-app detox-e2e-tutorial
$ cd detox-e2e-tutorial
```

These commands will install the [create-react-native-app](https://github.com/react-community/create-react-native-app) script and create the `detox-e2e-tutorial` project.

Initially your newly created project is going to be run in _Expo app_. We want it to be __truly__ native. So run the following command:

```sh
$ yarn eject
```

It will ask you a couple of questions, here is how I answered them:

```sh
? How would you like to eject from create-react-native-app? React Native: I'd like a regular React Native project.
We have a couple of questions to ask you about how you'd like to name your app:
? What should your app appear as on a user's home screen? Detox E2E Tutorial
? What should your Android Studio and Xcode projects be called? detoxe2etutorial
```

Let's check that everything works:

```sh
$ yarn ios
```
It will start an app in simulator and also will run bundler in terminal (you can also run bundler manually with `yarn start`).

You should see:

```
Open up App.js to start working on your app!
Changes you make will automatically reload.
Shake your phone to open the developer menu.
```

Great, let's modify our `App.js` so we'll have something to test.

## Prepare The App

Open the `App.js` file in the root of your project and remove everything. Copy and paste the following contents there:

```html
import React from 'react';
import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      greeting: 'Welcome!'
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>
          {this.state.greeting}
        </Text>
        <TouchableOpacity testID='hello_button' onPress={this.onButtonPress.bind(this)}>
          <Text style={styles.button_text}>Say Hello</Text>
        </TouchableOpacity>
      </View>
    );
  }

  onButtonPress(greeting) {
    this.setState({
      greeting: 'Hello world!'
    });
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 25,
    marginBottom: 30
  },
  button_text: {
    color: 'blue',
    marginBottom: 20
  }
});
```

Open the app (run `yarn ios`). You should see text _Welcome!_ and blue text _Say Hello_. Press that _Say Hello_ thing. The top label should change text to _Hello world!_.

This is super simple usage scenario, but it's enough for our purposes. Let's automate it.

## Setup Detox

Even though there are other options like Appium, I highly recommend [Detox](https://github.com/wix/detox). Reasons are totally practical:

* It's faster.
* It's less flaky.
* It's platform agnostic (you can test both iOS and Android)
* It works both with React Native and regular applications
* it has great documentation.

Unlike other e2e solutions _Detox_ uses __gray box__ testing model. Which means that it has some knowledge about the system internals.

And this is exactly why it's a lot more fast and reliable. I'm not going to go in-depth here, go and read [the documentation page explaining how Detox is different](https://github.com/wix/detox/blob/master/docs/More.DesignPrinciples.md).

Let's continue with setup. Make sure you have [Homebrew](https://brew.sh/) installed. Run:

```sh
$ brew tap wix/brew
$ brew install --HEAD applesimutils
```

This is _Detox_ dependency that's needed to control iPhone simulator.

Now install `detox-cli` to be able to run _Detox_ commands.

```sh
$ yarn global add detox-cli
```

And install _Detox_ for your project:

```sh
$ yarn add --dev detox
```

Install some test-runner. I'm going to use _Jest_:

```sh
$ yarn add --dev jest
```

Also add these lines to `scripts` block:

```json
"test:e2e": "detox test -c ios.sim.debug",
"test:e2e:build": "detox build"
```

Now create `e2e` folder in your projects root and create file `init.js` with following contents:

```js
const detox = require('detox');
const config = require('../package.json').detox;

// Set the default timeout
jasmine.DEFAULT_TIMEOUT_INTERVAL = 120000;

beforeAll(async () => {
  await detox.init(config);
});

afterAll(async () => {
  await detox.cleanup();
});
```

Also make _Detox_ to run with _Jest_, add `config.json` file to `e2e` folder:

```js
{
  "setupTestFrameworkScriptFile": "./init.js"
}
```

And add the following block to the `package.json`:

```json
"detox": {
  "test-runner": "jest",
  "runner-config": "e2e/config.json",
  "configurations": {
    "ios.sim.debug": {
      "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/detoxe2etutorial.app",
      "build": "xcodebuild -project ios/detoxe2etutorial.xcodeproj -scheme detoxe2etutorial -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
      "type": "ios.simulator",
      "name": "iPhone 7"
    }
  }
}
```

Phew, almost there. Let's write our test.

## First Test

First and the only. Our application is very simple so will be our test.

```js
describe('Example test', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('allows to change label text to "Hello world!"', async () => {
    await expect(element(by.id('label'))).toHaveText('Welcome!');;
    await element(by.id('hello_button')).tap();
    await expect(element(by.id('label'))).toHaveText('Hello world!');;
  });
});
```

Run the test:

```sh
$ yarn test:e2e:build
$ yarn test:e2e
```

## Congratulations

Now you can write user scenarios for your mobile applications. Go ahead and automate them all.

Here is [Detox documentation index](https://github.com/wix/detox/tree/master/docs), you'll find all the needed info including matchers and expectation there.


ReactNative

React Native Mobx Tutorial - Part 2

React Native Mobx Tutorial - Part 1

React Native E2E Testing With Detox