Desarrollo local con Firebase Emulator Suite

1. Antes de comenzar

Las herramientas de backend sin servidor como Cloud Firestore y Cloud Functions son muy fáciles de usar, pero pueden ser difíciles de probar. Firebase Local Emulator Suite te permite ejecutar versiones locales de estos servicios en tu máquina de desarrollo para que puedas desarrollar tu aplicación de forma rápida y segura.

Prerrequisitos

  • Un editor simple como Visual Studio Code, Atom o Sublime Text
  • Node.js 10.0.0 o superior (para instalar Node.js, el uso de NVM , para comprobar su versión, ejecute node --version )
  • Java 7 o superior (para instalar Java utilizar estas instrucciones , para comprobar su versión, ejecute java -version )

Que vas a hacer

En este laboratorio de código, ejecutará y depurará una aplicación de compras en línea simple que funciona con varios servicios de Firebase:

  • Nube Firestore: una, sin servidor, base de datos a nivel mundial escalable NoSQL con capacidades en tiempo real.
  • Funciones de la nube: un código de fondo sin servidor que se ejecuta en respuesta a eventos o peticiones HTTP.
  • Firebase autenticación: un servicio de autenticación gestionado que se integra con otros productos de base de fuego.
  • Firebase Hosting: rápido y seguro de alojamiento de aplicaciones web.

Conectará la aplicación a Emulator Suite para permitir el desarrollo local.

2589e2f95b74fa88.png

También aprenderá a:

  • Cómo conectar su aplicación a Emulator Suite y cómo se conectan los distintos emuladores.
  • Cómo funcionan las reglas de seguridad de Firebase y cómo probar las reglas de seguridad de Firestore con un emulador local.
  • Cómo escribir una función de Firebase que se activa mediante eventos de Firestore y cómo escribir pruebas de integración que se ejecutan en Emulator Suite.

2. Configurar

Obtén el código fuente

En este laboratorio de código, comienza con una versión de muestra de The Fire Store que está casi completa, por lo que lo primero que debe hacer es clonar el código fuente:

$ git clone https://github.com/firebase/emulators-codelab.git

Luego, muévase al directorio de codelab, donde trabajará durante el resto de este codelab:

$ cd emulators-codelab/codelab-initial-state

Ahora, instale las dependencias para que pueda ejecutar el código. Si tiene una conexión a Internet más lenta, esto puede demorar uno o dos minutos:

# Move into the functions directory
$ cd functions

# Install dependencies
$ npm install

# Move back into the previous directory
$ cd ../

Obtén Firebase CLI

Emulator Suite es parte de Firebase CLI (interfaz de línea de comandos) que se puede instalar en su máquina con el siguiente comando:

$ npm install -g firebase-tools

A continuación, confirme que tiene la última versión de la CLI. Este laboratorio de código debería funcionar con la versión 9.0.0 o superior, pero las versiones posteriores incluyen más correcciones de errores.

$ firebase --version
9.6.0

Conéctese a su proyecto de Firebase

Si usted no tiene un proyecto Firebase, en la consola de Firebase , cree un nuevo proyecto Firebase. Anote el ID del proyecto que elija, lo necesitará más adelante.

Ahora necesitamos conectar este código a su proyecto de Firebase. Primero, ejecute el siguiente comando para iniciar sesión en Firebase CLI:

$ firebase login

A continuación, ejecute el siguiente comando para crear un alias de proyecto. Reemplazar $YOUR_PROJECT_ID con el ID de su proyecto Firebase.

$ firebase use $YOUR_PROJECT_ID

¡Ahora estás listo para ejecutar la aplicación!

3. Ejecute los emuladores

En esta sección, ejecutará la aplicación localmente. Esto significa que es hora de iniciar Emulator Suite.

Iniciar los emuladores

Desde dentro del directorio fuente de codelab, ejecute el siguiente comando para iniciar los emuladores:

$ firebase emulators:start --import=./seed

Debería ver un resultado como este:

