Git Product home page Git Product logo

node-and-react-snippets's Introduction

# Snipppets! Node - React - ReactNative - Redux



Redux snippets

Cleaning up the messy seamless-immutable functions in redux-log

import createLogger from 'redux-logger'

// Seamless-Immutable logger cleanup
const stateTransformer = (state) => {
  if (typeof state === 'object' && state !== null && Object.keys(state).length) {
    let newState = {}
    for (var i of Object.keys(state)) {
      if (state[i].asMutable) newState[i] = state[i].asMutable({ deep: true })
      else newState[i] = state[i]
    }
    return newState
  } else {
    return state
  }
}
​
// Create the logger
const loggerMiddleware = createLogger({
  collapsed: true,
  stateTransformer
})

Unit Testing

Mocking a function (startRanging) of a module (beaconsHandler) imported by another module(myModule) (...what a mess)

import proxyquire from 'proxyquire'


// Test case: 
// - I need to check that myModule calls startRanging (which
//   is a function that myModule imports from beaconsHandler)
// - beaconsHandler may do a lot of things we don't need (like
//   calling dependecies that are not accessible during our tests)
// - ...let's mock startRanging:
const mockedStartRanging = () => null
const myModule = proxyquire('../../src/myModule', {
  '../services/beaconsHandler': {
    startRanging: mockedStartRanging,
    '@noCallThru': true // Block dependencies check
  }
})

// We can now check that the function is called without messy dependency issues.
// In e.g. with Mocha:
  it('checks for transmission support', () => {
    const actual = iterator.next().value
    const expected = call(mockedStartRanging)
    expect(actual).to.deep.equal(expected)
  })

Setup configs

(React-Native) package.json example

{
  "name": "React-Native app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "reset": "watchman watch-del-all && rm -rf node_modules/ && npm cache clean && npm prune && npm i",
    "generate-apk": "curl 'http://localhost:8081/index.android.bundle?platform=android' -dev=false -o 'android/app/src/main/assets/index.android.bundle' && android/gradlew assembleRelease -p android/",
    "lint": "eslint src",
    "test": "mocha --opts tests/mocha.opts tests/ --recursive",
    "lintest": "eslint src && mocha --opts tests/mocha.opts tests/ --recursive"
  },
  "dependencies": {
    "autobind-decorator": "^1.3.3",
    "ramda": "^0.21.0",
    "react": "^0.14.8",
    "react-native": "^0.23.1",
    "react-native-router-flux": "^3.2.13",
    "react-redux": "^4.4.4",
    "redux": "^3.4.0",
    "redux-logger": "^2.6.1",
    "seamless-immutable": "^5.1.1"
  },
  "devDependencies": {
    "babel-eslint": "^6.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-react-native": "^1.5.6",
    "chai": "^3.5.0",
    "chai-immutable": "^1.5.4",
    "deep-freeze": "0.0.1",
    "eslint": "^2.7.0",
    "eslint-config-standard": "^5.1.0",
    "eslint-config-standard-jsx": "^1.1.1",
    "eslint-plugin-import": "^1.4.0",
    "eslint-plugin-promise": "^1.1.0",
    "eslint-plugin-react": "^4.3.0",
    "eslint-plugin-standard": "^1.3.2",
    "fetch-mock": "^4.3.1",
    "mocha": "^2.4.5",
    "proxyquire": "^1.7.4"
  }
}

(React-Native) .eslintrc

{
  "extends": ["standard", "standard-jsx"],
  "globals": {
    "fetch": true,
    "__DEV__": true
  },
  "parser": "babel-eslint",
  "plugins": ["import"],
  "rules": {
    "no-unused-vars": 1,
    "arrow-parens": 0,
    "import/default": 2,
    "import/named": 2,
    "import/namespace": 2,
    "import/no-unresolved": [2, { ignore: ['\.png$'] }],
    "import/export": 2,
    "import/no-duplicates": 2,
    "import/imports-first": 2,
    "react/jsx-boolean-value": 0
  },
  "settings": {
    "import/ignore": [
      "node_modules",
      ".(png|jpg)$",
      ".(scss|less|css)$",
      ".[^js(x)?]+$"
    ]
  }
}

(React-Native) .babelrc

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

node-and-react-snippets's People

Contributors

mmazzarolo avatar

Stargazers

avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.