Análisis profundo de Mirage JS: comprensión de las fábricas, accesorios y serializadores (Parte 2)

 

 

 


Índice
  1. Fábricas
    1. Fábricas explicadas
    2. Creando una fábrica
    3. Fábricas primordiales
    4. Crear lista
  2. Calendario
    1. Creando un accesorio
    2. Accesorios en conjunto con las fábricas
    3. Archivos de accesorios
    4. Fábricas versus accesorios
  3. Serializadores
    1. Serializadores integrados Mirage JS
  4. Definición de serializador
  5. JSONAPISerializador
  6. ActiveModelSerializador
  7. Personalización de serializadores
  8. Terminando

En esta segunda parte de la serie Mirage JS Deep Dive, analizaremos las fábricas, accesorios y serializadores de Mirage JS. Veremos cómo permiten una burla rápida de API usando Mirage.

 

En el artículo anterior de esta serie, estudiamos los modelos y las asociaciones en relación con Mirage. Le expliqué que los modelos nos permiten crear datos simulados dinámicos que Mirage entregaría a nuestra aplicación cuando realiza una solicitud a nuestros puntos finales simulados. En este artículo, veremos otras tres características de Mirage que permiten una simulación de API aún más rápida. ¡Vamos a sumergirnos de lleno!

Nota : Recomiendo encarecidamente leer mis dos primeros artículos si no tiene una idea muy sólida de lo que se discutirá aquí. Sin embargo, aún puedes seguir y consultar los artículos anteriores cuando sea necesario.

 

  • Configuración de API simulada con Mirage JS y Vue
  • Modelos y asociaciones de Mirage JS

Fábricas

En un artículo anterior , expliqué cómo se usa Mirage JS para simular la API de backend. Ahora supongamos que nos estamos burlando de un recurso de producto en Mirage. Para lograr esto, crearíamos un controlador de ruta que será responsable de interceptar las solicitudes a un punto final en particular y, en este caso, el punto final es api/products. El controlador de ruta que creamos devolverá todos los productos. A continuación se muestra el código para lograr esto en Mirage:

import { Server, Model } from 'miragejs';new Server({ models: { product: Model, }, routes() { this.namespace = "api"; this.get('products', (schema, request) = { return schema.products.all() }) }}); },

El resultado de lo anterior sería:

{ "products": []}

Vemos en el resultado anterior que el recurso del producto está vacío. Sin embargo, esto es lo esperado ya que aún no hemos creado ningún registro.

Consejo profesional : Mirage proporciona la abreviatura necesaria para los puntos finales de API convencionales. Entonces, el controlador de ruta anterior también podría ser tan corto como: this.get('/products').

Creemos registros del productmodelo que se almacenarán en la base de datos de Mirage usando el seedsmétodo en nuestra Serverinstancia:

 seeds(server) { server.create('product', { name: 'Gemini Jacket' }) server.create('product', { name: 'Hansel Jeans' }) },

La salida:

{ "products": [ { "name": "Gemini Jacket", "id": "1" }, { "name": "Hansel Jeans", "id": "2" } ]}

Como puede ver arriba, cuando nuestra aplicación frontend realiza una solicitud /api/products, obtendrá una colección de productos como se define en el seedsmétodo.

Usar el seedsmétodo para inicializar la base de datos de Mirage es un paso de tener que crear manualmente cada entrada como un objeto. Sin embargo, no sería práctico crear 1000 (o un millón) de registros de productos nuevos utilizando el patrón anterior. De ahí la necesidad de fábricas .

Fábricas explicadas

Las fábricas son una forma más rápida de crear nuevos registros de bases de datos. Nos permiten crear rápidamente múltiples registros de un modelo particular con variaciones para almacenarlos en la base de datos de Mirage JS.

Las fábricas también son objetos que facilitan la generación de datos de apariencia realista sin tener que generarlos individualmente. Las fábricas son más recetas o planos para crear registros a partir de modelos.

 