$ firebase emulators:start --import=./seed
i  emulators: Starting emulators: auth, functions, firestore, hosting
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: database, pubsub
i  firestore: Importing data from /Users/samstern/Projects/emulators-codelab/codelab-initial-state/seed/firestore_export/firestore_export.overall_export_metadata
i  firestore: Firestore Emulator logging to firestore-debug.log
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/Users/samstern/Projects/emulators-codelab/codelab-initial-state/functions" for Cloud Functions...
✔  functions[calculateCart]: firestore function initialized.

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth      │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions      │ localhost:5001 │ http://localhost:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore      │ localhost:8080 │ http://localhost:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting        │ localhost:5000 │ n/a                             │
└────────────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

Una vez que vea los emuladores Todos los mensajes iniciados, la aplicación está lista para su uso.

Conecte la aplicación web a los emuladores

Sobre la base de la mesa en los registros podemos ver que el emulador de la nube Firestore está escuchando en el puerto 8080 y el emulador de autenticación está escuchando en el puerto 9099 .

┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth      │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions      │ localhost:5001 │ http://localhost:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore      │ localhost:8080 │ http://localhost:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting        │ localhost:5000 │ n/a                             │
└────────────────┴────────────────┴─────────────────────────────────┘

Conectemos su código de interfaz al emulador, en lugar de a la producción. Abra el public/js/homepage.js archivo y encontrar la onDocumentReady función. Podemos ver que el código accede a las instancias estándar de Firestore y Auth:

public / js / homepage.js

  const auth = firebaseApp.auth();
  const db = firebaseApp.firestore();

La actualización de dejar que el db y auth objetos a punto a los emuladores locales:

public / js / homepage.js

  const auth = firebaseApp.auth();
  const db = firebaseApp.firestore();

  // ADD THESE LINES
  if (location.hostname === "localhost") {
    console.log("localhost detected!");
    auth.useEmulator("http://localhost:9099");
    db.useEmulator("localhost", 8080);
  }

Ahora, cuando la aplicación se ejecuta en localhost (servida por el emulador de Hosting), el cliente de Firestore también apunta al emulador local en lugar de a una base de datos de producción.

Abra el EmulatorUI

En su navegador web, vaya a http: // localhost: 4000 / . Debería ver la interfaz de usuario de Emulator Suite.

Pantalla de inicio de la IU de emuladores

Haga clic para ver la interfaz de usuario del emulador de Firestore. El items colección ya contiene datos debido a los datos importados con el --import bandera.

4ef88d0148405d36.png

4. Ejecute la aplicación

Abre la aplicación

En su navegador web, vaya a http: // localhost: 5000 y debería ver la tienda de incendios que se ejecutan localmente en su máquina!

939f87946bac2ee4.png

Usar la aplicación

Elija un elemento en la página de inicio y haga clic en Agregar a la cesta. Desafortunadamente, se encontrará con el siguiente error:

a11bd59933a8e885.png

¡Arreglemos ese error! Debido a que todo se ejecuta en los emuladores, podemos experimentar y no preocuparnos por afectar los datos reales.

5. Depura la aplicación

Encuentra el error

Ok, miremos en la consola de desarrollo de Chrome. Presione Control+Shift+J (Windows, Linux, Chrome OS) o Command+Option+J (Mac) para ver el error en la consola:

74c45df55291dab1.png

Parece como si hubiera algún error en el addToCart método, vamos a echar un vistazo a eso. ¿Por dónde tratar de acceder a algo que se llama uid en ese método y por qué sería null ? En este momento las miradas método como este en public/js/homepage.js :

public / js / homepage.js

  addToCart(id, itemData) {
    console.log("addToCart", id, JSON.stringify(itemData));
    return this.db
      .collection("carts")
      .doc(this.auth.currentUser.uid)
      .collection("items")
      .doc(id)
      .set(itemData);
  }

¡Ajá! No hemos iniciado sesión en la aplicación. De acuerdo con los documentos de autenticación Firebase , cuando no ha iniciado sesión, auth.currentUser es null . Agreguemos un cheque para eso:

public / js / homepage.js

  addToCart(id, itemData) {
    // ADD THESE LINES
    if (this.auth.currentUser === null) {
      this.showError("You must be signed in!");
      return;
    }

    // ...
  }

Prueba la aplicación

Ahora, actualice la página y haga clic en Añadir a la Cesta. Debería obtener un error más agradable esta vez:

c65f6c05588133f7.png

Sin embargo, si hace clic en Iniciar sesión en la barra de herramientas superior y haga clic en Agregar a la cesta de nuevo, se verá que el carro se actualiza.

