Leonardo.JS

Your mocking ninja - an add-on tool for centralizing your client side mocking

Download .zip Download .tar.gz View on GitHub

Leonardo

Build Status npm version Bower version Package Quality

Mocking and testing made simple and consistent. Developed by Outbrain.

Example

Full Application Example

Video (currently only in hebrew)

AngularJS Israel

Getting Started

1. Install

npm

$ npm install leonardojs

bower

$ bower install leonardo

2. Add Leonardo script

<!DOCTYPE HTML>
<html>
<body>
  //.....
  <script src="[bower_componenets|node_modules|other]/leonardo/dist/leonardo.js"></script>
</body>
</html>

3. Run your app

You should now see Leonardo’s icon on the bottom right corner. Click It.

4. Start mocking your http calls via the recorder tab

Mocking and testing made simple and consistent. Developed by Outbrain.

5. Turn your mocking on and off as you wish

Mocking and testing made simple and consistent. Developed by Outbrain.

6. Change your responses as you wish

Mocking and testing made simple and consistent. Developed by Outbrain.

Javascript API

Automate your mocks using Leonardo’s API

State:

  • name: (string) State name, must be unique
  • url: (string) request url, treated as regex
  • verb: (string) request http verb
  • options (StateOption array)

StateOption:

  • name: (string) option name
  • status: (number) http status code
  • data: (primitive Object Function) the data to be returned in response body.
    • Use function to dynamically control the response (first parameter is the request object).

Add States

addState(State array)

 //.....
    Leonardo.addStates([
        {
          name: 'Get Data',
          url: '/api/user/43435',
          verb: 'GET',
          options: [
            {name: 'success', status: 200, data: { name: "Master Splinter" }},
            {name: 'error 500', status: 500}
          ]
        },{
          name: 'Get Data',
          url: '/api/user/43435',
          verb: 'GET',
          options: [
            {name: 'success', status: 200, data: { name: "Master Splinter" }},
            {name: 'error 500', status: 500}
          ]
        },
        {
          name: 'Get Characters',
          url: '/api/character',
          verb: 'GET',
          options: [
            {
              name: 'success', 
              status: 200,
              data: function(request) {
                if (request.url.indexOf('term=Donatello') > 0) {
                  return { name: "Donatello" };
                } else {
                  return { name: "Raphael" };                  
                }
              }
            },
          ]
        }
  ]);

Activate State Option

activateStateOption(stateName, optionName)

Activates state option, mocked response will be returned when calling the state url

//.....
    Leonardo.activateStateOption('Update Data', 'success');
    $http.put('/api/user/43435', { name: "Master Splinter" }).success(function(data, status) {
        console.log(status); // 200 
    });
    
    Leonardo.activateStateOption('Update Data', 'error 500');
    $http.put('/api/user/43435', { name: "Master Splinter" }).error(function(data, status) {
        console.log(status); // 500 
    });
//.....

Deactivate State

deactivateState(stateName)

Deactivates a specific state, when calling the state url request will pass through to the server

//.....
    Leonardo.deactivateState('Update Data');
//.....

Hide/Show Leonardo icon

You can hide Leonardo activator icon by clicking ctrl + shift + l.

Running and contributing

Go into the project folder

$ cd Leonardo

Install

$ npm install

Build

$ npm run build

Run (and watch)

$ npm start 

This will run the demo app (and auto-refresh the browser)