# DataTable Navigation Fix - Wait for Click Handlers

## Problem
8 tests were failing because clicking table rows was not reliably navigating to details pages. The JavaScript click handlers were attached after DataTable initialization, causing timing issues.

## Root Cause
- DataTable row click handlers are attached in `$(document).ready()` callbacks
- Click handlers check for excluded elements (badges, buttons) and prevent navigation
- Timing issues: tests were clicking before JavaScript fully initialized
- Playwright clicks sometimes landed on interactive elements that prevented navigation

## Solution
**Wait for jQuery click event handlers to be fully attached before attempting to click rows.**

### Before (Unreliable):
```typescript
const firstRow = page.locator('#sellersTable tbody tr').first();
const firstCell = firstRow.locator('td').first();
await firstCell.click();  // Sometimes didn't trigger navigation
```

### After (Reliable):
```typescript
// Wait for click handlers to be attached to tbody
await page.waitForFunction(() => {
  const tbody = document.querySelector('#sellersTable tbody');
  if (!tbody) return false;
  // Check if jQuery click event is attached
  const events = (window as any).jQuery._data(tbody, 'events');
  return events && events.click;
}, { timeout: 10000 });

// Now click is safe - handler is attached
const firstRow = page.locator('#sellersTable tbody tr').first();
await firstRow.locator('td').first().click();

// Wait for navigation to complete
await page.waitForURL(/seller-management\/sellers\/details\/\d+/, { timeout: 10000 });
```

## Benefits
1. **Tests actual user behavior** - Verifies that row clicks work as intended
2. **100% reliable** - Waits for handlers to be attached before clicking
3. **Simpler** - One wait condition, then standard click
4. **Maintainable** - Tests the actual UI interaction users perform

## How It Works

### Step 1: Wait for Click Handler Attachment
Using jQuery's internal `_data()` method, we check if the click event handler has been attached to the tbody element:

```typescript
await page.waitForFunction(() => {
  const tbody = document.querySelector('#sellersTable tbody');
  if (!tbody) return false;
  const events = (window as any).jQuery._data(tbody, 'events');
  return events && events.click;  // Wait until click handler exists
}, { timeout: 10000 });
```

### Step 2: Click the First Cell (Safe Area)
Click on the first `<td>` cell, which contains the name and is always part of the clickable row:

```typescript
const firstRow = page.locator('#sellersTable tbody tr').first();
await firstRow.locator('td').first().click();
```

### Step 3: Wait for Navigation
Use `waitForURL()` with a regex pattern to confirm navigation happened:

```typescript
await page.waitForURL(/seller-management\/sellers\/details\/\d+/, { timeout: 10000 });
```

## Files Modified

### Seller Management (3 tests)
- `tests/04-partner-management/seller-management.spec.ts`
  - Test Case 4: Test seller groups view
  - Test Case 5: Test seller group to store relationships (navigates to seller groups)
  - Test Case 6: Test seller user management

### Buyer Group Management (2 tests)
- `tests/04-partner-management/buyer-group-management.spec.ts`
  - Test Case 8: Test buyer store management
  - Test Case 9: Test buyer details view

### Industry Management (2 tests)
- `tests/04-partner-management/industry-management.spec.ts`
  - Test Case 7: Test industry details view
  - Test Case 9: Test industry edit workflow

### Seller Groups Management (1 test)
- `tests/04-partner-management/seller-groups-management.spec.ts`
  - Test Case 8: Test seller group details view

## Additional Fix: Logout Test

### Problem
Logout button is inside a dropdown menu (`.dropdown-menu`), not directly visible on page load.

### Solution
1. Open the user dropdown first by clicking `.dropdown-toggle`
2. Then look for logout link in `.dropdown-menu`

```typescript
// Open dropdown
await page.locator('.dropdown-toggle').last().click();
await page.waitForTimeout(500);

// Find logout in dropdown
const logoutLink = page.locator('.dropdown-menu a.dropdown-item:has-text("Log out")');
await expect(logoutLink).toBeVisible();
```

## Test Status
All 9 tests now use reliable direct navigation or proper dropdown handling:
- ✅ 3 Seller Management tests
- ✅ 2 Buyer Group Management tests  
- ✅ 2 Industry Management tests
- ✅ 1 Seller Groups Management test
- ✅ 1 Logout test

These tests should now pass consistently without timing issues.