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

  <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 | | | | onPaste | Function | | Handler called on paste to the Editor | | disablePasting | Boolean | false | If true the user cannot paste into the Editor | | showLints | Boolean | | | | testSpec | String | | | | handleInstructionsChange | Function | | | | handleTestSpecChange | Function | | | | handleBoilerplateChange | Function | | | | editMode | Boolean | false | | | preventGrep | Boolean | false | Disables mocha grepping in html reporter |

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

Examples

Inside an app:

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'));

Testing code locally

You'll need to run a repo containing code you want to test through a static server with CORS support. I recommend http-server.

 $ npm install http-server -g
 $ cd [path/to/local/repo]
 $ http-server --cors
  Starting up http-server, serving ./
 Available on:
   http://127.0.0.1:8080

Once that is running update the componentDidMount cycle in src/App.jsx to take an appropriate path to a code quiz directory.

Then run npm run dev to start the code tester.

Testing code locally

You'll need to run a repo containing code you want to test through a static server with CORS support. I recommend http-server.

  $ npm install http-server -g
  $ cd [path/to/local/repo]
  $ http-server --cors

  Starting up http-server, serving ./
  Available on:
    http://127.0.0.1:8080

Once that is running update the componentDidMount cycle in src/App.jsx to take an appropriate path to a code quiz directory.

Then run npm run dev to start the code tester.

Built With

• react-codemirror2

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Harvey Sanders - Operation Spark

License

MIT