Your mocking ninja - an add-on tool for centralizing your client side mocking
TypeScript CSS JavaScript HTML
Clone or download
Latest commit 6501e9c Jun 3, 2018

README.md

Leonardo

Build Status npm 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 --save

1. Add Leonardo script

Require in your code

    // in dev environment
    import "leonardojs";

Directly in html

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

2. Run your app

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

3. Start mocking your http calls via the recorder tab

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

4. Turn your mocking on and off as you wish

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

5. 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)