_bc-Router-test.js

import expect from 'expect'
import React, { Component } from 'react'
import { render, unmountComponentAtNode } from 'react-dom'
import createHistory from 'history/lib/createMemoryHistory'
import Route from '../Route'
import Router from '../Router'
import shouldWarn from './shouldWarn'

describe('v1 Router', function () {
  class Parent extends Component {
    render() {
      return <div>parent {this.props.children}</div>
    }
  }

  class Child extends Component {
    render() {
      return <div>child</div>
    }
  }

  let node
  beforeEach(function () {
    node = document.createElement('div')
  })

  afterEach(function () {
    unmountComponentAtNode(node)
  })

  beforeEach(function () {
    shouldWarn('deprecated')
  })

  it('renders routes', function (done) {
    render((
      <Router history={createHistory('/')}>
        <Route path="/" component={Parent} />
      </Router>
    ), node, function () {
      expect(node.textContent).toEqual('parent ')
      done()
    })
  })

  it('renders child routes when the parent does not have a path', function (done) {
    render((
      <Router history={createHistory('/')}>
        <Route component={Parent}>
          <Route component={Parent}>
            <Route path="/" component={Child} />
          </Route>
        </Route>
      </Router>
    ), node, function () {
      expect(node.textContent).toEqual('parent parent child')
      done()
    })
  })

  it('renders nested children correctly', function (done) {
    render((
      <Router history={createHistory('/hello')}>
        <Route component={Parent}>
          <Route path="hello" component={Child} />
        </Route>
      </Router>
    ), node, function () {
      expect(node.textContent).toMatch(/parent/)
      expect(node.textContent).toMatch(/child/)
      done()
    })
  })

  it("renders the child's component when it has no component", function (done) {
    render((
      <Router history={createHistory('/hello')}>
        <Route>
          <Route path="hello" component={Child} />
        </Route>
      </Router>
    ), node, function () {
      expect(node.textContent).toMatch(/child/)
      done()
    })
  })

  it('renders with a custom "createElement" prop', function (done) {
    class Wrapper extends Component {
      render() {
        return <this.props.component fromWrapper="wrapped" />
      }
    }

    class Child extends Component {
      render() {
        return <div>{this.props.fromWrapper}</div>
      }
    }

    render((
      <Router history={createHistory('/')} createElement={x => <Wrapper component={x} />}>
        <Route path="/" component={Child}/>
      </Router>
    ), node, function () {
      expect(node.textContent).toEqual('wrapped')
      done()
    })
  })

  describe('with named components', function () {
    class Parent extends Component {
      render() {
        return (
          <div>{this.props.sidebar}-{this.props.content}</div>
        )
      }
    }

    class Sidebar extends Component {
      render() {
        return <div>sidebar</div>
      }
    }

    class Content extends Component {
      render() {
        return <div>content</div>
      }
    }

    let routes

    beforeEach(function () {
      routes = (
        <Route component={Parent}>
          <Route path="/" components={{ sidebar: Sidebar, content: Content }} />
        </Route>
      )
    })

    it('receives those components as props', function (done) {
      render((
        <Router history={createHistory('/')} routes={routes} />
      ), node, function () {
        expect(node.textContent).toEqual('sidebar-content')
        done()
      })
    })

    it('sets the key on those components', function (done) {
      const components = {}
      function createElementSpy(Component, props) {
        if (props.key) {
          components[props.key] = Component
        }

        return null
      }

      render((
        <Router
          history={createHistory('/')} routes={routes}
          createElement={createElementSpy}
        />
      ), node, function () {
        expect(components.sidebar).toBe(Sidebar)
        expect(components.content).toBe(Content)
        done()
      })
    })
  })

  describe('at a route with special characters', function () {
    it('does not double escape', function (done) {
      // https://github.com/reactjs/react-router/issues/1574
      class MyComponent extends Component {
        render() {
          return <div>{this.props.params.someToken}</div>
        }
      }

      render((
        <Router history={createHistory('/point/aaa%2Bbbb')}>
          <Route path="point/:someToken" component={MyComponent} />
        </Router>
      ), node, function () {
        expect(node.textContent).toEqual('aaa+bbb')
        done()
      })
    })

    it('does not double escape when nested', function (done) {
      // https://github.com/reactjs/react-router/issues/1574
      class MyWrapperComponent extends Component {
        render() {
          return this.props.children
        }
      }

      class MyComponent extends Component {
        render() {
          return <div>{this.props.params.someToken}</div>
        }
      }

      render((
        <Router history={createHistory('/point/aaa%2Bbbb')}>
          <Route component={MyWrapperComponent}>
            <Route path="point/:someToken" component={MyComponent} />
          </Route>
        </Router>
      ), node, function () {
        expect(node.textContent).toEqual('aaa+bbb')
        done()
      })
    })

    it('is happy to have colons in parameter values', function (done) {
      // https://github.com/reactjs/react-router/issues/1759
      class MyComponent extends Component {
        render() {
          return <div>{this.props.params.foo}</div>
        }
      }

      render((
        <Router history={createHistory('/ns/aaa:bbb/bar')}>
          <Route path="ns/:foo/bar" component={MyComponent} />
        </Router>
      ), node, function () {
        expect(node.textContent).toEqual('aaa:bbb')
        done()
      })
    })

    it('handles % in parameters', function (done) {
      // https://github.com/reactjs/react-router/issues/1766
      class MyComponent extends Component {
        render() {
          return <div>{this.props.params.name}</div>
        }
      }

      render((
        <Router history={createHistory('/company/CADENCE%20DESIGN%20SYSTEM%20INC%20NOTE%202.625%25%2060')}>
          <Route path="/company/:name" component={MyComponent} />
        </Router>
      ), node, function () {
        expect(node.textContent).toEqual('CADENCE DESIGN SYSTEM INC NOTE 2.625% 60')
        done()
      })
    })

    it('handles forward slashes', function (done) {
      // https://github.com/reactjs/react-router/issues/1865
      class Parent extends Component {
        render() {
          return <div>{this.props.children}</div>
        }
      }

      class Child extends Component {
        render() {
          return <h1>{this.props.params.name}</h1>
        }
      }

      render((
        <Router history={createHistory('/apple%2Fbanana')}>
          <Route component={Parent}>
            <Route path="/:name" component={Child} />
          </Route>
        </Router>
      ), node, function () {
        expect(node.textContent).toEqual('apple/banana')
        done()
      })
    })

  })

  describe('render prop', function () {
    it('renders with the render prop', function (done) {
      render((
        <Router
          history={createHistory('/')}
          render={() => <div>test</div>}
          routes={{ path: '/', component: Parent }}
        />
      ), node, function () {
        expect(node.textContent).toBe('test')
        done()
      })
    })

    it('passes router props to render prop', function (done) {
      const MyComponent = () => <div />
      const route = { path: '/', component: MyComponent }

      const assertProps = (props) => {
        expect(props.routes).toEqual([ route ])
        expect(props.components).toEqual([ MyComponent ])
        expect(props.foo).toBe('bar')
        expect(props.render).toNotExist()
        done()
        return <div/>
      }

      render((
        <Router
          history={createHistory('/')}
          routes={route}
          render={assertProps}
          foo="bar"
        />
      ), node)
    })

  })

  describe('async components', function () {
    let componentSpy, renderSpy

    beforeEach(function () {
      componentSpy = expect.createSpy()

      renderSpy = ({ components }) => {
        componentSpy(components)
        return <div />
      }
    })

    it('should support getComponent', function (done) {
      const Component = () => <div />
      const getComponent = (_, callback) => {
        setTimeout(() => callback(null, Component))
      }

      render((
        <Router history={createHistory('/')} render={renderSpy}>
          <Route path="/" getComponent={getComponent} />
        </Router>
      ), node, function () {
        setTimeout(function () {
          expect(componentSpy).toHaveBeenCalledWith([ Component ])
          done()
        })
      })
    })

    it('should support getComponents', function (done) {
      const foo = () => <div />
      const bar = () => <div />

      const getComponents = (_, callback) => {
        setTimeout(() => callback(null, { foo, bar }))
      }

      render((
        <Router history={createHistory('/')} render={renderSpy}>
          <Route path="/" getComponents={getComponents} />
        </Router>
      ), node, function () {
        setTimeout(function () {
          expect(componentSpy).toHaveBeenCalledWith([ { foo, bar } ])
          done()
        })
      })
    })
  })

  describe('error handling', function () {
    let error, getComponent

    beforeEach(function () {
      error = new Error('error fixture')
      getComponent = (_, callback) => callback(error)
    })

    it('should work with onError', function (done) {
      const errorSpy = expect.createSpy()

      render((
        <Router history={createHistory('/')} onError={errorSpy}>
          <Route path="/" getComponent={getComponent} />
        </Router>
      ), node, function () {
        expect(errorSpy).toHaveBeenCalledWith(error)
        done()
      })
    })

    it('should throw without onError', function () {
      expect(function () {
        render((
          <Router history={createHistory('/')}>
            <Route path="/" getComponent={getComponent} />
          </Router>
        ), node)
      }).toThrow('error fixture')
    })
  })
})