O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Desenvolvimento local com o Firebase Emulator Suite

Ferramentas de back-end sem servidor, como Cloud Firestore e Cloud Functions, são muito fáceis de usar, mas podem ser difíceis de testar. O Firebase Local Emulator Suite permite que você execute versões locais desses serviços em sua máquina de desenvolvimento para que você possa desenvolver seu aplicativo com rapidez e segurança.

Pré-requisitos

  • Um editor simples, como Visual Studio Code, Atom ou Sublime Text
  • Node.js 10.0.0 ou superior (para instalar Node.js, uso nvm , para verificar a sua versão, execute node --version )
  • Java 7 ou superior (para instalar o Java usar estas instruções , para verificar a sua versão, execute java -version )

O que você vai fazer

Neste codelab, você executará e depurará um aplicativo de compras online simples que é alimentado por vários serviços do Firebase:

  • Nuvem Firestore: a, sem servidor, banco de dados NoSQL globalmente escalável com capacidades em tempo real.
  • Funções nuvem: um código de backend sem servidor que é executado em resposta a eventos ou solicitações HTTP.
  • Autenticação Firebase: um serviço de autenticação gerenciado que integra com outros produtos Firebase.
  • Firebase de hospedagem: rápido e seguro hospedagem para aplicações web.

Você conectará o aplicativo ao Emulator Suite para permitir o desenvolvimento local.

2589e2f95b74fa88.png

Você também aprenderá a:

  • Como conectar seu aplicativo ao Emulator Suite e como os vários emuladores são conectados.
  • Como as regras de segurança do Firebase funcionam e como testá-las em um emulador local.
  • Como escrever uma função do Firebase que é acionada por eventos do Firestore e como escrever testes de integração que são executados no Emulator Suite.

Obtenha o código-fonte

Neste codelab, você começa com uma versão do exemplo The Fire Store que está quase completa, então a primeira coisa que você precisa fazer é clonar o código-fonte:

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

Em seguida, vá para o diretório do codelab, onde trabalhará com o restante deste codelab:

$ cd emulators-codelab/codelab-initial-state

Agora, instale as dependências para que você possa executar o código. Se você estiver em uma conexão de Internet mais lenta, isso pode levar um ou dois minutos:

# Move into the functions directory
$ cd functions

# Install dependencies
$ npm install

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

Obtenha a Firebase CLI

O Emulator Suite faz parte da Firebase CLI (interface de linha de comando) que pode ser instalada em sua máquina com o seguinte comando:

$ npm install -g firebase-tools

Em seguida, confirme se você tem a versão mais recente da CLI. Este codelab deve funcionar com a versão 9.0.0 ou superior, mas as versões posteriores incluem mais correções de bugs.

$ firebase --version
9.6.0

Conecte-se ao seu projeto Firebase

Se você não tem um projeto Firebase, na consola Firebase , criar um novo projeto Firebase. Anote o ID do projeto que você escolher, pois você precisará dele mais tarde.

Agora precisamos conectar este código ao seu projeto Firebase. Primeiro execute o seguinte comando para fazer login na Firebase CLI:

$ firebase login

Em seguida, execute o seguinte comando para criar um alias de projeto. Substitua $YOUR_PROJECT_ID com o ID do seu projeto Firebase.

$ firebase use $YOUR_PROJECT_ID

Agora você está pronto para executar o aplicativo!

Nesta seção, você executará o aplicativo localmente. Isso significa que é hora de inicializar o Emulator Suite.

Inicie os emuladores

De dentro do diretório de origem do codelab, execute o seguinte comando para iniciar os emuladores:

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

Você deve ver alguma saída como esta:

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

Depois de ver os Todos os emuladores iniciados mensagem, o aplicativo está pronto para uso.

Conecte o aplicativo da web aos emuladores

Com base na tabela nos logs, podemos ver que o emulador Nuvem Firestore está escutando na porta 8080 eo emulador de autenticação está escutando na porta 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                             │
└────────────────┴────────────────┴─────────────────────────────────┘

Vamos conectar seu código de front-end ao emulador, em vez de à produção. Abra o public/js/homepage.js arquivo e encontrar o onDocumentReady função. Podemos ver que o código acessa as instâncias padrão do Firestore e Auth:

public / js / homepage.js

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

Vamos atualizar os db e auth objetos para apontar para os emuladores locais:

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);
  }

Agora, quando o aplicativo está sendo executado no host local (servido pelo emulador do Hosting), o cliente Firestore também aponta para o emulador local em vez de para um banco de dados de produção.

Abra o EmulatorUI

No navegador da web, acesse http: // localhost: 4000 / . Você deve ver a IU do Emulator Suite.

Tela inicial da IU do emuladores

