Feeds:
文章
评论

Archive for the ‘Cherub in Share’ Category

Environments

Openshift cartridges: python 2.7

Django 1.8

According to this thread, “Files in $OPENSHIFT_REPO_DIR/wsgi/static folder are served by Apache directly”, so we have the following setting works well.

setting.py

STATIC_URL = ‘/static/’

STATIC_ROOT = os.path.join(DJ_PROJECT_DIR, ‘../../static’)

STATICFILES_FINDERS = (

    ‘django.contrib.staticfiles.finders.FileSystemFinder’,

    ‘django.contrib.staticfiles.finders.AppDirectoriesFinder’,

)

STATICFILES_DIRS = (

    os.path.join(DJ_PROJECT_DIR, ‘../../dist’),

)

Note:

1) STATIC_URL and STATIC_ROOT map yourdomain.com/static/ to the $OPENSHIFT_REPO_DIR/wsgi/static.

2) We also set STATICFILES_DIRS to wsgi/dist as we also use browserify to bundle the sources, which are in /wsgi/static_src

3) Collecting static files to STATIC_ROOT is part of openshift’s deploy job. See the 4th step of this instruction.

 

Read Full Post »

The recent project uses React.js, and React Bootstrap library. We found the following unittest setting works well:

  • runner: karma
  • framework:  mocha
  • JSX transformer: babel
  • dependency management: webpack

Setup

 

SUT (subject under test) : e.g. ./static/js/components/myComponent.js
tests: e.g. /static/js/components/__tests__/myComponent-test.js

package.json

"devDependencies": {
"babel-core": "^5.3.0",
"babel-loader": "^5.3.0",     # default install babel 6.+, but we need version 5.3+ to compile react-booststrap library
"expect": "^1.13.4",
"karma": "^0.13.16",
"karma-chrome-launcher": "^0.2.2",
"karma-cli": "^0.1.2",
"karma-mocha": "^0.2.1",
"karma-webpack": "^1.7.0",
"mocha": "^2.3.4",
"react": "^0.14.3",
"react-addons-test-utils": "*",
"react-bootstrap": "*",
"react-dom": "~0.14.0",
"webpack": "^1.12.9",
}

karma.conf.js

var webpack = require(‘webpack’);

module.exports = function (config) {
    config.set({
        browsers: [‘Chrome’],
        singleRun: true,
        frameworks: [‘mocha’],
        files: [
            ‘tests.webpack.js’
        ],
        preprocessors: {
            ‘tests.webpack.js’: [‘webpack’]
        },
        reporters: [‘dots’],
        webpack: {
            module: {
                loaders: [
                    {test: /\.jsx?$/, exclude: /node_modules/, loader: ‘babel-loader’}
                ]
            },
            watch: true
        },
        webpackServer: {
            noInfo: true
        }
    });
};

tests.webpack.js

var context = require.context(‘./static/js/components’, true, /-test\.jsx?$/);
context.keys().forEach(context);

Run test

npm test

Test strategies

Render the SUT

var myComponent = TestUtils.renderIntoDocument(<MyComponent prop1={prop1}/>);

Verify the SUT

expect(myComponent.state.state1).toBe(‘someState’);
expect(myComponent.props.prop1).toBe(‘someProp’);

Verify SUT’s DOM

// assume SUT is rendered as

contents

var node = ReactDOM.findDOMNode(myComponent);
expect(node.childNode.textContent).toBe(‘contents’);

 

Verify SUT’s child component

Several ways to access SUT’s child nodes:

  • Using React component’s ref property
  • Via the rendered DOM
  • TestUtils methods, e.g. TestUtils.scryRenderedDOMComponentsWithClass

Need to distinguish between an React component instance and a DOM node instance.

var childComponent = myComponent.refs.childRef;
expect(childComponent).toExist();
expect(childComponent.state.state1).toBe(‘someState’);
expect(childComponent.props.prop1).toBe(‘someProp’);

Verify SUT’s multiple child components of the same class/tag

var childNodes = TestUtils.scryRenderedDOMComponentsWithClass(myComponent, ‘label’); 
expect(childNodes.length).toBe(3);

Verify SUT’s child node

