Question

在我负责维护的网站中，我不得不编写一个IIFE作为页面的主干（以前不是一个主干，而且我们不使用任何框架（Angular，React， Vue，...）在我们的应用中）。（据我所知，这是JavaScript中模块设计模式的实现。）当前已将其设置为处理一种类型的场景，但现在需要处理更多类型的场景。

在源中声明如下：

const menuState = (function() { 
    class MenuData { 
        constructor(attached = [], available = []) { 
            // attached,available MUST be arrays!
            if ((!Array.isArray(attached)) || (!Array.isArray(available))) { 
                throw TypeError("passed data MUST be in the form of Arrays!")
            }
            this.attached  = attached;
            this.available = available;
        }

        add(entities) { 
            // entities MUST be Array
            if (!Array.isArray(entities)) throw ReferenceError("entities must be array")
            // from here, we simply move from this.available to this.attached, the entities
            // but first, let's check if they're even available
            if (hasEntities(entities, this.available)) { 
                // attach them
                this.attached = this.attached.concat(entities)
                // they are no longer available
                this.available= this.available
                    .filter(excluderFactory(entities))
            }
            // if they're not attached, that is an error
            if (!hasEntities(entities, this.attached)) { 
                throw Error('The entities you were trying to add were neither attached nor available')
            }
        }

        remove(entities) { 
            // entities MUST be Array
            if (!Array.isArray(entities)) throw ReferenceError("entities must be array")
            // from here, we simply move from this.attached to this.available, the entities
            // but first, let's check if they're even attached
            if (hasEntities(entities, this.attached)) { 
                // make them available
                this.available = this.available.concat(entities)
                // detach them
                this.attached  = this.attached
                    .filter(excluderFactory(entities))
            }
            // if they're not available, that is an error
            if (!hasEntities(entities, this.available)) { 
                throw Error('The entities you were trying to remove were neither attached nor available')
            }

        }
    };

    let _categories = new MenuData(),
        _items = new MenuData()

    let _itemPool = [],
        _categoryItems = {}

    /**
     * Determines if an array has entities with an Id.
     * @param {Object[]} entities 
     * @param {Object[]} arrayToCheck 
     * @returns {boolean} whether arrayToCheck has objects with entities' Ids. 
     */
    function hasEntities(entities, arrayToCheck) { 
        for (let idx in entities) { 
            if (arrayToCheck.find((element) => element.Id === entities[idx].Id)) {
                if (idx == entities.length - 1) {
                    return true;
                }
                continue;
            }
            return false;
        }

    }

    /**
     * Returns a callback for the purpose of excluding entities
     * @param {Object[]} entities the entities to exclude 
     */
    function excluderFactory(entities) { 
        return function(model) {
            return !entities.find((entity) => entity.Id === model.Id)
        }
    }

    return {
        // some methods to expose to other parts of the page
    }
})()

因此，我想到了尝试在前端进行一些测试驱动的开发，并将业务需求写为失败的测试。

我如何考虑这样做

我决定将Mocha和Chai.js一起使用。但是，除了从字面上直接将要测试的单元复制并粘贴到测试环境中，然后在完成后再将其复制并粘贴回源代码中，我不知道在变量库中访问该变量的方法是什么。源文件，而不必做特殊的事情，例如在源代码中附加export行。

实现这一目标的最佳方法是什么？

如何对在前端编写的IIFE进行单元测试

0 个答案: