Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@botchris/grpc-web-mock) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

GRPC-Web Mock

Allows to mock GRPC-Web responses in pure Typescript. Useful for mocking GRPC-Web APIs in E2E tests.

Motivation

GRPC-Web is a protocol that allows to use GRPC services in the browser. It is implemented in many languages, including Typescript. However, testing GRPC-Web services is not as easy as testing REST APIs (you usually mock a bunch of JSON responses, and you are ready to go).

This library aims to make E2E tests easier by simulating the part of the GRPC-Web server that is responsible for sending responses to a web-client (see wiring format for further details). It allows to mock GRPC-Web responses in pure Typescript, without the need to run a real GRPC server. Simply create a new ProtocolBuffer message, and pass it to one of the mocking functions to get a valid GRPC-Web response as it would be sent by a real GRPC server.

However, this library does not mock the GRPC-Web client or server interfaces, so you still need to simulate HTTP networking. Below you can find an example of how to use this library with Cypress, which provides a nice API for intercepting HTTP requests and mocking responses.

Cypress Example

import * as grpcMock from "grpc-web-mock";
import { ListOrdersResponse, Order } from "./gen/protos/orders_pb";

describe("Orders Service", () => {
    it("should returns a list of orders", () => {
        // Intercept Backend request and inject a mocked grpc-web response.
        cy.intercept(
            {
                method: "POST",
                pathname: "/shopping.api.v1.OrdersService/ListOrders",
            },
            (req) => {
                // 1. Mock a Protobuffer response object as it would be 
                // returned by the real GRPC server.
                const res = new ListOrdersResponse();
                const orders = [] as Order[];
                
                for (let i = 0; i < 10; i++) {
                    const order = new Order();
                    order.setId(i);
                    order.setPrice(1000);
                    order.setQuantity(1);
                    orders.push(order);
                }
                
                res.setOrdersList(orders);

                // 2. Change response for a mocked "grpc-web-text" response.
                req.reply(grpcMock.ToTextResponse(res));
            }
        ).as("@listOrders");

        cy.visit("/orders/list");
        cy.wait("@listOrders")
        cy.get("[data-cy=orders-table]").find("tr").should("have.length", 10);
    });
});

Development

Install dependencies

yarn install

Run tests

yarn test