it('ignores change event after unmounted', () => {
const flux = new Flux();
flux.getActions('test').getSomething('foo');
const getterMap = {
test: store => ({ something: store.state.something })
};
const Component = React.createClass({
mixins: [fluxMixin(getterMap)],
render() {
return null;
}
});
const container = document.createElement('div');
const component = React.render(<Component flux={flux} />, container);
const listener = flux.getStore('test').listeners('change')[0];
React.unmountComponentAtNode(container);
flux.getActions('test').getSomething('bar');
listener();
expect(component.state.something).to.equal('foo');
});
it('fetch() correctly updates the state of the component with data from fetch and asArray set to true', function(done){
ref.child(testEndpoint).set(dummyArrData);
class TestComponent extends React.Component{
constructor(props){
super(props);
this.state = {
friends: []
}
}
componentDidMount(){
base.fetch(testEndpoint, {
context: this,
asArray: true,
then(friends){
this.setState({friends})
}
});
}
componentDidUpdate(){
expect(this.state.friends).toEqual(dummyArrData);
done();
}
render(){
return (
<div>
No Data
</div>
)
}
}
React.render(<TestComponent />, document.body);
});
it('bindToState() properly updates the local state property even when Firebase has initial date before bindToState is called', function(done){
ref.child(testEndpoint).set(dummyObjData);
class TestComponent extends React.Component{
constructor(props){
super(props);
this.state = {
data: {}
}
}
componentDidMount(){
this.ref = base.bindToState(testEndpoint, {
context: this,
state: 'data',
});
}
componentDidUpdate(){
expect(this.state.data).toEqual(dummyObjData);
done();
}
componentWillUnmount(){
base.removeBinding(this.ref);
}
render(){
return (
<div>
No Data
</div>
)
}
}
React.render(<TestComponent />, document.body);
});
it('bindToState() properly updates the local state property when the Firebase endpoint changes and asArray is true', function(done){
class TestComponent extends React.Component{
constructor(props){
super(props);
this.state = {
friends: []
}
}
componentWillMount(){
this.ref = base.bindToState('myFriends', {
context: this,
state: 'friends',
asArray: true
});
}
componentDidMount(){
ref.child('myFriends').set(dummyArrData);
}
componentDidUpdate(){
expect(this.state.friends).toEqual(dummyArrData);
done();
}
componentWillUnmount(){
base.removeBinding(this.ref);
}
render(){
return (
<div>
No Data
</div>
)
}
}
React.render(<TestComponent />, document.body);
});
it('syncState() returns an empty array when there is no Firebase data and asArray is true', function(done){
class TestComponent extends React.Component{
constructor(props){
super(props);
this.state = {
messages: []
}
}
componentWillMount(){
this.ref = base.syncState(testEndpoint, {
context: this,
state: 'messages',
asArray: true
});
}
componentDidMount(){
ref.child(testEndpoint).set(null);
}
componentDidUpdate(){
expect(this.state.messages).toEqual([]);
done();
}
componentWillUnmount(){
base.removeBinding(this.ref);
}
render(){
return (
<div>
No Data
</div>
)
}
}
React.render(<TestComponent />, document.body);
});
it('uses the global appElement', function() {
var app = document.createElement('div');
var node = document.createElement('div');
Modal.setAppElement(app);
React.render(React.createElement(Modal, {isOpen: true}), node);
equal(app.getAttribute('aria-hidden'), 'true');
ariaAppHider.resetForTesting();
React.unmountComponentAtNode(node);
});
it('accepts appElement as a prop', function() {
var el = document.createElement('div');
var node = document.createElement('div');
React.render(React.createElement(Modal, {
isOpen: true,
appElement: el
}), node);
equal(el.getAttribute('aria-hidden'), 'true');
React.unmountComponentAtNode(node);
});
it('has default props', function() {
var node = document.createElement('div');
Modal.setAppElement(document.createElement('div'));
var component = React.render(React.createElement(Modal), node);
var props = component.props;
equal(props.isOpen, false);
equal(props.ariaHideApp, true);
equal(props.closeTimeoutMS, 0);
React.unmountComponentAtNode(node);
ariaAppHider.resetForTesting();
});
lab.test('it handles unmounting', function (done) {
var container = global.document.createElement('div');
var ComponentWithContext = StubRouterContext(NotFound, {});
var NotFoundEl = React.createElement(ComponentWithContext, {});
React.render(NotFoundEl, container);
React.unmountComponentAtNode(container);
done();
});
it('renders into the body, not in context', function() {
var node = document.createElement('div');
var App = React.createClass({
render: function() {
return React.DOM.div({}, React.createElement(Modal, {isOpen: true, ariaHideApp: false}, 'hello'));
}
});
React.render(React.createElement(App), node);
var modalParent = document.body.querySelector('.ReactModalPortal').parentNode;
equal(modalParent, document.body);
React.unmountComponentAtNode(node);
});
it('removes listener before unmounting', () => {
const flux = new Flux();
const div = document.createElement('div');
const component = React.render(<ComponentWithFluxMixin flux={flux} />, div);
const store = flux.getStore('test');
component.connectToStores('test');
expect(store.listeners('change').length).to.equal(1);
React.unmountComponentAtNode(div);
expect(store.listeners('change').length).to.equal(0);
});
function initPostEditor(domNode, doc, instanceConfig) {
React.render(
React.createElement(
PostEditor, {
document: doc,
deleteMe: function () {},
didSave: function () {},
instanceConfig: instanceConfig
}
),
domNode
);
}
ElementProto.createdCallback = function() {
var props = {};
for (var i in this.attributes) {
var item = this.attributes[i];
props[item.name] = item.value;
}
this.props = props;
var fragment = document.createElement('content');
fragment.setAttribute('id', uuid());
this.appendChild(fragment);
var element = React.createElement(reactClass, this.props);
this.renderedReactElement = React.render(element, fragment);
};
it('works', function (done) {
var instance = React.render(<Main />, div);
var img = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'state-image')[0];
expect(img).not.to.be.ok();
var master = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'Master')[0];
var Alaska = TestUtils.scryRenderedDOMComponentsWithTag(master, 'a')[1];
location.hash = Alaska.getDOMNode().getAttribute('href');
setTimeout(function () {
img = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'state-image')[0];
expect(img).to.be.ok();
expect(img.props.src).to.be('http://www.50states.com/maps/alaska.gif');
done();
}, 1000);
});
html10n.bind('localized', function() {
console.log("Localized");
// This will change to react-router in the future
React.render(
<App />,
document.getElementById('ethernotes')
);
// We use html10n.language instead of navigator.language
// so that it doesn't translate moment if we don't have
// string translations for that locale
// if (moment) moment.locale([html10n.language]);
document.documentElement.lang = html10n.getLanguage();
document.documentElement.dir = html10n.getDirection();
});
(function() {
var React = require('react/addons'),
Master = require('./components/master')
window.React = React;
React.render(
<Master dataUri="/data.json" separation={0.5}/>,
document.getElementById('app-container')
);
})();
it('syncState() functions properly with a nested object data structure', function(done){
var nestedObj = {
name: 'Tyler',
age: 25,
friends: ['Joey', 'Mikenzi', 'Jacob'],
foo: {
bar: 'bar',
foobar: 'barfoo'
}
};
class TestComponent extends React.Component{
constructor(props){
super(props);
this.state = {
user: {}
}
}
componentWillMount(){
this.ref = base.syncState('userData', {
context: this,
state: 'user',
});
}
componentDidMount(){
this.setState({
user: nestedObj
});
}
componentDidUpdate(){
ref.child('userData').once('value', (snapshot) => {
var data = snapshot.val();
expect(data).toEqual(this.state.user);
expect(data).toEqual(nestedObj);
done();
});
};
componentWillUnmount(){
base.removeBinding(this.ref);
}
render(){
return (
<div>
No Data
</div>
)
}
}
React.render(<TestComponent />, document.body);
});
}).fail(function (response) {
if (response.status === 503) {
// need to make sure we remove the splash-image element is included in the HTML
// template by default but re-apply the splash screen-class to body so that the
// splash page displays correctly
$('.splash-image').remove();
$('body').addClass('splash-screen');
// replace the current view with the
var MaintenanceComponent = React.createFactory(MaintenanceScreen);
React.render(MaintenanceComponent(), document.getElementById('application'));
} else {
dfd.reject.apply(this, arguments);
}
});
DEMO.user.init = function (attr, cb) {
console.log('DEMO.user client init');
// the react app starts with the composition
var mountNode = document.getElementById("react-main-mount");
var Composition = require('../user/react/composition.jsx').UserComposition;
// render the react app
var is_ready_to_play=true;
React.render(<Composition />, mountNode);
// callback
if (cb) { cb(null); }
}
beforeEach(function () {
function onClose(){
callback1=1;
}
function onShow(){
callback2=1;
}
callback1 = 0;
callback2 = 0;
dialog = React.render((<Dialog
style={{width: 600}}
title={title}
onClose={onClose} onShow={onShow}>
<p>第一个dialog</p>
</Dialog>), container);
});
createTagNode: function createTagNode(pos) {
var node = document.createElement('span');
var label = this.state.translator.getLabel(pos.tag);
var config = this.props.config;
var onTagClick = function onTagClick() {
this.setState({ selectedTagPos: pos });
this.onToggleChoices();
};
var props = { tag: pos.tag, replaceChoices: this.state.replaceChoices, onClick: onTagClick.bind(this) };
React.render(config.createElement('pretty-tag', props, label), node);
return node;
}
it('knows how to make its href', function () {
var LinkWrapper = React.createClass({
render() {
return <Link to="/hello/michael" query={{the: 'query'}}>Link</Link>;
}
});
React.render((
<Router history={createHistory('/')}>
<Route path="/" component={LinkWrapper}/>
</Router>
), node, function () {
var a = node.querySelector('a');
expect(a.getAttribute('href')).toEqual('/hello/michael?the=query');
});
});
function drawSearchBar() {
var searchQuery = gMail.get.search_query();
if (!searchQuery) {
log('no search query detected');
return;
}
log('Search: ', searchQuery);
var searchTerm = gMail.tools.extract_email_address(searchQuery) || searchQuery;
if (!searchTerm)return;
log('searching: ', searchTerm);
initSearchBar();
React.render(
<SearchBar searchTerm={searchTerm} />,
document.querySelector('.b-search-bar')
);
}
$(function() {
var os = require('os');
var prettyBytes = require('pretty-bytes');
var React = require('react/addons');
var Stats = React.createClass({displayName: "Stats",
render: function() {
alert("123")
return (
React.createElement("p", {class: "stats"},
"Number of cpu cores: ", React.createElement("span", null, os.cpus().length),
"Free memory: ", React.createElement("span", null, prettyBytes(os.freemem()))
)
)
}
})
React.render(React.createElement(Stats, null), $(".react"));
})
it('bindToState() updates its local state with an empty array and object when the Firebase endpoint is null', function(done){
class TestComponent extends React.Component{
constructor(props){
super(props);
this.state = {
emptyObj: {},
emptyArr: [],
kickOffUpdate: false
}
}
componentWillMount(){
this.firstRef = base.bindToState('abcdefg', {
context: this,
state: 'emptyObj',
});
this.secondRef = base.bindToState('hijklmnop', {
context: this,
state: 'emptyArr',
asArray: true
});
}
componentDidMount(){
this.forceUpdate();
}
componentDidUpdate(){
expect(this.state.emptyObj).toEqual({});
expect(this.state.emptyArr).toEqual([]);
done();
}
componentWillUnmount(){
base.removeBinding(this.firstRef);
base.removeBinding(this.secondRef);
}
render(){
return (
<div>
No Data
</div>
)
}
}
React.render(<TestComponent />, document.body);
});
(function () {
var React = require('react/addons');
var injectTapEventPlugin = require('react-tap-event-plugin');
var Main = require('./components/main.js'); // Our custom react component
//Needed for React Developer Tools
window.React = React;
//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();
// Render the main app react component into the document body.
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
React.render(<Main />, document.body);
})();
$(document).ready(function(){
var user = docCookie.getItem("umyproto-react-builder-user");
var pass = docCookie.getItem("umyproto-react-builder-pass");
plugins.init();
React.render(<Application/>, document.body, function(){
ApplicationActions.refreshServerInfo();
});
Server.init({io: window.io});
window.onbeforeunload = function(e) {
ApplicationActions.stopAutosaveProjectModel();
};
});
function run() {
// Render the top-level React component
let props = {
path: path,
onSetTitle: (title) => document.title = title,
onSetMeta: setMetaTag,
onPageNotFound: emptyFunction
};
let element = React.createElement(App, props);
React.render(element, document.body);
// Update `Application.path` prop when `window.location` is changed
Dispatcher.register((payload) => {
if (payload.action.actionType === ActionTypes.CHANGE_LOCATION) {
element = React.cloneElement(element, {path: payload.action.path});
React.render(element, document.body);
}
});
}
function render() {
let loader, putForm, messages = [],
messageContainer, loaderContainer, putFormContainer;
store.messages.forEach((m, idx) => {
messages.push(<div className={m.css} key={m.id}>{m.text}</div>);
});
messageContainer = <div className="custom-message-container">
<ReactCSSTransitionGroup transitionName="fade" transitionAppear={true}>
{messages}
</ReactCSSTransitionGroup>
</div>;
if(store.loading) {
loader = <div id="custom-loader"><i className="fa fa-spinner fa-spin"></i></div>
}
loaderContainer = <ReactCSSTransitionGroup transitionName="fade" transitionAppear={true}>
{loader}
</ReactCSSTransitionGroup>
if(store.showPutForm) {
putForm = <PutForm />;
}
putFormContainer = <ReactCSSTransitionGroup transitionName="fade" transitionAppear={true}>
{putForm}
</ReactCSSTransitionGroup>
React.render(
<div>
{putFormContainer}
{loaderContainer}
{messageContainer}
<Navigation routes={routes} store={store} />
<Router routes={routes} store={store} />
</div>,
document.getElementById('root')
);
}
it('sets the initial state from the store', function () {
var called = false;
var value = 'potato';
var store = function () {return value;};
store.listen = noop;
store.unlisten = noop;
var Component = React.createClass({
mixins: [
connect(store, 'foo')
],
render: function () {
called = true;
expect(this.state).to.have.property('foo', value);
return React.createElement('div');
}
});
React.render(React.createElement(Component), global.document.body);
expect(called).to.be(true);
});