# Code Tester

React component to run Mocha tests on-the-fly on live code edits.

## Installation

Code-Tester can be used as a standalone app or as a component in an existing React app.
To use standalone, clone the repo and run:

```
$ git clone https://github.com/OperationSpark/code-tester.git
$ cd code-tester
$ yarn install
$ yarn start
```
A server will spin up and serve the app at <http://localhost:3000>

### Use as React Component

```
$ npm install code-tester
```

### Usage
```javascript
  <CodeTester
    autoRun
    initialCode={boilerplate}
    instructions={instructions}
    iFrameUrl="/test-runner.html"
    onAnyCode={handleAnyCode}
    onLintedCode={handleLintedCode}
    onTestResults={handleTestResults}
    showLints
    testSpec={testSpec}
  />

```



## Props
| Name                     | Type     | Default | Description                                                             |
|--------------------------|----------|---------|-------------------------------------------------------------------------|
| autoRun                  | Boolean  | false   | If enabled, tests will run after any Editor input.                      |
| initialCode              | String   |         | Initial text in the Editor                                              |
| instructions             | String   |         | Instructions for the user to pass the tests. (GitHub-flavored Markdown) |
| iFrameUrl                | String   |         | Path to HTML file for running Mocha tests                               |
| onAnyCode                | Function |         | Handler called on any code input to the Editor                          |
| onLintedCode             | Function |         | Handler called on Editor input only if Editor code passes lint tests    |
| onTestResults            | Function |         |                                                                         |
| showLints                | Boolean  |         |                                                                         |
| testSpec                 | String   |         |                                                                         |
| handleInstructionsChange | Function |         |                                                                         |
| handleTestSpecChange     | Function |         |                                                                         |
| handleBoilerplateChange  | Function |         |                                                                         |
| editMode                 | Boolean  | false   |                                                                         |

Add additional notes about how to deploy this on a live system

## Exmaples
Inside an app:
```javascript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import CodeTester from 'code-tester';

class App extends Component {
  renderTester() {
    const handleTestResults = (passCount, failCount, runTime) => {
      // Results from Mocha tests
    };

    const handleLintedCode = (lintedCode) => {
      // Do something only if Editor code passes lint tests
    };

    const handleAnyCode = (code) => {
      // Do something on any input to Editor
    };

    return (
      <CodeTester
        autoRun
        initialCode={boilerplate}
        instructions={instructions}
        iFrameUrl="/test-runner.html"
        onAnyCode={handleAnyCode}
        onLintedCode={handleLintedCode}
        onTestResults={handleTestResults}
        showLints
        testSpec={testSpec}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));
```

## Built With

* [react-codemirror](https://github.com/JedWatson/react-codemirror)

## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/OperationSpark/code-tester/tags). 

## Authors

* **[Harvey Sanders](https://github.com/harveysanders)** - [Operation Spark](https://operationspark.org/dev-shop)

## License
MIT
