How to use createRoot method in storybook-root

Best JavaScript code snippet using storybook-root

codegen.spec.js

Source:codegen.spec.js Github

copy

Full Screen

...14var src_1 = require("../​src");15var runtimeHelpers_1 = require("../​src/​runtimeHelpers");16var testUtils_1 = require("./​testUtils");17var shared_1 = require("@vue/​shared");18function createRoot(options) {19 if (options === void 0) { options = {}; }20 return __assign({ type: 0, children: [], helpers: [], components: [], directives: [], hoists: [], cached: 0, codegenNode: src_1.createSimpleExpression("null", false), loc: src_1.locStub }, options);21}22describe('compiler: codegen', function () {23 test('module mode preamble', function () {24 var root = createRoot({25 helpers: [runtimeHelpers_1.CREATE_VNODE, runtimeHelpers_1.RESOLVE_DIRECTIVE]26 });27 var code = src_1.generate(root, { mode: 'module' }).code;28 expect(code).toMatch("import { " + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_VNODE] + ", " + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_DIRECTIVE] + " } from \"vue\"");29 expect(code).toMatchSnapshot();30 });31 test('function mode preamble', function () {32 var root = createRoot({33 helpers: [runtimeHelpers_1.CREATE_VNODE, runtimeHelpers_1.RESOLVE_DIRECTIVE]34 });35 var code = src_1.generate(root, { mode: 'function' }).code;36 expect(code).toMatch("const _Vue = Vue");37 expect(code).toMatch("const { " + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_VNODE] + ": _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_VNODE] + ", " + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_DIRECTIVE] + ": _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_DIRECTIVE] + " } = _Vue");38 expect(code).toMatchSnapshot();39 });40 test('function mode preamble w/​ prefixIdentifiers: true', function () {41 var root = createRoot({42 helpers: [runtimeHelpers_1.CREATE_VNODE, runtimeHelpers_1.RESOLVE_DIRECTIVE]43 });44 var code = src_1.generate(root, {45 mode: 'function',46 prefixIdentifiers: true47 }).code;48 expect(code).not.toMatch("const _Vue = Vue");49 expect(code).toMatch("const { " + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_VNODE] + ", " + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_DIRECTIVE] + " } = Vue");50 expect(code).toMatchSnapshot();51 });52 test('assets', function () {53 var root = createRoot({54 components: ["Foo", "bar-baz", "barbaz"],55 directives: ["my_dir"]56 });57 var code = src_1.generate(root, { mode: 'function' }).code;58 expect(code).toMatch("const _component_Foo = _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_COMPONENT] + "(\"Foo\")\n");59 expect(code).toMatch("const _component_bar_baz = _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_COMPONENT] + "(\"bar-baz\")\n");60 expect(code).toMatch("const _component_barbaz = _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_COMPONENT] + "(\"barbaz\")\n");61 expect(code).toMatch("const _directive_my_dir = _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_DIRECTIVE] + "(\"my_dir\")\n");62 expect(code).toMatchSnapshot();63 });64 test('hoists', function () {65 var root = createRoot({66 hoists: [67 src_1.createSimpleExpression("hello", false, src_1.locStub),68 src_1.createObjectExpression([69 src_1.createObjectProperty(src_1.createSimpleExpression("id", true, src_1.locStub), src_1.createSimpleExpression("foo", true, src_1.locStub))70 ], src_1.locStub)71 ]72 });73 var code = src_1.generate(root).code;74 expect(code).toMatch("const _hoisted_1 = hello");75 expect(code).toMatch("const _hoisted_2 = { id: \"foo\" }");76 expect(code).toMatchSnapshot();77 });78 test('prefixIdentifiers: true should inject _ctx statement', function () {79 var code = src_1.generate(createRoot(), { prefixIdentifiers: true }).code;80 expect(code).toMatch("const _ctx = this\n");81 expect(code).toMatchSnapshot();82 });83 test('static text', function () {84 var code = src_1.generate(createRoot({85 codegenNode: {86 type: 2,87 content: 'hello',88 loc: src_1.locStub89 }90 })).code;91 expect(code).toMatch("return \"hello\"");92 expect(code).toMatchSnapshot();93 });94 test('interpolation', function () {95 var code = src_1.generate(createRoot({96 codegenNode: src_1.createInterpolation("hello", src_1.locStub)97 })).code;98 expect(code).toMatch("return _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.TO_STRING] + "(hello)");99 expect(code).toMatchSnapshot();100 });101 test('comment', function () {102 var code = src_1.generate(createRoot({103 codegenNode: {104 type: 3,105 content: 'foo',106 loc: src_1.locStub107 }108 })).code;109 expect(code).toMatch("return _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_COMMENT] + "(\"foo\")");110 expect(code).toMatchSnapshot();111 });112 test('compound expression', function () {113 var code = src_1.generate(createRoot({114 codegenNode: src_1.createCompoundExpression([115 "_ctx.",116 src_1.createSimpleExpression("foo", false, src_1.locStub),117 " + ",118 {119 type: 5,120 loc: src_1.locStub,121 content: src_1.createSimpleExpression("bar", false, src_1.locStub)122 }123 ])124 })).code;125 expect(code).toMatch("return _ctx.foo + _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.TO_STRING] + "(bar)");126 expect(code).toMatchSnapshot();127 });128 test('ifNode', function () {129 var code = src_1.generate(createRoot({130 codegenNode: {131 type: 9,132 loc: src_1.locStub,133 branches: [],134 codegenNode: src_1.createSequenceExpression([135 src_1.createSimpleExpression('foo', false),136 src_1.createSimpleExpression('bar', false)137 ])138 }139 })).code;140 expect(code).toMatch("return (foo, bar)");141 expect(code).toMatchSnapshot();142 });143 test('forNode', function () {144 var code = src_1.generate(createRoot({145 codegenNode: {146 type: 11,147 loc: src_1.locStub,148 source: src_1.createSimpleExpression('foo', false),149 valueAlias: undefined,150 keyAlias: undefined,151 objectIndexAlias: undefined,152 children: [],153 codegenNode: src_1.createSequenceExpression([154 src_1.createSimpleExpression('foo', false),155 src_1.createSimpleExpression('bar', false)156 ])157 }158 })).code;159 expect(code).toMatch("return (foo, bar)");160 expect(code).toMatchSnapshot();161 });162 test('Element (callExpression + objectExpression + TemplateChildNode[])', function () {163 var code = src_1.generate(createRoot({164 codegenNode: testUtils_1.createElementWithCodegen([165 "\"div\"",166 src_1.createObjectExpression([167 src_1.createObjectProperty(src_1.createSimpleExpression("id", true, src_1.locStub), src_1.createSimpleExpression("foo", true, src_1.locStub)),168 src_1.createObjectProperty(src_1.createSimpleExpression("prop", false, src_1.locStub), src_1.createSimpleExpression("bar", false, src_1.locStub)),169 src_1.createObjectProperty({170 type: 8,171 loc: src_1.locStub,172 children: [173 "foo + ",174 src_1.createSimpleExpression("bar", false, src_1.locStub)175 ]176 }, src_1.createSimpleExpression("bar", false, src_1.locStub))177 ], src_1.locStub),178 [179 testUtils_1.createElementWithCodegen([180 "\"p\"",181 src_1.createObjectExpression([182 src_1.createObjectProperty(src_1.createSimpleExpression("some-key", true, src_1.locStub), src_1.createSimpleExpression("foo", true, src_1.locStub))183 ], src_1.locStub)184 ])185 ],186 shared_1.PatchFlags.FULL_PROPS + ''187 ])188 })).code;189 expect(code).toMatch("\n return _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_VNODE] + "(\"div\", {\n id: \"foo\",\n [prop]: bar,\n [foo + bar]: bar\n }, [\n _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_VNODE] + "(\"p\", { \"some-key\": \"foo\" })\n ], " + shared_1.PatchFlags.FULL_PROPS + ")");190 expect(code).toMatchSnapshot();191 });192 test('ArrayExpression', function () {193 var code = src_1.generate(createRoot({194 codegenNode: src_1.createArrayExpression([195 src_1.createSimpleExpression("foo", false),196 src_1.createCallExpression("bar", ["baz"])197 ])198 })).code;199 expect(code).toMatch("return [\n foo,\n bar(baz)\n ]");200 expect(code).toMatchSnapshot();201 });202 test('SequenceExpression', function () {203 var code = src_1.generate(createRoot({204 codegenNode: src_1.createSequenceExpression([205 src_1.createSimpleExpression("foo", false),206 src_1.createCallExpression("bar", ["baz"])207 ])208 })).code;209 expect(code).toMatch("return (foo, bar(baz))");210 expect(code).toMatchSnapshot();211 });212 test('ConditionalExpression', function () {213 var code = src_1.generate(createRoot({214 codegenNode: src_1.createConditionalExpression(src_1.createSimpleExpression("ok", false), src_1.createCallExpression("foo"), src_1.createConditionalExpression(src_1.createSimpleExpression("orNot", false), src_1.createCallExpression("bar"), src_1.createCallExpression("baz")))215 })).code;216 expect(code).toMatch("return ok\n ? foo()\n : orNot\n ? bar()\n : baz()");217 expect(code).toMatchSnapshot();218 });219 test('CacheExpression', function () {220 var code = src_1.generate(createRoot({221 cached: 1,222 codegenNode: src_1.createCacheExpression(1, src_1.createSimpleExpression("foo", false))223 }), {224 mode: 'module',225 prefixIdentifiers: true226 }).code;227 expect(code).toMatch("const _cache = _ctx.$cache");228 expect(code).toMatch("_cache[1] || (_cache[1] = foo)");229 expect(code).toMatchSnapshot();230 });231 test('CacheExpression w/​ isVNode: true', function () {232 var code = src_1.generate(createRoot({233 cached: 1,234 codegenNode: src_1.createCacheExpression(1, src_1.createSimpleExpression("foo", false), true)235 }), {236 mode: 'module',237 prefixIdentifiers: true238 }).code;239 expect(code).toMatch("const _cache = _ctx.$cache");240 expect(code).toMatch("\n _cache[1] || (\n setBlockTracking(-1),\n _cache[1] = foo,\n setBlockTracking(1),\n _cache[1]\n )\n ".trim());241 expect(code).toMatchSnapshot();242 });...

Full Screen

Full Screen

ReactDOMRoot-test.js

Source:ReactDOMRoot-test.js Github

copy

Full Screen

...27 });28 return;29 }30 it('renders children', () => {31 const root = ReactDOM.createRoot(container);32 root.render(<div>Hi</​div>);33 Scheduler.unstable_flushAll();34 expect(container.textContent).toEqual('Hi');35 });36 it('warns if a callback parameter is provided to render', () => {37 const callback = jest.fn();38 const root = ReactDOM.createRoot(container);39 expect(() =>40 root.render(<div>Hi</​div>, callback),41 ).toErrorDev(42 'render(...): does not support the second callback argument. ' +43 'To execute a side effect after rendering, declare it in a component body with useEffect().',44 {withoutStack: true},45 );46 Scheduler.unstable_flushAll();47 expect(callback).not.toHaveBeenCalled();48 });49 it('warns if a callback parameter is provided to unmount', () => {50 const callback = jest.fn();51 const root = ReactDOM.createRoot(container);52 root.render(<div>Hi</​div>);53 expect(() =>54 root.unmount(callback),55 ).toErrorDev(56 'unmount(...): does not support a callback argument. ' +57 'To execute a side effect after rendering, declare it in a component body with useEffect().',58 {withoutStack: true},59 );60 Scheduler.unstable_flushAll();61 expect(callback).not.toHaveBeenCalled();62 });63 it('unmounts children', () => {64 const root = ReactDOM.createRoot(container);65 root.render(<div>Hi</​div>);66 Scheduler.unstable_flushAll();67 expect(container.textContent).toEqual('Hi');68 root.unmount();69 Scheduler.unstable_flushAll();70 expect(container.textContent).toEqual('');71 });72 it('supports hydration', async () => {73 const markup = await new Promise(resolve =>74 resolve(75 ReactDOMServer.renderToString(76 <div>77 <span className="extra" /​>78 </​div>,79 ),80 ),81 );82 /​/​ Does not hydrate by default83 const container1 = document.createElement('div');84 container1.innerHTML = markup;85 const root1 = ReactDOM.createRoot(container1);86 root1.render(87 <div>88 <span /​>89 </​div>,90 );91 Scheduler.unstable_flushAll();92 /​/​ Accepts `hydrate` option93 const container2 = document.createElement('div');94 container2.innerHTML = markup;95 const root2 = ReactDOM.createRoot(container2, {hydrate: true});96 root2.render(97 <div>98 <span /​>99 </​div>,100 );101 expect(() => Scheduler.unstable_flushAll()).toErrorDev('Extra attributes');102 });103 it('does not clear existing children', async () => {104 container.innerHTML = '<div>a</​div><div>b</​div>';105 const root = ReactDOM.createRoot(container);106 root.render(107 <div>108 <span>c</​span>109 <span>d</​span>110 </​div>,111 );112 Scheduler.unstable_flushAll();113 expect(container.textContent).toEqual('abcd');114 root.render(115 <div>116 <span>d</​span>117 <span>c</​span>118 </​div>,119 );120 Scheduler.unstable_flushAll();121 expect(container.textContent).toEqual('abdc');122 });123 it('throws a good message on invalid containers', () => {124 expect(() => {125 ReactDOM.createRoot(<div>Hi</​div>);126 }).toThrow('createRoot(...): Target container is not a DOM element.');127 });128 it('warns when rendering with legacy API into createRoot() container', () => {129 const root = ReactDOM.createRoot(container);130 root.render(<div>Hi</​div>);131 Scheduler.unstable_flushAll();132 expect(container.textContent).toEqual('Hi');133 expect(() => {134 ReactDOM.render(<div>Bye</​div>, container);135 }).toErrorDev(136 [137 /​/​ We care about this warning:138 'You are calling ReactDOM.render() on a container that was previously ' +139 'passed to ReactDOM.createRoot(). This is not supported. ' +140 'Did you mean to call root.render(element)?',141 /​/​ This is more of a symptom but restructuring the code to avoid it isn't worth it:142 'Replacing React-rendered children with a new root component.',143 ],144 {withoutStack: true},145 );146 Scheduler.unstable_flushAll();147 /​/​ This works now but we could disallow it:148 expect(container.textContent).toEqual('Bye');149 });150 it('warns when hydrating with legacy API into createRoot() container', () => {151 const root = ReactDOM.createRoot(container);152 root.render(<div>Hi</​div>);153 Scheduler.unstable_flushAll();154 expect(container.textContent).toEqual('Hi');155 expect(() => {156 ReactDOM.hydrate(<div>Hi</​div>, container);157 }).toErrorDev(158 [159 /​/​ We care about this warning:160 'You are calling ReactDOM.hydrate() on a container that was previously ' +161 'passed to ReactDOM.createRoot(). This is not supported. ' +162 'Did you mean to call createRoot(container, {hydrate: true}).render(element)?',163 /​/​ This is more of a symptom but restructuring the code to avoid it isn't worth it:164 'Replacing React-rendered children with a new root component.',165 ],166 {withoutStack: true},167 );168 });169 it('warns when unmounting with legacy API (no previous content)', () => {170 const root = ReactDOM.createRoot(container);171 root.render(<div>Hi</​div>);172 Scheduler.unstable_flushAll();173 expect(container.textContent).toEqual('Hi');174 let unmounted = false;175 expect(() => {176 unmounted = ReactDOM.unmountComponentAtNode(container);177 }).toErrorDev(178 [179 /​/​ We care about this warning:180 'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +181 'passed to ReactDOM.createRoot(). This is not supported. Did you mean to call root.unmount()?',182 /​/​ This is more of a symptom but restructuring the code to avoid it isn't worth it:183 "The node you're attempting to unmount was rendered by React and is not a top-level container.",184 ],185 {withoutStack: true},186 );187 expect(unmounted).toBe(false);188 Scheduler.unstable_flushAll();189 expect(container.textContent).toEqual('Hi');190 root.unmount();191 Scheduler.unstable_flushAll();192 expect(container.textContent).toEqual('');193 });194 it('warns when unmounting with legacy API (has previous content)', () => {195 /​/​ Currently createRoot().render() doesn't clear this.196 container.appendChild(document.createElement('div'));197 /​/​ The rest is the same as test above.198 const root = ReactDOM.createRoot(container);199 root.render(<div>Hi</​div>);200 Scheduler.unstable_flushAll();201 expect(container.textContent).toEqual('Hi');202 let unmounted = false;203 expect(() => {204 unmounted = ReactDOM.unmountComponentAtNode(container);205 }).toErrorDev('Did you mean to call root.unmount()?', {withoutStack: true});206 expect(unmounted).toBe(false);207 Scheduler.unstable_flushAll();208 expect(container.textContent).toEqual('Hi');209 root.unmount();210 Scheduler.unstable_flushAll();211 expect(container.textContent).toEqual('');212 });213 it('warns when passing legacy container to createRoot()', () => {214 ReactDOM.render(<div>Hi</​div>, container);215 expect(() => {216 ReactDOM.createRoot(container);217 }).toErrorDev(218 'You are calling ReactDOM.createRoot() on a container that was previously ' +219 'passed to ReactDOM.render(). This is not supported.',220 {withoutStack: true},221 );222 });223 it('warns when creating two roots managing the same container', () => {224 ReactDOM.createRoot(container);225 expect(() => {226 ReactDOM.createRoot(container);227 }).toErrorDev(228 'You are calling ReactDOM.createRoot() on a container that ' +229 'has already been passed to createRoot() before. Instead, call ' +230 'root.render() on the existing root instead if you want to update it.',231 {withoutStack: true},232 );233 });234 it('does not warn when creating second root after first one is unmounted', () => {235 const root = ReactDOM.createRoot(container);236 root.unmount();237 Scheduler.unstable_flushAll();238 ReactDOM.createRoot(container); /​/​ No warning239 });240 it('warns if creating a root on the document.body', async () => {241 expect(() => {242 ReactDOM.createRoot(document.body);243 }).toErrorDev(244 'createRoot(): Creating roots directly with document.body is ' +245 'discouraged, since its children are often manipulated by third-party ' +246 'scripts and browser extensions. This may lead to subtle ' +247 'reconciliation issues. Try using a container element created ' +248 'for your app.',249 {withoutStack: true},250 );251 });252 it('warns if updating a root that has had its contents removed', async () => {253 const root = ReactDOM.createRoot(container);254 root.render(<div>Hi</​div>);255 Scheduler.unstable_flushAll();256 container.innerHTML = '';257 expect(() => {258 root.render(<div>Hi</​div>);259 }).toErrorDev(260 'render(...): It looks like the React-rendered content of the ' +261 'root container was removed without using React. This is not ' +262 'supported and will cause errors. Instead, call ' +263 "root.unmount() to empty a root's container.",264 {withoutStack: true},265 );266 });267});

Full Screen

Full Screen

ReactDOMRoot-test.internal.js

Source:ReactDOMRoot-test.internal.js Github

copy

Full Screen

...64 ReactDOMServer = require('react-dom/​server');65 AsyncMode = React.unstable_AsyncMode;66 });67 it('renders children', () => {68 const root = ReactDOM.createRoot(container);69 root.render(<div>Hi</​div>);70 flush();71 expect(container.textContent).toEqual('Hi');72 });73 it('unmounts children', () => {74 const root = ReactDOM.createRoot(container);75 root.render(<div>Hi</​div>);76 flush();77 expect(container.textContent).toEqual('Hi');78 root.unmount();79 flush();80 expect(container.textContent).toEqual('');81 });82 it('`root.render` returns a thenable work object', () => {83 const root = ReactDOM.createRoot(container);84 const work = root.render(<AsyncMode>Hi</​AsyncMode>);85 let ops = [];86 work.then(() => {87 ops.push('inside callback: ' + container.textContent);88 });89 ops.push('before committing: ' + container.textContent);90 flush();91 ops.push('after committing: ' + container.textContent);92 expect(ops).toEqual([93 'before committing: ',94 /​/​ `then` callback should fire during commit phase95 'inside callback: Hi',96 'after committing: Hi',97 ]);98 });99 it('resolves `work.then` callback synchronously if the work already committed', () => {100 const root = ReactDOM.createRoot(container);101 const work = root.render(<AsyncMode>Hi</​AsyncMode>);102 flush();103 let ops = [];104 work.then(() => {105 ops.push('inside callback');106 });107 expect(ops).toEqual(['inside callback']);108 });109 it('supports hydration', async () => {110 const markup = await new Promise(resolve =>111 resolve(112 ReactDOMServer.renderToString(113 <div>114 <span className="extra" /​>115 </​div>,116 ),117 ),118 );119 /​/​ Does not hydrate by default120 const container1 = document.createElement('div');121 container1.innerHTML = markup;122 const root1 = ReactDOM.createRoot(container1);123 root1.render(124 <div>125 <span /​>126 </​div>,127 );128 flush();129 /​/​ Accepts `hydrate` option130 const container2 = document.createElement('div');131 container2.innerHTML = markup;132 const root2 = ReactDOM.createRoot(container2, {hydrate: true});133 root2.render(134 <div>135 <span /​>136 </​div>,137 );138 expect(flush).toWarnDev('Extra attributes');139 });140 it('does not clear existing children', async () => {141 container.innerHTML = '<div>a</​div><div>b</​div>';142 const root = ReactDOM.createRoot(container);143 root.render(144 <div>145 <span>c</​span>146 <span>d</​span>147 </​div>,148 );149 flush();150 expect(container.textContent).toEqual('abcd');151 root.render(152 <div>153 <span>d</​span>154 <span>c</​span>155 </​div>,156 );157 flush();158 expect(container.textContent).toEqual('abdc');159 });160 it('can defer a commit by batching it', () => {161 const root = ReactDOM.createRoot(container);162 const batch = root.createBatch();163 batch.render(<div>Hi</​div>);164 /​/​ Hasn't committed yet165 expect(container.textContent).toEqual('');166 /​/​ Commit167 batch.commit();168 expect(container.textContent).toEqual('Hi');169 });170 it('does not restart a completed batch when committing if there were no intervening updates', () => {171 let ops = [];172 function Foo(props) {173 ops.push('Foo');174 return props.children;175 }176 const root = ReactDOM.createRoot(container);177 const batch = root.createBatch();178 batch.render(<Foo>Hi</​Foo>);179 /​/​ Flush all async work.180 flush();181 /​/​ Root should complete without committing.182 expect(ops).toEqual(['Foo']);183 expect(container.textContent).toEqual('');184 ops = [];185 /​/​ Commit. Shouldn't re-render Foo.186 batch.commit();187 expect(ops).toEqual([]);188 expect(container.textContent).toEqual('Hi');189 });190 it('can wait for a batch to finish', () => {191 const root = ReactDOM.createRoot(container);192 const batch = root.createBatch();193 batch.render(<AsyncMode>Foo</​AsyncMode>);194 flush();195 /​/​ Hasn't updated yet196 expect(container.textContent).toEqual('');197 let ops = [];198 batch.then(() => {199 /​/​ Still hasn't updated200 ops.push(container.textContent);201 /​/​ Should synchronously commit202 batch.commit();203 ops.push(container.textContent);204 });205 expect(ops).toEqual(['', 'Foo']);206 });207 it('`batch.render` returns a thenable work object', () => {208 const root = ReactDOM.createRoot(container);209 const batch = root.createBatch();210 const work = batch.render('Hi');211 let ops = [];212 work.then(() => {213 ops.push('inside callback: ' + container.textContent);214 });215 ops.push('before committing: ' + container.textContent);216 batch.commit();217 ops.push('after committing: ' + container.textContent);218 expect(ops).toEqual([219 'before committing: ',220 /​/​ `then` callback should fire during commit phase221 'inside callback: Hi',222 'after committing: Hi',223 ]);224 });225 it('can commit an empty batch', () => {226 const root = ReactDOM.createRoot(container);227 root.render(<AsyncMode>1</​AsyncMode>);228 expire(2000);229 /​/​ This batch has a later expiration time than the earlier update.230 const batch = root.createBatch();231 /​/​ This should not flush the earlier update.232 batch.commit();233 expect(container.textContent).toEqual('');234 flush();235 expect(container.textContent).toEqual('1');236 });237 it('two batches created simultaneously are committed separately', () => {238 /​/​ (In other words, they have distinct expiration times)239 const root = ReactDOM.createRoot(container);240 const batch1 = root.createBatch();241 batch1.render(1);242 const batch2 = root.createBatch();243 batch2.render(2);244 expect(container.textContent).toEqual('');245 batch1.commit();246 expect(container.textContent).toEqual('1');247 batch2.commit();248 expect(container.textContent).toEqual('2');249 });250 it('commits an earlier batch without committing a later batch', () => {251 const root = ReactDOM.createRoot(container);252 const batch1 = root.createBatch();253 batch1.render(1);254 /​/​ This batch has a later expiration time255 expire(2000);256 const batch2 = root.createBatch();257 batch2.render(2);258 expect(container.textContent).toEqual('');259 batch1.commit();260 expect(container.textContent).toEqual('1');261 batch2.commit();262 expect(container.textContent).toEqual('2');263 });264 it('commits a later batch without committing an earlier batch', () => {265 const root = ReactDOM.createRoot(container);266 const batch1 = root.createBatch();267 batch1.render(1);268 /​/​ This batch has a later expiration time269 expire(2000);270 const batch2 = root.createBatch();271 batch2.render(2);272 expect(container.textContent).toEqual('');273 batch2.commit();274 expect(container.textContent).toEqual('2');275 batch1.commit();276 flush();277 expect(container.textContent).toEqual('1');278 });279});

