React Browser Tests
  • Home
  • Components
    • Test Container
    • Test
    • Test Group
    • Single Test Container Overview
    • Multiple Test Container Overview
    • Multiple Page Overview
    • Sidebar Layout
  • Helper Functions
  • Run in a Terminal
  • Tests

<MultiplePageOverview>

Receives an array of URLs and shows an overview of all the tests in all the pages.

This component creates an iframe for each of the passed in URLs. Then, for each iframe, a <MultipleTestContainersOverview> component is used to show an overview of the tests.

Currently, a <TestContainer> parent element is required (just for the CSS styles. This may change in the future).

Example:

In the following example, a <MultiplePageOverview> component is used to show all the test results from the urls /tests/async-tests and /tests/test-component. The test pages can also be navigated to from the sidebar.

<TestContainer>
  <MultiplePageOverview
    urls={["/tests/async-tests", "/tests/test-component"]}
    iframeProps={{
      style: {
        display: "none"
      }
    }}
  />
</TestContainer>

And the result is:

Pending url: /tests/async-tests
Pending url: /tests/test-component

Props

urls

Array of strings - URLs of the test pages.

iframeProps?

Object with props for the iframe element. Example usage:

<MultiplePageOverview iframeProps={{ style: { display: "none" } }} />
singleIframeMode?

Boolean - if true, only one iframe is shown at a time. The default is false.

Setting this to true will very likely slow down the tests because the tests will run sequentially instead of in parallel.

However, in certain situations this may be necessary - for example, there's a limit on the amount of webgl contexts that can be created at the same time. If multiple iframes try to create a webgl context at the same time, the tests may fail.

HTMLDivElement props

Supports standard HTMLDivElement props. For example: className, style, etc.