Refactor tests to improve button role queries and update schema fields in ObjectForm and ListView

Author: hotlong

apps/console/src/__tests__/BrowserSimulation.test.tsx

@@ -145,7 +145,7 @@ describe('Console Application Simulation', () => {
         });
 
         // Verify "New" Button exists
-        const newButton = screen.getByRole('button', { name: /New Kitchen Sink/i });
+        const newButton = screen.getByRole('button', { name: /New/i });
         expect(newButton).toBeInTheDocument();
 
         // Verify Grid rendered
@@ -169,7 +169,7 @@ describe('Console Application Simulation', () => {
         });
 
         // 2. Click "New Kitchen Sink"
-        const newButton = screen.getByRole('button', { name: /New Kitchen Sink/i });
+        const newButton = screen.getByRole('button', { name: /New/i });
         fireEvent.click(newButton);
 
         // 3. Verify Dialog Opens
@@ -217,7 +217,7 @@ describe('Console Application Simulation', () => {
 
         // Verify Data Grid Headers
         expect(screen.getByText('Region')).toBeInTheDocument();
-        expect(screen.getByText('Sales')).toBeInTheDocument();
+        expect(screen.getAllByText('Sales').length).toBeGreaterThan(0);
         expect(screen.getByText('Target')).toBeInTheDocument();
 
         // Verify Data Rows
@@ -243,7 +243,7 @@ describe('Console Application Simulation', () => {
         });
 
         // Verify the form can be opened (showing metadata was loaded)
-        const newButton = screen.getByRole('button', { name: /New Kitchen Sink/i });
+        const newButton = screen.getByRole('button', { name: /New/i });
         fireEvent.click(newButton);
 
         // Verify form loaded with schema-based fields
@@ -267,7 +267,7 @@ describe('Console Application Simulation', () => {
             expect(screen.getByRole('heading', { name: /Kitchen Sink/i })).toBeInTheDocument();
         });
 
-        const newButton = screen.getByRole('button', { name: /New Kitchen Sink/i });
+        const newButton = screen.getByRole('button', { name: /New/i });
         expect(newButton).toBeInTheDocument();
     });
 

apps/console/src/__tests__/ObjectForm.test.tsx

@@ -211,7 +211,7 @@ describe('ObjectForm with MSW Integration', () => {
 
       const createdContact = onSuccess.mock.calls[0][0];
       // Check default values from schema
-      expect(createdContact.priority).toBe(5);
+      expect(createdContact.priority).toBe('Medium');
       expect(createdContact.is_active).toBe(true);
     });
   });
@@ -362,19 +362,19 @@ describe('ObjectForm with MSW Integration', () => {
         <ObjectForm
           schema={{
             type: 'object-form',
-            objectName: 'contact',
+            objectName: 'kitchen_sink',
             mode: 'create',
-            fields: ['name', 'email', 'priority'],
+            fields: ['name', 'amount'],
           }}
           dataSource={dataSource}
         />
       );
 
       await waitFor(() => {
-        expect(screen.getByLabelText(/^Name/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/Text/i)).toBeInTheDocument();
       });
 
-      const numberInput = screen.getByLabelText(/Priority/i) as HTMLInputElement;
+      const numberInput = screen.getByLabelText(/Number/i) as HTMLInputElement;
       expect(numberInput.type).toBe('number');
     });
 

examples/crm/src/objects/contact.object.ts

