test: fix FailedTestCaseSampleData tests with mock Table component

[ShaileshParmar11]

RCA: FailedTestCaseSampleData.test.tsx failing on main

fixs: #28030

Summary

After PR #27956 and PR #27985 both landed on main, FailedTestCaseSampleData.test.tsx started crashing with:

TypeError: Cannot read properties of null (reading 'useContext')
  at .../openmetadata-ui-core-components/.../dist/SnackbarContent.cjs.js
  The above error occurred in the <Table> component

Both PRs were green on their own branches. The breakage only surfaced once they were combined on main.

Root Cause

Dual React instances triggered by an unmocked dependency.

@openmetadata/ui-core-components ships a prebuilt CJS bundle resolved against its own nested node_modules/react — separate from the one Jest is running with. When a component pulls a real export (Table, Typography, etc.) into a Jest test, two React copies are live in the same process. The dispatcher inside the package's React copy is null, so the first useContext call inside the bundle throws.

This was missed because two PRs touched complementary parts of the same file and pull_request_target CI runs against the PR head, not against a hypothetical merge with main.

Timeline

When	PR	Change	Did it break the test?
May 9, 09:38	#27985 — Migrate FailedTestCaseSampleData table to core-ui Table component	Swapped Table import from antd → @openmetadata/ui-core-components in FailedTestCaseSampleData.component.tsx	No test existed yet, so CI had nothing to fail
May 10, 11:20	#27956 — Replace RouterUtils with ObservabilityRouterClassBase	Added FailedTestCaseSampleData.test.tsx. On this PR's branch, the component still imported Table from antd	Test passed — verified directly in CI log (stack shows rc-table/lib/Table.js, antd/lib/spin)
After merge	main	Has both: antd→core-ui swap and the new test that does not mock core-ui	Crashes — but nothing re-ran

Direct evidence from PR #27956's CI run (25601970266):

PASS  src/components/DataQuality/IncidentManager/FailedTestCaseSampleData/FailedTestCaseSampleData.test.tsx
  at Table (.../node_modules/rc-table/lib/Table.js:141:25)        ← antd
  at Spin (.../node_modules/antd/lib/spin/index.js)
  at InternalTable (.../node_modules/antd/lib/table/Table.js:39)
  at testCaseData (FailedTestCaseSampleData.component.tsx:60:3)   ← antd-era line number

Git auto-merged the two changes without conflict (they touched different parts of the file), so no human noticed the interaction at merge time.

Fix

Mock @openmetadata/ui-core-components in the test (matches the pattern already used in IncidentManager.test.tsx and 30+ other tests in the repo). Provides minimal stubs for Table, Table.Header/Head/Body/Row/Cell, and Typography — keeps the package's real bundled code out of the render tree, eliminating the dual-React issue.

jest.mock('@openmetadata/ui-core-components', () => {
  type Col = { id: string; label?: React.ReactNode };
  type Row = Record<string, unknown> & { __rowKey: number | string };

  const TableMock = Object.assign(
    ({ children, ...rest }) => <table {...rest}>{children}</table>,
    {
      Header: ({ columns, children }) => (
        <thead>
          <tr>{columns?.map((col) => <Fragment key={col.id}>{children(col)}</Fragment>)}</tr>
        </thead>
      ),
      Head: ({ label, id }) => <th data-testid={`head-${id}`}>{label}</th>,
      Body: ({ items, children }) => (
        <tbody>{items?.map((item) => <Fragment key={String(item.__rowKey)}>{children(item)}</Fragment>)}</tbody>
      ),
      Row: ({ columns, children, id }) => (
        <tr data-row-id={id}>{columns?.map((col) => <Fragment key={col.id}>{children(col)}</Fragment>)}</tr>
      ),
      Cell: ({ children }) => <td>{children}</td>,
    }
  );

  return {
    Table: TableMock,
    Typography: ({ children }) => <span>{children}</span>,
  };
});