Sin embargo, no parece que los números sean correctos en absoluto:

239f26f02f959eef.png

No se preocupe, arreglaremos ese error pronto. Primero, profundicemos en lo que realmente sucedió cuando agregó un artículo a su carrito.

6. Activadores de funciones locales

Al hacer clic en Añadir a la Cesta 'inicia una cadena de eventos que involucran a múltiples emuladores. En los registros de Firebase CLI, debería ver algo como los siguientes mensajes después de agregar un artículo a su carrito:

i  functions: Beginning execution of "calculateCart"
i  functions: Finished "calculateCart" in ~1s

Se produjeron cuatro eventos clave para producir esos registros y la actualización de la interfaz de usuario que observó:

68c9323f2ad10f7a.png

1) Escritura de Firestore - Cliente

Un nuevo documento se añade a la colección Firestore /carts/{cartId}/items/{itemId}/ . Se puede ver este código en el addToCart función dentro public/js/homepage.js :

public / js / homepage.js

  addToCart(id, itemData) {
    // ...
    console.log("addToCart", id, JSON.stringify(itemData));
    return this.db
      .collection("carts")
      .doc(this.auth.currentUser.uid)
      .collection("items")
      .doc(id)
      .set(itemData);
  }

2) Función de nube activada

La función de la nube calculateCart escuchas para cualquier evento de escritura (crear, actualizar o eliminar) que suceden al carrito de elementos utilizando el onWrite gatillo, que se puede ver en functions/index.js :

funciones / index.js

exports.calculateCart = functions.firestore
    .document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      try {
        let totalPrice = 125.98;
        let itemCount = 8;

        const cartRef = db.collection("carts").doc(context.params.cartId);

        await cartRef.update({
          totalPrice,
          itemCount
        });
      } catch(err) {
      }
    }
);

3) Escritura de Firestore - Administrador

El calculateCart función lee todos los artículos en el carro y se suma la cantidad y el precio total, entonces se actualiza el "carrito" documento con los nuevos totales (ver cartRef.update(...) más arriba).

4) Lectura de Firestore - Cliente

La interfaz web está suscrita para recibir actualizaciones sobre cambios en el carrito. Se recibe una actualización en tiempo real después de la función de la nube escribe los nuevos totales y actualiza la interfaz de usuario, como se puede ver en public/js/homepage.js :

public / js / homepage.js

this.cartUnsub = cartRef.onSnapshot(cart => {
   // The cart document was changed, update the UI
   // ...
});

Resumen

¡Buen trabajo! Simplemente configura una aplicación completamente local que usa tres emuladores de Firebase diferentes para pruebas completamente locales.

db82eef1706c9058.gif

¡Pero espera hay mas! En la siguiente sección aprenderá:

  • Cómo escribir pruebas unitarias que usan los emuladores de Firebase.
  • Cómo usar los emuladores de Firebase para depurar tus reglas de seguridad.

7. Cree reglas de seguridad adaptadas a su aplicación.

Nuestra aplicación web lee y escribe datos, pero hasta ahora no nos hemos preocupado en absoluto por la seguridad. Cloud Firestore usa un sistema llamado "Reglas de seguridad" para declarar quién tiene acceso para leer y escribir datos. Emulator Suite es una excelente manera de crear prototipos de estas reglas.

En el editor, abra el archivo emulators-codelab/codelab-initial-state/firestore.rules . Verá que tenemos tres secciones principales en nuestras reglas:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // User's cart metadata
    match /carts/{cartID} {
      // TODO: Change these! Anyone can read or write.
      allow read, write: if true;
    }

    // Items inside the user's cart
    match /carts/{cartID}/items/{itemID} {
      // TODO: Change these! Anyone can read or write.
      allow read, write: if true;
    }

    // All items available in the store. Users can read
    // items but never write them.
    match /items/{itemID} {
      allow read: if true;
    }
  }
}

¡Ahora mismo cualquiera puede leer y escribir datos en nuestra base de datos! Queremos asegurarnos de que solo se realicen operaciones válidas y de que no filtremos ninguna información confidencial.