Clique para ver a IU do emulador Firestore. O items coleção já contém dados por causa dos dados importados com o --import bandeira.

4ef88d0148405d36.png

Abra o aplicativo

No navegador da web, acesse http: // localhost: 5000 e você deve ver a loja fogo rodando localmente na sua máquina!

939f87946bac2ee4.png

Use o aplicativo

Escolha um item na página inicial e clique em Adicionar ao carrinho. Infelizmente, você encontrará o seguinte erro:

a11bd59933a8e885.png

Vamos consertar esse bug! Como tudo está rodando nos emuladores, podemos experimentar e não nos preocupar em afetar os dados reais.

Encontre o bug

Ok, vamos dar uma olhada no console do desenvolvedor Chrome. Imprensa Control+Shift+J (Windows, Linux, o Chrome OS) ou Command+Option+J (Mac) para ver o erro no console:

74c45df55291dab1.png

Parece que houve algum erro no addToCart método, vamos dar uma olhada nisso. Onde é que vamos tentar o acesso algo chamado uid nesse método e por que seria null ? Agora o método se parece com isso em 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);
  }

Aha! Não estamos conectados ao aplicativo. De acordo com os documentos de autenticação Firebase , quando não estiver conectado, auth.currentUser é null . Vamos adicionar uma verificação para isso:

public / js / homepage.js

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

    // ...
  }

Teste o aplicativo

Agora, atualize a página e clique em Adicionar ao carrinho. Você deve obter um erro melhor desta vez:

c65f6c05588133f7.png

Mas se você clicar em Entrar na barra de ferramentas superior e, em seguida, clique em Adicionar ao carrinho de novo, você vai ver que o carrinho é atualizado.

No entanto, não parece que os números estejam corretos:

239f26f02f959eef.png

Não se preocupe, corrigiremos esse bug em breve. Primeiro, vamos nos aprofundar no que realmente aconteceu quando você adicionou um item ao carrinho.

Clicando Adicionar ao carrinho arranca uma cadeia de eventos que envolvem vários emuladores. Nos registros da Firebase CLI, você deve ver algo como as seguintes mensagens depois de adicionar um item ao carrinho:

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

Houve quatro eventos principais que ocorreram para produzir esses logs e a atualização da IU que você observou:

68c9323f2ad10f7a.png

1) Gravação Firestore - Cliente

Um novo documento é adicionado à coleção Firestore /carts/{cartId}/items/{itemId}/ . Você pode ver este código no addToCart função 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) Cloud Function acionado

As Nuvem Função calculateCart escutas para eventos escrita (criar, atualizar ou excluir) que acontecem ao carrinho itens usando a onWrite gatilho, que você pode ver em functions/index.js :

functions / 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) Firestore Write - Admin

O calculateCart função lê todos os itens no carrinho e adiciona-se a quantidade total e preço, em seguida, ele atualiza o documento "carrinho" com os novos totais (ver cartRef.update(...) acima).

4) Leitura Firestore - Cliente

O front-end da web está inscrito para receber atualizações sobre alterações no carrinho. Ela recebe uma atualização em tempo real após a Função Nuvem escreve os novos totais e atualiza a interface do usuário, como você pode ver na public/js/homepage.js :

public / js / homepage.js

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

Recapitular

Bom trabalho! Você acabou de configurar um aplicativo totalmente local que usa três emuladores Firebase diferentes para testes totalmente locais.

db82eef1706c9058.gif

Mas espere, tem mais! Na próxima seção, você aprenderá:

  • Como escrever testes de unidade que usam os emuladores do Firebase.
  • Como usar os emuladores do Firebase para depurar suas regras de segurança.

Nosso aplicativo da web lê e grava dados, mas até agora não nos preocupamos muito com a segurança. O Cloud Firestore usa um sistema chamado "Regras de segurança" para declarar quem tem acesso para ler e gravar dados. O Emulator Suite é uma ótima maneira de criar um protótipo dessas regras.

No editor, abra o arquivo emulators-codelab/codelab-initial-state/firestore.rules . Você verá que temos três seções principais em nossas regras:

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;
    }
  }
}

No momento, qualquer pessoa pode ler e gravar dados em nosso banco de dados! Queremos ter certeza de que apenas operações válidas sejam transmitidas e que não vazemos nenhuma informação sensível.

Durante este codelab, seguindo o Princípio do Menor Privilégio, bloquearemos todos os documentos e gradualmente adicionaremos o acesso até que todos os usuários tenham todo o acesso de que precisam, mas não mais. Vamos atualizar as duas primeiras regras para negar o acesso, definindo a condição 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;
    }
  }
}

Inicie os emuladores

