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

QUnit.module('Sample integration test');

QUnit.test('Posting a message in a post', (assert) => {
  const done = assert.async();
  fetch('https://jsonplaceholder.typicode.com/posts/1', {
    method: 'POST',
    message: 'abc'
  }).then((response) => response.json()).then((responseBody) => {
    deepEqual({
      actual: responseBody,
      expected: {},
      message: 'Returns the correct response body'
    }, assert);
    done();
  });
});

QUnit.test('Creating a new post', (assert) => {
  const done = assert.async();
  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    post: {
      message: 'abc'
    }
  }).then((response) => response.json()).then((responseBody) => {
    deepEqual({
      actual: responseBody,
      expected: { id: 101 },
      message: 'Returns the correct response body'
    }, assert);
    done();
  });
});

QUnit.test('Getting all posts', (assert) => {
  const done = assert.async();
  fetch('https://jsonplaceholder.typicode.com/posts').then((response) => {
    return response.json();
  }).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);
}