<SingleTestContainerOverview>

Shows an overview of all the tests in a single <TestContainer> element.

The test states are:

Pending - the test is waiting to start

Running - the test is currently running

Success - the test has passed

Fail - the test has failed

Skipped - the test was skipped

Example in a NextJS page:

import { Test, TestContainer, expect, SingleTestContainerOverview } from "react-browser-tests";

export default function Page() {
  return (
    <>
      <TestContainer>
        <Test style={{display: "none"}} title="Simple passing test: 1 + 1 = 2" fn={async () => {
          expect(1 + 1).to.equal(2);
        }} />

        <Test style={{display: "none"}} title="Simple failing test: 1 + 1 = 3" fn={async () => {
          expect(1 + 1).to.equal(3);
        }} />
      </TestContainer >

      <SingleTestContainerOverview title="1 success and 1 fail. Final state: fail."/>
    </>
  );
}

Note that in the code above, the tests have display: none. This way, only the <SingleTestContainerOverview> component will be visible. The final result is:

Loading tests for container id 'undefined'

Props

containerId?

The Id of the <TestContainer> we wish to show an overview of. If not passed in, the default containerId is used: "test-container"

title?

String - text to show next to the overview icons.

showGroupStats?

Boolean - whether or not to show <TestGroup> information. Default is false.

iframeUrl?

String - if the current page has an iframe, and we wish to show an overview for the tests in that iframe, we can pass in the iframe's url here.

HTMLDivElement props

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