Na linha de comando, certifique-se que você está em emulators-codelab/codelab-initial-state/ . Você ainda pode ter os emuladores em execução das etapas anteriores. Caso contrário, reinicie os emuladores:

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

Depois que os emuladores estiverem em execução, você pode executar testes localmente neles.

Execute os testes

Na linha de comando em uma nova aba de terminal a partir do diretório emulators-codelab/codelab-initial-state/

Primeiro vá para o diretório de funções (ficaremos aqui pelo restante do codelab):

$ cd functions

Agora execute os testes mocha no diretório de funções e role para o topo da saída:

# 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

No momento, temos quatro falhas. Conforme você constrói o arquivo de regras, pode medir o progresso observando a aprovação de mais testes.

As duas primeiras falhas são os testes do "carrinho de compras" que testam que:

  • Os usuários só podem criar e atualizar seus próprios carrinhos
  • Os usuários só podem ler seus próprios carrinhos

functions / 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());
  });

Vamos fazer esses testes passarem. No editor, abra o arquivo de regras de segurança, firestore.rules , e atualizar as declarações dentro 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;
    }

    // ...
  }
}

Essas regras agora permitem apenas acesso de leitura e gravação pelo proprietário do carrinho.

Para verificar os dados de entrada e a autenticação do usuário, usamos dois objetos que estão disponíveis no contexto de cada regra:

  • O request de objecto contém dados e metadados sobre a operação que está a ser tentada.
  • Se um projeto Firebase está usando autenticação Firebase , o request.auth objeto descreve o usuário que está fazendo a solicitação.

O emulador Suíte atualiza automaticamente as regras sempre que firestore.rules é salvo. Você pode confirmar que o emulador tem o atualizou as regras de olhar na guia executar o emulador para a mensagem Rules updated :

5680da418b420226.png

Execute os testes novamente e verifique se os dois primeiros testes passaram agora:

$ 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

Bom trabalho! Agora você garantiu o acesso aos carrinhos de compras. Vamos passar para o próximo teste com falha.

No momento, embora os proprietários de carrinhos leiam e escrevam em seus carrinhos, eles não podem ler ou escrever itens individuais em seus carrinhos. Isso porque, enquanto os proprietários têm acesso ao carro de documentos, eles não têm acesso a itens subcoleção do carrinho.

Este é um estado interrompido para os usuários.

Voltar à web UI, que está sendo executado em http://localhost:5000, e tentar acrescentar algo ao seu carrinho. Você começa uma Permission Denied erro, visível a partir do console de depuração, porque nós ainda não tenham acesso aos usuários documentos criados na items subcoleção.

Esses dois testes confirmam que os usuários só podem adicionar itens ou ler itens de seu próprio carrinho:

  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
    }));
  });

Portanto, podemos escrever uma regra que permite o acesso se o usuário atual tiver o mesmo UID que o ownerUID no documento do carrinho. Como não há necessidade de especificar regras diferentes para create, update, delete , você pode usar uma write regra, que se aplica a todas as solicitações que os dados Modificar.

Atualize a regra para os documentos na subcoleção de itens. O get no condicional está lendo um valor a partir de Firestore, neste caso, o ownerUID no carrinho documento.

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;
    }

    // ...
  }
}

Agora podemos refazer o teste. Role até o topo da saída e verifique se mais testes passam:

$ 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

Agradável! Agora todos os nossos testes passam. Temos um teste pendente, mas chegaremos a ele em algumas etapas.

Voltar à front end web ( http: // localhost: 5000 ) e adicionar um item ao carrinho. Esta é uma etapa importante para confirmar se nossos testes e regras correspondem à funcionalidade exigida pelo cliente. (Lembre-se de que a última vez que experimentamos a interface do usuário, os usuários não conseguiram adicionar itens ao carrinho!)

69ad26cee520bf24.png

O cliente recarrega automaticamente as regras quando os firestore.rules é salvo. Portanto, tente adicionar algo ao carrinho.

Recapitular

Bom trabalho! Você acabou de melhorar a segurança do seu aplicativo, uma etapa essencial para deixá-lo pronto para produção! Se este fosse um aplicativo de produção, poderíamos adicionar esses testes ao nosso pipeline de integração contínua. Isso nos daria a confiança de que os dados do nosso carrinho de compras terão esses controles de acesso, mesmo se outros estiverem modificando as regras.

ba5440b193e75967.gif

Mas espere, tem mais!

se você continuar, você aprenderá:

  • Como escrever uma função acionada por um evento Firestore
  • Como criar testes que funcionam em vários emuladores

Até agora, nos concentramos no front-end de nosso aplicativo da web e nas regras de segurança do Firestore. Mas este aplicativo também usa Cloud Functions para manter o carrinho do usuário atualizado, então queremos testar esse código também.

O Emulator Suite torna muito fácil testar o Cloud Functions, até mesmo funções que usam o Cloud Firestore e outros serviços.

No editor, abrir os emulators-codelab/codelab-initial-state/functions/test.js arquivo e de rolagem para o último teste no arquivo. No momento, está marcado como pendente:

//  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 ativar o teste, remova .skip , por isso parece com isso:

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

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

Em seguida, encontrar o REAL_FIREBASE_PROJECT_ID variável no topo do arquivo e alterá-lo ao seu real Firebase Projeto ID .:

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

Se você esqueceu o ID do projeto, pode encontrar o ID do projeto Firebase nas configurações do projeto no console do Firebase:

d6d0429b700d2b21.png

Como esse teste valida a interação entre o Cloud Firestore e o Cloud Functions, ele envolve mais configuração do que os testes nos codelabs anteriores. Vamos examinar este teste e ter uma ideia do que ele espera.

Crie um carrinho

O Cloud Functions é executado em um ambiente de servidor confiável e pode usar a autenticação da conta de serviço usada pelo Admin SDK. Primeiro, você inicializar um aplicativo usando initializeAdminApp vez de initializeApp . Em seguida, crie um DocumentReference para o carrinho estaremos adicionando itens para e inicializar o carrinho:

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 });

    ...
  });

