chore: refactor test files to test public components only

packages/react/src/components/auth0/my-account/__tests__/user-mfa-management.test.tsx

@@ -16,8 +16,6 @@ import { mockCore, mockToast } from '@/tests/utils/test-setup';
 import type { UserMFAMgmtProps } from '@/types/my-account/mfa/mfa-types';
 import type { UserMFAMgmtViewProps } from '@/types/my-account/mfa/mfa-types';
 
-// ===== Mock packages =====
-
 mockToast();
 const { initMockCoreClient } = mockCore();
 
@@ -38,8 +36,6 @@ vi.mock('sonner', () => ({
   Toaster: () => null,
 }));
 
-// ===== Local mock creators =====
-
 const createMockUserMFAMgmtProps = (overrides?: Partial<UserMFAMgmtProps>): UserMFAMgmtProps => ({
   hideHeader: false,
   showActiveOnly: false,
@@ -69,8 +65,6 @@ const setupEnrolledTotpFactor = (
   );
 };
 
-// ===== Tests =====
-
 describe('UserMFAMgmt', () => {
   let mockCoreClient: ReturnType<typeof initMockCoreClient>;
 

packages/react/src/components/auth0/my-account/shared/mfa/__tests__/delete-factor-confirmation.test.tsx

@@ -6,7 +6,6 @@ import { DeleteFactorConfirmation } from '@/components/auth0/my-account/shared/m
 import { createMockDeleteFactorConfirmationProps } from '@/tests/utils/__mocks__/my-account/mfa/delete-factor-confirmation.mocks';
 import { renderWithProviders } from '@/tests/utils/test-provider';
 
-// ===== Test Suite =====
 describe('DeleteFactorConfirmation', () => {
   afterEach(() => {
     vi.clearAllMocks();

packages/react/src/components/auth0/my-account/shared/mfa/__tests__/empty-state.test.tsx

@@ -5,7 +5,6 @@ import { MFAEmptyState } from '@/components/auth0/my-account/shared/mfa/empty-st
 import { createMockMFAEmptyStateProps } from '@/tests/utils/__mocks__/my-account/mfa/empty-state.mocks';
 import { renderWithProviders } from '@/tests/utils/test-provider';
 
-// ===== Test Suite =====
 describe('MFAEmptyState', () => {
   afterEach(() => {
     vi.clearAllMocks();

packages/react/src/components/auth0/my-account/shared/mfa/__tests__/error-state.test.tsx

@@ -5,7 +5,6 @@ import { MFAErrorState } from '@/components/auth0/my-account/shared/mfa/error-st
 import { createMockMFAErrorStateProps } from '@/tests/utils/__mocks__/my-account/mfa/error-state.mocks';
 import { renderWithProviders } from '@/tests/utils/test-provider';
 
-// ===== Test Suite =====
 describe('MFAMFAErrorState', () => {
   afterEach(() => {
     vi.clearAllMocks();

packages/react/src/components/auth0/my-account/shared/mfa/__tests__/factors-list.test.tsx

@@ -7,7 +7,6 @@ import { FactorsList } from '@/components/auth0/my-account/shared/mfa/factors-li
 import { createMockFactorsListProps } from '@/tests/utils/__mocks__/my-account/mfa/factor-list.mocks';
 import { renderWithProviders } from '@/tests/utils/test-provider';
 
-// ===== Test Suite =====
 describe('FactorsList', () => {
   afterEach(() => {
     vi.clearAllMocks();

packages/react/src/components/auth0/my-account/shared/mfa/__tests__/otp-verification-form.test.tsx

@@ -6,7 +6,6 @@ import { OTPVerificationForm } from '@/components/auth0/my-account/shared/mfa/ot
 import { createMockOTPVerificationFormProps } from '@/tests/utils/__mocks__/my-account/mfa/otp-verification-form.mocks';
 import { renderWithProviders } from '@/tests/utils/test-provider';
 
-// ===== Test Suite =====
 describe('OTPVerificationForm', () => {
   afterEach(() => {
     vi.clearAllMocks();

packages/react/src/components/auth0/my-account/shared/mfa/__tests__/user-mfa-setup-form.test.tsx

@@ -21,7 +21,6 @@ import { createMockUserMFASetupFormProps } from '@/tests/utils/__mocks__/my-acco
 import { renderWithProviders } from '@/tests/utils/test-provider';
 import type { UserMFASetupFormProps } from '@/types/my-account/mfa/mfa-types';
 
-// ===== Test Suite =====
 describe('UserMFASetupForm', () => {
   afterEach(() => {
     vi.clearAllMocks();

packages/react/src/components/auth0/my-organization/__tests__/domain-table.test.tsx

@@ -2,7 +2,7 @@ import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 
-import { DomainTable, DomainTableView } from '@/components/auth0/my-organization/domain-table';
+import { DomainTable } from '@/components/auth0/my-organization/domain-table';
 import * as useCoreClientModule from '@/hooks/shared/use-core-client';
 import {
   createMockDomain,
@@ -13,26 +13,19 @@ import {
   createMockCreateAction,
   createMockVerifyAction,
   createMockDeleteAction,
-  createMockDomainTableReturn,
 } from '@/tests/utils/__mocks__/my-organization/domain-management/domain.mocks';
 import { renderWithProviders } from '@/tests/utils/test-provider';
 import { mockCore, mockToast } from '@/tests/utils/test-setup';
 
-// ===== Mock packages =====
-
 mockToast();
 const { initMockCoreClient } = mockCore();
 
-// ===== Local utils =====
-
 const waitForComponentToLoad = async () => {
   return await waitFor(() => {
     expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
   });
 };
 
-// ===== Tests =====
-
 describe('DomainTable', () => {
   const mockDomain = createMockDomain();
   const mockVerifiedDomain = createMockVerifiedDomain();
@@ -678,28 +671,98 @@ describe('DomainTable', () => {
     });
   });
 
-  describe('refresh indicator', () => {
-    it('should render the refresh control once domains data is loaded and stale', async () => {
-      renderWithProviders(<DomainTable {...createMockDomainTableProps()} />);
+  describe('table rendering', () => {
+    describe('when domains are loaded', () => {
+      it('should display domain column', async () => {
+        renderWithProviders(<DomainTable {...createMockDomainTableProps()} />);
 
-      await waitForComponentToLoad();
+        await waitForComponentToLoad();
+
+        expect(screen.getByText(/table.columns.domain/i)).toBeInTheDocument();
+      });
+
+      it('should display status column', async () => {
+        renderWithProviders(<DomainTable {...createMockDomainTableProps()} />);
+
+        await waitForComponentToLoad();
+
+        expect(screen.getByText(/table.columns.status/i)).toBeInTheDocument();
+      });
+
+      it('should display domain name in table row', async () => {
+        renderWithProviders(<DomainTable {...createMockDomainTableProps()} />);
+
+        await waitForComponentToLoad();
+
+        expect(screen.getAllByText(mockDomain.domain).length).toBeGreaterThan(0);
+      });
+
+      it('should display verified domain with verified badge', async () => {
+        renderWithProviders(<DomainTable {...createMockDomainTableProps()} />);
+
+        await waitForComponentToLoad();
+
+        expect(screen.getByText(/shared\.domain_statuses\.verified/i)).toBeInTheDocument();
+      });
 
-      expect(screen.getByRole('button', { name: 'refresh' })).toBeInTheDocument();
+      it('should display pending domain with pending badge', async () => {
+        renderWithProviders(<DomainTable {...createMockDomainTableProps()} />);
+
+        await waitForComponentToLoad();
+
+        expect(screen.getByText(/shared\.domain_statuses\.pending/i)).toBeInTheDocument();
+      });
     });
 
-    it('should refetch domains when the refresh button is clicked', async () => {
-      const user = userEvent.setup();
-      const apiService = mockCoreClient.getMyOrganizationApiClient();
-      const listDomains = apiService.organization.domains.list as ReturnType<typeof vi.fn>;
+    describe('when no domains exist', () => {
+      it('should display empty message', async () => {
+        const apiService = mockCoreClient.getMyOrganizationApiClient();
+        (apiService.organization.domains.list as ReturnType<typeof vi.fn>).mockResolvedValue({
+          response: { organization_domains: [] },
+        });
 
-      renderWithProviders(<DomainTable {...createMockDomainTableProps()} />);
+        renderWithProviders(<DomainTable {...createMockDomainTableProps()} />);
 
-      await waitForComponentToLoad();
-      expect(listDomains).toHaveBeenCalledTimes(1);
-      await user.click(screen.getByRole('button', { name: 'refresh' }));
+        await waitForComponentToLoad();
 
-      await waitFor(() => {
-        expect(listDomains).toHaveBeenCalledTimes(2);
+        expect(screen.getByText(/table.empty_message/i)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('pagination', () => {
+    describe('when domains are paginated', () => {
+      it('should render table with domain data', async () => {
+        renderWithProviders(<DomainTable {...createMockDomainTableProps()} />);
+
+        await waitForComponentToLoad();
+
+        const table = screen.getByRole('table');
+        expect(table).toBeInTheDocument();
+        expect(screen.getAllByText(mockDomain.domain).length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('customMessages', () => {
+    describe('when custom header title is provided', () => {
+      it('should render component with customMessages prop', async () => {
+        renderWithProviders(
+          <DomainTable
+            {...createMockDomainTableProps({
+              customMessages: {
+                header: {
+                  title: 'Custom Domain Title',
+                },
+              },
+            })}
+          />,
+        );
+
+        await waitForComponentToLoad();
+
+        expect(screen.getByRole('table')).toBeInTheDocument();
+        expect(screen.getByText(/header\.title|Custom Domain Title/i)).toBeInTheDocument();
       });
     });
 
@@ -745,34 +808,3 @@ describe('DomainTable', () => {
     });
   });
 });
-
-describe('DomainTableView', () => {
-  const mockDomainTable = createMockDomainTableReturn();
-  const defaultViewProps = {
-    domainTable: mockDomainTable,
-    schema: undefined,
-    styling: { variables: { common: {}, light: {}, dark: {} }, classes: {} },
-    hideHeader: false,
-    readOnly: false,
-    customMessages: {},
-    createAction: undefined,
-    onOpenProvider: undefined,
-    onCreateProvider: undefined,
-  };
-
-  it('renders the table and header', () => {
-    renderWithProviders(<DomainTableView {...defaultViewProps} />);
-    expect(screen.getByRole('table')).toBeInTheDocument();
-    expect(screen.getByText(/header.title/i)).toBeInTheDocument();
-  });
-
-  it('does not render header if hideHeader is true', () => {
-    renderWithProviders(<DomainTableView {...defaultViewProps} hideHeader={true} />);
-    expect(screen.queryByText(/header.title/i)).not.toBeInTheDocument();
-  });
-
-  it('disables create button if readOnly is true', () => {
-    renderWithProviders(<DomainTableView {...defaultViewProps} readOnly={true} />);
-    expect(screen.getByRole('button', { name: /create/i })).toBeDisabled();
-  });
-});