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.

You can also automate mocking using a simple javascript API

Add States

 //.....
    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: 'error 401', status: 401}
          ]
        },
        {
          name: 'Update Data',
          url: '/api/user/43435',
          verb: 'PUT',
          options: [
            {name: 'success', status: 200},
            {name: 'error 500', status: 500},
            {name: 'error 400', status: 400}
          ]
        }
  ]);

Activate State Option

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

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

$ gulp build

Run (and watch)

$ gulp serve

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