Skip to content

Instantly share code, notes, and snippets.

@PrototypeAlex

PrototypeAlex/deps

Last active September 15, 2016 08:40
Download ZIP

Revisions

  1. PrototypeAlex revised this gist Aug 10, 2014. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions deps
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    ✗ npm list react mocha chai jsdom
    [email protected] /Users/alex/Development/reactor
    ├── [email protected]
    ├─┬ [email protected]
    │ └── [email protected]
    ├─┬ [email protected]
    │ └─┬ [email protected]
    │ └── [email protected]
    ├── [email protected]
    ├── [email protected]
    └── [email protected]
  2. PrototypeAlex created this gist Aug 10, 2014.
    52 changes: 52 additions & 0 deletions gistfile1.sh
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    ✗ mocha layer-label-component-spec.js

    ․

    0 passing (31ms)
    1 failing

    1) LayerLabelComponent should change the state layerName on change event:
    Error: Invariant Violation: dangerouslyRenderMarkup(...): Cannot render markup in a Worker thread. This is likely a bug in the framework. Please report immediately.
    at invariant (/Users/alex/Development/reactor/node_modules/react/lib/invariant.js:49:15)
    at Object.Danger.dangerouslyRenderMarkup (/Users/alex/Development/reactor/node_modules/react/lib/Danger.js:61:46)
    at Object.DOMChildrenOperations.processUpdates (/Users/alex/Development/reactor/node_modules/react/lib/DOMChildrenOperations.js:138:33)
    at Object.ReactDOMIDOperations.dangerouslyProcessChildrenUpdates (/Users/alex/Development/reactor/node_modules/react/lib/ReactDOMIDOperations.js:184:29)
    at Object.dangerouslyProcessChildrenUpdates (/Users/alex/Development/reactor/node_modules/react/lib/ReactPerf.js:57:21)
    at processQueue (/Users/alex/Development/reactor/node_modules/react/lib/ReactMultiChild.js:145:40)
    at ReactMultiChild.Mixin.updateChildren (/Users/alex/Development/reactor/node_modules/react/lib/ReactMultiChild.js:259:40)
    at ReactDOMComponent.Mixin._updateDOMChildren (/Users/alex/Development/reactor/node_modules/react/lib/ReactDOMComponent.js:395:12)
    at ReactDOMComponent.Mixin.updateComponent (/Users/alex/Development/reactor/node_modules/react/lib/ReactDOMComponent.js:248:12)
    at null.updateComponent (/Users/alex/Development/reactor/node_modules/react/lib/ReactPerf.js:57:21)
    at ReactComponent.Mixin.performUpdateIfNecessary (/Users/alex/Development/reactor/node_modules/react/lib/ReactComponent.js:333:12)
    at ReactComponent.Mixin.receiveComponent (/Users/alex/Development/reactor/node_modules/react/lib/ReactComponent.js:314:12)
    at ReactDOMComponent.Mixin.receiveComponent (/Users/alex/Development/reactor/node_modules/react/lib/ReactDOMComponent.js:221:43)
    at ReactCompositeComponentMixin.updateComponent (/Users/alex/Development/reactor/node_modules/react/lib/ReactCompositeComponent.js:1181:31)
    at null.updateComponent (/Users/alex/Development/reactor/node_modules/react/lib/ReactPerf.js:57:21)
    at ReactCompositeComponentMixin._performComponentUpdate (/Users/alex/Development/reactor/node_modules/react/lib/ReactCompositeComponent.js:1123:10)
    at ReactCompositeComponentMixin.performUpdateIfNecessary (/Users/alex/Development/reactor/node_modules/react/lib/ReactCompositeComponent.js:1063:14)
    at runBatchedUpdates (/Users/alex/Development/reactor/node_modules/react/lib/ReactUpdates.js:152:17)
    at ReactReconcileTransaction.Mixin.perform (/Users/alex/Development/reactor/node_modules/react/lib/Transaction.js:141:20)
    at ReactUpdatesFlushTransaction.Mixin.perform (/Users/alex/Development/reactor/node_modules/react/lib/Transaction.js:141:20)
    at ReactUpdatesFlushTransaction.mixInto.perform (/Users/alex/Development/reactor/node_modules/react/lib/ReactUpdates.js:98:38)
    at Object.<anonymous> (/Users/alex/Development/reactor/node_modules/react/lib/ReactUpdates.js:176:19)
    at Object.flushBatchedUpdates (/Users/alex/Development/reactor/node_modules/react/lib/ReactPerf.js:57:21)
    at ReactDefaultBatchingStrategyTransaction.Mixin.closeAll (/Users/alex/Development/reactor/node_modules/react/lib/Transaction.js:214:42)
    at ReactDefaultBatchingStrategyTransaction.Mixin.perform (/Users/alex/Development/reactor/node_modules/react/lib/Transaction.js:155:16)
    at Object.ReactDefaultBatchingStrategy.batchedUpdates (/Users/alex/Development/reactor/node_modules/react/lib/ReactDefaultBatchingStrategy.js:70:19)
    at Object.batchedUpdates (/Users/alex/Development/reactor/node_modules/react/lib/ReactUpdates.js:113:20)
    at Object.change (/Users/alex/Development/reactor/node_modules/react/lib/ReactTestUtils.js:328:18)
    at Context.<anonymous> (/Users/alex/Development/reactor/client/tests/unit/components/layer-label-component-spec.js:32:24)
    at callFn (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runnable.js:223:21)
    at Test.Runnable.run (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runnable.js:216:7)
    at Runner.runTest (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:373:10)
    at /Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:451:12
    at next (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:298:14)
    at /Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:308:7
    at next (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:246:23)
    at /Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:270:7
    at done (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runnable.js:185:5)
    at callFn (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runnable.js:228:7)
    at Hook.Runnable.run (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runnable.js:216:7)
    at next (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:258:10)
    at Object._onImmediate (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:275:5)
    at processImmediate [as _immediateCallback] (timers.js:336:15)
    36 changes: 36 additions & 0 deletions layer-label-component-spec.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    var jsdom = require('jsdom')
    var chai = require('chai')
    var TestUtils = require('react/addons').addons.TestUtils;
    var LayerLabelComponent = require('./layer-label-component')


    global.should = chai.should();

    var document = jsdom.jsdom('<html><body></body></html>', jsdom.level(1, 'core'))

    before(function() {
    this.document = document;
    global.document = this.document;
    global.window = this.document.parentWindow;
    });

    describe('LayerLabelComponent', function() {

    beforeEach(function() {

    });

    it('should change the state layerName on change event', function() {
    var htmlContainer = this.document.createElement('div');
    var node = { properties: { name: 'something' } };

    var layerLabelComponent = LayerLabelComponent({node: node});
    var instance = TestUtils.renderIntoDocument(layerLabelComponent, htmlContainer);

    var input = TestUtils.findRenderedDOMComponentWithClass(instance, 'layer-input');

    TestUtils.Simulate.change(input, { target: { value: 'something_else' } })

    instance.state.layerName.should.eq('something_else')
    });
    });
    48 changes: 48 additions & 0 deletions layer-label-component.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    var React = require('react');
    var classSet = React.addons.classSet;

    var LayerLabelComponent = React.createClass({

    updateNodeName: function(event) {
    this.setState({layerName: event.target.value})
    },

    getInitialState: function() {
    return {
    editing: false,
    layerName: this.props.node.properties.name
    };
    },

    toggleEditing: function() {
    this.setState({editing: !this.state.editing})
    },

    componentDidUpdate: function(prevProps, prevState) {
    if(this.state.editing){
    // Excuse the hack to gain focus
    this.refs.layerInput.getDOMNode().focus()
    }
    },

    render: function() {
    var inputClass = classSet({ 'layer-input': true, 'is-hidden': !this.state.editing })
    var labelClass = classSet({ 'layer-name': true, 'is-hidden': this.state.editing })
    return (
    React.DOM.div({className: "layer-label"},
    React.DOM.form({className: "layer-input-form"},
    React.DOM.input({ ref: "layerInput",
    className: inputClass,
    value: this.state.layerName,
    onChange: this.updateNodeName})
    ),
    React.DOM.div({className: labelClass, onClick: this.toggleEditing},
    this.state.layerName
    )
    )
    );
    }

    });

    module.exports = LayerLabelComponent