Showing posts with label client side mocking. Show all posts
Showing posts with label client side mocking. Show all posts
Leonardo

Leonardo

July 18, 2017
Your mocking ninja - an add-on tool for centralizing your client side mocking - http://outbrain.github.io/Leonardo/

Example

Full Application Example

Video (currently only in hebrew)

Getting Started

1. Install

npm

 $ npm install leonardojs --save  

bower

 $ bower install leonardo  

2. Add Leonardo script

Require in your code

  // in dev environment  
   import "leonardojs";  

Directly in html

 <!DOCTYPE HTML>  
  <html>  
  <body>  
   //.....  
   <script src="[bower_components|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

5. Turn your mocking on and off as you wish

6. Change your responses as you wish

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.

Note: Special thanks to Outbrain

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.