test/lib/caseFrame.js

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/

/**
 * Dependencies: testHelper.js, jquery, caseFrame.css
 */
(function () {

    var testHelper = window.testHelper;
    var encodeHTML = testHelper.encodeHTML;

    var CSS_BASE = '.case-frame';
    var SELECTOR_CASES_LIST_CONTAINER = CSS_BASE + ' .cases-list ul';
    var SELECTOR_CASES_ITEM = 'li a';
    var SELECTOR_CONTENT_IFRAME = CSS_BASE + ' .page-content iframe';
    var SELECTOR_RENDERER = CSS_BASE + ' .renderer-selector input';
    var SELECTOR_LISTER_FILTER = CSS_BASE + ' .list-filter';
    var SELECTOR_CURRENT = CSS_BASE + ' .info-panel .current';
    var SELECTOR_DIST = CSS_BASE + ' .dist-selector';

    var HTML = [
        '<div class="cases-list">',
        '    <div class="info-panel">',
        '        <input class="current" />',
        '        <div class="renderer-selector">',
        '            <div class="render-selector-item">',
        '               <input type="radio" value="canvas" name="renderer" /> CANVAS ',
        '            </div>',
        '           <div class="render-selector-item">',
        '               <input type="radio" value="dirty-rect" name="renderer" /> CANVAS (dirty rect) ',
        '            </div>',
    '                <div class="render-selector-item">',
        '               <input type="radio" value="svg" name="renderer" /> SVG ',
        '            </div>',
        '        </div>',
        '        <div class="list-filter"></div>',
        '        <select class="dist-selector">',
        '           <option value="dist"/>echarts/dist</option>',
        '           <option value="webpack-req-ec"/>boilerplat/webpack-req-ec</option>',
        '           <option value="webpack-req-eclibec"/>boilerplat/webpack-req-eclibec</option>',
        '           <option value="webpackold-req-ec"/>boilerplat/webpackold-req-ec</option>',
        '           <option value="webpackold-req-eclibec"/>boilerplat/webpackold-req-eclibec</option>',
        '        </select>',
        '    </div>',
        '    <ul></ul>',
        '</div>',
        '<div class="page-content">',
        '    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0"',
        '        hspace="0" vspace="0">',
        '    </iframe>',
        '</div>',
    ].join('');

    var globalOpt;
    var pagePaths;
    var baseURL;
    var listFilters;

    /**
     * @public
     */
    var caseFrame = window.caseFrame = {};

    /**
     * @public
     * @param {Object} opt
     * @param {HTMLElement} opt.dom
     * @param {Array.<string>} opt.pagePaths Relative paths.
     * @param {string} [opt.baseURL='.']
     * @param {string} [opt.disableRendererSelector]
     * @param {string} [opt.disableDistSelector]
     * @param {Array.<Object} [opt.filters] [{name: 'stream', whiteList: [...]}, ...]
     */
    caseFrame.init = function (opt) {
        renderHTML(opt.dom);

        globalOpt = opt;
        pagePaths = opt.pagePaths.slice();
        baseURL = opt.baseURL || '.';
        listFilters = opt.filters || [];

        $(window).on('hashchange', updateView);

        updateView();
    };

    function renderHTML(dom) {
        dom.className = 'case-frame';
        dom.innerHTML = HTML;
    }

    function updateRendererSelector() {
        var rendererSelector = $(SELECTOR_RENDERER);

        rendererSelector.each(function (index, el) {
            el.disabled = !!globalOpt.disableRendererSelector;
        });

        rendererSelector.off('click').on('click', function (e) {
            if (e.target.value === 'dirty-rect') {
                setState('renderer', 'canvas');
                setState('useDirtyRect', true);
            }
            else {
                setState('renderer', e.target.value);
                setState('useDirtyRect', false);
            }
        });

        var renderer = getState('renderer');
        var useDirtyRect = getState('useDirtyRect');

        rendererSelector.each(function (index, el) {
            el.checked = el.value === 'dirty-rect'
                ? useDirtyRect
                : el.value === renderer;
        });
    }

    function updateListSelectedHint() {
        var hint = $(SELECTOR_CURRENT);
        hint.off('mouseover').on('mouseover', function (e) {
            updatePageHint('full');
            this.select();
        });
        hint.off('mouseout').on('mouseout', function (e) {
            updatePageHint('short');
        });
    }

    function updateDistSelector() {
        var distSelector = $(SELECTOR_DIST);

        distSelector[0].disabled = !!globalOpt.disableDistSelector;

        distSelector.off('change').on('change', function (e) {
            var selector = e.target;
            setState('dist', selector.options[selector.selectedIndex].value);
        });

        var dist = getState('dist');

        var options = distSelector[0].options;
        for (var i = 0; i < options.length; i++) {
            if (options[i].value === dist) {
                distSelector[0].selectedIndex = i;
            }
        }
    }

    function updateListFilter() {
        var html = [
            '<select class="dist-selector">',
            '<option value="all">all</option>'
        ];
        for (var i = 0; i < listFilters.length; i++) {
            var name = encodeHTML(listFilters[i].name);
            html.push('<option value="' + name + '">' + name + '</option>');
        }
        html.push('</select>');

        var filterContainer = $(SELECTOR_LISTER_FILTER);

        filterContainer[0].innerHTML = 'FILTER: &nbsp;' + html.join('');

        var filterSelector = filterContainer.find('select');

        filterSelector.off('change').on('change', function (e) {
            var selector = e.target;
            setState('listFilterName', selector.options[selector.selectedIndex].value);
        });

        var currentFilterName = getState('listFilterName');
        var options = filterSelector[0].options;
        for (var i = 0; i < options.length; i++) {
            if (options[i].value === currentFilterName) {
                filterSelector[0].selectedIndex = i;
            }
        }
    }

    // prop: renderer, dist, pagePath
    function getState(prop) {
        return stateGetters[prop](getCurrentPageURL());
    }

    var stateGetters = {
        // 'canvas', 'svg'
        renderer: function (pageURL) {
            var matchResult = (pageURL || '').match(/[?&]__RENDERER__=(canvas|svg)(&|$)/);
            return matchResult && matchResult[1] || 'canvas';
        },
        // true, false
        useDirtyRect: function (pageURL) {
            var matchResult = (pageURL || '').match(/[?&]__USE_DIRTY_RECT__=(true|false)(&|$)/);
            return matchResult && matchResult[1] === 'true';
        },
        // 'dist', 'webpack', 'webpackold'
        dist: function (pageURL) {
            var matchResult = (pageURL || '').match(/[?&]__ECDIST__=(webpack-req-ec|webpack-req-eclibec|webpackold-req-ec|webpackold-req-eclibec)(&|$)/);
            return matchResult && matchResult[1] || 'dist';
        },
        listFilterName: function (pageURL) {
            var matchResult = (pageURL || '').match(/[?&]__FILTER__=([a-zA-Z0-9_-]*)(&|$)/);
            return matchResult && matchResult[1] || null;
        },
        // {index, pagePath} or null
        pagePathInfo: getStatePagePathInfo,
        pagePath: function (pageURL) {
            return getStatePagePathInfo(pageURL).pagePath;
        }
    };

    function getStatePagePathInfo(pageURL) {
        var matchResult = (pageURL || '').match(/^[^?&]*/);
        var pagePath = matchResult && matchResult[0];
        var index;
        if (pagePath) {
            for (var i = 0; i < pagePaths.length; i++) {
                if (pagePaths[i] === pagePath) {
                    index = i;
                }
            }
        }
        return {index: index, pagePath: pagePath};
    }

    function setState(prop, value) {
        var curr = {
            renderer: getState('renderer'),
            useDirtyRect: getState('useDirtyRect'),
            dist: getState('dist'),
            pagePath: getState('pagePath'),
            listFilterName: getState('listFilterName')
        };
        curr[prop] = value;

        var newPageURL = makePageURL(curr);

        location.hash = '#' + encodeURIComponent(newPageURL);
    }

    function makePageURL(curr) {
        return curr.pagePath + '?' + [
            '__RENDERER__=' + curr.renderer,
            '__USE_DIRTY_RECT__=' + curr.useDirtyRect,
            '__ECDIST__=' + curr.dist,
            '__FILTER__=' + curr.listFilterName,
            '__CASE_FRAME__=1'
        ].join('&');
    }

    function updateView() {
        updateRendererSelector();
        updateDistSelector();
        updateListSelectedHint();
        updateListFilter();
        updateList();
        updatePage();
        updatePageHint('short');
    }

    function getCurrentPageURL() {
        return decodeURIComponent(
            (location.hash || '').replace(/^#/, '')
        );
    }

    function updateList() {
        var html = [];

        var filter;
        var listFilterName = getState('listFilterName');
        if (listFilters && listFilterName) {
            for (var i = 0; i < listFilters.length; i++) {
                if (listFilters[i].name === listFilterName) {
                    filter = listFilters[i];
                    break;
                }
            }
        }

        for (var i = 0; i < pagePaths.length; i++) {
            var path = pagePaths[i];

            var whiteList = filter && filter.whiteList;
            if (whiteList) {
                var j = 0;
                for (; j < whiteList.length; j++) {
                    if (path === whiteList[j]) {
                        break;
                    }
                }
                if (j >= whiteList.length) {
                    continue;
                }
            }

            html.push('<li><a href="' + baseURL + '/' + encodeHTML(path) + '">' + encodeHTML(path) + '</a></li>');
        }

        var caseListContainer = $(SELECTOR_CASES_LIST_CONTAINER);

        caseListContainer[0].innerHTML = html.join('');

        caseListContainer.off('click').on('click', SELECTOR_CASES_ITEM, function (e) {
            setState('pagePath', e.currentTarget.innerHTML);
            return false;
        });
    }

    function updatePage() {
        var pageURL = getCurrentPageURL();
        var pagePathInfo = getState('pagePathInfo');

        $(SELECTOR_CASES_LIST_CONTAINER + ' li').each(function (index, el) {
            el.style.background = pagePathInfo.index === index ? 'rgb(170, 224, 245)' : 'none';
        });

        var src = pagePathInfo.pagePath ? baseURL + '/' + pageURL : 'about:blank';
        var contentIframe = $(SELECTOR_CONTENT_IFRAME);
        contentIframe.attr('src', src);
    }

    // type: 'full' or 'short'
    function updatePageHint(type) {
        var pagePathInfo = getState('pagePathInfo');

        var newValue = !pagePathInfo.pagePath
            ? ''
            : type === 'short'
            ? (pagePathInfo.index != null ? (pagePathInfo.index + 1) + '. ' : '')
                + (pagePathInfo.pagePath || '')
            : testHelper.dir() + '/' + pagePathInfo.pagePath;

        $(SELECTOR_CURRENT).val(newValue);
    }

})();