JSFiddle - React, Tailwind, and code Playground

by Mykola Senyk

HTML

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

JavaScript

// Code to test BEGIN
var Reversi = {
    EMPTY_TYPE: 'e',
    BLACK_TYPE: 'b',
    WHITE_TYPE: 'w',
    BOARD_SIZE: 8
};
Reversi.Cell = function(index, type) {
    this.index = index;
    this.cellType = type;
    this.row = Math.floor(index/Reversi.BOARD_SIZE) + 1;
    this.col = String.fromCharCode(index % Reversi.BOARD_SIZE + 97);
};
Reversi.Cell.prototype.isEmpty = function() {
    return this.cellType === Reversi.EMPTY_TYPE;
};
Reversi.Cell.prototype.isOpposite = function(type) {
    return this.cellType !== Reversi.EMPTY_TYPE && this.cellType !== type;
};
Reversi.Cell.prototype.flip = function() {
    if ( this.cellType == Reversi.BLACK_TYPE ) {
        this.cellType = Reversi.WHITE_TYPE;
    } else if ( this.cellType == Reversi.WHITE_TYPE ) {
        this.cellType = Reversi.BLACK_TYPE;
    }
};
// Code to test END

// Unit test
QUnit.test( "Reversi.Cell test", function(assert) {
    // a1 empty
    var cell = new Reversi.Cell(0, Reversi.EMPTY_TYPE);
    assert.equal(cell.index, 0);
    assert.equal(cell.cellType, Reversi.EMPTY_TYPE);
    assert.equal(cell.row, 1);
    assert.equal(cell.col, 'a');
    assert.ok(cell.isEmpty(), 'Empty');
    // empty opposites
    assert.ok(!cell.isOpposite(Reversi.BLACK_TYPE), 'Empty is never opposite');
    assert.ok(!cell.isOpposite(Reversi.WHITE_TYPE), 'Empty is never opposite');
    assert.ok(!cell.isOpposite(Reversi.EMPTY_TYPE), 'Empty is never opposite');
    // flip empty
    cell.flip();
    assert.equal(cell.cellType, Reversi.EMPTY_TYPE);
    
    // b2 black
    cell = new Reversi.Cell(9, Reversi.BLACK_TYPE);
    assert.equal(cell.index, 9);
    assert.equal(cell.cellType, Reversi.BLACK_TYPE);
    assert.equal(cell.row, 2);
    assert.equal(cell.col, 'b');
    assert.ok(!cell.isEmpty(), 'Black is not empty');
    // black opposites
    assert.ok(!cell.isOpposite(Reversi.BLACK_TYPE));
    assert.ok(cell.isOpposite(Reversi.WHITE_TYPE));
    //assert.ok(!cell.isOpposite(Reversi.EMPTY_TYPE)); // we have found bug
   ...