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

window.require = (moduleName) => {
	return {
    './get-age-from-date.js': (date, now) => {
      return now - date.split('-')[0] + ' years';
    },
    './get-value.js': (formFieldLookupName, providerFields) => {
      const getAgeFromDate = require('./get-age-from-date.js');
        if (formFieldLookupName === 'age') {
          return getAgeFromDate(
            providerFields.dateOfBirth,
            2018 // Imagine new Date() something
          );
        }
      return providerFields[formFieldLookupName];
    },
    './prefill-fields.js': (formFields, providerFields) => {
      const prefilledFields = {};
      for (let i = 0; i < Object.keys(formFields).length; i += 1) {
        const fieldName = Object.keys(formFields)[i];
        prefilledFields[fieldName] = providerFields[fieldName];

        // Oh shit! Some refactoring broke the pre-fill unintentionally!
        // It should have been refactored to this instead:
        // const getValue = require('./get-value.js');
        // prefilledFields[fieldName] = getValue(fieldName, providerFields);
        // ... and the tests still pass ==>
      }
      return prefilledFields;
    },
  }[moduleName];
};

QUnit.test('prefillFields(formFields, providerFields)', (assert) => {
  const prefillFields = require('./prefill-fields.js');
  assert.deepEqual(prefillFields({}, {}), {});
  
  assert.deepEqual(prefillFields(
    { name: '' },
    { name: 'John' }
  ), { name: 'John' });

  assert.deepEqual(prefillFields(
    { name: '' },
    { name: 'Mary' }
  ), { name: 'Mary' });

  assert.deepEqual(prefillFields(
    { name: '', height: '' },
    { name: 'Mary', height: '69"' }
  ), { name: 'Mary', height: '69"' });

  assert.deepEqual(prefillFields(
    { name: '', height: '' },
    { name: 'Mary', height: '73"' }
  ), { name: 'Mary', height: '73"' });
});

QUnit.test('getValue(formFieldLookupValue, providerFields)', (assert) => {
  const getValue = require('./get-value.js');
  assert.deepEqual(getValue('name', {...