JSFiddle - React, Tailwind, and code Playground

by Fagner Brack

HTML

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

JavaScript

// ---------------------------------------------
// Production Code
// ---------------------------------------------

const NoDataSource = () => ({
  findPostsTitle: () => {}
});

const HttpServerDataSource = () => {
  const getRequest = (url) => {
    return fetch('/blog/posts'/*, default headers, params, etc. */).then((response) => {
      return response.text();
    });
  };
  return {
    findPostsTitle: () => {
      const queryPostsTitleFromHtml = (htmlResponse) => {
        const document = new DOMParser().parseFromString(htmlResponse, "text/html");
        const posts = [...document.querySelectorAll('[class="post-title"]')];
        const postsTitles = posts.map((post) => post.innerHTML);
        return postsTitles;
      };
      return getRequest('/blog/posts').then(queryPostsTitleFromHtml);
    }
  };
};

const ListOfPostTitles_ = () => {
  let dataSource = NoDataSource();
  return {
    setDataSource: (source) => {
      dataSource = source;
    },
    toHtml: () => {
      return dataSource.findPostsTitle().then((posts) => {
        const postsTitles = posts
          .map((title) => `<li>${title}</li>`)
          .join('');
        return `<ul>${postsTitles}</ul>`;
      });
    }
  };
};

// ---------------------------------------------
// Test Code
// ---------------------------------------------

const ListOfPostTitles = /* import */ ListOfPostTitles_;

QUnit.test('Create a list of one post', (assert) => {
  const InMemoryDataSource = () => ({
    findPostsTitle: () => Promise.resolve(['How to bake a cake']),
  });
  const listOfPostTitles = ListOfPostTitles();
  listOfPostTitles.setDataSource(InMemoryDataSource());
  return listOfPostTitles.toHtml().then((list) => {
    assert.strictEqual(list, '<ul><li>How to bake a cake</li></ul>');
  });
});

QUnit.test('Create a list of two posts', (assert) => {
  const InMemoryDataSource = () => ({
    findPostsTitle: () => Promise.resolve(['How to bake a cake', 'How to drive a car']),
  });
	const...