fixed escape issue in mock graph client

Author: nmetulev

src/BaseGraph.ts

@@ -5,7 +5,7 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { Client, GraphRequest, MiddlewareOptions, ResponseType } from '@microsoft/microsoft-graph-client';
+import { Client, GraphRequest, Middleware, MiddlewareOptions, ResponseType } from '@microsoft/microsoft-graph-client';
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 import * as MicrosoftGraphBeta from '@microsoft/microsoft-graph-types-beta';
 import { MgtBaseComponent } from './components/baseComponent';
@@ -600,6 +600,27 @@ export abstract class BaseGraph {
       .delete();
   }
 
+  /**
+   * Helper method to chain Middleware when instantiating new Client
+   *
+   * @protected
+   * @param {...Middleware[]} middleware
+   * @returns {Middleware}
+   * @memberof BaseGraph
+   */
+  protected chainMiddleware(...middleware: Middleware[]): Middleware {
+    const rootMiddleware = middleware[0];
+    let current = rootMiddleware;
+    for (let i = 1; i < middleware.length; ++i) {
+      const next = middleware[i];
+      if (current.setNext) {
+        current.setNext(next);
+      }
+      current = next;
+    }
+    return rootMiddleware;
+  }
+
   private blobToBase64(blob: Blob): Promise<string> {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();

src/Graph.ts

@@ -62,17 +62,4 @@ export class Graph extends BaseGraph {
     graph.componentName = component.tagName.toLowerCase();
     return graph;
   }
-
-  private chainMiddleware(...middleware: Middleware[]): Middleware {
-    const rootMiddleware = middleware[0];
-    let current = rootMiddleware;
-    for (let i = 1; i < middleware.length; ++i) {
-      const next = middleware[i];
-      if (current.setNext) {
-        current.setNext(next);
-      }
-      current = next;
-    }
-    return rootMiddleware;
-  }
 }

src/mock/MockGraph.ts

@@ -5,12 +5,30 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { Client } from '@microsoft/microsoft-graph-client';
-import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
+import {
+  AuthenticationHandler,
+  Client,
+  Context,
+  HTTPMessageHandler,
+  Middleware,
+  RetryHandler,
+  RetryHandlerOptions,
+  TelemetryHandler
+} from '@microsoft/microsoft-graph-client';
 import { BaseGraph } from '../BaseGraph';
 import { MgtBaseComponent } from '../components/baseComponent';
 import { MockProvider } from './MockProvider';
 
+/**
+ * The base URL for the mock endpoint
+ */
+const BASE_URL = 'https://proxy.apisandbox.msdn.microsoft.com/svc?url=';
+
+/**
+ * The base URL for the graph
+ */
+const ROOT_GRAPH_URL = 'https://graph.microsoft.com/';
+
 /**
  * MockGraph Instance
  *
@@ -20,15 +38,20 @@ import { MockProvider } from './MockProvider';
  */
 // tslint:disable-next-line: max-classes-per-file
 export class MockGraph extends BaseGraph {
-  private static readonly BASE_URL = 'https://proxy.apisandbox.msdn.microsoft.com/svc?url=';
-  private static readonly ROOT_GRAPH_URL: string = 'https://graph.microsoft.com/';
-
   constructor(mockProvider: MockProvider) {
     super();
 
+    const middleware: Middleware[] = [
+      new AuthenticationHandler(mockProvider),
+      new RetryHandler(new RetryHandlerOptions()),
+      new TelemetryHandler(),
+      new MockMiddleware(),
+      new HTTPMessageHandler()
+    ];
+
     this.client = Client.initWithMiddleware({
-      authProvider: mockProvider,
-      baseUrl: MockGraph.BASE_URL + escape(MockGraph.ROOT_GRAPH_URL)
+      baseUrl: BASE_URL + ROOT_GRAPH_URL,
+      middleware: this.chainMiddleware(...middleware)
     });
   }
 
@@ -44,21 +67,42 @@ export class MockGraph extends BaseGraph {
     // The MockGraph isn't making real Graph requests, so we can simply no-op and return the same instance.
     return this;
   }
+}
 
+/**
+ * Implements Middleware for the Mock Client to escape
+ * the graph url from the request
+ *
+ * @class MockMiddleware
+ * @implements {Middleware}
+ */
+// tslint:disable-next-line: max-classes-per-file
+class MockMiddleware implements Middleware {
   /**
-   * get events for Calendar
-   *
-   * @param {Date} startDateTime
-   * @param {Date} endDateTime
-   * @returns {Promise<MicrosoftGraph.Event[]>}
-   * @memberof MockGraph
+   * @private
+   * A member to hold next middleware in the middleware chain
    */
-  public async getEvents(startDateTime: Date, endDateTime: Date): Promise<MicrosoftGraph.Event[]> {
-    const sdt = `startdatetime=${startDateTime.toISOString()}`;
-    const edt = `enddatetime=${endDateTime.toISOString()}`;
-    const uri = `/me/calendarview?${sdt}&${edt}`;
+  private _nextMiddleware: Middleware;
+
+  // tslint:disable-next-line: completed-docs
+  public async execute(context: Context): Promise<void> {
+    try {
+      const url = context.request as string;
+      const baseLength = BASE_URL.length;
+      context.request = url.substring(0, baseLength) + escape(url.substring(baseLength));
 
-    const calendarView = await this.client.api(escape(uri)).get();
-    return calendarView ? calendarView.value : null;
+      return await this._nextMiddleware.execute(context);
+    } catch (error) {
+      throw error;
+    }
+  }
+  /**
+   * Handles setting of next middleware
+   *
+   * @param {Middleware} next
+   * @memberof SdkVersionMiddleware
+   */
+  public setNext(next: Middleware): void {
+    this._nextMiddleware = next;
   }
 }