Creando una fábrica

Examinemos una fábrica creando una. La fábrica que crearíamos se utilizará como modelo para crear nuevos productos en nuestra base de datos Mirage JS.

import { Factory } from 'miragejs'new Server({ // including the model definition for a better understanding of what’s going on models: { product: Model }, factories: { product: Factory.extend({}) }})

De lo anterior, verá que agregamos una factoriespropiedad a nuestra Serverinstancia y definimos otra propiedad dentro de ella que, por convención, tiene el mismo nombre que el modelo para el que queremos crear una fábrica; en este caso, ese modelo es el productmodelo. El fragmento anterior muestra el patrón que seguirías al crear fábricas en Mirage JS.

Aunque tenemos una fábrica para el productmodelo, realmente no le hemos agregado propiedades. Las propiedades de una fábrica pueden ser tipos simples como cadenas , booleanos o números , o funciones que devuelven datos dinámicos como veremos en la implementación completa de nuestra nueva fábrica de productos a continuación:

import { Server, Model, Factory } from 'miragejs'new Server({ models: { product: Model }, factories: { product: Factory.extend({ name(i) { // i is the index of the record which will be auto incremented by Mirage JS return `Awesome Product ${i}`; // Awesome Product 1, Awesome Product 2, etc. }, price() { let minPrice = 20; let maxPrice = 2000; let randomPrice = Math.floor(Math.random() * (maxPrice - minPrice + 1)) + minPrice; return `$ ${randomPrice}`; }, category() { let categories = [ 'Electronics', 'Computing', 'Fashion', 'Gaming', 'Baby Products', ]; let randomCategoryIndex = Math.floor( Math.random() * categories.length ); let randomCategory = categories[randomCategoryIndex]; return randomCategory; }, rating() { let minRating = 0 let maxRating = 5 return Math.floor(Math.random() * (maxRating - minRating + 1)) + minRating; }, }), },})

En el fragmento de código anterior, especificamos cierta lógica de JavaScript Math.randompara crear datos dinámicos cada vez que se utiliza la fábrica para crear un nuevo registro de producto. Esto demuestra la fuerza y ​​flexibilidad de las Fábricas.

Creemos un producto utilizando la fábrica que definimos anteriormente. Para hacer eso, llamamos server.createy pasamos el nombre del modelo ( product) como una cadena. Luego, Mirage creará un nuevo registro de un producto utilizando la fábrica de productos que definimos. El código que necesitas para hacer esto es el siguiente:

new Server({ seeds(server) { server.create("product") }})

Consejo profesional : puede ejecutar console.log(server.db.dump())para ver los registros en la base de datos de Mirage.

 

Se creó y almacenó un nuevo registro similar al siguiente en la base de datos de Mirage.

{ "products": [ { "rating": 3, "category": "Computing", "price": "$739", "name": "Awesome Product 0", "id": "1" } ]}

Fábricas primordiales

Podemos anular algunos o más de los valores proporcionados por una fábrica pasándolos explícitamente de esta manera: Health Tips

server.create("product", {name: "Yet Another Product", rating: 5, category: "Fashion" })

El registro resultante sería similar a:

{ "products": [ { "rating": 5, "category": "Fashion", "price": "$782", "name": "Yet Another Product", "id": "1" } ]}

Crear lista

Con una fábrica implementada, podemos usar otro método en el objeto del servidor llamado createList. Este método permite la creación de múltiples registros de un modelo en particular pasando el nombre del modelo y la cantidad de registros que desea crear. A continuación se muestra su uso:

server.createList("product", 10)

O

server.createList("product", 1000)

Como observará, el createListmétodo anterior toma dos argumentos: el nombre del modelo como una cadena y un entero positivo distinto de cero que representa la cantidad de registros a crear. Entonces, a partir de lo anterior, ¡acabamos de crear 500 registros de productos! Este patrón es útil para las pruebas de UI, como verá en un artículo futuro de esta serie.

Calendario

En las pruebas de software, un dispositivo de prueba o dispositivo es un estado de un conjunto o colección de objetos que sirven como base para ejecutar pruebas. El objetivo principal de un dispositivo es garantizar que el entorno de prueba sea bien conocido para que los resultados sean repetibles.

Mirage le permite crear accesorios y usarlos para inicializar su base de datos con datos iniciales.

Nota : Se recomienda utilizar fábricas 9 de cada 10 veces, ya que hacen que tus simulacros sean más fáciles de mantener.

Creando un accesorio

Creemos un dispositivo simple para cargar datos en nuestra base de datos:

 fixtures: { products: [ { id: 1, name: 'T-shirts' }, { id: 2, name: 'Work Jeans' }, ], },

Los datos anteriores se cargan automáticamente en la base de datos como datos iniciales de Mirage. Sin embargo, si tiene definida una función de inicialización, Mirage ignorará su dispositivo con la suposición de que desea anularlo y, en su lugar, utilizará fábricas para inicializar sus datos.

Accesorios en conjunto con las fábricas

Mirage prevé que usted utilice accesorios junto con fábricas. Puedes lograr esto llamando server.loadFixtures(). Por ejemplo:

 fixtures: { products: [ { id: 1, name: "iPhone 7" }, { id: 2, name: "Smart TV" }, { id: 3, name: "Pressing Iron" }, ], }, seeds(server) { // Permits both fixtures and factories to live side by side server.loadFixtures() server.create("product") },

Archivos de accesorios

Idealmente, querrás crear tus aparatos en un archivo separado server.jse importarlo. Por ejemplo puedes crear un directorio llamado fixturesy en él crear products.js. Además products.js:

 

// PROJECT-ROOT/fixtures/products.jsexport default [ { id: 1, name: 'iPhone 7' }, { id: 2, name: 'Smart TV' }, { id: 3, name: 'Pressing Iron' },];

Luego, server.jsimporte y use el accesorio de productos de esta manera:

import products from './fixtures/products'; fixtures: { products, },

Estoy usando la taquigrafía de propiedades de ES6 para asignar la matriz de productos importada a la productspropiedad del objeto de accesorios.

Vale la pena mencionar que Mirage JS ignorará los dispositivos durante las pruebas, a menos que usted le indique explícitamente que no lo haga mediante el usoserver.loadFixtures()

Fábricas versus accesorios

En mi opinión, deberías abstenerte de utilizar accesorios, excepto que tengas un caso de uso particular en el que sean más adecuados que las fábricas. Los accesorios tienden a ser más detallados, mientras que las fábricas son más rápidas e implican menos pulsaciones de teclas.

Serializadores

Es importante devolver una carga útil JSON que se espera que llegue a la interfaz, por lo tanto, a los serializadores .

Un serializador es un objeto responsable de transformar un **Modelo** o una **Colección** que se devuelve desde los controladores de ruta en una carga útil JSON con el formato esperado por la aplicación frontend.

Documentos de Mirage

Tomemos este controlador de ruta, por ejemplo:

this.get('products/:id', (schema, request) = { return schema.products.find(request.params.id); });

Un Serializador se encarga de transformar la respuesta a algo como esto:

{ "product": { "rating": 0, "category": "Baby Products", "price": "$654", "name": "Awesome Product 1", "id": "2" }}

Serializadores integrados Mirage JS

Para trabajar con serializadores Mirage JS, deberá elegir con qué serializador integrado comenzar. Esta decisión estaría influenciada por el tipo de JSON que su backend eventualmente enviaría a su aplicación de front-end. Mirage viene incluido con los siguientes serializadores:

  • JSONAPISerializer
    Este serializador sigue la especificación JSON:API .
  • ActiveModelSerializer
    Este serializador está destinado a imitar API que se parecen a las API de Rails creadas con la gema active_model_serializer .
  • RestSerializer
    Es RestSerializerel serializador Mirage JS “catch all” para otras API comunes.

Definición de serializador

Para definir una serialización, importe el serializador apropiado, por ejemplo, RestSerializerde miragejsesta manera:

import { Server, RestSerializer } from "miragejs"

Luego en el Servercaso:

new Server({ serializers: { application: RestSerializer, },})

RestSerializerMirage JS utiliza el de forma predeterminada. Por lo que es redundante configurarlo explícitamente. El fragmento anterior tiene fines ejemplares.

 

Veamos el resultado de ambos JSONAPISerializery ActiveModelSerializeren el mismo controlador de ruta como lo definimos anteriormente.

JSONAPISerializador

import { Server, JSONAPISerializer } from "miragejs"new Server({ serializers: { application: JSONAPISerializer, },})

La salida:

{ "data": { "type": "products", "id": "2", "attributes": { "rating": 3, "category": "Electronics", "price": "$1711", "name": "Awesome Product 1" } }}

ActiveModelSerializador

Para ver ActiveModelSerializer en funcionamiento, modificaría la declaración de categoryen la fábrica de productos para:

productCategory() { let categories = [ 'Electronics', 'Computing', 'Fashion', 'Gaming', 'Baby Products', ]; let randomCategoryIndex = Math.floor( Math.random() * categories.length ); let randomCategory = categories[randomCategoryIndex]; return randomCategory; },

Todo lo que hice fue cambiar el nombre de la propiedad para productCategorymostrar cómo la manejaría el serializador.

Luego, definimos el ActiveModelSerializerserializador así:

import { Server, ActiveModelSerializer } from "miragejs"new Server({ serializers: { application: ActiveModelSerializer, },})

El serializador transforma el JSON devuelto como:

{ "rating": 2, "product_category": "Computing", "price": "$64", "name": "Awesome Product 4", "id": "5"}

Notarás que productCategoryse ha transformado para product_categoryque se ajuste a la gema active_model_serializer del ecosistema Ruby.

Personalización de serializadores

Mirage ofrece la posibilidad de personalizar un serializador. Digamos que su aplicación requiere que los nombres de sus atributos estén en formato camel, puede anularlos RestSerializerpara lograrlo. Estaríamos utilizando la lodashbiblioteca de utilidades:

import { RestSerializer } from 'miragejs';import { camelCase, upperFirst } from 'lodash';serializers: { application: RestSerializer.extend({ keyForAttribute(attr) { return upperFirst(camelCase(attr)); }, }), },

Esto debería producir JSON de la forma:

 { "Rating": 5, "ProductCategory": "Fashion", "Price": "$1386", "Name": "Awesome Product 4", "Id": "5" }

Terminando

¡Lo hiciste! Con suerte, ha obtenido una comprensión más profunda de Mirage a través de este artículo y también ha visto cómo el uso de fábricas, accesorios y serializadores le permitiría crear más simulaciones de API similares a las de producción con Mirage.

  • Parte 1 : Comprensión de los modelos y asociaciones de Mirage JS
  • Parte 2: Comprensión de las fábricas, accesorios y serializadores
  • Parte 3 : Comprender el momento, la respuesta y la transferencia
  • Parte 4 : Uso de Mirage JS y Cypress para pruebas de UI

(ra, il)Explora más en

  • API
  • 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

Análisis profundo de Mirage JS: comprensión de las fábricas, accesorios y serializadores (Parte 2)

Análisis profundo de Mirage JS: comprensión de las fábricas, accesorios y serializadores (Parte 2)

Índice Fábricas Fábricas explicadas

programar

es

https://aprendeprogramando.es/static/images/programar-analisis-profundo-de-mirage-js-comprension-de-las-fabricas-1032-0.jpg

2024-05-21

 

Análisis profundo de Mirage JS: comprensión de las fábricas, accesorios y serializadores (Parte 2)
Análisis profundo de Mirage JS: comprensión de las fábricas, accesorios y serializadores (Parte 2)

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