Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use createRoot method in storybook-root

Best JavaScript code snippet using storybook-root

codegen.spec.js

Source:codegen.spec.js

...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    });...

ReactDOMRoot-test.js

Source:ReactDOMRoot-test.js

...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});

ReactDOMRoot-test.internal.js

Source:ReactDOMRoot-test.internal.js

...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});

client.js

Source:client.js

...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}...

Using AI Code Generation

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

Using AI Code Generation

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>);

Using AI Code Generation

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);

Using AI Code Generation

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

Using AI Code Generation

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', () => {

Using AI Code Generation

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 />);

Using AI Code Generation

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, { /* ... */ });

Using AI Code Generation

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

Using AI Code Generation

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 {

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.