@ray-core/runtime
Version:
Ray 是一个全新的基于 React 的小程序开发框架
471 lines (470 loc) • 17.8 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import * as React from 'react';
import './helpers/setupGlobals';
import createPageConfig from '../createPageConfig';
import { usePageEvent } from '../../src';
import { RuntimeOptions } from '@ray-core/framework-shared';
import View from './helpers/View';
import Page from './helpers/Page';
var TEST_PAGE = 'pages/test/index';
describe('page', function () {
beforeAll(function () {
RuntimeOptions.apply({
appEvents: [
'onLaunch',
'onShow',
'onHide',
'onShareAppMessage',
'onPageNotFound',
'onError',
'onUnhandledRejection',
'onThemeChange',
],
pageEvents: {
'pages/test/only/onshow': ['onShow'],
'pages/test/index': [
'onShow',
'onHide',
'onPullDownRefresh',
'onPullIntercept',
'onReachBottom',
'onPageScroll',
'onShareAppMessage',
'onShareTimeline',
'onTitleClick',
'onOptionMenuClick',
'onPopMenuClick',
'onReady',
'onResize',
'onTabItemTap',
],
},
});
});
afterAll(function () {
RuntimeOptions.reset();
});
it('create page config', function () {
var Foo = function () {
return React.createElement(View, null, "foo");
};
var page = Page(createPageConfig(Foo, TEST_PAGE));
getApp().onLaunch();
page.load();
expect(page.config.wrapper).not.toBeNull();
});
describe('hooks', function () {
it('works', function () {
var log = [];
var Foo = function () {
usePageEvent('onLoad', function () {
log.push('useLoad');
});
usePageEvent('onUnload', function () {
log.push('useUnload');
});
usePageEvent('onReady', function () {
log.push('useReady');
});
usePageEvent('onShow', function () {
log.push('useShow');
});
usePageEvent('onHide', function () {
log.push('useHide');
});
usePageEvent('onPullDownRefresh', function () {
log.push('usePullDownRefresh');
});
usePageEvent('onReachBottom', function () {
log.push('useReachBottom');
});
usePageEvent('onPageScroll', function () {
log.push('usePageScroll');
});
usePageEvent('onShareAppMessage', function (object) {
log.push(object.from);
log.push('useShareAppMessage');
return {};
});
usePageEvent('onShareTimeline', function (object) {
log.push(object.from);
log.push('useShareTimeline');
return {};
});
usePageEvent('onTitleClick', function () {
log.push('useTitleClick');
});
usePageEvent('onOptionMenuClick', function () {
log.push('useOptionMenuClick');
});
usePageEvent('onPopMenuClick', function () {
log.push('usePopMenuClick');
});
usePageEvent('onPullIntercept', function () {
log.push('usePullIntercept');
});
usePageEvent('onBack', function () {
log.push('useEventOnBack');
});
usePageEvent('onKeyboardHeight', function () {
log.push('useEventOnKeyboardHeight');
});
usePageEvent('onTabItemTap', function () {
log.push('useEventOnTabItemTap');
});
usePageEvent('beforeTabItemTap', function () {
log.push('useEventBeforeTabItemTap');
});
usePageEvent('onResize', function () {
log.push('useEventOnResize');
});
usePageEvent('onShow', function () {
log.push('useEventOnShow');
});
return React.createElement(View, null, "foo");
};
var page = Page(createPageConfig(Foo, TEST_PAGE));
page.load();
page.ready();
page.pullDownRefresh();
page.pullIntercept();
page.reachBottom();
page.pageScroll();
page.shareAppMessage();
page.shareTimeline();
page.titleClick();
page.optionMenuClick();
page.popMenuClick();
page.back();
page.keyboardHeight();
page.tabItemTap();
page.beforeTabItemTap();
page.resize();
page.hide();
page.unload();
expect(log).toEqual([
'useLoad',
'useShow',
'useEventOnShow',
'useReady',
'usePullDownRefresh',
'usePullIntercept',
'useReachBottom',
'usePageScroll',
'menu',
'useShareAppMessage',
'menu',
'useShareTimeline',
'useTitleClick',
'useOptionMenuClick',
'usePopMenuClick',
'useEventOnBack',
'useEventOnKeyboardHeight',
'useEventOnTabItemTap',
// 测试了微信和阿里两个hook，所以有两个
'useEventOnTabItemTap',
'useEventBeforeTabItemTap',
'useEventOnResize',
// 测试了微信和阿里两个hook，所以有两个
'useEventOnResize',
'useHide',
'useUnload',
]);
});
it('works in component', function () {
var log = [];
var Foo = function () {
usePageEvent('onShow', function () {
log.push('onShow');
});
return React.createElement(View, null, "foo");
};
var Bar = function () { return React.createElement(Foo, null); };
var page = Page(createPageConfig(Bar, TEST_PAGE));
page.load();
expect(log).toEqual(['onShow']);
});
it('register once', function () {
var log = [];
var foo = React.createRef();
var Foo = React.forwardRef(function (props, ref) {
var forceUpdate = React.useState(0)[1];
usePageEvent('onShow', function () {
log.push('onShow');
});
usePageEvent('onShareAppMessage', function () {
log.push('onShareAppMessage');
});
React.useImperativeHandle(ref, function () { return ({
forceUpdate: forceUpdate,
}); });
return React.createElement(View, null, "foo");
});
var page = Page(createPageConfig(function () { return React.createElement(Foo, { ref: foo }); }, TEST_PAGE));
page.load();
foo.current.forceUpdate();
page.shareAppMessage();
expect(log).toEqual(['onShow', 'onShareAppMessage']);
});
it('call once with child hook', function () {
var log = [];
var foo = React.createRef();
var Child = function () {
var _a = __read(React.useState(0), 2), count = _a[0], setCount = _a[1];
usePageEvent('onShow', function () {
log.push('child onShow');
setCount(count + 1);
});
return React.createElement(View, null, "Child");
};
var Foo = React.forwardRef(function (props, ref) {
usePageEvent('onShow', function () {
log.push('foo onShow');
});
return (React.createElement(View, null,
React.createElement(Child, null)));
});
var page = Page(createPageConfig(function () { return React.createElement(Foo, { ref: foo }); }, TEST_PAGE));
page.load();
expect(log).toEqual(['child onShow', 'foo onShow']);
});
});
it('lifecycle methods', function () {
var log = [];
var Foo = /** @class */ (function (_super) {
__extends(Foo, _super);
function Foo() {
return _super !== null && _super.apply(this, arguments) || this;
}
Foo.prototype.componentWillMount = function () {
log.push('componentWillMount');
};
Foo.prototype.componentDidMount = function () {
log.push('componentDidMount');
};
Foo.prototype.componentWillUnmount = function () {
log.push('componentWillUnmount');
};
Foo.prototype.onLoad = function () {
log.push('onLoad');
};
Foo.prototype.onUnload = function () {
log.push('onUnload');
};
Foo.prototype.onShow = function () {
log.push('onShow');
};
Foo.prototype.onHide = function () {
log.push('onHide');
};
Foo.prototype.onPullDownRefresh = function () {
log.push('onPullDownRefresh');
};
Foo.prototype.onReachBottom = function () {
log.push('onReachBottom');
};
Foo.prototype.onPageScroll = function () {
log.push('onPageScroll');
};
Foo.prototype.onShareAppMessage = function (object) {
log.push(object.from);
log.push('onShareAppMessage');
};
Foo.prototype.onShareTimeline = function (object) {
log.push(object.from);
log.push('onShareTimeline');
};
Foo.prototype.onTitleClick = function () {
log.push('onTitleClick');
};
Foo.prototype.onOptionMenuClick = function () {
log.push('onOptionMenuClick');
};
Foo.prototype.onPopMenuClick = function () {
log.push('onPopMenuClick');
};
Foo.prototype.onPullIntercept = function () {
log.push('onPullIntercept');
};
Foo.prototype.onResize = function () {
log.push('onResize');
};
Foo.prototype.onTabItemTap = function () {
log.push('onTabItemTap');
};
Foo.prototype.onKeyboardHeight = function () {
log.push('onKeyboardHeight');
};
Foo.prototype.onBack = function () {
log.push('onBack');
};
Foo.prototype.beforeTabItemTap = function () {
log.push('beforeTabItemTap');
};
Foo.prototype.render = function () {
return React.createElement(View, null, "foo");
};
return Foo;
}(React.Component));
var page = Page(createPageConfig(Foo, TEST_PAGE));
page.load();
page.pullDownRefresh();
page.pullIntercept();
page.reachBottom();
page.pageScroll();
page.shareAppMessage();
page.shareTimeline();
page.titleClick();
page.optionMenuClick();
page.popMenuClick();
page.hide();
page.back();
page.keyboardHeight();
page.beforeTabItemTap();
page.tabItemTap();
page.resize();
page.unload();
expect(log).toEqual([
'componentWillMount',
'componentDidMount',
'onLoad',
'onShow',
'onPullDownRefresh',
'onPullIntercept',
'onReachBottom',
'onPageScroll',
'menu',
'onShareAppMessage',
'menu',
'onShareTimeline',
'onTitleClick',
'onOptionMenuClick',
'onPopMenuClick',
'onHide',
'onBack',
'onKeyboardHeight',
'beforeTabItemTap',
'onTabItemTap',
'onTabItemTap',
'onResize',
'onResize',
'onUnload',
'componentWillUnmount',
]);
});
it('hooks methods', function (done) {
var log = [];
var Foo = function () {
React.useEffect(function () {
log.push('componentDidMount');
return function () {
log.push('componentWillUnmount');
expect(log).toEqual(['componentDidMount', 'componentWillUnmount']);
done();
};
}, []);
return React.createElement(View, null, "foo");
};
var page = Page(createPageConfig(Foo, TEST_PAGE));
page.load();
page.unload();
});
it('call useEffect', function (done) {
var Foo = React.forwardRef(function (props, ref) {
var log = React.useRef([]);
var times = React.useRef(0);
var _a = __read(React.useState(1), 2), v1 = _a[0], upV1 = _a[1];
var _b = __read(React.useState(1), 2), v2 = _b[0], upV2 = _b[1];
React.useEffect(function () {
log.current.push('foo didMount');
return function () {
expect(times.current).toEqual(2);
expect(log.current).toEqual(['foo onShow', 'foo didMount']);
done();
};
}, []);
React.useEffect(function updateTimes() {
times.current += 1;
}, [v1, v2]);
usePageEvent('onShow', function updateState() {
upV1(2);
upV2(2);
log.current.push('foo onShow');
});
return React.createElement(View, null, "useEffect");
});
var page = Page(createPageConfig(function () { return React.createElement(Foo, null); }, TEST_PAGE));
page.load();
page.unload();
});
it('call events batchedUpdates', function (done) {
var Foo = React.forwardRef(function (props, ref) {
var log = React.useRef([]);
var times = React.useRef(0);
var _a = __read(React.useState(1), 2), v1 = _a[0], upV1 = _a[1];
var _b = __read(React.useState(1), 2), v2 = _b[0], upV2 = _b[1];
var up = function (event) {
expect(event.stopPropagation).toBeTruthy();
upV1(2);
upV2(2);
};
React.useEffect(function () {
log.current.push('foo didMount');
return function () {
expect(times.current).toEqual(2);
expect(log.current).toEqual(['foo onShow', 'foo didMount']);
done();
};
}, []);
React.useEffect(function updateTimes() {
times.current += 1;
}, [v1, v2]);
usePageEvent('onShow', function updateState() {
log.current.push('foo onShow');
});
return React.createElement(View, { onClick: up }, "useEffect");
});
var page = Page(createPageConfig(function () { return React.createElement(Foo, null); }, TEST_PAGE));
page.load();
var fnKey = Object.keys(page.config).find(function (key) { return key.endsWith('onClick'); });
var fn = page.config[fnKey];
fn({
stopPropagation: function () {
// mock event
},
});
setTimeout(function () {
page.unload();
}, 300);
});
});