How to use getVisibleChildren method in Testcafe

Best JavaScript code snippet using testcafe

ReactDOMFizzServer-test.js

Source:ReactDOMFizzServer-test.js

...87        container.appendChild(node);88      }89    }90  }91  function getVisibleChildren(element) {92    const children = [];93    let node = element.firstChild;94    while (node) {95      if (node.nodeType === 1) {96        if (97          node.tagName !== 'SCRIPT' &&98          node.tagName !== 'TEMPLATE' &&99          node.tagName !== 'template' &&100          !node.hasAttribute('hidden') &&101          !node.hasAttribute('aria-hidden')102        ) {103          const props = {};104          const attributes = node.attributes;105          for (let i = 0; i < attributes.length; i++) {106            if (107              attributes[i].name === 'id' &&108              attributes[i].value.includes(':')109            ) {110              // We assume this is a React added ID that's a non-visual implementation detail.111              continue;112            }113            props[attributes[i].name] = attributes[i].value;114          }115          props.children = getVisibleChildren(node);116          children.push(React.createElement(node.tagName.toLowerCase(), props));117        }118      } else if (node.nodeType === 3) {119        children.push(node.data);120      }121      node = node.nextSibling;122    }123    return children.length === 0124      ? undefined125      : children.length === 1126      ? children[0]127      : children;128  }129  function resolveText(text) {130    const record = textCache.get(text);131    if (record === undefined) {132      const newRecord = {133        status: 'resolved',134        value: text,135      };136      textCache.set(text, newRecord);137    } else if (record.status === 'pending') {138      const thenable = record.value;139      record.status = 'resolved';140      record.value = text;141      thenable.pings.forEach(t => t());142    }143  }144  function rejectText(text, error) {145    const record = textCache.get(text);146    if (record === undefined) {147      const newRecord = {148        status: 'rejected',149        value: error,150      };151      textCache.set(text, newRecord);152    } else if (record.status === 'pending') {153      const thenable = record.value;154      record.status = 'rejected';155      record.value = error;156      thenable.pings.forEach(t => t());157    }158  }159  function readText(text) {160    const record = textCache.get(text);161    if (record !== undefined) {162      switch (record.status) {163        case 'pending':164          throw record.value;165        case 'rejected':166          throw record.value;167        case 'resolved':168          return record.value;169      }170    } else {171      const thenable = {172        pings: [],173        then(resolve) {174          if (newRecord.status === 'pending') {175            thenable.pings.push(resolve);176          } else {177            Promise.resolve().then(() => resolve(newRecord.value));178          }179        },180      };181      const newRecord = {182        status: 'pending',183        value: thenable,184      };185      textCache.set(text, newRecord);186      throw thenable;187    }188  }189  function Text({text}) {190    return text;191  }192  function AsyncText({text}) {193    return readText(text);194  }195  // @gate experimental196  it('should asynchronously load a lazy component', async () => {197    let resolveA;198    const LazyA = React.lazy(() => {199      return new Promise(r => {200        resolveA = r;201      });202    });203    let resolveB;204    const LazyB = React.lazy(() => {205      return new Promise(r => {206        resolveB = r;207      });208    });209    function TextWithPunctuation({text, punctuation}) {210      return <Text text={text + punctuation} />;211    }212    // This tests that default props of the inner element is resolved.213    TextWithPunctuation.defaultProps = {214      punctuation: '!',215    };216    await act(async () => {217      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(218        <div>219          <div>220            <Suspense fallback={<Text text="Loading..." />}>221              <LazyA text="Hello" />222            </Suspense>223          </div>224          <div>225            <Suspense fallback={<Text text="Loading..." />}>226              <LazyB text="world" />227            </Suspense>228          </div>229        </div>,230        writable,231      );232      startWriting();233    });234    expect(getVisibleChildren(container)).toEqual(235      <div>236        <div>Loading...</div>237        <div>Loading...</div>238      </div>,239    );240    await act(async () => {241      resolveA({default: Text});242    });243    expect(getVisibleChildren(container)).toEqual(244      <div>245        <div>Hello</div>246        <div>Loading...</div>247      </div>,248    );249    await act(async () => {250      resolveB({default: TextWithPunctuation});251    });252    expect(getVisibleChildren(container)).toEqual(253      <div>254        <div>Hello</div>255        <div>world!</div>256      </div>,257    );258  });259  // @gate experimental260  it('should client render a boundary if a lazy component rejects', async () => {261    let rejectComponent;262    const LazyComponent = React.lazy(() => {263      return new Promise((resolve, reject) => {264        rejectComponent = reject;265      });266    });267    const loggedErrors = [];268    function App({isClient}) {269      return (270        <div>271          <Suspense fallback={<Text text="Loading..." />}>272            {isClient ? <Text text="Hello" /> : <LazyComponent text="Hello" />}273          </Suspense>274        </div>275      );276    }277    await act(async () => {278      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(279        <App isClient={false} />,280        writable,281        {282          onError(x) {283            loggedErrors.push(x);284          },285        },286      );287      startWriting();288    });289    expect(loggedErrors).toEqual([]);290    // Attempt to hydrate the content.291    const root = ReactDOM.createRoot(container, {hydrate: true});292    root.render(<App isClient={true} />);293    Scheduler.unstable_flushAll();294    // We're still loading because we're waiting for the server to stream more content.295    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);296    expect(loggedErrors).toEqual([]);297    const theError = new Error('Test');298    await act(async () => {299      rejectComponent(theError);300    });301    expect(loggedErrors).toEqual([theError]);302    // We haven't ran the client hydration yet.303    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);304    // Now we can client render it instead.305    Scheduler.unstable_flushAll();306    // The client rendered HTML is now in place.307    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);308    expect(loggedErrors).toEqual([theError]);309  });310  // @gate experimental311  it('should asynchronously load a lazy element', async () => {312    let resolveElement;313    const lazyElement = React.lazy(() => {314      return new Promise(r => {315        resolveElement = r;316      });317    });318    await act(async () => {319      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(320        <div>321          <Suspense fallback={<Text text="Loading..." />}>322            {lazyElement}323          </Suspense>324        </div>,325        writable,326      );327      startWriting();328    });329    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);330    await act(async () => {331      resolveElement({default: <Text text="Hello" />});332    });333    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);334  });335  // @gate experimental336  it('should client render a boundary if a lazy element rejects', async () => {337    let rejectElement;338    const element = <Text text="Hello" />;339    const lazyElement = React.lazy(() => {340      return new Promise((resolve, reject) => {341        rejectElement = reject;342      });343    });344    const loggedErrors = [];345    function App({isClient}) {346      return (347        <div>348          <Suspense fallback={<Text text="Loading..." />}>349            {isClient ? element : lazyElement}350          </Suspense>351        </div>352      );353    }354    await act(async () => {355      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(356        <App isClient={false} />,357        writable,358        {359          onError(x) {360            loggedErrors.push(x);361          },362        },363      );364      startWriting();365    });366    expect(loggedErrors).toEqual([]);367    // Attempt to hydrate the content.368    const root = ReactDOM.createRoot(container, {hydrate: true});369    root.render(<App isClient={true} />);370    Scheduler.unstable_flushAll();371    // We're still loading because we're waiting for the server to stream more content.372    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);373    expect(loggedErrors).toEqual([]);374    const theError = new Error('Test');375    await act(async () => {376      rejectElement(theError);377    });378    expect(loggedErrors).toEqual([theError]);379    // We haven't ran the client hydration yet.380    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);381    // Now we can client render it instead.382    Scheduler.unstable_flushAll();383    // The client rendered HTML is now in place.384    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);385    expect(loggedErrors).toEqual([theError]);386  });387  // @gate experimental388  it('should asynchronously load the suspense boundary', async () => {389    await act(async () => {390      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(391        <div>392          <Suspense fallback={<Text text="Loading..." />}>393            <AsyncText text="Hello World" />394          </Suspense>395        </div>,396        writable,397      );398      startWriting();399    });400    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);401    await act(async () => {402      resolveText('Hello World');403    });404    expect(getVisibleChildren(container)).toEqual(<div>Hello World</div>);405  });406  // @gate experimental407  it('waits for pending content to come in from the server and then hydrates it', async () => {408    const ref = React.createRef();409    function App() {410      return (411        <div>412          <Suspense fallback="Loading...">413            <h1 ref={ref}>414              <AsyncText text="Hello" />415            </h1>416          </Suspense>417        </div>418      );419    }420    await act(async () => {421      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(422        <App />,423        writable,424      );425      startWriting();426    });427    // We're still showing a fallback.428    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);429    // Attempt to hydrate the content.430    const root = ReactDOM.createRoot(container, {hydrate: true});431    root.render(<App />);432    Scheduler.unstable_flushAll();433    // We're still loading because we're waiting for the server to stream more content.434    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);435    // The server now updates the content in place in the fallback.436    await act(async () => {437      resolveText('Hello');438    });439    // The final HTML is now in place.440    expect(getVisibleChildren(container)).toEqual(441      <div>442        <h1>Hello</h1>443      </div>,444    );445    const h1 = container.getElementsByTagName('h1')[0];446    // But it is not yet hydrated.447    expect(ref.current).toBe(null);448    Scheduler.unstable_flushAll();449    // Now it's hydrated.450    expect(ref.current).toBe(h1);451  });452  // @gate experimental453  it('handles an error on the client if the server ends up erroring', async () => {454    const ref = React.createRef();455    class ErrorBoundary extends React.Component {456      state = {error: null};457      static getDerivedStateFromError(error) {458        return {error};459      }460      render() {461        if (this.state.error) {462          return <b ref={ref}>{this.state.error.message}</b>;463        }464        return this.props.children;465      }466    }467    function App() {468      return (469        <ErrorBoundary>470          <div>471            <Suspense fallback="Loading...">472              <span ref={ref}>473                <AsyncText text="This Errors" />474              </span>475            </Suspense>476          </div>477        </ErrorBoundary>478      );479    }480    const loggedErrors = [];481    // We originally suspend the boundary and start streaming the loading state.482    await act(async () => {483      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(484        <App />,485        writable,486        {487          onError(x) {488            loggedErrors.push(x);489          },490        },491      );492      startWriting();493    });494    // We're still showing a fallback.495    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);496    expect(loggedErrors).toEqual([]);497    // Attempt to hydrate the content.498    const root = ReactDOM.createRoot(container, {hydrate: true});499    root.render(<App />);500    Scheduler.unstable_flushAll();501    // We're still loading because we're waiting for the server to stream more content.502    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);503    const theError = new Error('Error Message');504    await act(async () => {505      rejectText('This Errors', theError);506    });507    expect(loggedErrors).toEqual([theError]);508    // The server errored, but we still haven't hydrated. We don't know if the509    // client will succeed yet, so we still show the loading state.510    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);511    expect(ref.current).toBe(null);512    // Flush the hydration.513    Scheduler.unstable_flushAll();514    // Hydrating should've generated an error and replaced the suspense boundary.515    expect(getVisibleChildren(container)).toEqual(<b>Error Message</b>);516    const b = container.getElementsByTagName('b')[0];517    expect(ref.current).toBe(b);518  });519  // @gate experimental520  it('shows inserted items before pending in a SuspenseList as fallbacks while hydrating', async () => {521    const ref = React.createRef();522    // These are hoisted to avoid them from rerendering.523    const a = (524      <Suspense fallback="Loading A">525        <span ref={ref}>526          <AsyncText text="A" />527        </span>528      </Suspense>529    );530    const b = (531      <Suspense fallback="Loading B">532        <span>533          <Text text="B" />534        </span>535      </Suspense>536    );537    function App({showMore}) {538      return (539        <SuspenseList revealOrder="forwards">540          {a}541          {b}542          {showMore ? (543            <Suspense fallback="Loading C">544              <span>C</span>545            </Suspense>546          ) : null}547        </SuspenseList>548      );549    }550    // We originally suspend the boundary and start streaming the loading state.551    await act(async () => {552      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(553        <App showMore={false} />,554        writable,555      );556      startWriting();557    });558    const root = ReactDOM.createRoot(container, {hydrate: true});559    root.render(<App showMore={false} />);560    Scheduler.unstable_flushAll();561    // We're not hydrated yet.562    expect(ref.current).toBe(null);563    expect(getVisibleChildren(container)).toEqual([564      'Loading A',565      // TODO: This is incorrect. It should be "Loading B" but Fizz SuspenseList566      // isn't implemented fully yet.567      <span>B</span>,568    ]);569    // Add more rows before we've hydrated the first two.570    root.render(<App showMore={true} />);571    Scheduler.unstable_flushAll();572    // We're not hydrated yet.573    expect(ref.current).toBe(null);574    // We haven't resolved yet.575    expect(getVisibleChildren(container)).toEqual([576      'Loading A',577      // TODO: This is incorrect. It should be "Loading B" but Fizz SuspenseList578      // isn't implemented fully yet.579      <span>B</span>,580      'Loading C',581    ]);582    await act(async () => {583      await resolveText('A');584    });585    Scheduler.unstable_flushAll();586    expect(getVisibleChildren(container)).toEqual([587      <span>A</span>,588      <span>B</span>,589      <span>C</span>,590    ]);591    const span = container.getElementsByTagName('span')[0];592    expect(ref.current).toBe(span);593  });594  // @gate experimental595  it('client renders a boundary if it does not resolve before aborting', async () => {596    function App() {597      return (598        <div>599          <Suspense fallback="Loading...">600            <h1>601              <AsyncText text="Hello" />602            </h1>603          </Suspense>604        </div>605      );606    }607    let controls;608    await act(async () => {609      controls = ReactDOMFizzServer.pipeToNodeWritable(<App />, writable);610      controls.startWriting();611    });612    // We're still showing a fallback.613    // Attempt to hydrate the content.614    const root = ReactDOM.createRoot(container, {hydrate: true});615    root.render(<App />);616    Scheduler.unstable_flushAll();617    // We're still loading because we're waiting for the server to stream more content.618    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);619    // We abort the server response.620    await act(async () => {621      controls.abort();622    });623    // We still can't render it on the client.624    Scheduler.unstable_flushAll();625    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);626    // We now resolve it on the client.627    resolveText('Hello');628    Scheduler.unstable_flushAll();629    // The client rendered HTML is now in place.630    expect(getVisibleChildren(container)).toEqual(631      <div>632        <h1>Hello</h1>633      </div>,634    );635  });636  // @gate experimental637  it('should allow for two containers to be written to the same document', async () => {638    // We create two passthrough streams for each container to write into.639    // Notably we don't implement a end() call for these. Because we don't want to640    // close the underlying stream just because one of the streams is done. Instead641    // we manually close when both are done.642    const writableA = new Stream.Writable();643    writableA._write = (chunk, encoding, next) => {644      writable.write(chunk, encoding, next);645    };646    const writableB = new Stream.Writable();647    writableB._write = (chunk, encoding, next) => {648      writable.write(chunk, encoding, next);649    };650    await act(async () => {651      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(652        // We use two nested boundaries to flush out coverage of an old reentrancy bug.653        <Suspense fallback="Loading...">654          <Suspense fallback={<Text text="Loading A..." />}>655            <>656              <Text text="This will show A: " />657              <div>658                <AsyncText text="A" />659              </div>660            </>661          </Suspense>662        </Suspense>,663        writableA,664        {665          identifierPrefix: 'A_',666          onReadyToStream() {667            writableA.write('<div id="container-A">');668            startWriting();669            writableA.write('</div>');670          },671        },672      );673    });674    await act(async () => {675      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(676        <Suspense fallback={<Text text="Loading B..." />}>677          <Text text="This will show B: " />678          <div>679            <AsyncText text="B" />680          </div>681        </Suspense>,682        writableB,683        {684          identifierPrefix: 'B_',685          onReadyToStream() {686            writableB.write('<div id="container-B">');687            startWriting();688            writableB.write('</div>');689          },690        },691      );692    });693    expect(getVisibleChildren(container)).toEqual([694      <div id="container-A">Loading A...</div>,695      <div id="container-B">Loading B...</div>,696    ]);697    await act(async () => {698      resolveText('B');699    });700    expect(getVisibleChildren(container)).toEqual([701      <div id="container-A">Loading A...</div>,702      <div id="container-B">703        This will show B: <div>B</div>704      </div>,705    ]);706    await act(async () => {707      resolveText('A');708    });709    // We're done writing both streams now.710    writable.end();711    expect(getVisibleChildren(container)).toEqual([712      <div id="container-A">713        This will show A: <div>A</div>714      </div>,715      <div id="container-B">716        This will show B: <div>B</div>717      </div>,718    ]);719  });720  // @gate experimental721  it('can resolve async content in esoteric parents', async () => {722    function AsyncOption({text}) {723      return <option>{readText(text)}</option>;724    }725    function AsyncCol({className}) {726      return <col className={readText(className)} />;727    }728    function AsyncPath({id}) {729      return <path id={readText(id)} />;730    }731    function AsyncMi({id}) {732      return <mi id={readText(id)} />;733    }734    function App() {735      return (736        <div>737          <select>738            <Suspense fallback="Loading...">739              <AsyncOption text="Hello" />740            </Suspense>741          </select>742          <Suspense fallback="Loading...">743            <table>744              <colgroup>745                <AsyncCol className="World" />746              </colgroup>747            </table>748            <svg>749              <g>750                <AsyncPath id="my-path" />751              </g>752            </svg>753            <math>754              <AsyncMi id="my-mi" />755            </math>756          </Suspense>757        </div>758      );759    }760    await act(async () => {761      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(762        <App />,763        writable,764      );765      startWriting();766    });767    expect(getVisibleChildren(container)).toEqual(768      <div>769        <select>Loading...</select>Loading...770      </div>,771    );772    await act(async () => {773      resolveText('Hello');774    });775    await act(async () => {776      resolveText('World');777    });778    await act(async () => {779      resolveText('my-path');780      resolveText('my-mi');781    });782    expect(getVisibleChildren(container)).toEqual(783      <div>784        <select>785          <option>Hello</option>786        </select>787        <table>788          <colgroup>789            <col class="World" />790          </colgroup>791        </table>792        <svg>793          <g>794            <path id="my-path" />795          </g>796        </svg>797        <math>798          <mi id="my-mi" />799        </math>800      </div>,801    );802    expect(container.querySelector('#my-path').namespaceURI).toBe(803      'http://www.w3.org/2000/svg',804    );805    expect(container.querySelector('#my-mi').namespaceURI).toBe(806      'http://www.w3.org/1998/Math/MathML',807    );808  });809  // @gate experimental810  it('can resolve async content in table parents', async () => {811    function AsyncTableBody({className, children}) {812      return <tbody className={readText(className)}>{children}</tbody>;813    }814    function AsyncTableRow({className, children}) {815      return <tr className={readText(className)}>{children}</tr>;816    }817    function AsyncTableCell({text}) {818      return <td>{readText(text)}</td>;819    }820    function App() {821      return (822        <table>823          <Suspense824            fallback={825              <tbody>826                <tr>827                  <td>Loading...</td>828                </tr>829              </tbody>830            }>831            <AsyncTableBody className="A">832              <AsyncTableRow className="B">833                <AsyncTableCell text="C" />834              </AsyncTableRow>835            </AsyncTableBody>836          </Suspense>837        </table>838      );839    }840    await act(async () => {841      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(842        <App />,843        writable,844      );845      startWriting();846    });847    expect(getVisibleChildren(container)).toEqual(848      <table>849        <tbody>850          <tr>851            <td>Loading...</td>852          </tr>853        </tbody>854      </table>,855    );856    await act(async () => {857      resolveText('A');858    });859    await act(async () => {860      resolveText('B');861    });862    await act(async () => {863      resolveText('C');864    });865    expect(getVisibleChildren(container)).toEqual(866      <table>867        <tbody class="A">868          <tr class="B">869            <td>C</td>870          </tr>871        </tbody>872      </table>,873    );874  });875  // @gate experimental876  it('can stream into an SVG container', async () => {877    function AsyncPath({id}) {878      return <path id={readText(id)} />;879    }880    function App() {881      return (882        <g>883          <Suspense fallback={<text>Loading...</text>}>884            <AsyncPath id="my-path" />885          </Suspense>886        </g>887      );888    }889    await act(async () => {890      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(891        <App />,892        writable,893        {894          namespaceURI: 'http://www.w3.org/2000/svg',895          onReadyToStream() {896            writable.write('<svg>');897            startWriting();898            writable.write('</svg>');899          },900        },901      );902    });903    expect(getVisibleChildren(container)).toEqual(904      <svg>905        <g>906          <text>Loading...</text>907        </g>908      </svg>,909    );910    await act(async () => {911      resolveText('my-path');912    });913    expect(getVisibleChildren(container)).toEqual(914      <svg>915        <g>916          <path id="my-path" />917        </g>918      </svg>,919    );920    expect(container.querySelector('#my-path').namespaceURI).toBe(921      'http://www.w3.org/2000/svg',922    );923  });924  function normalizeCodeLocInfo(str) {925    return (926      str &&927      str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {928        return '\n    in ' + name + ' (at **)';929      })930    );931  }932  // @gate experimental933  it('should include a component stack across suspended boundaries', async () => {934    function B() {935      const children = [readText('Hello'), readText('World')];936      // Intentionally trigger a key warning here.937      return (938        <div>939          {children.map(t => (940            <span>{t}</span>941          ))}942        </div>943      );944    }945    function C() {946      return (947        <inCorrectTag>948          <Text text="Loading" />949        </inCorrectTag>950      );951    }952    function A() {953      return (954        <div>955          <Suspense fallback={<C />}>956            <B />957          </Suspense>958        </div>959      );960    }961    // We can't use the toErrorDev helper here because this is an async act.962    const originalConsoleError = console.error;963    const mockError = jest.fn();964    console.error = (...args) => {965      mockError(...args.map(normalizeCodeLocInfo));966    };967    try {968      await act(async () => {969        const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(970          <A />,971          writable,972        );973        startWriting();974      });975      expect(getVisibleChildren(container)).toEqual(976        <div>977          <incorrecttag>Loading</incorrecttag>978        </div>,979      );980      if (__DEV__) {981        expect(mockError).toHaveBeenCalledWith(982          'Warning: <%s /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.%s',983          'inCorrectTag',984          '\n' +985            '    in inCorrectTag (at **)\n' +986            '    in C (at **)\n' +987            '    in Suspense (at **)\n' +988            '    in div (at **)\n' +989            '    in A (at **)',990        );991        mockError.mockClear();992      } else {993        expect(mockError).not.toHaveBeenCalled();994      }995      await act(async () => {996        resolveText('Hello');997        resolveText('World');998      });999      if (__DEV__) {1000        expect(mockError).toHaveBeenCalledWith(1001          'Warning: Each child in a list should have a unique "key" prop.%s%s' +1002            ' See https://reactjs.org/link/warning-keys for more information.%s',1003          '\n\nCheck the top-level render call using <div>.',1004          '',1005          '\n' +1006            '    in span (at **)\n' +1007            '    in B (at **)\n' +1008            '    in Suspense (at **)\n' +1009            '    in div (at **)\n' +1010            '    in A (at **)',1011        );1012      } else {1013        expect(mockError).not.toHaveBeenCalled();1014      }1015      expect(getVisibleChildren(container)).toEqual(1016        <div>1017          <div>1018            <span>Hello</span>1019            <span>World</span>1020          </div>1021        </div>,1022      );1023    } finally {1024      console.error = originalConsoleError;1025    }1026  });1027  // @gate experimental1028  it('should can suspend in a class component with legacy context', async () => {1029    class TestProvider extends React.Component {1030      static childContextTypes = {1031        test: PropTypes.string,1032      };1033      state = {ctxToSet: null};1034      static getDerivedStateFromProps(props, state) {1035        return {ctxToSet: props.ctx};1036      }1037      getChildContext() {1038        return {1039          test: this.state.ctxToSet,1040        };1041      }1042      render() {1043        return this.props.children;1044      }1045    }1046    class TestConsumer extends React.Component {1047      static contextTypes = {1048        test: PropTypes.string,1049      };1050      render() {1051        const child = (1052          <b>1053            <Text text={this.context.test} />1054          </b>1055        );1056        if (this.props.prefix) {1057          return [readText(this.props.prefix), child];1058        }1059        return child;1060      }1061    }1062    await act(async () => {1063      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(1064        <TestProvider ctx="A">1065          <div>1066            <Suspense fallback={[<Text text="Loading: " />, <TestConsumer />]}>1067              <TestProvider ctx="B">1068                <TestConsumer prefix="Hello: " />1069              </TestProvider>1070              <TestConsumer />1071            </Suspense>1072          </div>1073        </TestProvider>,1074        writable,1075      );1076      startWriting();1077    });1078    expect(getVisibleChildren(container)).toEqual(1079      <div>1080        Loading: <b>A</b>1081      </div>,1082    );1083    await act(async () => {1084      resolveText('Hello: ');1085    });1086    expect(getVisibleChildren(container)).toEqual(1087      <div>1088        Hello: <b>B</b>1089        <b>A</b>1090      </div>,1091    );1092  });1093  // @gate experimental1094  it('should resume the context from where it left off', async () => {1095    const ContextA = React.createContext('A0');1096    const ContextB = React.createContext('B0');1097    function PrintA() {1098      return (1099        <ContextA.Consumer>{value => <Text text={value} />}</ContextA.Consumer>1100      );1101    }1102    class PrintB extends React.Component {1103      static contextType = ContextB;1104      render() {1105        return <Text text={this.context} />;1106      }1107    }1108    function AsyncParent({text, children}) {1109      return (1110        <>1111          <AsyncText text={text} />1112          <b>{children}</b>1113        </>1114      );1115    }1116    await act(async () => {1117      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(1118        <div>1119          <PrintA />1120          <div>1121            <ContextA.Provider value="A0.1">1122              <Suspense fallback={<Text text="Loading..." />}>1123                <AsyncParent text="Child:">1124                  <PrintA />1125                </AsyncParent>1126                <PrintB />1127              </Suspense>1128            </ContextA.Provider>1129          </div>1130          <PrintA />1131        </div>,1132        writable,1133      );1134      startWriting();1135    });1136    expect(getVisibleChildren(container)).toEqual(1137      <div>1138        A0<div>Loading...</div>A01139      </div>,1140    );1141    await act(async () => {1142      resolveText('Child:');1143    });1144    expect(getVisibleChildren(container)).toEqual(1145      <div>1146        A01147        <div>1148          Child:<b>A0.1</b>B01149        </div>1150        A01151      </div>,1152    );1153  });1154  // @gate experimental1155  it('should recover the outer context when an error happens inside a provider', async () => {1156    const ContextA = React.createContext('A0');1157    const ContextB = React.createContext('B0');1158    function PrintA() {1159      return (1160        <ContextA.Consumer>{value => <Text text={value} />}</ContextA.Consumer>1161      );1162    }1163    class PrintB extends React.Component {1164      static contextType = ContextB;1165      render() {1166        return <Text text={this.context} />;1167      }1168    }1169    function Throws() {1170      const value = React.useContext(ContextA);1171      throw new Error(value);1172    }1173    const loggedErrors = [];1174    await act(async () => {1175      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(1176        <div>1177          <PrintA />1178          <div>1179            <ContextA.Provider value="A0.1">1180              <Suspense1181                fallback={1182                  <b>1183                    <Text text="Loading..." />1184                  </b>1185                }>1186                <ContextA.Provider value="A0.1.1">1187                  <Throws />1188                </ContextA.Provider>1189              </Suspense>1190              <PrintB />1191            </ContextA.Provider>1192          </div>1193          <PrintA />1194        </div>,1195        writable,1196        {1197          onError(x) {1198            loggedErrors.push(x);1199          },1200        },1201      );1202      startWriting();1203    });1204    expect(loggedErrors.length).toBe(1);1205    expect(loggedErrors[0].message).toEqual('A0.1.1');1206    expect(getVisibleChildren(container)).toEqual(1207      <div>1208        A01209        <div>1210          <b>Loading...</b>B01211        </div>1212        A01213      </div>,1214    );1215  });1216  // @gate experimental1217  it('client renders a boundary if it errors before finishing the fallback', async () => {1218    function App({isClient}) {1219      return (1220        <Suspense fallback="Loading root...">1221          <div>1222            <Suspense fallback={<AsyncText text="Loading..." />}>1223              <h1>1224                {isClient ? <Text text="Hello" /> : <AsyncText text="Hello" />}1225              </h1>1226            </Suspense>1227          </div>1228        </Suspense>1229      );1230    }1231    const loggedErrors = [];1232    let controls;1233    await act(async () => {1234      controls = ReactDOMFizzServer.pipeToNodeWritable(1235        <App isClient={false} />,1236        writable,1237        {1238          onError(x) {1239            loggedErrors.push(x);1240          },1241        },1242      );1243      controls.startWriting();1244    });1245    // We're still showing a fallback.1246    // Attempt to hydrate the content.1247    const root = ReactDOM.createRoot(container, {hydrate: true});1248    root.render(<App isClient={true} />);1249    Scheduler.unstable_flushAll();1250    // We're still loading because we're waiting for the server to stream more content.1251    expect(getVisibleChildren(container)).toEqual('Loading root...');1252    expect(loggedErrors).toEqual([]);1253    const theError = new Error('Test');1254    // Error the content, but we don't have a fallback yet.1255    await act(async () => {1256      rejectText('Hello', theError);1257    });1258    expect(loggedErrors).toEqual([theError]);1259    // We still can't render it on the client because we haven't unblocked the parent.1260    Scheduler.unstable_flushAll();1261    expect(getVisibleChildren(container)).toEqual('Loading root...');1262    // Unblock the loading state1263    await act(async () => {1264      resolveText('Loading...');1265    });1266    // Now we're able to show the inner boundary.1267    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);1268    // That will let us client render it instead.1269    Scheduler.unstable_flushAll();1270    // The client rendered HTML is now in place.1271    expect(getVisibleChildren(container)).toEqual(1272      <div>1273        <h1>Hello</h1>1274      </div>,1275    );1276    expect(loggedErrors).toEqual([theError]);1277  });1278  // @gate experimental1279  it('should be able to abort the fallback if the main content finishes first', async () => {1280    await act(async () => {1281      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(1282        <Suspense fallback={<Text text="Loading Outer" />}>1283          <div>1284            <Suspense1285              fallback={1286                <div>1287                  <AsyncText text="Loading" />1288                  Inner1289                </div>1290              }>1291              <AsyncText text="Hello" />1292            </Suspense>1293          </div>1294        </Suspense>,1295        writable,1296      );1297      startWriting();1298    });1299    expect(getVisibleChildren(container)).toEqual('Loading Outer');1300    // We should have received a partial segment containing the a partial of the fallback.1301    expect(container.innerHTML).toContain('Inner');1302    await act(async () => {1303      resolveText('Hello');1304    });1305    // We should've been able to display the content without waiting for the rest of the fallback.1306    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);1307  });...

Using AI Code Generation

1const getVisibleChildren = ClientFunction(selector => {2    const el = document.querySelector(selector);3    const children = el.children;4    const visibleChildren = [];5    for (let i = 0; i < children.length; i++) {6        const child = children[i];7        if (child.style.display !== 'none') {8            visibleChildren.push(child);9        }10    }11    return visibleChildren;12});13test('Test', async t => {14    await t.click('#clickMe');15    const visibleChildren = await getVisibleChildren('#parent');16    await t.expect(visibleChildren.length).eql(2);17});

Using AI Code Generation

1import { Selector } from 'testcafe';2test('Getting Visible Children', async t => {3    const osGroup = Selector('label').withText('Which testing environment have you used?');4    const visibleChildren = await osGroup.getVisibleChildren();5    for (let i = 0; i < visibleChildren.length; i++) {6        console.log(await visibleChildren[i].innerText);7    }8});

Using AI Code Generation

1import { Selector } from 'testcafe';2test('Getting visible children', async t => {3    const parent = Selector('#parent');4    const children = parent.getVisibleChildren();5    await t.expect(children.count).eql(3);6});7test('Getting visible children', async t => {8    const parent = Selector('#parent');9    const children = parent.getVisibleChildren();10    await t.expect(children.count).eql(3);11});12test('Getting visible children', async t => {13    const parent = Selector('#parent');14    const children = parent.getVisibleChildren();15    await t.expect(children.count).eql(3);16});17test('Getting visible children', async t => {18    const parent = Selector('#parent');19    const children = parent.getVisibleChildren();20    await t.expect(children.count).eql(3);21});22test('Getting visible children', async t => {23    const parent = Selector('#parent');24    const children = parent.getVisibleChildren();25    await t.expect(children.count).eql(3);26});27test('Getting visible children', async t => {28    const parent = Selector('#parent');29    const children = parent.getVisibleChildren();30    await t.expect(children.count).eql(3);31});32test('Getting visible children', async t => {33    const parent = Selector('#parent');34    const children = parent.getVisibleChildren();35    await t.expect(children.count).eql(3);36});37test('Getting visible children', async t => {38    const parent = Selector('#parent');39    const children = parent.getVisibleChildren();40    await t.expect(children.count).eql(3);41});42test('Getting visible children', async t => {43    const parent = Selector('#parent');44    const children = parent.getVisibleChildren();45    await t.expect(children.count).eql(3);46});

Using AI Code Generation

1import { Selector } from 'testcafe';2test('Getting visible children', async t => {3    const links = await Selector('div').getVisibleChildren();4    await t.expect(links.count).eql(2);5});6module.exports = {7    screenshots: {8        pathPattern: '${DATE}_${TIME}/${TEST_INDEX}/${USERAGENT}/${FILE_INDEX}.png'9    },10    videoOptions: {11        pathPattern: '${DATE}_${TIME}/${TEST_INDEX}/${USERAGENT}.mp4'12    },13};14{

Using AI Code Generation

1import { Selector, t } from 'testcafe';2const getVisibleChildren = require('testcafe-get-visible-children');3test('My test', async t => {4    const elements = await getVisibleChildren(Selector('div'));5    console.log(elements);6});7import { Selector, t } from 'testcafe';8const getVisibleChildren = require('testcafe-get-visible-children');9test('My test', async t => {10    const elements = await getVisibleChildren(Selector('div'));11    console.log(elements);12});13import { Selector, t } from 'testcafe';14const getVisibleChildren = require('testcafe-get-visible-children');15test('My test', async t => {16    const elements = await getVisibleChildren(Selector('div'));17    console.log(elements);18});19import { Selector, t } from 'testcafe';20const getVisibleChildren = require('testcafe-get-visible-children');21test('My test', async t => {22    const elements = await getVisibleChildren(Selector('div'));23    console.log(elements);24});25import { Selector, t } from 'testcafe';26const getVisibleChildren = require('testcafe-get-visible-children');27test('My test', async t => {28    const elements = await getVisibleChildren(Selector('div'));29    console.log(elements);30});31import { Selector, t } from 'testcafe';32const getVisibleChildren = require('testcafe-get-visible-children');33test('My test', async t => {34    const elements = await getVisibleChildren(Selector('div'));35    console.log(elements);36});

Using AI Code Generation

1import { Selector } from 'testcafe';2fixture('Test')3test('Test', async t => {4    const visibleChildren = await Selector('#parent').getVisibleChildren();5    console.log(visibleChildren);6});7import { Selector } from 'testcafe';8fixture('Test')9test('Test', async t => {10    const visibleChildren = await Selector('#parent').getVisibleChildren();11    console.log(visibleChildren);12});

Using AI Code Generation

1import { Selector } from 'testcafe';2test('Test', async t => {3    const container = Selector('#container');4    const visibleChildren = await container.getVisibleChildren();5    await t.expect(visibleChildren.length).eql(2);6});

Using AI Code Generation

1import { Selector } from 'testcafe';2const selector = Selector('div');3const visibleChildren = await selector.getVisibleChildren();4console.log(visibleChildren);5const selector = await page.$('div');6const visibleChildren = await selector.getVisibleChildren();7console.log(visibleChildren);8import { Selector } from 'testcafe';9test('My Test', async t => {10    const selector = Selector('div');11    const visibleChildren = await selector.getVisibleChildren();12    console.log(visibleChildren);13});

Using AI Code Generation

1import {Selector} from 'testcafe';2test('Test', async t => {3    let selector = Selector('div').withText('Test');4    let visibleChildren = await selector.getVisibleChildren();5    console.log(visibleChildren);6});7import {Selector} from 'testcafe';8test('Test2', async t => {9    let selector = Selector('div').withText('Test2');10    let visibleChildren = await selector.getVisibleChildren();11    console.log(visibleChildren);12});13import {Selector} from 'testcafe';14test('Test3', async t => {15    let selector = Selector('div').withText('Test3');16    let visibleChildren = await selector.getVisibleChildren();17    console.log(visibleChildren);18});19import {Selector} from 'testcafe';20test('Test4', async t => {21    let selector = Selector('div').withText('Test4');22    let visibleChildren = await selector.getVisibleChildren();23    console.log(visibleChildren);24});25import {Selector} from 'testcafe';26test('Test5', async t => {27    let selector = Selector('div').withText('Test5');28    let visibleChildren = await selector.getVisibleChildren();29    console.log(visibleChildren);30});31import {Selector} from 'testcafe';32test('Test6', async t => {33    let selector = Selector('div').withText('Test6');34    let visibleChildren = await selector.getVisibleChildren();35    console.log(visibleChildren);

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.