generator-phoenix-react

A generator to create a phoenix application using React as view

Deperated

This repository is not being maintained

Features

• End to end testing with hound
• Unit Testing with Karma, mocha and chai
• Ecmascript 2015

Installation

First, install Yeoman and generator-phoenix-react using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-phoenix-react

Then generate your new project:

yo phoenix-react <my-project-name>

Testing

Tests can be divided into three groups.

1. React unit tests
2. Phoenix unit tests
3. Phoenix E2E tests

Running tests

Make sure to have a web driver running.

# Run the entire test suite
bin/test

# OR start the web driver manually and run the entire suite
# Make sure to start the web driver
chromedriver # default configured for hound
npm run-script build && mix test --include feature

# Run the tests for react components only
npm test
# or
npm run-script test:watch # for TDD

# Run the elixir unit tests only (Fastest)
mix test --exclude feature --exclude integration

Use a different web driver for E2E testing

# config/test.exs
# Replace this line with a different configuration that can be found at
# https://github.com/HashNuke/hound/blob/master/notes/configuring-hound.md
config :hound, driver: "phantomjs"

NOTE: Make sure to change bin/test to start this web driver instead.

React component test example

// test/static/js/components/form.spec.js
import React from 'react';
import Chai, {expect} from 'chai';
import sinon from 'sinon';
import {mount} from 'enzyme';
import sinonChai from 'sinon-chai';
/**
* <my-project> is replaced by your project name
* which can be found under "resolve.alias" in webpack.config.js
**/
import Form from '<my_project>/components/form';
Chai.use(sinonChai);

describe('Form', () => {
  it('submits a message', () => {
    const handleSubmit = sinon.spy();
    const wrapper = mount(
      <Form handleSubmit={handleSubmit} />
    );
    const message = 'Hello, my name is Bob!';
    const {node} = wrapper.find('input');

    node.value = message;
    wrapper.find('form').simulate('submit');

    expect(handleSubmit).to.have.been.calledWith(message);
    expect(node.value).to.equal('');
  });
});

Getting To Know Yeoman

Yeoman has a heart of gold. He's a person with feelings and opinions, but he's very easy to work with. If you think he's too opinionated, he can be easily convinced. Feel free to learn more about him.

License

MIT © Thomas Farla