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