feat (datafile manager)[OASIS-4310]: Browser datafile manager (#6)

Summary:

Add `BrowserDatafileManager`, similar to `NodeDatafileManager`: a subclass of `HttpPollingDatafileManager` implementing `makeGetRequest` using `XMLHttpRequest`.

The caching described in the design is not yet implemented.

Test plan:

Unit tests

Issues:

https://optimizely.atlassian.net/browse/OASIS-4310

Author: mjc1283

packages/datafile-manager/__test__/browserDatafileManager.spec.ts

@@ -0,0 +1,85 @@
+/**
+ * Copyright 2019, Optimizely
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BrowserDatafileManager from '../src/browserDatafileManager'
+import * as browserRequest from '../src/browserRequest'
+import { Headers, AbortableRequest } from '../src/http'
+import TestTimeoutFactory from './testTimeoutFactory'
+
+describe('browserDatafileManager', () => {
+  const testTimeoutFactory: TestTimeoutFactory = new TestTimeoutFactory()
+
+  let makeGetRequestSpy: jest.SpyInstance<AbortableRequest, [string, Headers]>
+  beforeEach(() => {
+    makeGetRequestSpy = jest.spyOn(browserRequest, 'makeGetRequest')
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+    testTimeoutFactory.cleanup()
+  })
+
+  it('calls makeGetRequest when started', async () => {
+    makeGetRequestSpy.mockReturnValue({
+      abort: jest.fn(),
+      responsePromise: Promise.resolve({
+        statusCode: 200,
+        body: '{"foo":"bar"}',
+        headers: {},
+      })
+    })
+
+    const manager = new BrowserDatafileManager({
+      sdkKey: '1234',
+      liveUpdates: false,
+    })
+    manager.start()
+    expect(makeGetRequestSpy).toBeCalledTimes(1)
+    expect(makeGetRequestSpy.mock.calls[0][0]).toBe('https://cdn.optimizely.com/datafiles/1234.json')
+    expect(makeGetRequestSpy.mock.calls[0][1]).toEqual({})
+
+    await manager.onReady()
+    await manager.stop()
+  })
+
+  it('calls makeGetRequest for live update requests', async () => {
+    makeGetRequestSpy.mockReturnValue({
+      abort: jest.fn(),
+      responsePromise: Promise.resolve({
+        statusCode: 200,
+        body: '{"foo":"bar"}',
+        headers: {
+          'last-modified': 'Fri, 08 Mar 2019 18:57:17 GMT',
+        },
+      })
+    })
+    const manager = new BrowserDatafileManager({
+      sdkKey: '1234',
+      liveUpdates: true,
+      timeoutFactory: testTimeoutFactory,
+    })
+    manager.start()
+    await manager.onReady()
+    testTimeoutFactory.timeoutFns[0]()
+    expect(makeGetRequestSpy).toBeCalledTimes(2)
+    expect(makeGetRequestSpy.mock.calls[1][0]).toBe('https://cdn.optimizely.com/datafiles/1234.json')
+    expect(makeGetRequestSpy.mock.calls[1][1]).toEqual({
+      'if-modified-since': 'Fri, 08 Mar 2019 18:57:17 GMT'
+    })
+
+    await manager.stop()
+  })
+})

packages/datafile-manager/__test__/browserRequest.spec.ts

@@ -0,0 +1,134 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// TODO: It doesn't work unless the jest-enviroment comment is at the top...
+// ...so if we need the license header at the top, we have to fix this
+
+/**
+ * Copyright 2019, Optimizely
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  SinonFakeXMLHttpRequest,
+  SinonFakeXMLHttpRequestStatic,
+  useFakeXMLHttpRequest,
+} from 'sinon'
+import { makeGetRequest } from '../src/browserRequest'
+
+describe('browserRequest', () => {
+  describe('makeGetRequest', () => {
+    let mockXHR: SinonFakeXMLHttpRequestStatic
+    let xhrs: SinonFakeXMLHttpRequest[]
+    beforeEach(() => {
+      xhrs = []
+      mockXHR = useFakeXMLHttpRequest()
+      mockXHR.onCreate = req => xhrs.push(req)
+    })
+
+    afterEach(() => {
+      mockXHR.restore()
+    })
+
+    it('makes a GET request to the argument URL', async () => {
+      const req = makeGetRequest('https://cdn.optimizely.com/datafiles/123.json', {})
+
+      expect(xhrs.length).toBe(1)
+      const xhr = xhrs[0]
+      const { url, method } = xhr
+      expect({ url, method }).toEqual({
+        url: 'https://cdn.optimizely.com/datafiles/123.json',
+        method: 'GET',
+      })
+
+      xhr.respond(200, {}, '{"foo":"bar"}')
+
+      await req.responsePromise
+    })
+
+    it('returns a 200 response back to its superclass', async () => {
+      const req = makeGetRequest('https://cdn.optimizely.com/datafiles/123.json', {})
+
+      const xhr = xhrs[0]
+      xhr.respond(200, {}, '{"foo":"bar"}')
+
+      const resp = await req.responsePromise
+      expect(resp).toEqual({
+        statusCode: 200,
+        headers: {},
+        body: '{"foo":"bar"}',
+      })
+    })
+
+    it('returns a 404 response back to its superclass', async () => {
+      const req = makeGetRequest('https://cdn.optimizely.com/datafiles/123.json', {})
+
+      const xhr = xhrs[0]
+      xhr.respond(404, {}, '')
+
+      const resp = await req.responsePromise
+      expect(resp).toEqual({
+        statusCode: 404,
+        headers: {},
+        body: '',
+      })
+    })
+
+    it('includes headers from the headers argument in the request', async () => {
+      const req = makeGetRequest('https://cdn.optimizely.com/dataifles/123.json', {
+        'if-modified-since': 'Fri, 08 Mar 2019 18:57:18 GMT',
+      })
+
+      expect(xhrs.length).toBe(1)
+      expect(xhrs[0].requestHeaders['if-modified-since']).toBe(
+        'Fri, 08 Mar 2019 18:57:18 GMT',
+      )
+
+      xhrs[0].respond(404, {}, '')
+
+      await req.responsePromise
+    })
+
+    it('includes headers from the response in the eventual response in the return value', async () => {
+      const req = makeGetRequest('https://cdn.optimizely.com/datafiles/123.json', {})
+
+      const xhr = xhrs[0]
+      xhr.respond(
+        200,
+        {
+          'content-type': 'application/json',
+          'last-modified': 'Fri, 08 Mar 2019 18:57:18 GMT',
+        },
+        '{"foo":"bar"}',
+      )
+
+      const resp = await req.responsePromise
+      expect(resp).toEqual({
+        statusCode: 200,
+        body: '{"foo":"bar"}',
+        headers: {
+          'content-type': 'application/json',
+          'last-modified': 'Fri, 08 Mar 2019 18:57:18 GMT',
+        },
+      })
+    })
+
+    it('returns a rejected promise when there is a request error', async () => {
+      const req = makeGetRequest('https://cdn.optimizely.com/datafiles/123.json', {})
+      xhrs[0].error()
+      await expect(req.responsePromise).rejects.toThrow()
+    })
+  })
+})

packages/datafile-manager/package.json

@@ -33,8 +33,10 @@
   "devDependencies": {
     "@types/jest": "^24.0.9",
     "@types/nock": "^9.3.1",
+    "@types/sinon": "^7.0.10",
     "jest": "^24.1.0",
     "nock": "^10.0.6",
+    "sinon": "^7.2.7",
     "ts-jest": "^24.0.0",
     "typescript": "^3.3.3333"
   },

packages/datafile-manager/src/browserDatafileManager.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright 2019, Optimizely
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { makeGetRequest } from './browserRequest'
+import HttpPollingDatafileManager from './httpPollingDatafileManager'
+import { Headers, AbortableRequest } from './http';
+
+export default class BrowserDatafileManager extends HttpPollingDatafileManager {
+  protected makeGetRequest(reqUrl: string, headers: Headers): AbortableRequest {
+    return makeGetRequest(reqUrl, headers)
+  }
+}

packages/datafile-manager/src/browserRequest.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright 2019, Optimizely
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { AbortableRequest, Response, Headers } from './http'
+
+const GET_METHOD = 'GET'
+const READY_STATE_DONE = 4
+
+function parseHeadersFromXhr(req: XMLHttpRequest): Headers {
+  const allHeadersString = req.getAllResponseHeaders()
+
+  if (allHeadersString === null) {
+    return {}
+  }
+
+  const headerLines = allHeadersString.split('\r\n')
+  const headers: Headers = {}
+  headerLines.forEach(headerLine => {
+    const separatorIndex = headerLine.indexOf(': ')
+    if (separatorIndex > -1) {
+      const headerName = headerLine.slice(0, separatorIndex)
+      const headerValue = headerLine.slice(separatorIndex + 2)
+      if (headerValue.length > 0) {
+        headers[headerName] = headerValue
+      }
+    }
+  })
+  return headers
+}
+
+function setHeadersInXhr(headers: Headers, req: XMLHttpRequest): void {
+  Object.keys(headers).forEach(headerName => {
+    const header = headers[headerName]
+    req.setRequestHeader(headerName, header!)
+  })
+}
+
+export function makeGetRequest(reqUrl: string, headers: Headers): AbortableRequest {
+  const req = new XMLHttpRequest()
+
+  const responsePromise: Promise<Response> = new Promise((resolve, reject) => {
+    req.open(GET_METHOD, reqUrl, true)
+
+    setHeadersInXhr(headers, req)
+
+    req.onreadystatechange = () => {
+      if (req.readyState === READY_STATE_DONE) {
+        const statusCode = req.status
+        if (statusCode === 0) {
+          reject(new Error('Request error'))
+          return
+        }
+
+        const headers = parseHeadersFromXhr(req)
+        const resp: Response = {
+          statusCode: req.status,
+          body: req.responseText,
+          headers,
+        }
+        resolve(resp)
+      }
+    }
+
+    req.send()
+  })
+
+  return {
+    responsePromise,
+    abort() {
+      req.abort()
+    },
+  }
+}