JSFiddle - React, Tailwind, and code Playground

by Fagner Brack December 22, 2016

HTML

<script src="https://code.jquery.com/qunit/qunit-2.0.1.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.0.1.css">
<div id="qunit"></div>

JavaScript

const POSTS_URL = 'https://jsonplaceholder.typicode.com/posts';
const ANY_MESSAGE = 'abc'
const REQUEST_OPTIONS_WITH_POST_METHOD = {
  method: 'POST'
}

const assertThatResponseBodyIsTheSame = (assertion, assert) => {
  deepEqual({
    actual: assertion.actual,
    expected: assertion.expected,
    message: "Returns the correct response body"
  }, assert);
};

const requestResponseBodyFor = (url, options) => {
  return fetch(url, options).then((response) => response.json());
};

QUnit.module('Sample integration test');

QUnit.test('Adding a message to a post', (assert) => {
  const done = assert.async();
  requestResponseBodyFor(`${POSTS_URL}/1`, Object.assign({}, {
    message: ANY_MESSAGE
  }, REQUEST_OPTIONS_WITH_POST_METHOD)).then((responseBody) => {
    assertThatResponseBodyIsTheSame({ actual: responseBody, expected: {} }, assert);
    done();
  });
});

QUnit.test('Creating a new post', (assert) => {
  const done = assert.async();
  requestResponseBodyFor(`${POSTS_URL}`, Object.assign({}, {
    post: {
      message: ANY_MESSAGE
    }
  }, REQUEST_OPTIONS_WITH_POST_METHOD)).then((responseBody) => {
    assertThatResponseBodyIsTheSame({
      actual: responseBody,
      expected: { id: 101 }
    }, assert);
    done();
  });
});

QUnit.test('Getting all posts', (assert) => {
  const done = assert.async();
  requestResponseBodyFor(POSTS_URL).then((responseBody) => {
    assert.ok(Array.isArray(responseBody), "Returns an array");
    done();
  });
});

// This abstraction was just created because of QUnit's parameter trap[1],
// which is already known to have caused problems in jQuery core[2]
// It would otherwise be unnecessary
//
// [1]: https://youtu.be/loj3CLHovt0?t=22m26s
// [2]: http://bit.ly/2h2nFOb
function deepEqual(assertion, assert) {
  assert.deepEqual(assertion.actual, assertion.expected, assertion.message);
}