Full Screen

Full Screen

client.js

Source:client.js Github

copy

Full Screen

...16 400,17 Surface.SurfaceShape.Cylinder18 );19 introRoot = r360.renderToSurface(20 r360.createRoot('TourismAppVR', {}),21 introPanel22 );23 marketPanel = new Surface(24 100,25 100,26 Surface.SurfaceShape.Flat27 )28 marketPanel.setAngle(29 0.2,30 031 );32 museumPanel = new Surface(33 100,34 100,35 Surface.SurfaceShape.Flat36 )37 museumPanel.setAngle(38 Math.PI /​ 2,39 040 );41 restaurantPanel = new Surface(42 100,43 100,44 Surface.SurfaceShape.Flat45 )46 restaurantPanel.setAngle(47 -Math.PI /​ 2,48 049 );50 shoppingPanel = new Surface(51 100,52 100,53 Surface.SurfaceShape.Flat54 );55 /​* r360.renderToSurface(56 r360.createRoot('InfoPanel',{}),57 marketPanel58 );59 r360.renderToSurface(60 r360.createRoot('InfoPanel',{}),61 shoppingPanel62 );63 r360.renderToSurface(64 r360.createRoot('InfoPanel',{}),65 museumPanel66 );67 r360.renderToSurface(68 r360.createRoot('InfoPanel',{}),69 restaurantPanel70 ); */​71 shoppingPanel.setAngle(72 3.6,73 074 );75 r360.compositor.setBackground(r360.getAssetURL('gdansk.jpg'));76}77class surfaceModule extends Module{78 constructor(){79 super('surfaceModule');80 }81 resizeSurface(width, height, id){82 if(id === 'museum'){83 museumPanel.resize(width, height);84 } else if (id === 'restaurant'){85 restaurantPanel.resize(width, height);86 } else if (id === 'shopping'){87 shoppingPanel.resize(width, height);88 } else if (id === 'market'){89 marketPanel.resize(width, height);90 }91 }92 start(){93 r360.renderToSurface(94 r360.createRoot('InfoPanel',{id:'market', text: 'Browse our incredible market' }),95 marketPanel96 );97 98 r360.renderToSurface(99 r360.createRoot('InfoPanel',{id:'shopping', text: 'Shop until you drop!'}),100 shoppingPanel101 );102 103 r360.renderToSurface(104 r360.createRoot('InfoPanel',{id:'museum', text: 'The Life of Pablo Piccasso: Blue.'}),105 museumPanel106 );107 108 r360.renderToSurface(109 r360.createRoot('InfoPanel',{id:'restaurant', text: 'Enjoy a delecious beer at our restaurants. '}),110 restaurantPanel111 );112 r360.detachRoot(introRoot);113 }114}...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { decorateStory } from 'storybook-root-decorator';2import { withKnobs } from '@storybook/​addon-knobs';3import { withA11y } from '@storybook/​addon-a11y';4import { withTests } from '@storybook/​addon-jest';5import { withInfo } from '@storybook/​addon-info';6import { withBackgrounds } from '@storybook/​addon-backgrounds';7import { withViewport } from '@storybook/​addon-viewport';8import { withConsole } from '@storybook/​addon-console';9import { withOptions } from '@storybook/​addon-options';10import { withNotes } from '@storybook/​addon-notes';11import { withLinks } from '@storybook/​addon-links';12import { withContexts } from '@storybook/​addon-contexts';13import { withPaddings } from 'storybook-addon-paddings';14import { withDesign } from 'storybook-addon-designs';15import { withCreevey } from 'creevey';16import { withTests as withTestsNew } from '@storybook/​addon-jest/​dist/​preview';17import { withInfo as withInfoNew } from '@storybook/​addon-info/​dist/​preview';18import { withBackgrounds as withBackgroundsNew } from '@storybook/​addon-backgrounds/​dist/​preview';19import { withViewport as withViewportNew } from '@storybook/​addon-viewport/​dist/​preview';20import { withConsole as withConsoleNew } from '@storybook/​addon-console/​dist/​preview';21import { withOptions as withOptionsNew } from '@storybook/​addon-options/​dist/​preview';22import { withNotes as withNotesNew } from '@storybook/​addon-notes/​dist/​preview';23import { withLinks as withLinksNew } from '@storybook/​addon-links/​dist/​preview';24import { withContexts as withContextsNew } from '@storybook/​addon-contexts/​dist/​preview';25import { withPaddings as withPaddingsNew } from 'storybook-addon-paddings/​dist/​preview';26import { withDesign as withDesignNew } from 'storybook-addon-designs/​dist/​preview';27import { withCreevey as withCreeveyNew } from 'creevey/​dist/​preview';28import { withTests as withTestsNew2 } from '@storybook/​addon-jest/​preview';29import { withInfo as withInfoNew2 } from '@storybook/​addon-info/​preview';30import { withBackgrounds as withBackgroundsNew2 } from '@storybook

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { createRoot } from 'storybook-root';2import { storiesOf } from '@storybook/​react';3import { withKnobs } from '@storybook/​addon-knobs';4const stories = storiesOf('Button', module);5stories.addDecorator(withKnobs);6const root = createRoot();7stories.add('Default', () => {8 const Button = require('./​Button').default;9 return root(<Button /​>);10});11import React from 'react';12import PropTypes from 'prop-types';13import './​Button.css';14const Button = ({ children, onClick }) => (15 <button className="button" onClick={onClick}>16 {children}17);18Button.propTypes = {19};20Button.defaultProps = {21 onClick: () => null,22};23export default Button;24.button {25 background: #222;26 color: #fff;27 border: 0;28 padding: 10px;29 border-radius: 5px;30 cursor: pointer;31}32import React from 'react';33import { mount } from 'enzyme';34import Button from './​Button';35describe('Button', () => {36 it('should render children', () => {37 const wrapper = mount(<Button>Test</​Button>);38 expect(wrapper.text()).toEqual('Test');39 });40 it('should call onClick when clicked', () => {41 const onClick = jest.fn();42 const wrapper = mount(<Button onClick={onClick}>Test</​Button>);43 wrapper.find('button').simulate('click');44 expect(onClick).toHaveBeenCalled();45 });46});47import React from 'react';48import { storiesOf } from '@storybook/​react';49import { withKnobs } from '@storybook/​addon-knobs';50import Button from './​Button';51const stories = storiesOf('Button', module);52stories.addDecorator(withKnobs);53stories.add('Default', () => <Button>Test</​Button>);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { createRoot } from 'storybook-root-provider';2import { render } from '@testing-library/​react';3import { App } from './​App';4describe('App', () => {5 test('should render', () => {6 const { getByText } = render(createRoot(<App /​>));7 expect(getByText('Hello World')).toBeInTheDocument();8 });9});10I have also tried to import the createRoot method from the following way:11import { createRoot } from 'storybook-root-provider/​dist';12import React from 'react';13import addons, { makeDecorator } from '@storybook/​addons';14import { ADDON_ID, PANEL_ID } from './​constants';15import { MyPanel } from './​MyPanel';16addons.register(ADDON_ID, (api) => {17 const render = ({ active, key }) => (18 <MyPanel key={key} api={api} active={active} /​>19 );20 addons.add(PANEL_ID, {21 });22});23const withMyAddon = makeDecorator({24 wrapper: (getStory, context, { options, parameters }) => {25 return getStory(context);26 },27});28export { withMyAddon };29import React, { useEffect, useState } from 'react';30import { useParameter } from '@storybook/​api';31import { Form } from '@storybook/​components';32import { PARAM_KEY } from './​constants';33export const MyPanel = ({ active, api }) => {34 const results = useParameter(PARAM_KEY, null);35 useEffect(() => {36 api.onStory((storyId) => {37 console.log('storyId', storyId);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { createRoot } from 'storybook-root-provider'2import { render } from '@testing-library/​react'3import { ThemeProvider } from 'styled-components'4import theme from '../​src/​theme'5const customRender = (ui, options) => render(ui, { wrapper: createRoot(ThemeProvider, theme), ...options })6export { customRender as render }7import { render } from './​test'8test('renders a button', () => {9 const { container } = render(<Button /​>)10 expect(container.firstChild).toMatchSnapshot()11})12jest.mock('styled-components', () => ({13 ...jest.requireActual('styled-components'),14 useTheme: jest.fn().mockReturnValue({15 }),16}));17jest.mock('styled-components', () => ({18 ...jest.requireActual('styled-components'),19 useTheme: () => ({20 }),21}));22jest.mock('styled-components', () => ({23 ...jest.requireActual('styled-components'),24 useTheme: jest.fn().mockReturnValue({25 }),26}));27jest.mock('styled-components', () => ({28 ...jest.requireActual('styled-components'),29 useTheme: () => ({30 }),31}));32jest.mock('styled-components', () => ({33 ...jest.requireActual('styled

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { createRoot } from 'storybook-root-provider';2import { App } from './​App';3export default createRoot(App);4import React from 'react';5import { Text } from 'react-native';6export const App = () => {7 return <Text>Hello World</​Text>;8};9import { storiesOf } from '@storybook/​react-native';10import { App } from './​App';11storiesOf('App', module).add('default', () => {12 return <App /​>;13});14import React from 'react';15import renderer from 'react-test-renderer';16import { App } from './​App';17it('renders correctly', () => {18 const tree = renderer.create(<App /​>).toJSON();19 expect(tree).toMatchSnapshot();20});21import React from 'react';22import { shallow } from 'enzyme';23import { App } from './​App';24describe('<App /​>', () => {25 it('renders correctly', () => {26 const wrapper = shallow(<App /​>);27 expect(wrapper).toMatchSnapshot();28 });29});30describe('App', () => {31 beforeEach(async () => {32 await device.reloadReactNative();33 });34 it('should have welcome screen', async () => {35 await expect(element(by.text('Welcome to React Native!'))).toBeVisible();36 });37});38import React from 'react';39import renderer from 'react-test-renderer';40import { App } from './​App';41it('renders correctly', () => {42 const tree = renderer.create(<App /​>).toJSON();43 expect(tree).toMatchSnapshot();44});45import React from 'react';46import { shallow } from 'enzyme';47import { App } from './​App';48describe('<App /​>', () => {49 it('renders correctly', () => {50 const wrapper = shallow(<App /​>);51 expect(wrapper).toMatchSnapshot();52 });53});54describe('App', () => {55 beforeEach(async () => {56 await device.reloadReactNative();57 });58 it('should have welcome screen', async () => {59 await expect(element(by.text('Welcome to React Native!'))).toBeVisible();60 });61});62describe('App', () => {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { createRoot } from 'storybook-root-provider';2import App from './​App';3createRoot(<App /​>);4import { createRoot } from 'storybook-root-provider';5import App from './​App';6createRoot(<App /​>);7import { createRoot } from 'storybook-root-provider';8import App from './​App';9createRoot(<App /​>);10import { createRoot } from 'storybook-root-provider';11import App from './​App';12createRoot(<App /​>);13import { createRoot } from 'storybook-root-provider';14import App from './​App';15createRoot(<App /​>);16import { createRoot } from 'storybook-root-provider';17import App from './​App';18createRoot(<App /​>);19import { createRoot } from 'storybook-root-provider';20import App from './​App';21createRoot(<App /​>);22import { createRoot } from 'storybook-root-provider';23import App from './​App';24createRoot(<App /​>);25import { createRoot } from 'storybook-root-provider';26import App from './​App';27createRoot(<App /​>);28import { createRoot } from 'storybook-root-provider';29import App from './​App';30createRoot(<App /​>);31import { createRoot } from 'storybook-root-provider';32import App from './​App';33createRoot(<App /​>);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { createRoot } from 'storybook-root-renderer';2import { render } from 'storybook-svelte-csf';3import { withSvelteRouter } from 'storybook-svelte-router';4import { svelteStory } from 'storybook-addon-svelte-csf';5export default {6};7export const Basic = svelteStory(() => ({8 props: { /​* ... */​ },9 on: { /​* ... */​ },10}));11export const Basic = () => render(SomeComponent, { /​* ... */​ });12export const Basic = () => createRoot().render(SomeComponent, { /​* ... */​ });

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { createRoot } from 'storybook-root-provider';2const render = (storyFn) => {3 const root = createRoot();4 root.render(storyFn());5};6export default render;7import { addDecorator } from '@storybook/​react';8import render from '../​test';9addDecorator(render);10import { addDecorator } from '@storybook/​react';11import { withRoot } from 'storybook-root-provider';12addDecorator(withRoot);13The decorator is a function which takes the storyFn as an argument. The storyFn is the story function returned by the story. The decorator function returns the root provider component with the story returned by the storyFn as a child. The root provider component is imported from

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { createRoot } from 'react-dom';2import { createRoot as createLegacyRoot } from 'react-dom/​legacy';3import { render } from 'react-dom';4import { render as renderLegacy } from 'react-dom/​legacy';5export const createRoot = createRoot;6export const createLegacyRoot = createLegacyRoot;7export const render = render;8export const renderLegacy = renderLegacy;9import { configure } from '@storybook/​react';10import * as root from './​storybook-root';11configure(() => {12}, module, {13});14import { createRoot } from 'react-dom';15import { createRoot as createLegacyRoot } from 'react-dom/​legacy';16import { render } from 'react-dom';17import { render as renderLegacy } from 'react-dom/​legacy';18export const createRoot = createRoot;19export const createLegacyRoot = createLegacyRoot;20export const render = render;21export const renderLegacy = renderLegacy;22import { configure } from '@storybook/​react';23import * as root from './​storybook-root';24configure(() => {25}, module, {26});27import { createRoot } from 'react-dom';28import {

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful