testableLogin.js

// -- BEFORE --
// In this first exmaple, the action dispatching and flow would be hard to test, because its highly coupled with 
// the component and the way it interacts with the Linking API.

// login.js
import {Linking} from 'react-native'
export default class Login extends Component {
  constructor(props) {
    super(props);
    this.handleDeepLink = this.handleDeepLink.bind(this);
  }
  componentDidMount() {
    Linking.addEventListener("url", this.handleDeepLink);
  }
  render() {
    return (
      <Button
        title="login"
        onPress={() => {
          const url = "https://demo.enlanube.io/auth/google?redirectTo=wasabi://login";
          Linking.openURL(url)
            .catch(err => console.error("An error occurred", err));
        }}
      />
    );
  }
  handleDeepLink(e) {
    this.props.login(getParameterByName("auth_token", e.url));
  }
}


// -- AFTER --
// Here, all the side effects are isolated and can be trigerred by dispatching an action. Then the action gets intercepted by 
// redux-observable. This way, I could easily mock the redux store, dispatch a loginRequest action, mock the Linking API,
// and expect() the loginSuccess action to be dispatched.


// components/login.js
class Login extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Button
        title="login"
        onPress={() => this.props.dispatch(loginRequest())}
      />
    );
  }
}

// modules/login.js
export const loginEpic = (action$, store) => action$
  .ofType(LOGIN_REQUEST)
  .do(_ => {
    const url = "https://emilio.enlanube.io/auth/google?redirectTo=wasabi://";
    Linking.openURL(url).catch(e => console.log("error", e));
  })
  .mergeMap(_ =>
    Rx.Observable
      .fromEvent(Linking, "url")
      .map(R.prop("url"))
      .map(R.curry(getUrlParameter)("auth_token"))
      .map(loginSuccess));