Merge pull request #10 from cloudnc/feat/mock-route-at-context-level

feat(playwright): mock route at context level

Author: maxime1992

.github/workflows/main.yml

@@ -9,15 +9,15 @@ jobs:
   build:
     # Machine environment:
     # https://help.github.com/en/articles/software-in-virtual-environments-for-github-actions#ubuntu-1804-lts
-    # We specify the Node.js version manually below, and use versioned Chrome from Puppeteer.
-    runs-on: ubuntu-18.04
+    # We specify the Node.js version manually below
+    runs-on: ubuntu-22.04
 
     steps:
-      - uses: actions/checkout@v1
-      - name: Use Node.js 16.14.2
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - name: Use Node.js 18.4.0
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.14.2
+          node-version: 18.4.0
       - name: Install dependencies
         run: yarn --frozen-lockfile --non-interactive --no-progress
       - name: Format check

.nvmrc

@@ -1 +1 @@
-v16.14.2
+v18.4.0

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "htmlWhitespaceSensitivity": "ignore",
+  "tabWidth": 2
+}

package.json

@@ -14,12 +14,12 @@
   "dependencies": {
     "@grpc/grpc-js": "1.6.10",
     "@improbable-eng/grpc-web": "0.15.0",
-    "@playwright/test": "1.22.2",
+    "@playwright/test": "1.35.1",
     "google-protobuf": "3.14.0",
-    "playwright-core": "1.22.2"
+    "playwright-core": "1.35.1"
   },
   "devDependencies": {
-    "prettier": "^2.7.1",
+    "prettier": "2.8.8",
     "semantic-release": "19.0.2",
     "typescript": "4.7.2"
   }

src/base/index.ts