Durante este codelab, siguiendo el Principio de Mínimo Privilegio, bloquearemos todos los documentos y agregaremos acceso gradualmente hasta que todos los usuarios tengan todo el acceso que necesitan, pero no más. La actualización de dejar que los primeros dos reglas para denegar el acceso mediante el establecimiento de la condición de false :

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // User's cart metadata
    match /carts/{cartID} {
      // UPDATE THIS LINE
      allow read, write: if false;
    }

    // Items inside the user's cart
    match /carts/{cartID}/items/{itemID} {
      // UPDATE THIS LINE
      allow read, write: if false;
    }

    // All items available in the store. Users can read
    // items but never write them.
    match /items/{itemID} {
      allow read: if true;
    }
  }
}

8. Ejecute los emuladores y las pruebas.

Iniciar los emuladores

En la línea de comandos, asegúrese de que está en emulators-codelab/codelab-initial-state/ . Es posible que aún tenga los emuladores ejecutándose desde los pasos anteriores. Si no es así, inicie los emuladores nuevamente:

$ firebase emulators:start --import=./seed

Una vez que los emuladores se están ejecutando, puede ejecutar pruebas localmente contra ellos.

Ejecuta las pruebas

En la línea de comandos en una pestaña nueva terminal desde el directorio emulators-codelab/codelab-initial-state/

Primero muévase al directorio de funciones (nos quedaremos aquí por el resto del laboratorio de código):

$ cd functions

Ahora ejecute las pruebas de mocha en el directorio de funciones y desplácese hasta la parte superior de la salida:

# Run the tests
$ npm test

> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping carts
    1) can be created and updated by the cart owner
    2) can be read only by the cart owner

  shopping cart items
    3) can be read only by the cart owner
    4) can be added only by the cart owner

  adding an item to the cart recalculates the cart total. 
    - should sum the cost of their items


  0 passing (364ms)
  1 pending
  4 failing

Ahora mismo tenemos cuatro fracasos. A medida que crea el archivo de reglas, puede medir el progreso viendo pasar más pruebas.

9. Acceso seguro al carrito

Los dos primeros fallos son las pruebas del "carrito de la compra" que comprueban que:

  • Los usuarios solo pueden crear y actualizar sus propios carritos
  • Los usuarios solo pueden leer sus propios carritos

funciones / test.js

  it('can be created and updated by the cart owner', async () => {
    // Alice can create her own cart
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart").set({
      ownerUID: "alice",
      total: 0
    }));

    // Bob can't create Alice's cart
    await firebase.assertFails(bobDb.doc("carts/alicesCart").set({
      ownerUID: "alice",
      total: 0
    }));

    // Alice can update her own cart with a new total
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart").update({
      total: 1
    }));

    // Bob can't update Alice's cart with a new total
    await firebase.assertFails(bobDb.doc("carts/alicesCart").update({
      total: 1
    }));
  });

  it("can be read only by the cart owner", async () => {
    // Setup: Create Alice's cart as admin
    await admin.doc("carts/alicesCart").set({
      ownerUID: "alice",
      total: 0
    });

    // Alice can read her own cart
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart").get());

    // Bob can't read Alice's cart
    await firebase.assertFails(bobDb.doc("carts/alicesCart").get());
  });

Hagamos pasar estas pruebas. En el editor, abra el archivo de reglas de seguridad, firestore.rules , y actualizar las declaraciones dentro de match /carts/{cartID} :

firestore.rules

rules_version = '2';
service cloud.firestore {
    // UPDATE THESE LINES
    match /carts/{cartID} {
      allow create: if request.auth.uid == request.resource.data.ownerUID;
      allow read, update, delete: if request.auth.uid == resource.data.ownerUID;
    }

    // ...
  }
}

Estas reglas ahora solo permiten el acceso de lectura y escritura por parte del propietario del carrito.

Para verificar los datos entrantes y la autenticación del usuario, usamos dos objetos que están disponibles en el contexto de cada regla:

  • La request objeto contiene datos y metadatos sobre la operación que se está intentando.
  • Si un proyecto Firebase está utilizando autenticación Firebase , la request.auth objeto describe el usuario que realiza la solicitud.

10. Pruebe el acceso al carrito

El emulador suite se actualiza automáticamente cada vez que las reglas firestore.rules se salva. Puede confirmar que el emulador ha actualizado las reglas del mirando en la pestaña de ejecutar el emulador para el mensaje Rules updated :

