1. Antes de começar
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 o Node.js, use nvm , para verificar sua versão, execute
node --version
) - Java 7 ou superior (para instalar o Java use estas instruções , para verificar sua versão, execute
java -version
)
O que você vai fazer
Neste codelab, você executará e depurará um aplicativo simples de compras on-line que é alimentado por vários serviços do Firebase:
- Cloud Firestore: um banco de dados NoSQL globalmente escalável e sem servidor com recursos em tempo real.
- Cloud Functions : um código de back-end sem servidor que é executado em resposta a eventos ou solicitações HTTP.
- Firebase Authentication : um serviço de autenticação gerenciado que se integra a outros produtos Firebase.
- Firebase Hosting : hospedagem rápida e segura para aplicativos da web.
Você conectará o aplicativo ao Emulator Suite para habilitar o desenvolvimento local.
Você também aprenderá a:
- Como conectar seu aplicativo ao Emulator Suite e como os vários emuladores estão conectados.
- Como as regras de segurança do Firebase funcionam e como testar as regras de segurança do Firestore em um emulador local.
- Como escrever uma função do Firebase que é acionada por eventos do Firestore e como escrever testes de integração executados no Emulator Suite.
2. Configurar
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 você trabalhará pelo 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 minuto ou dois:
# Move into the functions directory
$ cd functions
# Install dependencies
$ npm install
# Move back into the previous directory
$ cd ../
Obter a CLI do Firebase
O Emulator Suite faz parte do Firebase CLI (interface de linha de comando) que pode ser instalado 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 do Firebase
Se você não tiver um projeto do Firebase, no console do Firebase , crie um novo projeto do Firebase. Anote o ID do projeto escolhido, você precisará dele mais tarde.
Agora precisamos conectar este código ao seu projeto do Firebase. Primeiro, execute o seguinte comando para fazer login na Firebase CLI:
$ firebase login
Em seguida, execute o comando a seguir para criar um alias de projeto. Substitua $YOUR_PROJECT_ID
pelo ID do seu projeto do Firebase.
$ firebase use $YOUR_PROJECT_ID
Agora você está pronto para executar o aplicativo!
3. Execute os emuladores
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 a mensagem Todos os emuladores iniciados , o aplicativo estará pronto para uso.
Conecte o aplicativo Web aos emuladores
Com base na tabela nos logs, podemos ver que o emulador do Cloud Firestore está escutando na porta 8080
e o emulador Authentication 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 front-end ao emulador, e não à produção. Abra o arquivo public/js/homepage.js
e localize a função onDocumentReady
. 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 objetos db
e auth
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, e não para um banco de dados de produção.
Abra o EmulatorUI
No navegador da Web, navegue até http://localhost:4000/ . Você deve ver a interface do usuário do Emulator Suite.
Clique para ver a IU do Firestore Emulator. A coleção de items
já contém dados devido aos dados importados com o sinalizador --import
.
4. Execute o aplicativo
Abra o aplicativo
No seu navegador da web, navegue até http://localhost:5000 e você deverá ver The Fire Store rodando localmente em sua máquina!
Use o aplicativo
Escolha um item na página inicial e clique em Adicionar ao carrinho . Infelizmente, você encontrará o seguinte erro:
Vamos corrigir esse bug! Como tudo está rodando nos emuladores, podemos experimentar e não nos preocupar em afetar os dados reais.
5. Depure o aplicativo
Encontre o erro
Ok, vamos olhar no console do desenvolvedor do Chrome. Pressione Control+Shift+J
(Windows, Linux, Chrome OS) ou Command+Option+J
(Mac) para ver o erro no console:
Parece que houve algum erro no método addToCart
, vamos dar uma olhada nisso. Onde tentamos acessar algo chamado uid
nesse método e por que seria null
? No momento, 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);
}
Ah! Não estamos conectados ao aplicativo. De acordo com os documentos do Firebase Authentication , quando não estamos conectados, 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:
Mas se você clicar em Entrar na barra de ferramentas superior e clicar em Adicionar ao carrinho novamente, verá que o carrinho está atualizado.
No entanto, não parece que os números estão corretos:
Não se preocupe, vamos corrigir esse bug em breve. Primeiro, vamos nos aprofundar no que realmente aconteceu quando você adicionou um item ao seu carrinho.
6. Acionadores de funções locais
Clicar em Adicionar ao carrinho inicia uma cadeia de eventos que envolve vários emuladores. Nos registros da Firebase CLI, você verá algo como as seguintes mensagens depois de adicionar um item ao seu carrinho:
i functions: Beginning execution of "calculateCart" i functions: Finished "calculateCart" in ~1s
Ocorreram quatro eventos principais para produzir esses logs e a atualização da interface do usuário que você observou:
1) Gravação do Firestore - Cliente
Um novo documento é adicionado à coleção do Firestore /carts/{cartId}/items/{itemId}/
. Você pode ver este código na função addToCart
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) Função de nuvem acionada
A Função do Cloud calculateCart
detecta quaisquer eventos de gravação (criar, atualizar ou excluir) que ocorram nos itens do carrinho usando o acionador onWrite
, que você pode ver em functions/index.js
:
funções/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) Gravação do Firestore - Administrador
A função calculateCart
lê todos os itens no carrinho e soma a quantidade total e o preço, então atualiza o documento "cart" com os novos totais (veja cartRef.update(...)
acima).
4) Leitura do Firestore - Cliente
O front-end da web está inscrito para receber atualizações sobre alterações no carrinho. Ele recebe uma atualização em tempo real depois que o Cloud Function grava os novos totais e atualiza a IU, como você pode ver em 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 diferentes do Firebase para testes totalmente locais.
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.
7. Crie regras de segurança personalizadas para seu aplicativo
Nosso aplicativo da web lê e grava dados, mas até agora não nos preocupamos 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 prototipar essas 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;
}
}
}
Agora qualquer um pode ler e gravar dados em nosso banco de dados! Queremos garantir que apenas as operações válidas passem e que não vazemos nenhuma informação sensível.
Durante este codelab, seguindo o Princípio do Mínimo Privilégio, bloquearemos todos os documentos e adicionaremos acesso gradualmente 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 acesso definindo a condição como 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. Execute os emuladores e testes
Inicie os emuladores
Na linha de comando, verifique se você está em emulators-codelab/codelab-initial-state/
. Você ainda pode ter os emuladores em execução nas etapas anteriores. Caso contrário, inicie os emuladores novamente:
$ firebase emulators:start --import=./seed
Depois que os emuladores estiverem em execução, você poderá executar testes localmente neles.
Execute os testes
Na linha de comando em uma nova guia de terminal 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 do mocha no diretório de funções e role até 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
Agora temos quatro falhas. À medida que você cria o arquivo de regras, pode medir o progresso observando mais testes passarem.
9. Acesso seguro ao carrinho
As duas primeiras falhas são os testes de "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
funções/teste.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 atualize as instruções em match /carts/{cartID}
:
regras do firestore
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 recebidos e a autenticação do usuário, usamos dois objetos que estão disponíveis no contexto de cada regra:
- O objeto de
request
contém dados e metadados sobre a operação que está sendo tentada. - Se um projeto do Firebase estiver usando o Firebase Authentication , o objeto
request.auth
descreverá o usuário que está fazendo a solicitação.
10. Acesso ao carrinho de teste
O Emulator Suite atualiza automaticamente as regras sempre que firestore.rules
é salvo. Você pode confirmar que o emulador atualizou as regras procurando na guia que executa o emulador a mensagem Rules updated
:
Execute novamente os testes e verifique se os dois primeiros testes agora 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 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ê tem acesso seguro aos carrinhos de compras. Vamos passar para o próximo teste com falha.
11. Verifique o fluxo "Adicionar ao carrinho" na interface do usuário
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, embora os proprietários tenham acesso ao documento do carrinho, eles não têm acesso à subcoleção de itens do carrinho .
Este é um estado quebrado para os usuários.
Retorne à interface do usuário da web, que está sendo executada em http://localhost:5000,
e tente adicionar algo ao seu carrinho. Você recebe um erro Permission Denied
, visível no console de depuração, porque ainda não concedemos aos usuários acesso aos documentos criados na subcoleção de items
.
12. Permitir o acesso aos itens do carrinho
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
}));
});
Assim, podemos escrever uma regra que permita 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 regra de write
, que se aplica a todas as solicitações que modificam dados.
Atualize a regra para os documentos na subcoleção de itens. O get
na condicional está lendo um valor do Firestore – neste caso, o ownerUID
no documento do carrinho.
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. Acesso aos itens do carrinho de teste
Agora podemos executar novamente 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 isso em algumas etapas.
14. Verifique o fluxo "adicionar ao carrinho" novamente
Retorne ao front-end da web ( http://localhost:5000 ) e adicione um item ao carrinho. Este é um passo importante para confirmar que nossos testes e regras correspondem à funcionalidade exigida pelo cliente. (Lembre-se de que da última vez que testamos a interface do usuário, os usuários não conseguiram adicionar itens ao carrinho!)
O cliente recarrega automaticamente as regras quando o firestore.rules
é salvo. Então, tente adicionar algo ao carrinho.
Recapitular
Bom trabalho! Você acabou de melhorar a segurança do seu aplicativo, uma etapa essencial para prepará-lo para a 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 confiança no futuro de que nossos dados de carrinho de compras terão esses controles de acesso, mesmo que outros estejam modificando as regras.
Mas espere, tem mais!
se você continuar, você aprenderá:
- Como escrever uma função acionada por um evento do Firestore
- Como criar testes que funcionam em vários emuladores
15. Configure os testes do Cloud Functions
Até agora, nos concentramos no front-end do nosso aplicativo da Web e nas regras de segurança do Firestore. Mas este aplicativo também usa o Cloud Functions para manter o carrinho do usuário atualizado, então queremos testar esse código também.
O pacote do emulador facilita o teste do Cloud Functions, até mesmo funções que usam o Cloud Firestore e outros serviços.
No editor, abra o emulators-codelab/codelab-initial-state/functions/test.js
e role até 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 habilitar o teste, remova .skip
, para que fique assim:
describe("adding an item to the cart recalculates the cart total. ", () => {
// ...
it("should sum the cost of their items", async () => {
...
});
});
Em seguida, encontre a variável REAL_FIREBASE_PROJECT_ID
na parte superior do arquivo e altere-a para o ID real do projeto do Firebase:
// CHANGE THIS LINE
const REAL_FIREBASE_PROJECT_ID = "changeme";
Se você esqueceu o ID do projeto, pode encontrá-lo nas configurações do projeto no Firebase Console:
16. Percorra os testes do Functions
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 percorrer este teste e ter uma ideia do que ele espera.
Criar um carrinho
O Cloud Functions é executado em um ambiente de servidor confiável e pode usar a autenticação de conta de serviço usada pelo Admin SDK . Primeiro, você inicializa um aplicativo usando initializeAdminApp
em vez de initializeApp
. Em seguida, você cria um DocumentReference para o carrinho ao qual adicionaremos itens e inicializa 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 });
...
});
Acionar a função
Em seguida, adicione documentos à subcoleção de items
do nosso documento de carrinho para 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 });
...
});
});
Definir expectativas de teste
Use onSnapshot()
para registrar um ouvinte para quaisquer alterações no documento do carrinho. onSnapshot()
retorna uma função que você pode chamar para cancelar o registro do ouvinte.
Para este teste, adicione dois itens que juntos custam US$ 9,98. Em seguida, verifique se o carrinho tem o itemCount
e totalPrice
esperados. Se sim, então 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();
};
});
});
});
});
17. Execute os testes
Você ainda pode ter os emuladores em execução dos testes anteriores. Caso contrário, inicie os emuladores. Na linha de comando, execute
$ firebase emulators:start --import=./seed
Abra uma nova guia de terminal (deixe os emuladores em execução) e vá para o diretório de funções. Você ainda pode ter isso aberto nos testes de regras de segurança.
$ cd functions
Agora execute os testes de unidade, você deve ver 5 testes totais:
$ 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 isso nunca acontece. Agora, estamos prontos para escrever a função para satisfazer o teste.
18. Escreva uma função
Para corrigir esse teste, você precisa atualizar a função em functions/index.js
. Embora parte desta função esteja escrita, ela não está completa. Esta é a aparência da função atualmente:
// 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 está definindo corretamente a referência do carrinho, mas, em vez de calcular os valores de totalPrice
e itemCount
, ela os atualiza para valores codificados.
Busque e itere através do
subcoleção de items
Inicialize uma nova constante, itemsSnap
, para ser a subcoleção de items
. Em seguida, percorra 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) {
}
});
Calcular totalPrice e itemCount
Primeiro, vamos inicializar os valores de totalPrice
e itemCount
para 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 especificada, deixe como padrão 1
. Em seguida, adicione a quantidade ao total em execução de itemCount
. Por fim, adicione o preço do item multiplicado pela quantidade ao total atual 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) {
}
});
Você também pode adicionar registro 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);
}
});
19. Execute novamente os testes
Na linha de comando, verifique se os emuladores ainda estão em execução e execute novamente os testes. Você não precisa reiniciar os emuladores porque eles pegam as alterações nas funções automaticamente. Você deve 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!
20. Experimente usando a interface do Storefront
Para o teste final, retorne ao aplicativo da web ( http://localhost:5000/ ) e adicione um item ao carrinho.
Confirme se o carrinho é atualizado com o total correto. Fantástico!
Recapitular
Você passou por um caso de teste complexo entre o Cloud Functions para Firebase e o Cloud Firestore. Você escreveu uma Função do Cloud para passar no teste. Você também confirmou que a nova funcionalidade está funcionando na interface do usuário! Você fez tudo isso localmente, executando os emuladores em sua própria máquina.
Você também criou um cliente Web que está sendo executado nos emuladores locais, personalizou as regras de segurança para proteger os dados e testou as regras de segurança usando os emuladores locais.