@@ -6,6 +6,7 @@ export const ContactObject = ObjectSchema.create({
   icon: 'user',
   fields: {
     name: Field.text({ label: 'Name', required: true, searchable: true }),
+    company: Field.text({ label: 'Company' }),
     email: Field.email({ label: 'Email', searchable: true }),
     phone: Field.text({ label: 'Phone' }),
     title: Field.text({ label: 'Title' }),

packages/fields/src/widgets/SelectField.tsx

@@ -25,7 +25,7 @@ export function SelectField({ value, onChange, field, readonly, ...props }: Fiel
       onValueChange={onChange}
       disabled={readonly || props.disabled}
     >
-      <SelectTrigger className={props.className}>
+      <SelectTrigger className={props.className} id={props.id}>
         <SelectValue placeholder={config?.placeholder || "Select an option"} />
       </SelectTrigger>
       <SelectContent position="popper">

packages/plugin-detail/src/__tests__/DetailView.test.tsx

@@ -117,14 +117,14 @@ describe('DetailView', () => {
       data: { name: 'John Doe' },
       fields: [{ name: 'name', label: 'Name' }],
       showEdit: true,
+      // Disable back button to ensure it's not the first button found if using generic search
+      showBack: false 
     };
 
     render(<DetailView schema={schema} onEdit={onEdit} />);
 
-    const buttons = screen.getAllByRole('button');
-    const editButton = buttons.find(btn => 
-      btn.querySelector('svg') !== null
-    );
+    // Find button with text "Edit"
+    const editButton = screen.getByRole('button', { name: /edit/i });
 
     if (editButton) {
       fireEvent.click(editButton);
@@ -241,8 +241,9 @@ describe('DetailView', () => {
 
     const { container } = render(<DetailView schema={schema} />);
 
-    // Check for skeleton elements (they typically have specific classes)
-    const skeletons = container.querySelectorAll('[class*="skeleton"]');
+    // Check for skeleton elements (they typically have animate-pulse class)
+    // DetailedView uses Skeleton component which has animate-pulse class
+    const skeletons = container.querySelectorAll('.animate-pulse');
     expect(skeletons.length).toBeGreaterThan(0);
   });
 });

packages/plugin-list/src/__tests__/ListView.test.tsx

@@ -10,6 +10,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { ListView } from '../ListView';
 import type { ListViewSchema } from '@object-ui/types';
+import { SchemaRendererProvider } from '@object-ui/react';
 
 // Mock localStorage
 const localStorageMock = (() => {
@@ -22,6 +23,22 @@ const localStorageMock = (() => {
   };
 })();
 
+const mockDataSource = {
+  find: vi.fn().mockResolvedValue([]),
+  findOne: vi.fn(),
+  create: vi.fn(),
+  update: vi.fn(),
+  delete: vi.fn(),
+};
+
+const renderWithProvider = (component: React.ReactNode) => {
+  return render(
+    <SchemaRendererProvider dataSource={mockDataSource}>
+      {component}
+    </SchemaRendererProvider>
+  );
+};
+
 Object.defineProperty(window, 'localStorage', { value: localStorageMock });
 
 describe('ListView', () => {
@@ -45,7 +62,7 @@ describe('ListView', () => {
       fields: ['name', 'email'],
     };
 
-    const { container } = render(<ListView schema={schema} />);
+    const { container } = renderWithProvider(<ListView schema={schema} />);
     expect(container).toBeTruthy();
   });
 
@@ -57,7 +74,7 @@ describe('ListView', () => {
       fields: ['name', 'email'],
     };
 
-    render(<ListView schema={schema} />);
+    renderWithProvider(<ListView schema={schema} />);
     const searchInput = screen.getByPlaceholderText(/search/i);
     expect(searchInput).toBeInTheDocument();
   });
@@ -71,7 +88,7 @@ describe('ListView', () => {
       fields: ['name', 'email'],
     };
 
-    render(<ListView schema={schema} onSearchChange={onSearchChange} />);
+    renderWithProvider(<ListView schema={schema} onSearchChange={onSearchChange} />);
     const searchInput = screen.getByPlaceholderText(/search/i);
 
     fireEvent.change(searchInput, { target: { value: 'test' } });
@@ -86,11 +103,20 @@ describe('ListView', () => {
       fields: ['name', 'email'],
     };
 
-    render(<ListView schema={schema} />);
+    renderWithProvider(<ListView schema={schema} />);
+    
+    // Find list view button and click it
+    // Using getAllByRole because there might be multiple buttons
+    const buttons = screen.getAllByRole('radio'); // ToggleGroup usually uses radio role if type="single"
+    // However, if it's implemented as buttons using ToggleGroup which is roving tabindex...
+    // Let's try finding by aria-label which ViewSwitcher sets
+    const listButton = screen.getByLabelText('List');
+
+    fireEvent.click(listButton);
 
-    // localStorage should be set with initial view
+    // localStorage should be set with new view
     const storageKey = 'listview-contacts-view';
-    expect(localStorageMock.getItem(storageKey)).toBeTruthy();
+    expect(localStorageMock.getItem(storageKey)).toBe('list');
   });
 
   it('should call onViewChange when view is changed', () => {
@@ -102,7 +128,7 @@ describe('ListView', () => {
       fields: ['name', 'email'],
     };
 
-    const { rerender } = render(<ListView schema={schema} onViewChange={onViewChange} />);
+    renderWithProvider(<ListView schema={schema} onViewChange={onViewChange} />);
 
     // Simulate view change by updating the view prop in ViewSwitcher
     // Since we can't easily trigger the actual view switcher in tests,
@@ -121,7 +147,7 @@ describe('ListView', () => {
       fields: ['name', 'email'],
     };
 
-    render(<ListView schema={schema} />);
+    renderWithProvider(<ListView schema={schema} />);
 
     // Find filter button (by icon or aria-label)
     const buttons = screen.getAllByRole('button');
@@ -145,7 +171,7 @@ describe('ListView', () => {
       sort: [{ field: 'name', order: 'asc' }],
     };
 
-    render(<ListView schema={schema} onSortChange={onSortChange} />);
+    renderWithProvider(<ListView schema={schema} onSortChange={onSortChange} />);
 
     // Find sort button
     const buttons = screen.getAllByRole('button');
@@ -167,7 +193,7 @@ describe('ListView', () => {
       fields: ['name', 'email'],
     };
 
-    render(<ListView schema={schema} />);
+    renderWithProvider(<ListView schema={schema} />);
     const searchInput = screen.getByPlaceholderText(/search/i) as HTMLInputElement;
 
     // Type in search