Coder Social home page Coder Social logo

outbrain / leonardo Goto Github PK

View Code? Open in Web Editor NEW
92.0 23.0 23.0 8.02 MB

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

License: MIT License

JavaScript 5.28% HTML 0.13% TypeScript 58.91% Less 35.68%
javascript mocking leonardo typescript e2e-tests ui-tests front-end-development

leonardo's Introduction

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

Leonardo

Client side mocking for the server side

travis-ci workflow status NPM version Package Quality

Install

npm

$ npm install leonardojs --save-dev

Example

Full Application Example

Video Example - AngularJS Israel Conference (Hebrew)

Getting Started

1. Add Leonardo script

Require in your code

    // in dev environment
    import 'leonardojs';

Or 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.

leonardo's People

Contributors

abyx avatar ahliehel avatar alexilyaev avatar danrevah avatar david2tm avatar dbuchbut avatar dcohenb avatar dependabot[bot] avatar dwido avatar gillyb avatar justtal avatar michalporag avatar mickeyvip avatar mrfrankel avatar obar-zik avatar obdseltzer avatar obgbarak avatar orenmagen100 avatar qsarahd avatar royts avatar sagivf avatar shabshay avatar tsachis avatar vlio20 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

leonardo's Issues

Validations

For example, when adding a new state we should be stopped if name wasn't set. Same for options.
In laters stage maybe we should validate the option (response) body.

ALSO
add console warning when state is defined without existing (also selected option) #18

Responsive issues

On my Mac, if I open the DevTools (docked on the right), the state options dropdowns are off the screen even on 1196px width.

To see it properly I need to scroll to the right.
screen shot 2015-11-24 at 19 20 17

RESTify Leonardo VIA URL

encode Leonardo state (enable/disable and the selected scenario) in the URL so you can share a link with specific use case configuration.

What do you say ?

Update Readme

  1. remove developer instructions to bottom
  2. basic installation on top
  3. add screenshot
  4. add video

Add import panel

If I want to share my setup with a colleague, I'd like him to be able to import a settings file, or at least be able to paste the file contents into a textarea and save (which would reload the module or something).

Adding a file to the app is not ideal for our use case.

Add Edit State option

Hey guys, really like the tool :-)

I would like an option to edit a state that I've previously created.
Right now it's only possible if I click on a saved state under RECORDER and update the Response name to be exactly the same as the saved state name.

Would have to allow editing a specific option of a state as well.

Feature flags

add to activate tab, an option to define toggleable feature flags

Add remove "option"

Perhaps make the options drop down a "select2" like drop down and add an x for removing the option.

UI create states and scenarios

  1. Create states via UI (perhaps with a default value and whether on or off).
  2. Generate a file (or a file view) to copy paste into your app.

Show request data/params

when there are query params or request body you can't see them and it's hard to defrienciate between two request with the same url. especially when the request already goes trough Leonardo in which case you can't even see it in the dev tools.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.