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:
;;; { const handleTestResults = { // Results from Mocha tests }; const handleLintedCode = { // Do something only if Editor code passes lint tests }; const handleAnyCode = { // 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;
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
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Authors
License
MIT