@tamagui/react-native-web-lite
Version:
React Native for Web
117 lines (116 loc) • 7.08 kB
JavaScript
import React from "react";
import ReactDOMServer from "react-dom/server";
import StyleSheet from "../../StyleSheet/index";
import View from "../../View";
import AppRegistry from "..";
const NoopComponent = () => React.createElement("div");
describe("AppRegistry", () => {
describe("getApplication", () => {
test("does not throw when missing appParameters", () => {
AppRegistry.registerComponent("App", () => NoopComponent), expect(() => AppRegistry.getApplication("App")).not.toThrow();
}), test('returns "element" and "getStyleElement"', () => {
AppRegistry.registerComponent("App", () => NoopComponent);
const { element, getStyleElement } = AppRegistry.getApplication("App", {}), styleElement = ReactDOMServer.renderToStaticMarkup(getStyleElement());
expect(element).toMatchInlineSnapshot(`
<AppContainer
rootTag={{}}
>
<NoopComponent />
</AppContainer>
`), expect(styleElement).toMatchInlineSnapshot(`
"<style id=\\"react-native-stylesheet\\">[stylesheet-group=\\"0\\"]{}
body{margin:0;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
[stylesheet-group=\\"1\\"]{}
.css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
[stylesheet-group=\\"2\\"]{}
.r-display-xoduu5{display:inline-flex;}
.r-flex-13awgt0{flex:1;}
[stylesheet-group=\\"2.2\\"]{}
.r-bottom-1p0dtai{bottom:0px;}
.r-left-1d2f490{left:0px;}
.r-pointerEvents-105ug2t{pointer-events:auto;}
.r-pointerEvents-12vffkv>*{pointer-events:auto;}
.r-pointerEvents-12vffkv{pointer-events:none;}
.r-pointerEvents-633pao{pointer-events:none;}
.r-pointerEvents-ah5dr5>*{pointer-events:none;}
.r-pointerEvents-ah5dr5{pointer-events:auto;}
.r-position-u8s1d{position:absolute;}
.r-right-zchlnj{right:0px;}
.r-top-ipm5af{top:0px;}</style>"
`);
}), test('"getStyleElement" adds props to <style>', () => {
const nonce = "2Bz9RM/UHvBbmo3jK/PbYZ==";
AppRegistry.registerComponent("App", () => NoopComponent);
const { getStyleElement } = AppRegistry.getApplication("App", {}), styleElement = getStyleElement({ nonce });
expect(styleElement.props.nonce).toBe(nonce);
}), test('"getStyleElement" contains style updates', () => {
const getApplicationStyles = (appName) => {
const { getStyleElement } = AppRegistry.getApplication(appName, {});
return getStyleElement().props.dangerouslySetInnerHTML.__html;
}, RootComponent = () => React.createElement(View);
AppRegistry.registerComponent("App", () => RootComponent);
const first = getApplicationStyles("App");
expect(first).toMatchInlineSnapshot(`
"[stylesheet-group=\\"0\\"]{}
body{margin:0;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
[stylesheet-group=\\"1\\"]{}
.css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
[stylesheet-group=\\"2\\"]{}
.r-display-xoduu5{display:inline-flex;}
.r-flex-13awgt0{flex:1;}
[stylesheet-group=\\"2.2\\"]{}
.r-bottom-1p0dtai{bottom:0px;}
.r-left-1d2f490{left:0px;}
.r-pointerEvents-105ug2t{pointer-events:auto!important;}
.r-pointerEvents-12vffkv>*{pointer-events:auto;}
.r-pointerEvents-12vffkv{pointer-events:none!important;}
.r-pointerEvents-633pao{pointer-events:none!important;}
.r-pointerEvents-ah5dr5>*{pointer-events:none;}
.r-pointerEvents-ah5dr5{pointer-events:auto!important;}
.r-position-u8s1d{position:absolute;}
.r-right-zchlnj{right:0px;}
.r-top-ipm5af{top:0px;}"
`);
const styles = StyleSheet.create({
root: { borderWidth: 1234, backgroundColor: "purple" }
}), AlternativeComponent = () => React.createElement(View, { style: styles.root });
AppRegistry.registerComponent("AlternativeApp", () => AlternativeComponent);
const second = getApplicationStyles("AlternativeApp");
expect(second).toMatchInlineSnapshot(`
"[stylesheet-group=\\"0\\"]{}
body{margin:0;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
[stylesheet-group=\\"1\\"]{}
.css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
[stylesheet-group=\\"2\\"]{}
.r-borderWidth-1bee2fs{border-bottom-width:1234px;border-left-width:1234px;border-right-width:1234px;border-top-width:1234px;}
.r-display-xoduu5{display:inline-flex;}
.r-flex-13awgt0{flex:1;}
[stylesheet-group=\\"2.2\\"]{}
.r-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00);}
.r-bottom-1p0dtai{bottom:0px;}
.r-left-1d2f490{left:0px;}
.r-pointerEvents-105ug2t{pointer-events:auto!important;}
.r-pointerEvents-12vffkv>*{pointer-events:auto;}
.r-pointerEvents-12vffkv{pointer-events:none!important;}
.r-pointerEvents-633pao{pointer-events:none!important;}
.r-pointerEvents-ah5dr5>*{pointer-events:none;}
.r-pointerEvents-ah5dr5{pointer-events:auto!important;}
.r-position-u8s1d{position:absolute;}
.r-right-zchlnj{right:0px;}
.r-top-ipm5af{top:0px;}"
`);
const third = getApplicationStyles("App");
expect(third).toEqual(second);
});
});
});
//# sourceMappingURL=index-test.node.js.map