This page is incomplete.

Working with Breko-hub

Step 1 - Write some functional tests!

The best approach for working with Breko-hub is to start by writing functional tests. Functional tests in Breko-hub run in NodeJS and try to prove functionality of the app.

We group functional tests in Breko-hub into two categories, client and server. Both of these categories have strict boundaries. Client functional tests cover route configuration, transactions and DOM updates.

For example, if we wish to test whether our Landing page displays the result of an API call to a GET /api/posts endpoint. We make the following file with tests.

// /test/functoinal/landing-route.test.js
import { Main } from 'app/main'
import { mount } from 'enzyme'
import { history } from 'app/services/history'

describe('Landing Page', function() {
  const postsResponse = [
    { id: 0, postTitle: 'foo' },
    { id: 1, postTitle: 'bar' },
    { id: 2, postTitle: 'herp' },
  ]
  before(() => {
    history.push('/landing')
    this.server = sinon.fakeServer.create()
    this.server.respondWith(
      '/api/posts', JSON.stringify({ posts: postsResponse })
    )
    this.server.respondImmediately = true
  })

  after(() => {
    this.server.restore()
  })

  beforeEach((done) => {
    this.wrapper = mount(Main)
    setImmediate(done) // defer until after promises resolve
  })

  afterEach(() => {
    this.wrapper.unmount()
  })

  it('sets the page title', () => {
    expect(document.title).to.eql('Landing | My App ')
  })

  it('renders the result from GET /api/posts in a list', () => {
    const postList = this.wrapper.find('.Landing__post-list')
    postsResponse.forEach((post, idx) => {
      const postWrapper = postList.children().at(idx)
      // using chai-enzyme assertion library
      expect(postWrapper).to.contain.text(post.postTitle)
      expect(postWrapper).to.have.className('Landing__post-item')
      expect(postWrapper).to.have.tagName('li')
    })
  })
})

This is a contrived example of a test file. A real-world example would have more coverage.

npm run test:func

Step 2 - Make them pass!

With a functional test in place, we're ready to write the implementation. You have 2 good options here, the approach you take next depends on the scale of your app or your personal style.

Choice 1: Start the app, open your browser.

npm start

Now, using hot-reloading and live-updates, you write the code to build the functionality. This is a fine approach to take for a simple app. As you have a functional test in place, you focus on making it pass for the essence of your feature. You'll write more detailed functional tests to refine the features.

Choice 2: Create unit tests forcing you to write the code you want to write. Iterating these fast running unit tests until your functional test passes.

npm run test:server

After running the above command, open a browser window to localhost:9001 (if you have the default .env setup). This'll give you a browser based unit test runner with hot reloading. You write unit tests for your application with a fast feedback loop and debug inside a browser!

Choice 3: Same as choice 2, but run the tests in node.

npm run test:unit

Ensuring the tests work

No matter which choice you take, make sure your functional test passes before moving onto the next feature.

npm run test:func

Step 3 - Release your app into the wild

Heroku is a good choice, or if you have some paid hosting, do it!

Make sure you set the proper environmental variables in your hosting!

Step 4 - Relax

Congratulations, you've done it.