Verification

• yarn test --testPathPattern=FailedTestCaseSampleData → PASS (1/1)
• eslint on the test file → clean
• tsc --noEmit → clean
• prettier + organize-imports-cli → no diff

Process Gap

yarn-coverage CI runs against pull_request_target head, not against a trial merge with main. Two PRs that individually pass can still produce a broken main if they touch complementary parts of the same file. Worth considering: run UI tests against the merge ref (refs/pull/N/merge) instead of the head SHA so this class of interaction surfaces before merge.

[gitar-bot]

Code Review ✅ Approved

Enhanced FailedTestCaseSampleData tests by introducing mock implementations for UI components and streamlining attribute access. No issues found.

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact

gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}

[Copilot]

Pull request overview

This PR updates the UI unit test for FailedTestCaseSampleData to better isolate the component under test by mocking the @openmetadata/ui-core-components Table implementation, while keeping the existing routing assertion around observabilityRouterClassBase.getTestCaseDetailPagePath().

Changes:

• Added a lightweight mock implementation of Table/Typography from @openmetadata/ui-core-components to make the test less coupled to the real table internals.
• Simplified the test render flow by removing an explicit act() wrapper and relying on RTL async queries (findByTestId) to await state updates.
• Switched the Link mock assertion from getAttribute('data-to') to dataset.to.

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	62.45% (64631/103489)	43.08% (35117/81508)	45.92% (10344/22525)

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
1363 New issues
0 Accepted issues

Measures
17 Security Hotspots
0.0% Coverage on New Code
4.1% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

🟡 Playwright Results — all passed (14 flaky)

✅ 4071 passed · ❌ 0 failed · 🟡 14 flaky · ⏭️ 86 skipped

Shard	Passed	Failed	Flaky	Skipped
✅ Shard 1	299	0	0	4
🟡 Shard 2	761	0	7	8
🟡 Shard 3	779	0	2	7
🟡 Shard 4	788	0	2	18
🟡 Shard 5	708	0	1	41
🟡 Shard 6	736	0	2	8

🟡 14 flaky test(s) (passed on retry)

• Features/ActivityAPI.spec.ts › Activity event shows the actor who made the change (shard 2, 1 retry)
• Features/BulkEditEntity.spec.ts › Glossary (shard 2, 1 retry)
• Features/DataQuality/DataQuality.spec.ts › Table test case (shard 2, 1 retry)
• Features/KnowledgeCenter.spec.ts › Article mentions in description should working for Knowledge Center (shard 2, 1 retry)
• Features/KnowledgeCenterTextEditor.spec.ts › Rich Text Editor - Text Formatting (shard 2, 1 retry)
• Features/KnowledgeCenterTextEditor.spec.ts › Rich Text Editor - Text Formatting (shard 2, 1 retry)
• Features/KnowledgeCenterTextEditor.spec.ts › Rich Text Editor - Text Formatting (shard 2, 1 retry)
• Features/Table.spec.ts › Table pagination with sorting should works (shard 3, 1 retry)
• Flow/PersonaDeletionUserProfile.spec.ts › User profile loads correctly before and after persona deletion (shard 3, 1 retry)
• Pages/CustomProperties.spec.ts › Should search custom properties for apiCollection in right panel (shard 4, 1 retry)
• Pages/DataContractsSemanticRules.spec.ts › Validate Description Rule Is_Set (shard 4, 1 retry)
• Pages/ExplorePageRightPanel_KnowledgeCenter.spec.ts › Should remove user owner for knowledgeCenter (shard 5, 1 retry)
• Pages/Lineage/LineageFilters.spec.ts › Verify lineage schema filter selection (shard 6, 1 retry)
• Pages/ODCSImportExport.spec.ts › Multi-object ODCS contract - object selector shows all schema objects (shard 6, 1 retry)

📦 Download artifacts

How to debug locally

# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace