hbp-react-ui/test/_comparison.tests.js

A library of useful user-interface components built with React and MobX

import React from 'react';
import ReactDOM from 'react-dom';

import { observable } from 'mobx';
import { observer } from 'mobx-react';

import Styles from '../src/Styles';
import NameValueArray from '../src/NameValue';
import DynamicList from '../src/DynamicList';
// import DynamicListSelect from '../src/DynamicListSelect';
import InputText from '../src/InputText';
import MultiSelect from '../src/MultiSelect';
import Select from '../src/Select';
import Tree from '../src/Tree';

@observer
class Component extends React.Component {
    @observable items = ['Mercury','Venus','Earth','Mars','Jupiter','Saturn','Uranus','Neptune',];
    @observable options = new NameValueArray();
    @observable data = { "name": "The Sun", "value": "star1", "children": [ { "name": "Mercury", "value": "planet1" }, { "name": "Venus", "value": "planet2" }, { "name": "Earth", "value": "planet3", "children": [ { "name": "Moon", "value": "moon1" }, ] }, { "name": "Mars", "value": "planet4", "children": [ { "name": "Phobos", "value": "moon2" }, { "name": "Deimos", "value": "moon3" }, ] }, ] };
    
    constructor(props) {
        super(props);
        this.options.addFromJSON([{ name: 'Star', value: 'S' }, { name: 'Asteroid', value: 'A' }, { name: 'Planet', value: 'P' }, { name: 'Moon', value: 'M' },]);
    }

    render() {
        console.log('Component.render');
        return (
            <div style={Styles.styleTable()}>
                <div style={Styles.styleRowGroup()}>
                    <div style={Styles.styleRow()}>
                        {/* <div style={Styles.styleCell()}>
                            <DynamicList
                                path={'/SolarSystem/PlanetList'}
                                onUpdateList={this.onUpdateList.bind(this)} 
                                items={this.items}
                                onAddItem={this.onAddItem.bind(this)}
                                ref={(childComponent) => { this.childComponent = childComponent; }}
                            />
                        </div>
                        <div style={Styles.styleCell()}>
                            <DynamicListNameValue
                                path={'/SolarSystem/ObjectType'}
                                onUpdateList={this.onUpdateList.bind(this)} 
                                items={this.options.items}
                                onAddItem={this.onAddItem.bind(this)}
                                ref={(childComponent) => { this.childComponent = childComponent; }}
                            />
                        </div>
                        <div style={Styles.styleCell()}>
                            <Select
                                path='/SolarSystem/ObjectType'
                                onSelect={this.onSelect.bind(this)} 
                                options={this.options}
                                selection={'M'}
                                ref={(childComponent) => { this.childComponent = childComponent; }}
                            />
                        </div> */}
                        <div style={Styles.styleCell()}>
                            <MultiSelect
                                path='/SolarSystem/ObjectType'
                                onSelect={this.onSelect.bind(this)} 
                                options={this.options}
                                ref={(childComponent) => { this.childComponent = childComponent; }}
                            />
                        </div>
                        {/* <div style={Styles.styleCell()}>
                            <Tree
                                path={'/SolarSystem/Orbit'}
                                onSelect={this.onSelect.bind(this)} 
                                data={this.data}
                                ref={(childComponent) => { this.childComponent = childComponent; }}
                                />
                        </div> */}
                    </div>
                </div>
            </div>
        );
    }

    onAddItem(onAddItemAction) {
        console.log('Component.onAddItem');
        onAddItemAction('');
    }

    onUpdateList(path, values) {
        console.log(`Component.onUpdateList: ${path} - ${values.join()}`);
    }

    onSelect(path, option) {
        console.log(`Component.onSelect: ${path} - {name: '${option.name}', value: '${option.value}'}`);
    }
}

QUnit.module('DynamicList', function (hooks) {
    console.clear();
    this.component = ReactDOM.render(<Component />, document.getElementById('react'));

    hooks.before(function (assert) {
        console.log('QUnit.hooks.before');
        assert.ok(true, 'before');
    });

    QUnit.test('renderedParent', function (assert) {
        console.log('QUnit.renderedParent');
        var component = assert.test.module.testEnvironment.component;
        assert.ok(typeof (component.props) == 'object', 'passed');
    });

    // hooks.after(function (assert) { // Not getting called here for some reason
    //     console.log('QUnit.hooks.after');
    //     ReactDOM.unmountComponentAtNode(document.getElementById('react'));
    //     assert.ok(true, 'after');
    // });
});