@@ -1,4 +1,4 @@
-import { Metadata, status as Status } from "@grpc/grpc-js";
+import { Metadata, status as Status } from '@grpc/grpc-js';
 
 export interface GrpcErrorResponse {
   status: Status;
@@ -22,7 +22,7 @@ function fourBytesLength(sized: { length: number }): Uint8Array {
 
 export function decodeGrpcWebBody(bodyBuffer: Buffer): GrpcResponse {
   if (bodyBuffer.length === 0) {
-    throw new Error("Body has zero length, cannot decode!");
+    throw new Error('Body has zero length, cannot decode!');
   }
 
   const bodyRaw = new Uint8Array(bodyBuffer);
@@ -53,7 +53,7 @@ export function decodeGrpcWebBody(bodyBuffer: Buffer): GrpcResponse {
   const trailersHeader = 0x80;
 
   if (bodyRaw.at(offset++) !== trailersHeader) {
-    throw new Error("Expected trailers header 0x80");
+    throw new Error('Expected trailers header 0x80');
   }
 
   const trailersLength = readInt32Length(bodyRaw, offset);
@@ -66,16 +66,16 @@ export function decodeGrpcWebBody(bodyBuffer: Buffer): GrpcResponse {
 
   const trailers = new Metadata();
 
-  trailersString.split("\r\n").forEach((trailer) => {
-    const [key, value] = trailer.split(":", 2);
+  trailersString.split('\r\n').forEach((trailer) => {
+    const [key, value] = trailer.split(':', 2);
     trailers.set(key, value);
   });
 
   if (status !== Status.OK) {
     return {
       status,
       trailers,
-      detail: trailers.get("grpc-message")[0] as string | undefined,
+      detail: trailers.get('grpc-message')[0] as string | undefined,
     };
   }
 
@@ -99,19 +99,17 @@ export class GrpcUnknownStatus extends Error {
 
 export function grpcResponseToBuffer(response: GrpcResponse): Buffer {
   // error messages need to have a zero length message field to be considered valid
-  const message = "message" in response ? response.message : new Uint8Array();
+  const message = 'message' in response ? response.message : new Uint8Array();
 
   // all success responses have status OK
-  const status = "status" in response ? response.status : Status.OK;
+  const status = 'status' in response ? response.status : Status.OK;
   // error statuses may the detail field to denote a custom error message, otherwise use the string version of the status
   let grpcMessage: string | undefined;
 
-  if ("detail" in response) {
+  if ('detail' in response) {
     grpcMessage = response.detail;
   } else {
-    const currentStatus = Object.entries(Status).find(
-      ([, code]) => code === status
-    );
+    const currentStatus = Object.entries(Status).find(([, code]) => code === status);
 
     if (!currentStatus) {
       throw new GrpcUnknownStatus(status);

src/playwright/index.ts

@@ -1,4 +1,4 @@
-export { observeGrpcUnary } from "./observe-grpc-unary";
-export { mockGrpcUnary } from "./mock-grpc-unary";
-export { readGrpcRequest } from "./read-grpc-request";
-export * from "./interfaces";
+export { observeGrpcUnary } from './observe-grpc-unary';
+export { mockGrpcUnary } from './mock-grpc-unary';
+export { readGrpcRequest } from './read-grpc-request';
+export * from './interfaces';

src/playwright/interfaces.ts

@@ -1,17 +1,13 @@
-import { grpc } from "@improbable-eng/grpc-web";
-import { Request } from "playwright-core";
-import { status as Status, Metadata } from "@grpc/grpc-js";
+import { grpc } from '@improbable-eng/grpc-web';
+import { Request } from 'playwright-core';
+import { status as Status, Metadata } from '@grpc/grpc-js';
 
-export interface UnaryMethodDefinitionish
-  extends grpc.UnaryMethodDefinition<any, any> {
+export interface UnaryMethodDefinitionish extends grpc.UnaryMethodDefinition<any, any> {
   requestStream: any;
   responseStream: any;
 }
 
-export type RequestPredicate = (
-  requestMessage: Uint8Array | null,
-  request: Request
-) => boolean | Promise<boolean>;
+export type RequestPredicate = (requestMessage: Uint8Array | null, request: Request) => boolean | Promise<boolean>;
 
 export interface MockedGrpcCall {
   /**
@@ -21,9 +17,7 @@ export interface MockedGrpcCall {
    * The request message argument to the optional predicate should be used to match the request payload.
    * Note the requestMessage objects need to be decoded using a protobuf decoder for the specific expected message.
    */
-  waitForMock(
-    requestPredicate?: RequestPredicate
-  ): Promise<{ requestMessage: Uint8Array | null }>;
+  waitForMock(requestPredicate?: RequestPredicate): Promise<{ requestMessage: Uint8Array | null }>;
 }
 
 export interface ObservedGrpcCallResponse {
@@ -34,7 +28,5 @@ export interface ObservedGrpcCallResponse {
 }
 
 export interface ObservedGrpcCall {
-  waitForResponse: (
-    requestPredicate?: RequestPredicate
-  ) => Promise<ObservedGrpcCallResponse>;
+  waitForResponse: (requestPredicate?: RequestPredicate) => Promise<ObservedGrpcCallResponse>;
 }

src/playwright/mock-grpc-unary.ts

@@ -1,34 +1,29 @@
-import { expect, Page } from "@playwright/test";
-import { GrpcResponse, grpcResponseToBuffer } from "../base";
-import { MockedGrpcCall, UnaryMethodDefinitionish } from "./interfaces";
-import { readGrpcRequest } from "./read-grpc-request";
+import { expect, Page } from '@playwright/test';
+import { GrpcResponse, grpcResponseToBuffer } from '../base';
+import { MockedGrpcCall, UnaryMethodDefinitionish } from './interfaces';
+import { readGrpcRequest } from './read-grpc-request';
 
 export async function mockGrpcUnary(
   page: Page,
   rpc: UnaryMethodDefinitionish,
-  response: GrpcResponse | ((request: Uint8Array | null) => GrpcResponse)
+  response: GrpcResponse | ((request: Uint8Array | null) => GrpcResponse),
+  mockAtContextLevel: boolean = false,
 ): Promise<MockedGrpcCall> {
   const url = `/${rpc.service.serviceName}/${rpc.methodName}`;
 
   // note this wildcard route url base is done in order to match both localhost and deployed service usages.
-  await page.route("**" + url, (route) => {
-    expect(
-      route.request().method(),
-      "ALL gRPC requests should be a POST request"
-    ).toBe("POST");
+  await (mockAtContextLevel ? page.context() : page).route('**' + url, (route) => {
+    expect(route.request().method(), 'ALL gRPC requests should be a POST request').toBe('POST');
 
-    const grpcResponse =
-      typeof response === "function"
-        ? response(readGrpcRequest(route.request()))
-        : response;
+    const grpcResponse = typeof response === 'function' ? response(readGrpcRequest(route.request())) : response;
 
     const grpcResponseBody = grpcResponseToBuffer(grpcResponse);
 
     return route.fulfill({
       body: grpcResponseBody,
-      contentType: "application/grpc-web+proto",
+      contentType: 'application/grpc-web+proto',
       headers: {
-        "Access-Control-Allow-Origin": "*",
+        'Access-Control-Allow-Origin': '*',
       },
     });
   });

src/playwright/observe-grpc-unary.ts

@@ -1,22 +1,15 @@
-import { Page } from "@playwright/test";
-import {
-  ObservedGrpcCall,
-  RequestPredicate,
-  UnaryMethodDefinitionish,
-} from "./interfaces";
-import { decodeGrpcWebBody } from "../base";
-import { status as Status } from "@grpc/grpc-js";
-import { readGrpcRequest } from "./read-grpc-request";
-
-export async function observeGrpcUnary(
-  page: Page,
-  rpc: UnaryMethodDefinitionish
-): Promise<ObservedGrpcCall> {
+import { Page } from '@playwright/test';
+import { ObservedGrpcCall, RequestPredicate, UnaryMethodDefinitionish } from './interfaces';
+import { decodeGrpcWebBody } from '../base';
+import { status as Status } from '@grpc/grpc-js';
+import { readGrpcRequest } from './read-grpc-request';
+
+export async function observeGrpcUnary(page: Page, rpc: UnaryMethodDefinitionish): Promise<ObservedGrpcCall> {
   const url = `/${rpc.service.serviceName}/${rpc.methodName}`;
 
   // note this wildcard route url base is done in order to match both localhost and deployed service usages.
   // eslint-disable-next-line @typescript-eslint/no-misused-promises
-  await page.route("**" + url, async (route) => await route.continue());
+  await page.route('**' + url, async (route) => await route.continue());
 
   return {
     async waitForResponse(requestPredicate?: RequestPredicate) {
@@ -33,17 +26,15 @@ export async function observeGrpcUnary(
         return true;
       });
 
-      const response = await page.waitForResponse(
-        (resp) => resp.request() === request
-      );
+      const response = await page.waitForResponse((resp) => resp.request() === request);
 
       const requestMessage = readGrpcRequest(request);
 
       const responseParsed = await decodeGrpcWebBody(await response.body());
 
       const trailers = responseParsed.trailers ?? null;
 
-      if ("status" in responseParsed) {
+      if ('status' in responseParsed) {
         return {
           requestMessage,
           responseMessage: null,

src/playwright/read-grpc-request.ts

@@ -1,5 +1,5 @@
-import { Request } from "playwright-core";
-import { unframeRequest } from "../base";
+import { Request } from 'playwright-core';
+import { unframeRequest } from '../base';
 
 export function readGrpcRequest(request: Request): Uint8Array | null {
   const requestBody = request.postDataBuffer();