5680da418b420226.png

Vuelva a ejecutar las pruebas y compruebe que las dos primeras pasan ahora:

$ npm test

> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping carts
    ✓ can be created and updated by the cart owner (195ms)
    ✓ can be read only by the cart owner (136ms)

  shopping cart items
    1) can be read only by the cart owner
    2) can be added only by the cart owner

  adding an item to the cart recalculates the cart total. 
    - should sum the cost of their items

  2 passing (482ms)
  1 pending
  2 failing

¡Buen trabajo! Ahora tiene acceso seguro a los carritos de compras. Pasemos a la siguiente prueba fallida.

11. Verifique el flujo "Agregar al carrito" en la interfaz de usuario.

En este momento, aunque los propietarios de carritos leen y escriben en su carrito, no pueden leer ni escribir artículos individuales en su carrito. Eso es porque mientras que los propietarios tienen acceso al documento carro, que no tienen acceso a los elementos subcolección del carro.

Este es un estado roto para los usuarios.

Volver a la interfaz de usuario web, que se ejecuta en http://localhost:5000, y tratar de añadir algo a su carrito. Se obtiene un Permission Denied error, visible desde la consola de depuración, ya que todavía no hemos permitido el acceso a los usuarios a los documentos creados en los items subcolección.

12. Permitir el acceso a los artículos del carrito

Estas dos pruebas confirman que los usuarios solo pueden agregar o leer artículos de su propio carrito:

  it("can be read only by the cart owner", async () => {
    // Alice can read items in her own cart
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart/items/milk").get());

    // Bob can't read items in alice's cart
    await firebase.assertFails(bobDb.doc("carts/alicesCart/items/milk").get())
  });

  it("can be added only by the cart owner",  async () => {
    // Alice can add an item to her own cart
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart/items/lemon").set({
      name: "lemon",
      price: 0.99
    }));

    // Bob can't add an item to alice's cart
    await firebase.assertFails(bobDb.doc("carts/alicesCart/items/lemon").set({
      name: "lemon",
      price: 0.99
    }));
  });

Entonces, podemos escribir una regla que permita el acceso si el usuario actual tiene el mismo UID que el ownerUID en el documento del carrito. Dado que no hay necesidad de especificar diferentes reglas para create, update, delete , se puede utilizar una write norma, que se aplica a todas las peticiones que los datos de modificación.

Actualice la regla para los documentos en la subcolección de artículos. El get en el condicional es la lectura de un valor de Firestore-en este caso, el ownerUID en el documento de compras.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ...

    // UPDATE THESE LINES
    match /carts/{cartID}/items/{itemID} {
      allow read, write: if get(/databases/$(database)/documents/carts/$(cartID)).data.ownerUID == request.auth.uid;
    }

    // ...
  }
}

13. Pruebe el acceso a los artículos del carrito

Ahora podemos volver a ejecutar la prueba. Desplácese hasta la parte superior de la salida y verifique que pasen más pruebas:

$ npm test

> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping carts
    ✓ can be created and updated by the cart owner (195ms)
    ✓ can be read only by the cart owner (136ms)

  shopping cart items
    ✓ can be read only by the cart owner (111ms)
    ✓ can be added only by the cart owner


  adding an item to the cart recalculates the cart total. 
    - should sum the cost of their items


  4 passing (401ms)
  1 pending

¡Bonito! Ahora pasan todas nuestras pruebas. Tenemos una prueba pendiente, pero llegaremos a ella en unos pocos pasos.

14. Verifique el flujo "agregar al carrito" nuevamente