var childComponent = myComponent.ref.childRef;
var childNode = ReactDOM.findDOMNode(childComponent);
expect(childNode.textContent).toBe(‘something’);

Simulate SUT event

// assume SUT is rendered as

contents

var nodeHavingOnClickEvent = ReactDOM.findDOMNode(myComponent).firstChild;
TestUtils.Simulate.click(nodeHavingOnClickEvent);    // invoke node <span>’s onClick event

Simulate changes to SUT’ properties or state

myComponent.state.state1 = ‘anotherState’;
TestUtils.Simulate.change(myComponent);

Simulate changes to ReactBootstrap.Input’s value

/** e.g. render() : function() {
      return (
       

           
       

    );
}

*//

var input = myComponent.refs.input;
input.getInputDOMNode().value = ‘newValue’;
TestUtils.Simulate.change(input.getInputDOMNode());

Test ReactBooststrap’s modal

/**

ReactBooststrap’s modal has many child components, e.g. title, body, etc.
e.g. MyModal
render: function() {
        return (
           

               
                   
                        {this.props.title}
                   
                   
                        {this.props.body}
                   
                   
                   
               
           

        );
    }
*/   
    it(‘does not render when props.show is false’, ()=>{
        // render in the document
        var modal = TestUtils.renderIntoDocument(
            <MyModal show={false} />
        );
        var notFound = ReactDOM.findDOMNode(modal.refs.title);
        expect(notFound).toNotExist();
    });
    it(‘renders when props.show is true’, () => {
        // render in the document
        var modal = TestUtils.renderIntoDocument(
            <MyModal show={true} />
        );
        var found = ReactDOM.findDOMNode(modal.refs.title);
        expect(found).toExist();
    });

 

References

Read Full Post »

I prefer a comfort-for-eye background colour:  C7EDCC. Edit Sublime Text 3 Colour Theme is surprisingly easy.

 

Install PackageResourceViewer.

 

PackageResourceViewer: OpenResource

image

Then walk through the package resources, we need to open:

Color Scheme – Default

IDLE.tmTheme

Edit the the background value, and that’s it!

Winking smile

 

There is also an amazing cool colour theme editor:

http://tmtheme-editor.herokuapp.com

Read Full Post »

I bought TP-LINK AV500 wifi Powerline extender starter kits, including one TL-PA4010 and two TL-WPA4220. The best part of this solution is to extend the network as far as power line covers, and wifi clone.

The setup should be as easy as the following diagram and several button pressing. Unified Home Network

But, it was not. I could not tell why/how, but it did not work for me…

Lucky we can do it hard way, which guarantee success.

We need TP-LINK Powerline Scan tool (find in the product CD or this link). We then plug all powerline devices into wall sockets. We need at least one Ethernet cable.

We need to accomplish the following two tasks:

1) Add two TL-WPA4220 to TL-PA4010’s network.

Connect laptop to any TL-WPA4220 using Ethernet cable. Use the Powerline Scan tool to find and connect to the device. Login user and password are both ‘admin’. In the page, write down ‘Device Password’ and ‘Mac Address’. Find the info for the two TL-WPA4220.

Then connect to TL-PA4010 using Ethernet cable. Use the Powerline Scan tool to find and connect to the device. Login user and password are both ‘admin’. Click ‘Powerline’ -> ‘Station Setting’ in the left side menu. On the right side main page, click ‘Add New…’, enter a TL-WPA4220’s  Device Password, and any Device Name. And we are done adding TL-WPA4220 to TL-PA4010’s network.

2) Set TL-WPA4220 to clone home wifi. (necessary if home wifi router does not support WPS feature)

Use Ethernet cable to connect to TL-WPA4220. In the admin website, Click ‘Wireless’ -> ‘Wireless Setting’, edit SSID the same as home wifi SSID. ‘Wireless’ -> ‘Wireless Security’ to set the same authentication method and login password. Reboot the device to save the settings. Then we are done to set TL-WPA4220 to clone home wifi.

That’s it. I now have strong wifi signal in garden.

Read Full Post »

Google chromecast

Google Chromecast + Google Chrome brower + unlock youku extension. Ultimate solution. 🙂

Read Full Post »

Read Full Post »

Read Full Post »

Older Posts »