Flaky Test: Detail Pane System Test

[jameskerr]

The Detail Pane system test failed on windows after running successfully a number of times. Here was the error:

FAIL test/system/detail-pane.test.ts (75.016 s)
  ● for capture loss

    expect(received).toEqual(expected) // deep equality

    Expected: ArrayContaining ["fields"]
    Received: ["no log selected"]

      32 |   const headers = await Promise.all(sections.map((s) => s.textContent))
      33 |
    > 34 |   expect(headers.map(toLower)).toEqual(expect.arrayContaining(sectionNames))
         |                                ^
      35 | }
      36 |
      37 | test("for capture loss", () => {

      at _callee2$ (test/system/detail-pane.test.ts:34:32)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:45:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:281:22)
      at Generator.prototype.<computed> [as next] (node_modules/regenerator-runtime/runtime.js:106:21)
      at asyncGeneratorStep (test/system/detail-pane.test.ts:9:103)
      at _next (test/system/detail-pane.test.ts:11:194)

It looks like it failed to click the log in the viewer which would then show the log in the details pane. This failure was the first test case, so the problem is in the setup.

[jameskerr]

Here is the code in the test:

import {act, screen, within} from "@testing-library/react"
import {toLower} from "lodash"
import {SystemTest} from "./system-test"

const system = new SystemTest("detail-pane")

beforeAll(async () => {
  system.mountApp()
  await system.importFile("ifconfig.zng")
  await system.runQuery("")
  const view = await screen.findByRole("button", {name: "View"})
  await system.click(view)
  system.click(await screen.findByText("Right Pane"))
  await screen.findByText("No Log Selected")
})

const FIELDS = "fields"
const UID = "correlation"
const ALERTS = "related alerts"
const HISTORY = "conn history"
const CONNECTIONS = "related connections"
const MD5 = "md5 correlation"

// Helper function to perform the common actions
async function testDetailHeaders(path, sectionNames) {
  const tableView = await screen.findByRole("button", {name: "Table View"})
  act(() => system.click(tableView))
  const table = await screen.findByRole("table", {name: "results"})
  system.click(within(table).getAllByText(path)[0])
  const details = await screen.findByRole("complementary", {name: "details"})
  const sections = await within(details).findAllByRole("heading")
  const headers = await Promise.all(sections.map((s) => s.textContent))

  expect(headers.map(toLower)).toEqual(expect.arrayContaining(sectionNames))
}

test("for capture loss", () => {
  return testDetailHeaders("capture_loss", [FIELDS])
})

test("for stats", () => {
  return testDetailHeaders("stats", [FIELDS])
})

test("for alert", () => {
  return testDetailHeaders("alert", [FIELDS, ALERTS, CONNECTIONS])
})

test("for file", () => {
  return testDetailHeaders("files", [FIELDS, MD5])
})

test("for http", () => {
  return testDetailHeaders("files", [FIELDS, UID])
})

test("for conn", () => {
  return testDetailHeaders("conn", [FIELDS, UID, HISTORY])
})