Request Headers.append not working

Question

Solution

I wanted to post the actual modified code and solution. I had to get the Content-Type individually.

const url = 'api/test';
const result = ApiRequestFactory.build(ApiRequestFactory.MusiQuestApiType, url);
const contentType = result.headers.get('Content-Type');

expect(result).not.toBeNull('The result is null.');
expect(result.url).toBe(urlJoin(config.MusiQuestApi.url, 'api/test'), 'The url is incorrect.');
expect(result.options).toBeFalsy('There is an options object and should not be.');
expect(result.credentials).toBe('omit', 'The credentials is not set to omit.');
expect(contentType).toBeTruthy('The Content-Type header is missing.');
expect(contentType).toBe('application/json', 'The Content-Type header is not set to application/json.');
expect(result.method).toBe('GET', 'The method is not set to GET.');
expect(result.mode).toBe('cors', 'The mode is not set to cors.');

Environment

• Test Runner: Karma
• Test Framework: Jasmine
• Test Browser: Chrome
• Fetch Polyfill: isomorphic-fetch
• ES6 Promise Library: es6-promise

Problem

When testing the object that comes back from defaultHeaders.values() I get an empty object even though I append a header.

Code

I have a class that builds a Request object. You can see below it adds a default header for Content-Type when building the object.

export default class MusiQuestApiRequest {
  static build(url, body, options) {
    const defaultCredentials = 'omit';

    let defaultHeaders = new Headers();
    defaultHeaders.append('Content-Type', 'application/json');

    const defaultMethod = 'GET';
    const defaultMode = 'cors';

    let init = {
      credentials: options.credentials || defaultCredentials,
      headers: options.headers || defaultHeaders,
      method: options.method || defaultMethod,
      mode: options.mode || defaultMode
    };

    if (body) {
      init.method = options.method || 'POST';
      init.body = JSON.stringify(body);
    }

    return new Request(url, init);
  }
}

But when I check for the Content-Type property on the values object I get undefined because the values object returned is empty.

const url = 'api/test';
const result = ApiRequestFactory.build(ApiRequestFactory.MusiQuestApiType, url);
const headersResult = result.headers.values();
console.log('headersResult:', JSON.stringify(headersResult));

expect(result).not.toBeNull();
expect(result.url).toBe(urlJoin(config.MusiQuestApi.url, 'api/test'));
expect(result.options).toBeFalsy();
expect(result.credentials).toBe('omit');
expect(headersResult).toBeTruthy('headers missing');
expect(headersResult['Content-Type']).toBeTruthy('Content-Type missing');
expect(headersResult['Content-Type']).toBe('application/json');
expect(result.method).toBe('GET');
expect(result.mode).toBe('cors');

What did I do wrong here? Seems pretty straight forward.

Answer 1

result.headers is a Headers object which is a bit different from a plain JavaScript object. To retrieve a value from the headers object you can use the get function.

For example:

myHeaders.get('foo')

Alternatively you can use values to return an Iterator which will enable you to use a for...of loop to extract the values.

You can find more information here.

Hope this helps.