Volver a la interfaz web ( http: // localhost: 5000 ) y añadir un elemento a la cesta. Este es un paso importante para confirmar que nuestras pruebas y reglas coinciden con la funcionalidad requerida por el cliente. (¡Recuerde que la última vez que probamos la interfaz de usuario, los usuarios no pudieron agregar artículos a su carrito!)

69ad26cee520bf24.png

El cliente vuelve a cargar automáticamente las reglas cuando los firestore.rules se guarda. Entonces, intente agregar algo al carrito.

Resumen

¡Buen trabajo! ¡Acaba de mejorar la seguridad de su aplicación, un paso esencial para prepararla para la producción! Si se tratara de una aplicación de producción, podríamos agregar estas pruebas a nuestra canalización de integración continua. Esto nos daría confianza en el futuro de que los datos de nuestro carrito de compras tendrán estos controles de acceso, incluso si otros están modificando las reglas.

ba5440b193e75967.gif

¡Pero espera hay mas!

si continúas aprenderás:

  • Cómo escribir una función activada por un evento de Firestore
  • Cómo crear pruebas que funcionen en varios emuladores

15. Configura las pruebas de Cloud Functions

Hasta ahora nos hemos centrado en la interfaz de nuestra aplicación web y las reglas de seguridad de Firestore. Pero esta aplicación también usa Cloud Functions para mantener actualizado el carrito del usuario, por lo que también queremos probar ese código.

Emulator Suite hace que sea muy fácil probar Cloud Functions, incluso funciones que usan Cloud Firestore y otros servicios.

En el editor, abra los emulators-codelab/codelab-initial-state/functions/test.js archivo y desplazamiento para la última prueba en el archivo. En este momento, está marcado como pendiente:

//  REMOVE .skip FROM THIS LINE
describe.skip("adding an item to the cart recalculates the cart total. ", () => {
  // ...

  it("should sum the cost of their items", async () => {
    ...
  });
});

Para activar la prueba, retire .skip , por lo que se ve así:

describe("adding an item to the cart recalculates the cart total. ", () => {
  // ...

  it("should sum the cost of their items", async () => {
    ...
  });
});

A continuación, encontrar el REAL_FIREBASE_PROJECT_ID variable al principio del archivo y el cambio a su verdadera Firebase Proyecto ID .:

// CHANGE THIS LINE
const REAL_FIREBASE_PROJECT_ID = "changeme";

Si olvidó su ID de proyecto, puede encontrar su ID de proyecto de Firebase en la Configuración del proyecto en la Consola de Firebase:

d6d0429b700d2b21.png

16. Recorrido por las pruebas de funciones

Debido a que esta prueba valida la interacción entre Cloud Firestore y Cloud Functions, implica más configuración que las pruebas en los laboratorios de código anteriores. Repasemos esta prueba y tengamos una idea de lo que espera.

Crea un carrito

Cloud Functions se ejecuta en un entorno de servidor confiable y puede usar la autenticación de la cuenta de servicio que usa el SDK de administrador. En primer lugar, se inicializa una aplicación usando initializeAdminApp en lugar de initializeApp . A continuación, se crea un DocumentReference para el carro se irán sumando elementos a e inicializar el carrito:

it("should sum the cost of their items", async () => {
    const db = firebase
        .initializeAdminApp({ projectId: REAL_FIREBASE_PROJECT_ID })
        .firestore();

    // Setup: Initialize cart
    const aliceCartRef = db.doc("carts/alice")
    await aliceCartRef.set({ ownerUID: "alice", totalPrice: 0 });

    ...
  });

Activar la función

A continuación, añadir documentos a la items subcolección de nuestro carrito de documento con el fin de activar la función. Agregue dos elementos para asegurarse de que está probando la adición que ocurre en la función.

it("should sum the cost of their items", async () => {
    const db = firebase
        .initializeAdminApp({ projectId: REAL_FIREBASE_PROJECT_ID })
        .firestore();

    // Setup: Initialize cart
    const aliceCartRef = db.doc("carts/alice")
    await aliceCartRef.set({ ownerUID: "alice", totalPrice: 0 });

    //  Trigger calculateCart by adding items to the cart
    const aliceItemsRef = aliceCartRef.collection("items");
    await aliceItemsRef.doc("doc1").set({name: "nectarine", price: 2.99});
    await aliceItemsRef.doc("doc2").set({ name: "grapefruit", price: 6.99 });

    ...
    });
  });

Establecer expectativas de prueba

Uso onSnapshot() para registrar un oyente para cualquier cambio en el documento de compras. onSnapshot() devuelve una función que puede llamar para anular el registro del oyente.

Para esta prueba, agregue dos artículos que juntos cuestan $ 9.98. A continuación, compruebe si el carro tiene la esperada itemCount y totalPrice . Si es así, entonces la función hizo su trabajo.

