What methods would you use to test a Vanilla JS Ajax call handled by a Promise using Jasmine?

Question

What methods would you use to test a Vanilla JS Ajax call handled by a Promise using Jasmine?

I recently came across a great solution on How to make an AJAX call without jQuery? that I wanted to implement. However, I found it challenging to mock the Promise, the AJAX call, or both in my testing.

My initial attempt with jasmine-ajax didn't work out as expected due to a reported bug. It also appeared that this tool is designed for the browser environment only.

Additionally, I tried to mock the XMLHttpRequest object, but unfortunately, I couldn't get it to work successfully.

At this point, I'm unsure about the alternatives available to me:

function get(url) {
  return new Promise((resolve, reject) => {
    const req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
    req.onerror = (e) => reject(Error(`Network Error: ${e}`));
    req.send();
  });
}

javascript ajax jasmine promise

Answer 1

Answer №1

Illustration showcasing how XMLHttpRequest can be simulated

function fetch(url) {
  return new Promise((resolve, reject) => {
    const req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
    req.onerror = (e) => reject(Error(`Network Error: ${e}`));
    req.send();
  });
}

describe('XMLHttpRequest', function() {
  var xhr
  var urls

  beforeEach(() => {
    xhr = {
      open: (_type_, _url_) => {
        xhr.status = urls[_url_].status
        xhr.response = urls[_url_].response
        xhr.statusText = urls[_url_].statusText
      },
      send: () => {
        setTimeout(xhr.onload, 1)
      }
    }

    XMLHttpRequest = jasmine.createSpy(xhr).and.returnValue(xhr)
  })

  it('resolves query with `response`', function(done) {
    urls = {
      'http://foo/bar': {
        response: 'some other value',
        status: 200
      }
    };

    fetch('http://foo/bar')
    .then(r => expect(r).toBe('some other value'), e => expect(e).toBe(undefined))
      .then(done)
  })

  it('rejects query with `statusText`', function(done) {
    urls = {
      'http://baz/quux': {
        response: 'some other value',
        status: 500,
        statusText: 'some error'
      }
    };

    fetch('http://baz/quux')
    .then(r => expect(r).toBe(undefined), e => expect(e.message).toBe('some error'))
      .then(done)
  })
})

<script src="https://safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<link href="https://safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />

Answer 2

Illustration showcasing how XMLHttpRequest can be simulated

function fetch(url) {
  return new Promise((resolve, reject) => {
    const req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
    req.onerror = (e) => reject(Error(`Network Error: ${e}`));
    req.send();
  });
}

describe('XMLHttpRequest', function() {
  var xhr
  var urls

  beforeEach(() => {
    xhr = {
      open: (_type_, _url_) => {
        xhr.status = urls[_url_].status
        xhr.response = urls[_url_].response
        xhr.statusText = urls[_url_].statusText
      },
      send: () => {
        setTimeout(xhr.onload, 1)
      }
    }

    XMLHttpRequest = jasmine.createSpy(xhr).and.returnValue(xhr)
  })

  it('resolves query with `response`', function(done) {
    urls = {
      'http://foo/bar': {
        response: 'some other value',
        status: 200
      }
    };

    fetch('http://foo/bar')
    .then(r => expect(r).toBe('some other value'), e => expect(e).toBe(undefined))
      .then(done)
  })

  it('rejects query with `statusText`', function(done) {
    urls = {
      'http://baz/quux': {
        response: 'some other value',
        status: 500,
        statusText: 'some error'
      }
    };

    fetch('http://baz/quux')
    .then(r => expect(r).toBe(undefined), e => expect(e.message).toBe('some error'))
      .then(done)
  })
})

<script src="https://safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<link href="https://safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />

What methods would you use to test a Vanilla JS Ajax call handled by a Promise using Jasmine?

Answer №1

Similar questions

There seems to be an issue with the pastebin api createPasteFromFile method as it is showing an error of 'create

Searching for entries using an array of _id along with other possible column values

Converting Javascript Array to PHP Array: A Step-by-Step Guide

Continuously monitor and track the advancements within the update panel

JSON data displaying improper date format

Encountering an error code of 500 when executing the createIndex function in Pouch

Tips for preventing the playback of the sound while recording

Turn off the authentication middleware for a particular HTTP method on a specific endpoint

Utilizing a numeric array as an associative array in JavaScript

JSON Schema: ensuring that all elements within an array are distinct and not null

How can I identify when the payment form in Stripe Elements has finished loading?

Massive Memory Drain Due to XMLHttp POST Request

Retrieve the item that is contained within a separate item within the original

Is there a way to update the parent component when changes occur in the child component?

How can one properly utilize material-ui CSS?

Is it possible for Vue to retrieve refs on mounted during nextTick following the dynamic import of the component?

"Exploring the technique of extracting substrings in JavaScript while excluding any symbols

Using Django to dynamically fill out a form with data retrieved through ajax

The Keydown event in Three.js should initially move my player a set distance, however, the further the player moves

Trigger the .focus() method on a neighboring VueJS Component