# Tests

Code without tests does not exist. Or should not.

## Best practices

**Always put the tests beside the production code**

```javascript
+-- module/
    +-- client/
        +-- component/
            +-- tests/
                +-- Todos.test.js
            +-- index.js
            +-- Todos.js
```

## Unit tests

Unit tests can be run through Gulp:

```
$> gulp tests:unit
```

If you would like to run the tests on every file change:

```
$> gulp poll-tests:unit
```

### Server side

On the server side we are using [Mocha](https://mochajs.org/) as a test runner and [Chai](http://chaijs.com/) as the assertion library.

The ```expect()``` is available as global variable in every tests. [More info on how to use expect()](http://chaijs.com/api/bdd/)

#### Create a new test

```javascript

beforeEach(() => {
    // set up tests
});

afterEach(() => {
    // tear down tests
});

describe('Component name', () => {
    it('should be able to display', () => {
        // test behaviour here
    });

    // Async test case -> pass the `done` function
    it('should be able to display', (done) => {
        // some async behaviour
        setTimeout(() => {
            done();
        }, 1000);
    });
});
```

### Client side

TBD

## E2E tests

We are using [Webdriver IO](http://webdriver.io/) for running e2e tests.
For describing the test cases we use Cucumber JS. It is a wrapper around the Selenium 2.0 API. The
tests are run agains PhantomJS at the moment.

Run the e2e tests:

```
$> gulp tests:e2e
```

Run the e2e tests every time a file has changed:

```
$> gulp poll-tests:e2e
```

### Structure

```javascript
+-- e2e-tests/
    +-- step_definitions/
        +-- support
            +-- page-objects/ // Put your page objects here
            +-- init.js // Setting up the tests, make `expect`, `assert` and `should` a global variable
        +-- todos-steps.js // Step definitions
    +-- Todos.feature // Feature file in CucumberJS format
```

### Example feature file
To learn more about the syntax please check out the [original documentation of Cucumber JS](https://github.com/cucumber/cucumber-js).


```javascript
Feature: About
    As a user
    In order to check if the starter kit is working
    I would like to see the sample About page

  Background:
   Given I visit the url "/about"

  Scenario: Checking the Title
    Then I should see that the title is "React Starter"

  Scenario: Checking the content
    Then I should see "Lorem ipsum dolor sit amet" in the content

```

### Example step definitions file
To learn more about the syntax please check out the [original documentation of Cucumber JS](https://github.com/cucumber/cucumber-js).

```javascript
module.exports = steps;

function steps() {
    this.Then('I should see "$text" in the content', (text) => {
        expect(browser.getText('.about > p')).to.contain(text);
    });
}
```