Git Product home page Git Product logo

ember-mirage-gen's Introduction

ember-mirage-gen

The addon will give the complete Mirage section after receiving the API call.

Demo

Demo is available here
mirage-gen-common

Installation

ember install ember-mirage-gen

Compatibility

  • Ember.js v2.18 or above
  • Ember CLI v2.13 or above

Documentation

Consider we have the following sample response for the particular request

  request = 'https://sample/studentdata';
  response = {
            student: {
                'personal-data': {
                  name: 'myname',
                  age: 12
                },
                'educational-data': {
                   marks: 98,
                   section: 'B'
                }
             } 
            }

The output for this response as mirage-gen-option

As shown in the above image, we have the section of the object tree. Here, we can select the type of the node. The types are

  1. Fixture
  2. Factory
  3. Normal

After selecting the option, we should click the Generate Info button.

Note: if the node is normal, then it will be included in the config file section

mirage-gen-api

Info strucure

Here, we have three sections

  1. config file
  2. DataBase
  3. Test file

1) config file:

This file has the API endpoints.

   this.get('your request', function(schema, request) {
      return your response;
   })

2) DataBase

This section contains a list of fixtures and factories which are chosen in the previous section. Here, we can also compare our result with the available factory/fixture and generate the new results. For more info try it in the demo page.

3) Test file

It has the creation list of factories as well as fixtures like in the Ember test file.

Comparison

Sometimes we are not able to parse the object for comparison.

Example:

 import { Factory, faker } from 'ember-cli-mirage';

 let myFactory = Factory.extend({
   id() {
     return faker.random.number();
   },
   myNumber() {
     return faker.random.number();
   }
 });

  export default myFactory;

For good parsing kindly add the code as below

import { Factory, faker } from 'ember-cli-mirage';

let myFactory = Factory.extend(
  // $MirageSection-Start$
  {
    id() {
      return faker.random.number();
    },
    myNumber() {
      return faker.random.number();
    }
  }
  // $MirageSection-End$
);

export default myFactory;

Usage

  1. Add the following code in the application.hbs
  <MirageGen @top="value" @left="value" />
  1. In your config/environment.js, add an ember-mirage-gen object as below.
// config/environment.js
let ENV = {
  'ember-mirage-gen': {
    isEnabled: environment === 'development', // Mandatory
    isOnlyForCurrentDomain: true, // optional
    excludedNodes: [] // optional
  }
};
  • isEnabled - it works only when this node is true

  • isOnlyForCurrentDomain - Allow only the same domain API's.

  • excludedNodes - sometimes we got the same node for all responses and we don't need the mirage information for those nodes. So, we can exclude those nodes by adding those nodes in this array. example: page-info conatins page information

  1. Visit the app and click the mirage-gen icon, you will see the list of API's

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

ember-mirage-gen's People

Contributors

alwarg avatar ember-tomster avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

ember-mirage-gen's Issues

GitHub Pages demo?

Hi!

It would be nice to see the addon in action. You could build it in dev mode and deploy to GitHub Pages!

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.