it("should sum the cost of their items", (done) => {
    const db = firebase
        .initializeAdminApp({ projectId: REAL_FIREBASE_PROJECT_ID })
        .firestore();

    // Setup: Initialize cart
    const aliceCartRef = db.doc("carts/alice")
    aliceCartRef.set({ ownerUID: "alice", totalPrice: 0 });

    //  Trigger calculateCart by adding items to the cart
    const aliceItemsRef = aliceCartRef.collection("items");
    aliceItemsRef.doc("doc1").set({name: "nectarine", price: 2.99});
    aliceItemsRef.doc("doc2").set({ name: "grapefruit", price: 6.99 });
    
    // Listen for every update to the cart. Every time an item is added to
    // the cart's subcollection of items, the function updates `totalPrice`
    // and `itemCount` attributes on the cart.
    // Returns a function that can be called to unsubscribe the listener.
    await new Promise((resolve) => {
      const unsubscribe = aliceCartRef.onSnapshot(snap => {
        // If the function worked, these will be cart's final attributes.
        const expectedCount = 2;
        const expectedTotal = 9.98;
  
        // When the `itemCount`and `totalPrice` match the expectations for the
        // two items added, the promise resolves, and the test passes.
        if (snap.data().itemCount === expectedCount && snap.data().totalPrice == expectedTotal) {
          // Call the function returned by `onSnapshot` to unsubscribe from updates
          unsubscribe();
          resolve();
        };
      });
    });
   });
 });

17. Ejecute las pruebas

Es posible que aún tenga los emuladores ejecutándose de las pruebas anteriores. Si no es así, inicie los emuladores. Desde la línea de comando, ejecuta

$ firebase emulators:start --import=./seed

Abrir una nueva pestaña terminal (dejar los emuladores en ejecución) y se mueven en el directorio de funciones. Es posible que aún tenga esto abierto a partir de las pruebas de reglas de seguridad.

$ cd functions

Ahora ejecute las pruebas unitarias, debería ver 5 pruebas en total:

$ npm test

> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping cart creation
    ✓ can be created by the cart owner (82ms)

  shopping cart reads, updates, and deletes
    ✓ cart can be read by the cart owner (42ms)

  shopping cart items
    ✓ items can be read by the cart owner (40ms)
    ✓ items can be added by the cart owner

  adding an item to the cart recalculates the cart total. 
    1) should sum the cost of their items

  4 passing (2s)
  1 failing

Si observa la falla específica, parece ser un error de tiempo de espera. Esto se debe a que la prueba está esperando que la función se actualice correctamente, pero nunca lo hace. Ahora, estamos listos para escribir la función para satisfacer la prueba.

18. Escribe una función

Para solucionar esta prueba, es necesario actualizar la función en functions/index.js . Aunque parte de esta función está escrita, no está completa. Así es como se ve la función actualmente:

// Recalculates the total cost of a cart; triggered when there's a change
// to any items in a cart.
exports.calculateCart = functions
    .firestore.document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      console.log(`onWrite: ${change.after.ref.path}`);
      if (!change.after.exists) {
        // Ignore deletes
        return;
      }

      let totalPrice = 125.98;
      let itemCount = 8;
      try {
        
        const cartRef = db.collection("carts").doc(context.params.cartId);

        await cartRef.update({
          totalPrice,
          itemCount
        });
      } catch(err) {
      }
    });

La función es establecer correctamente la referencia de la compra, pero entonces en lugar de calcular los valores de totalPrice y itemCount , que los actualiza a los codificados.

Obtener e iterar a través del

items subcolección

Iniciar una nueva constante, itemsSnap , siendo el items subcolección. Luego, recorra todos los documentos de la colección.

// Recalculates the total cost of a cart; triggered when there's a change
// to any items in a cart.
exports.calculateCart = functions
    .firestore.document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      console.log(`onWrite: ${change.after.ref.path}`);
      if (!change.after.exists) {
        // Ignore deletes
        return;
      }


      try {
        let totalPrice = 125.98;
        let itemCount = 8;

        const cartRef = db.collection("carts").doc(context.params.cartId);
        // ADD LINES FROM HERE
        const itemsSnap = await cartRef.collection("items").get();

        itemsSnap.docs.forEach(item => {
          const itemData = item.data();
        })
        // TO HERE
       
        return cartRef.update({
          totalPrice,
          itemCount
        });
      } catch(err) {
      }
    });