Acione a função

Em seguida, adicionar documentos ao items subcoleção de nosso carrinho de documento, a fim de acionar a função. Adicione dois itens para certificar-se de que está testando a adição que acontece na função.

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 });

    ...
    });
  });

Defina as expectativas de teste

Use onSnapshot() para registrar um ouvinte para quaisquer alterações no carrinho documento. onSnapshot() retorna uma função que você pode chamar para cancelar o registro do ouvinte.

Para este teste, adicione dois itens que juntos custam $ 9,98. Em seguida, verifique se o carro tem o esperado itemCount e totalPrice . Nesse caso, a função fez seu trabalho.

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();
        };
      });
    });
   });
 });

Você ainda pode ter os emuladores em execução nos testes anteriores. Caso contrário, inicie os emuladores. Na linha de comando, execute

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

Abra uma nova aba terminal (deixar os emuladores em execução) e mova para o diretório funções. Você ainda pode estar aberto para os testes de regras de segurança.

$ cd functions

Agora execute os testes de unidade, você deve ver 5 testes no 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

Se você observar a falha específica, parece ser um erro de tempo limite. Isso ocorre porque o teste está aguardando a atualização correta da função, mas nunca o faz. Agora, estamos prontos para escrever a função para satisfazer o teste.

Para corrigir este teste, você precisa atualizar a função em functions/index.js . Embora parte dessa função seja escrita, ela não está completa. Esta é a aparência atual da função:

// 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) {
      }
    });

A função é definir corretamente a referência carrinho, mas, em seguida, em vez de calcular os valores de totalPrice e itemCount , ele atualiza-los para aqueles codificados.

Busque e itere através do

items subcoleção

Inicializar uma nova constante, itemsSnap , para ser a items subcoleção. Em seguida, itere por todos os documentos da coleção.

// 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) {
      }
    });

Calcule totalPrice e itemCount

Primeiro, vamos inicializar os valores de totalPrice e itemCount a zero.

Em seguida, adicione a lógica ao nosso bloco de iteração. Primeiro, verifique se o item tem um preço. Se o item não tiver uma quantidade específica, deixe-padrão para 1 . Em seguida, adicione a quantidade à execução total da itemCount . Por último, acrescente o preço do item, multiplicado pela quantidade à execução total da 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) {
      }
    });

Você também pode adicionar registros para ajudar a depurar estados de sucesso e erro:

// 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);
      }
    });

Na linha de comando, certifique-se de que os emuladores ainda estejam em execução e execute novamente os testes. Você não precisa reiniciar os emuladores porque eles captam as alterações nas funções automaticamente. Você deverá ver todos os testes passarem:

$ 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)

Bom trabalho!

Para o teste final, retorno para o aplicativo web ( http: // localhost: 5000 / ) e adicionar um item ao carrinho.

69ad26cee520bf24.png

Confirme se o carrinho é atualizado com o total correto. Fantástico!

Recapitular

Você percorreu um caso de teste complexo entre o Cloud Functions for Firebase e o Cloud Firestore. Você escreveu um Cloud Function para fazer o teste passar. Você também confirmou que a nova funcionalidade está funcionando na IU! Você fez tudo isso localmente, executando os emuladores em sua própria máquina.

Você também criou um cliente da Web que está sendo executado nos emuladores locais, regras de segurança personalizadas para proteger os dados e testou as regras de segurança usando os emuladores locais.

c6a7aeb91fe97a64.gif