require.js and refactoring for unit testing

Question

overview

guys, recently I want to refactor my simple project, and I read some article about how to write testable javascript.

The basic idea I got is: to make data abstraction using constructor and selector (principle in SICP), but now because of the single pattern of require.js, I don't know how to organize my project.

detail about the project

Here is the details:

The project is Tic-Tac-Toe with unbeatable AI. I implement it and decompose it into several part using require.js

The github address is: hit me

new thought

And right now: I begin to rewrite it, here is my new thought:

I create a game.js file for the whole game object and code is:

This is game constructor

function Game(pureCells) {
    this.currentPlayer = turnEnum.secondPlayer;
    this.board = this._createBoard(pureCells)
}

and I have some action function on it's prototype, here just list two:

Game.prototype.changeTurn = function changeTurn(){
    this.currentPlayer = - this.currentPlayer;
    if(currentPlayer == turnEnum.firstPlayer){
        if(document.board.real[1].checked) perfectMove();
    }else {
        if(document.board.real[0].checked) perfectMove();
    }
}

Game.prototype._createBoard = function(pureCells) {
    var allCells = []
    _.each(pureCells, function(el, i){
        allCells.push(new CellConstructor(el))
    })

    var board = new BoardConstructor(allCells)
    return board
}

And the board.js file is the same structure:

function Board(el) {
    this.element = el
    this.state = this._getState()
    this.winner = this._detectWin()
}

Board.prototype._getState = function() {
    var state = [];
    _.each(this.element, function(cell, i){
        state.push(cell.element.value)
    })

    return state;
}

Board.prototype.isFull = function(){
    if(_.contains(this.state, ''))
        return false
    return true
}

And you can see that the board is one of the dependency of game.

The problem

Here I want to describe my problem:

Actually I have another file cell.js is also the same structure. it's one of the dependency of board.

So now I want to use some function in both game and board, for example, when I handle the click event of cell, I need to detect the state of the board, and this function is in board.

first, I don't want to make circle dependency,

second, even though I inject board and game into cell.js file, but the instance I create will not the same with the one I will create in the main.js( the main file of require.js)

give a hint

So sorry for the long description, and thank your patience for reading it. Please give some hint or advice! Thank you very much!

Answer 1

shared.js -- no dependencies:

var sharedObj = {};
var sharedFunc = function () {}

define ({
    sharedObj: sharedObj,
    sharedFunc: sharedFunc
});

shared.js -- dependencies:

define(["dep1", "dep2"], function(dep1, dep2) {
    var sharedObj = {};
    var sharedFunc = function () {}

    return {
        sharedObj: sharedObj,
        sharedFunc: sharedFunc
    };
});

main.js:

requirejs(["shared", "cell"], function(shared, cell) {
    shared.sharedFunc();
    shared.sharedObj.something = "whatever";
    cell.someFunc();
});

cell.js

define(["shared"], function(shared) {
    function someFunc() {
         // you can do something with shared.sharedObj.something here
         // or call shared.sharedFunc() here
    }

    return {
        someFunc: someFunc
    };
});