JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<div id="testResults"></div>

JavaScript

function $trim(s) { return s ? s.trim() : '' }

class TestRunner {
  constructor() { this.testResults = [] }
  it(description, testFunc) {
    try { testFunc(); this.testResults.push({ description, status: 'Passed' }) }
    catch (error) { this.testResults.push({ description, status: 'Failed', error: error.message }) }
  }
  expect(actual) { return { toEqual: (expected) => { if (actual !== expected) throw new Error(`Expected: '${expected}', got: '${actual}'`) } } }
  showResults() {
    let resultDisplay = '<h2>Test Results</h2><ul>';
    this.testResults.forEach(result => { resultDisplay += `<li style="color:${result.status === 'Passed' ? 'green' : 'red'};">${result.description}: ${result.status}${result.error ? ' - ' + result.error : ''}</li>` });
    resultDisplay += '</ul>'; document.getElementById('testResults').innerHTML = resultDisplay;
  }
}


function runTests() {
  let runner = new TestRunner(), testCases = [
    { input: null, expected: '' }, 
    { input: '   Hello World   ', expected: 'Hello World' },
    { input: '\tHello World\t', expected: 'Hello World' }, 
    { input: '\nHello World\n', expected: 'Hello World' },
    { input: '\rHello World\r', expected: 'Hello World' }, 
    { input: ' \n\r\tHello World\t\r\n ', expected: 'Hello World' },
    { input: '\t   ', expected: '' }, 
    { input: '\n\r', expected: '' },
    { input: '   \nHello\t \r\nWorld\n   ', expected: 'Hello\t \r\nWorld' }
  ];
  testCases.forEach((testCase, index) => {
    runner.it('$trim() test case ' + (index + 1), () => runner.expect($trim(testCase.input)).toEqual(testCase.expected));
    runner.it('$.trim() test case ' + (index + 1), () => runner.expect($.trim(testCase.input)).toEqual(testCase.expected));
  });
  runner.showResults();
}
runTests();