Calcular totalPrice y itemCount

En primer lugar, vamos a inicializar los valores de totalPrice y itemCount a cero.

Luego, agregue la lógica a nuestro bloque de iteración. Primero, verifique que el artículo tenga un precio. Si el artículo no dispone de una cantidad especificada, dejarlo por defecto a 1 . A continuación, añadir la cantidad que el total acumulado de itemCount . Por último, añadir el precio del artículo multiplicado por la cantidad que el total acumulado de totalPrice :

// Recalculates the total cost of a cart; triggered when there's a change
// to any items in a cart.
exports.calculateCart = functions
    .firestore.document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      console.log(`onWrite: ${change.after.ref.path}`);
      if (!change.after.exists) {
        // Ignore deletes
        return;
      }

      try {
        // CHANGE THESE LINES
        let totalPrice = 0;
        let itemCount = 0;

        const cartRef = db.collection("carts").doc(context.params.cartId);
        const itemsSnap = await cartRef.collection("items").get();

        itemsSnap.docs.forEach(item => {
          const itemData = item.data();
          // ADD LINES FROM HERE
          if (itemData.price) {
            // If not specified, the quantity is 1
            const quantity = itemData.quantity ? itemData.quantity : 1;
            itemCount += quantity;
            totalPrice += (itemData.price * quantity);
          }
          // TO HERE
        })

        await cartRef.update({
          totalPrice,
          itemCount
        });
      } catch(err) {
      }
    });

También puede agregar registros para ayudar a depurar estados de éxito y error:

// Recalculates the total cost of a cart; triggered when there's a change
// to any items in a cart.
exports.calculateCart = functions
    .firestore.document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      console.log(`onWrite: ${change.after.ref.path}`);
      if (!change.after.exists) {
        // Ignore deletes
        return;
      }

      let totalPrice = 0;
      let itemCount = 0;
      try {
        const cartRef = db.collection("carts").doc(context.params.cartId);
        const itemsSnap = await cartRef.collection("items").get();

        itemsSnap.docs.forEach(item => {
          const itemData = item.data();
          if (itemData.price) {
            // If not specified, the quantity is 1
            const quantity = (itemData.quantity) ? itemData.quantity : 1;
            itemCount += quantity;
            totalPrice += (itemData.price * quantity);
          }
        });

        await cartRef.update({
          totalPrice,
          itemCount
        });

        // OPTIONAL LOGGING HERE
        console.log("Cart total successfully recalculated: ", totalPrice);
      } catch(err) {
        // OPTIONAL LOGGING HERE
        console.warn("update error", err);
      }
    });

19. Vuelva a ejecutar las pruebas

En la línea de comando, asegúrese de que los emuladores aún se estén ejecutando y vuelva a ejecutar las pruebas. No es necesario reiniciar los emuladores porque recogen los cambios en las funciones automáticamente. Debería ver pasar todas las pruebas:

$ npm test
> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping cart creation
    ✓ can be created by the cart owner (306ms)

  shopping cart reads, updates, and deletes
    ✓ cart can be read by the cart owner (59ms)

  shopping cart items
    ✓ items can be read by the cart owner
    ✓ items can be added by the cart owner

  adding an item to the cart recalculates the cart total. 
    ✓ should sum the cost of their items (800ms)


  5 passing (1s)

¡Buen trabajo!

20. Pruébelo con la interfaz de usuario de Storefront

Para la prueba final, el retorno a la aplicación web ( http: // localhost: 5000 / ) y añadir un elemento a la cesta.

69ad26cee520bf24.png

Confirme que el carrito se actualice con el total correcto. ¡Fantástico!

Resumen

Pasó por un caso de prueba complejo entre Cloud Functions para Firebase y Cloud Firestore. Escribiste una función en la nube para aprobar la prueba. ¡También confirmó que la nueva funcionalidad está funcionando en la interfaz de usuario! Hiciste todo esto localmente, ejecutando los emuladores en tu propia máquina.

También ha creado un cliente web que se ejecuta contra los emuladores locales, ha adaptado las reglas de seguridad para proteger los datos y ha probado las reglas de seguridad con los emuladores locales.

c6a7aeb91fe97a64.gif