Configuración de API simulada con Mirage JS y Vue.js

 

 

 

  • Advertise on Smashing Magazine
  • Smart Interface Design Checklists

  • Índice
    1. ¿Qué es la burla de API?
    2. ¿Por qué es importante burlarse de API?
    3. ¿Qué es Mirage JS?
    4. ¿Qué hace que Mirage JS sea una mejor opción?
    5. Introducción a Mirage JS y Vue.js
    6. Creación de un proyecto Vue ecológico (instalación limpia)
    7. #Instalación de Mirage JS
    8. Burlémonos de algo
      1. Defina su servidor
      2. Código explicado
      3. el cuerpo demakeServer
      4. src/main.js
    9. ¡Instalación completa!
    10. ¿Dónde está la pieza Mirage JS?
    11. Utilidades de prueba de Mirage JS y Vue
    12. ¡Probemos!
      1. Nuestras pruebas
    13. Prueba de diferentes estados de servidor con Mirage JS
    14. Conclusión
      1. Referencias

    Este artículo presenta Mirage JS, una biblioteca simulada de API que le permite crear, probar y compartir una aplicación JavaScript completa y funcional sin tener que depender de ninguna API o servicio backend. También aprenderá cómo configurar Mirage JS con el marco de interfaz de usuario progresivo, Vue.js.

     

    En la era de SPA y JAMstack, siempre ha habido una separación de preocupaciones entre las API y el desarrollo front-end. Casi todos los proyectos de JavaScript que se pueden encontrar en la naturaleza interactúan con un servicio web o API y lo utilizan para autenticaciones u obtener datos relacionados con el usuario.

    Por lo tanto, siempre que esté trabajando en un proyecto y el equipo de back-end aún no haya implementado la API necesaria o necesite probar rápidamente una función, tiene algunas de las siguientes opciones:

    • Podría utilizar una versión que se ejecute localmente de su backend real, lo cual, en la mayoría de los casos, como desarrollador front-end, no tendría.
    • Puede comentar la solicitud real y reemplazarla con datos simulados. (Esto está bien, pero no es tan bueno, ya que necesitaría deshacerlo para pasar a producción y es posible que no pueda lidiar con los estados de la red y la latencia).

    ¿Qué es la burla de API?

    La burla de API es una imitación o simulación de una API real. Se hace principalmente para interceptar solicitudes que se supone que deben realizarse a una API de backend real, pero esta burla existe en su interfaz.

    ¿Por qué es importante burlarse de API?

    La burla de API es muy importante en muchos sentidos:

    1. Es una muy buena experiencia de desarrollo front-end no depender de las API de producción antes de desarrollar funciones.
    2. Podrías compartir toda tu interfaz y funcionaría sin depender de una API de backend real.

    ¿Qué es Mirage JS?

    Mirage JS se creó hace 5 años y se utilizó prácticamente en la comunidad de Ember antes de que Sam Selikoff anunciara oficialmente su lanzamiento el 24 de enero de 2020 en Twitter.

    Mirage JS resuelve el problema de probar las API de backend sin depender de esas API. Permite una experiencia de desarrollo front-end perfecta al burlarse de las API de producción.

    Mirage JS es una biblioteca simulada de API para los marcos Vue.js, React, Angular y Ember

    ¿Qué hace que Mirage JS sea una mejor opción?

    Ha habido otras opciones para burlarse de API (como los interceptores Axios, el servidor JSON de Typicode , etc.), pero lo que creo que es bastante interesante acerca de Mirage es que no interfiere con su proceso de desarrollo (como vería). cuando lo configuremos con Vue en un momento). Es ligero pero potente.

    Viene con una batería incluida de fábrica que le permite replicar escenarios reales de consumo de API de producción, como simular una red lenta con su opción de sincronización .

    Introducción a Mirage JS y Vue.js

    Ahora que sabe qué es Mirage JS y por qué es importante para su flujo de trabajo de desarrollo front-end, veamos cómo configurarlo con el marco web progresivo: Vue.js.

     

    Creación de un proyecto Vue ecológico (instalación limpia)

    Usando Vue CLI , cree un nuevo proyecto Vue.js ingresando al directorio donde desea que se cree y ejecute el proyecto (en su terminal):

    vue create miragejs-demo-vue 

    El comando anterior configuraría un nuevo proyecto de Vue en el que ahora puede cdiniciar sesión yarn serveo ejecutarlo npm run serve.

    #Instalación de Mirage JS

    Ahora instalemos Mirage JS como una dependencia de desarrollo en nuestro proyecto Vue.js ejecutando el siguiente comando:

    yarn add -D miragejs

    O si estás usando NPM, ejecuta esto:

    npm install --save-dev miragejs

    ¡Y eso es! Mirage JS ahora está instalado en nuestro proyecto Vue.js.

    Burlémonos de algo

    Con Mirage JS instalado, veamos cómo lo configuramos para hablar con Vue y simular una API básica de todos (una API que devuelve una lista de todos).

    Defina su servidor

    Para comenzar, necesitamos crear un archivo server.js/src en el directorio de nuestro proyecto Vue.js. Después de eso, agregue lo siguiente:

    import { Server, Model } from 'miragejs'export function makeServer({ environment = "development" } = {}) {let server = new Server({ environment, models: { todo: Model, }, seeds(server) { server.create("todo", { content: "Learn Mirage JS" }) server.create("todo", { content: "Integrate With Vue.js" }) }, routes() { this.namespace = "api" this.get("/todos", schema = { return schema.todos.all() }) }, }) return server}

    Código explicado

    En primer lugar, el archivo server.js es la forma en que configura Mirage JS para crear una nueva instancia de su servidor simulado (falso) que interceptará todas las llamadas API que realice en su aplicación que coincidan con las rutas que defina.

    Ahora, estoy de acuerdo en que lo anterior puede resultar abrumador al principio, pero echemos un vistazo más de cerca a lo que está sucediendo aquí:

    import { Server, Model } from 'miragejs'

    Del fragmento de código anterior, estamos importando Servery Modeldesde miragejs.

    • Server
      Esta es una clase expuesta por Mirage que nos ayuda a crear una instancia de una nueva instancia de un servidor Mirage JS para que “sirve” como nuestro servidor falso.
    • Model
      Otra clase expuesta por Mirage para ayudar en la creación de modelos (un modelo determina la estructura de una entrada de base de datos de Mirage JS) impulsado por el ORM de Mirage.
    export function makeServer({ environment = "development" } = {}) {}

    Lo anterior básicamente exporta una función llamada makeServerdesde src/server.js. También puede observar que estamos pasando un parámetro de entorno y configurando el modo de entorno de Mirage development(nos verá pasando el entorno de prueba más adelante en este artículo).

    el cuerpo demakeServer

    Ahora estamos haciendo un par de cosas en el makeServercuerpo. Vamos a ver:

    let server = new Server({})

    Estamos creando una nueva instancia de la clase Servidor y pasándole una opción de configuración. El contenido de las opciones de configuración ayuda a configurar Mirage:

     

    { environment, models: { todo: Model, }, seeds(server) { server.create("todo", { content: "Learn Mirage JS" }) server.create("todo", { content: "Integrate With Vue.js" }) }, routes() { this.namespace = "api" this.get("/todos", schema = { return schema.todos.all() }) }, }

    En primer lugar, pasamos el environmentparámetro que inicializamos en la definición de la función.

    models: { todo: Model, },

    La siguiente opción, que es la modelsopción, toma un objeto de los diferentes modelos que queremos que Mirage se burle.

    En lo anterior, simplemente queremos un modelo de tareas pendientes del cual estamos creando una instancia desde la clase Modelo.

    seeds(server) {server.create("todo", { content: "Learn Mirage JS" })server.create("todo", { content: "Integrate With Vue.js" })},

    La siguiente opción es el método de semillas que toma un parámetro llamado server. El método de semillas ayuda a crear semillas (las semillas son datos iniciales o una entrada a la base de datos de Mirage) para nuestros modelos. En nuestro caso, para crear las semillas para el modelo de tareas pendientes hacemos: Blog sopper tappers

    server.create("todo", { content: "Learn Mirage JS" })server.create("todo", { content: "Integrate With Vue.js" })

    entonces el servidor tiene un método de creación que espera como primer argumento una cadena que corresponde al nombre del modelo, luego un objeto que contendrá las propiedades o atributos de una semilla en particular.

    routes() { this.namespace = "api" this.get("/todos", schema = { return schema.todos.all() }) },

    Finalmente, tenemos el método de rutas que define las distintas rutas (las rutas son nuestros puntos finales de API simulados) que Mirage JS va a simular. Veamos el cuerpo del método:

    this.namespace = "api"

    esta línea configura el espacio de nombres para todas las rutas, lo que significa que ahora se puede acceder a nuestra ruta de tareas pendientes desde /api/todos.

    this.get("/todos", schema = { return schema.todos.all()})

    Lo anterior crea una ruta de obtención y su controlador utiliza el this.get()método. El get()método espera la ruta, es decir, “/todos” y una función controladora que la toma schemacomo argumento. El objeto de esquema es la forma en que interactúa con el ORM de Mirage, que funciona con la base de datos en memoria de Mirage JS.

    Finalmente:

    return schema.todos.all()

    Estamos devolviendo una lista de todos nuestros todos, utilizando el objeto de esquema hecho posible por el ORM de Mirage.

    src/main.js

    Ya hemos terminado de configurar, src/server.jspero Vue no lo sabe (al menos no todavía). Entonces, importémoslo en nuestro archivo main.js así:

    import { makeServer } from "./server"

    Luego llamamos a la makeServerfunción así:

    if (process.env.NODE_ENV === "development") { makeServer()}

    El ifcondicional anterior es una protección para garantizar que Mirage solo se ejecute en desarrollo.

     

    ¡Instalación completa!

    Ahora hemos configurado Miragejs con Vue. Veámoslo en acción. En nuestro archivo App.vue , borraríamos el contenido y lo reemplazaríamos con el siguiente fragmento:

    template ul li v-for="todo in todos" v-bind:key="todo.id"{{ todo.content }}/li /ul/templatescript export default { name: 'app', data() { return { todos: [] } }, created() { fetch("/api/todos") .then(res = res.json()) .then(json = { this.todos = json.todos }) } }/script

    Si está familiarizado con Vue.js, lo anterior no sería nada nuevo, pero para ser total, lo que estamos haciendo es realizar una solicitud de API fetchcuando App.vuese crea nuestro componente, luego pasamos los datos devueltos a la matriz todos. en nuestro estado componente. Luego, usamos un v-for para iterar la matriz todos y mostrar la propiedad de contenido de cada tarea.

    ¿Dónde está la pieza Mirage JS?

    Si observa, en nuestro componente App.vue, no hicimos nada específico para Mirage, solo estamos haciendo una llamada API como lo haríamos normalmente. Esta característica de Mirage es realmente excelente para DX porque, bajo el capó, Mirage interceptaría cualquier solicitud que coincida con cualquiera de las rutas definidas en src/server.js mientras está en desarrollo.

    Esto es bastante útil porque no sería necesario ningún trabajo de su parte para cambiar a un servidor de producción real cuando se encuentre en un entorno de producción, siempre que las rutas coincidan con los puntos finales de su API de producción.

    Así que reinicie su servidor de desarrollo Vue yarn servepara probar Mirage JS.

    Deberías ver una lista de dos todos. Una cosa que le resultará bastante interesante es que no necesitamos ejecutar un comando de terminal para iniciar Mirage porque elimina esa sobrecarga al ejecutarse como parte de su aplicación Vue.js.

    Utilidades de prueba de Mirage JS y Vue

    Si ya está utilizando Vue Test-utils en su aplicación Vue, le resultará interesante saber que Mirage puede trabajar fácilmente con él para simular solicitudes de red. Veamos un ejemplo configurado usando nuestra aplicación todos.

    Estaríamos usando Jest para nuestras pruebas unitarias. Entonces, si sigues las instrucciones, podrías usar la CLI de Vue para instalar el @vue/unit-jestcomplemento de esta manera:

    vue add @vue/unit-jest

    Lo anterior instalará @vue/cli-plugin-unit-jesty @vue/test-utilsdesarrollará dependencias al mismo tiempo que creará un testsdirectorio y un archivo jest.config.js . También agregará el siguiente comando en nuestra sección package.json scripts (bastante ordenado):

    "test:unit": "vue-cli-service test:unit"

    ¡Probemos!

    Actualizaríamos nuestra App.vue para que se vea así:

    !-- src/App.vue --template div v-if="serverError" data-testid="server-error" {{ serverError }} /div div v-else-if="todos.length === 0" data-testid="no-todos" No todos! /div div v-else ul li v-for="todo in todos" v-bind:key="todo.id" :data-testid="'todo-' + todo.id" {{ todo.content }} /li /ul /div/templatescript export default { name: "app", data() { return { todos: [], serverError: null, } }, created() { fetch("/api/todos") .then(res = res.json()) .then(json = { if (json.error) { this.serverError = json.error } else { this.todos = json.todos } }) }, }/script

    No sucede nada realmente épico en el fragmento anterior; simplemente estamos estructurando para permitir las pruebas de red que implementaríamos con nuestra prueba unitaria.

     

    Aunque Vue CLI ya /testsnos ha agregado una carpeta, creo que es una experiencia mucho mejor cuando mis pruebas se colocan cerca de los componentes que están probando. Así que cree una /__tests__carpeta src/y cree un archivo App.spec.js dentro de ella. (Este es también el enfoque recomendado por Jest).

    // src/__tests__/App.spec.jsimport { mount } from "@vue/test-utils"import { makeServer } from "../server"import App from "../App.vue"let serverbeforeEach(() = { server = makeServer({ environment: "test" })})afterEach(() = { server.shutdown()})

    Entonces, para configurar nuestras pruebas unitarias, importamos el mountmétodo desde @vue/test-utils, importamos el servidor Miragejs que creamos anteriormente y finalmente importamos el App.vuecomponente.

    A continuación, utilizamos la beforeEachfunción de ciclo de vida para iniciar el servidor Mirage JS mientras pasamos por el entorno de prueba. (Recuerde, configuramos de forma predeterminada el entorno como development.)

    Por último, apagamos el servidor utilizando server.shutdownel método del afterEachciclo de vida.

    Nuestras pruebas

    Ahora desarrollemos nuestra prueba (adoptaríamos la sección de inicio rápido de los documentos de Mirage js . Entonces su App.spec.js finalmente se vería así:

    // src/__tests__/App.spec.jsimport { mount } from "@vue/test-utils"import { makeServer } from "./server"import App from "./App.vue"let serverbeforeEach(() = { server = makeServer({ environment: "test" })})it("shows the todos from our server", async () = { server.create("todo", { id: 1, content: "Learn Mirage JS" }) server.create("todo", { id: 2, content: "Integrate with Vue.js" }) const wrapper = mount(App) // let’s wait for our vue component to finish loading data // we know it’s done when the data-testid enters the dom. await waitFor(wrapper, '[data-testid="todo-1"]') await waitFor(wrapper, '[data-testid="todo-2"]') expect(wrapper.find('[data-testid="todo-1"]').text()).toBe("Learn Mirage JS") expect(wrapper.find('[data-testid="todo-2"]').text()).toBe("Integrate with Vue.js")})it("shows a message if there are no todo", async () = { // Don’t create any todos const wrapper = mount(App) await waitFor(wrapper, '[data-testid="no-todos"]') expect(wrapper.find('[data-testid="no-todos"]').text()).toBe("No todos!")})// This helper method returns a promise that resolves// once the selector enters the wrapper’s dom.const waitFor = function(wrapper, selector) { return new Promise(resolve = { const timer = setInterval(() = { const todoEl = wrapper.findAll(selector) if (todoEl.length 0) { clearInterval(timer) resolve() } }, 100) })}afterEach(() = { server.shutdown()})

    Nota : aquí utilizamos un asistente (como se define en los documentos de Mirage JS). Devuelve una promesa que nos permite saber cuando los elementos que estamos probando ya están en el DOM.

    Ahora corre yarn test:unit.

    Todas sus pruebas deberían pasar en este punto.

    Prueba de diferentes estados de servidor con Mirage JS

    Podríamos modificar nuestro servidor Mirage JS para probar diferentes estados del servidor. Veamos cómo.

    // src/__tests__/App.spec.jsimport { Response } from "miragejs"

    Primero, importamos la Responseclase desde Mirage, luego creamos un nuevo escenario de prueba como este:

    it("handles error responses from the server", async () = { // Override Mirage’s route handler for /todos, just for this test server.get("/todos", () = { return new Response( 500, {}, { error: "The database is taking a break.", } ) }) const wrapper = mount(App) await waitFor(wrapper, '[data-testid="server-error"]') expect(wrapper.find('[data-testid="server-error"]').text()).toBe( "The database is taking a break." )})

    Ejecute su prueba y todo debería pasar.

    Conclusión

    Este artículo tenía como objetivo presentarle Mirage JS y mostrarle cómo mejora la experiencia de desarrollo front-end. Vimos el problema que Mirage JS creó para abordar (crear un front-end listo para producción sin ninguna API de backend real) y cómo configurarlo con Vue.js.

    Aunque este artículo es una muestra de lo que Mirage JS puede hacer, creo que es suficiente para empezar.

    • Puede consultar los documentos y unirse al servidor de discordia de Mirage JS .
    • El repositorio de soporte para este artículo está disponible en GitHub .

    Referencias

    • Los documentos de Mirage
    • Inicio rápido de Mirage Vue

    (dm, il)Explora más en

    • API
    • vista
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Configuración de API simulada con Mirage JS y Vue.js

    Configuración de API simulada con Mirage JS y Vue.js

    Advertise on Smashing Magazine Smart Interface Design Checklists Índice ¿Qué es la burla de API?

    programar

    es

    https://pseint.es/static/images/programar-configuracion-de-api-simulada-con-mirage-js-y-vue-1013-0.jpg

    2024-04-04

     

    Configuración de API simulada con Mirage JS y Vue.js
    Configuración de API simulada con Mirage JS y Vue.js

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20