React 应用实践

Coding · WebIDE

刘辉 (@hulufei)

Components

<WebIDE />

var App = React.createClass({
  render: function() {
    return (
      <div>
        <Menu />
        <Tree />
        ...
      </div>
    )
  }
})

JSX

var Menu = React.createClass(...)
var Tree = React.createClass(...)
// ...

Flux

Store

Action

View

emitChange

<SettingModal />

<Editor />

Editor Settings

SettingStore

<SettingModal />

<Editor />

SettingActions

emitChange

Addons

Bridge

Async Requests

Reads 
Writes

Reads

Store

Components

Server

API Layer

Store.getData()

request.get(url)

.catch(errorAction)

Writes

Action

Components

Server

API Layer

Action.update()

request.post(url).catch(errorAction)

Writing Testable JavaScript

is hard

, once

Writing Testable JavaScript

Loose Coupling

Testing Flux Application

Testing Stores
Testing Components

Tools

Karma as test runner
Mocha as test framework
Sinon as test mocks
Chai as assertion library
Rewire as dependency injection

👉https://github.com/hulufei/karma-react-boilerplate

Testing Stores

Data persistency
Dispatch actions

beforeEach ->
  sinon.spy AppDispatcher, 'register'
  @callback = AppDispatcher.register.args[0][0]

rewire = require 'rewire'

# Test cases
fakeAction = { actionType: 'ACTION_TYPE' }
@callback fakeAction

expect(@store.getData()).to.be.equal 'something'

# Reset data
@store = rewire '../stores/SomeStore'
@store.__set__ '_data', 'fake store data'

–http://martinfowler.com/articles/asyncJS.html

“Aggressively limit the number of truly asynchronous tests you write and maintain.” 

Testing Async Requests

Testing Async Requests

Stub API Layer
Use Promise

Stub API

API = require './utils/api'
stub = sinon.stub API, 'fetch'

stub.returns(Promise.resolve fakedResponse)
expect(stub).to.be.calledOnce
expect(data).to.eql fakedResponse

stub.returns(Promise.reject 'fake error')
expect(data).to.be.rejected

data = Store.getData()

Testing Components

DOM verify
DOM events simulate

React = require 'react/addons'
ContextMenu = require '../index'

TestUtils = React.addons.TestUtils

describe 'ContextMenu', ->
  beforeEach ->
    ContextMenuElement = React.createElement ContextMenu
    @contextMenuComponent = TestUtils.renderIntoDocument ContextMenuElement
    @el = React.findDOMNode @contextMenuComponent

  it 'should render empty context menu', ->
    expect(@el.className).to.contain 'context-menu'
    expect(@el.className).to.contain 'hide'

  it 'should invoke callback on menu close', ->
    closeSpy = sinon.spy()
    ContextMenuElement = React.createElement ContextMenu,
      onMenuClose: closeSpy
    component = TestUtils.renderIntoDocument ContextMenuElement
    el = React.findDOMNode component
    TestUtils.Simulate.blur el
    expect(closeSpy).to.called.once

  beforeEach ->
    ContextMenuElement = React.createElement ContextMenu
    @contextMenuComponent = TestUtils.renderIntoDocument ContextMenuElement

   TestUtils.Simulate.blur el
   expect(closeSpy).to.called.once

expect(@el.className).to.contain 'context-menu'
expect(@el.className).to.contain 'hide'

Awesome React

Immutable.js
Server side rendering
React styling
Relay and GraphQL
…

Q&A

关注我们