# Dashboard Favorites Test Hints

## Test Structure

### 1. Basic Setup
```typescript
import { test, expect } from '@playwright/test';
import { LoginPage } from '../../../../pages/login.page';
import { DashboardMainPage } from '../../../../pages/dashboard-main.page';
import { WidgetsPage } from '../../../../pages/widgets.page';
import * as dotenv from 'dotenv';

dotenv.config();
test.setTimeout(10 * 60 * 1000);

test('@favourites REG-008: Add dashboard to favorites and verify', async ({ page }) => {
  const loginPage = new LoginPage(page);
  const dashboardPage = new DashboardMainPage(page);
  const widgetsPage = new WidgetsPage(page);
  
  const testEmail = process.env.TEST_EMAIL || 'cdp@hy.ly';
  const testPassword = process.env.TEST_PASSWORD || 'BMy2L1rRXZlkKoTU7';
});
```

### 2. Dashboard Preparation
```typescript
// Generate unique name for testing
const dashboardName = await dashboardPage.generateUniqueDashboardName('Favorites Test');

// Create dashboard if needed
await test.step('Create new dashboard', async () => {
  await dashboardPage.clickNewDashboard();
  await dashboardPage.enterDashboardName(dashboardName);
  // Add widgets if needed for complete testing
});
```

### 3. Favorites Management Flow

#### Adding to Favorites
```typescript
await test.step('Add dashboard to favorites', async () => {
  // Find and click favorite icon/button
  const favoriteButton = page.locator('[data-testid="favorite-button"]').first();
  await favoriteButton.click();
  
  // Verify favorite status
  const isFavorited = await dashboardPage.verifyDashboardIsFavorited(dashboardName);
  expect(isFavorited).toBeTruthy();
});
```

#### Verifying in Favorites List
```typescript
await test.step('Verify dashboard in favorites list', async () => {
  // Navigate to favorites section
  await dashboardPage.navigateToFavorites();
  
  // Check dashboard presence
  const dashboardInFavorites = await dashboardPage.isDashboardInFavorites(dashboardName);
  expect(dashboardInFavorites).toBeTruthy();
});
```

#### Removing from Favorites
```typescript
await test.step('Remove dashboard from favorites', async () => {
  // Toggle favorite status off
  await dashboardPage.toggleFavorite(dashboardName);
  
  // Verify removal
  const isFavorited = await dashboardPage.verifyDashboardIsFavorited(dashboardName);
  expect(isFavorited).toBeFalsy();
});
```

### 4. Common Wait Patterns
```typescript
// Initial dashboard load wait
await page.waitForTimeout(40000); // Required for stability

// Favorite action wait
await page.waitForTimeout(2000); // After clicking favorite

// Favorites list load
await page.waitForSelector('.favorites-list', { state: 'visible' });
```

### 5. Verification Methods
```typescript
// Check favorite icon state
const favoriteIcon = page.locator('[data-testid="favorite-icon"]');
const isActive = await favoriteIcon.getAttribute('data-active');
expect(isActive).toBe('true');

// Verify in favorites list
const favoritesList = page.locator('.favorites-list');
await expect(favoritesList).toContainText(dashboardName);

// Check favorites count
const favoritesCount = await dashboardPage.getFavoritesCount();
expect(favoritesCount).toBeGreaterThan(0);
```

### 6. Error Handling
```typescript
// Handle favorite action failures
try {
  await dashboardPage.toggleFavorite(dashboardName);
} catch (error) {
  console.error(`Failed to toggle favorite status: ${error}`);
  throw error;
}

// Check for error notifications
const errorNotification = page.locator('.error-notification');
const hasError = await errorNotification.isVisible();
if (hasError) {
  const errorText = await errorNotification.textContent();
  throw new Error(`Favorite action failed: ${errorText}`);
}
```

## Common Issues to Watch For

### 1. Timing Related
- Not waiting long enough after dashboard load
- Missing waits after favorite actions
- Race conditions in favorites list updates

### 2. State Verification
- Not checking initial favorite state
- Missing verification after toggle
- Not verifying in favorites list

### 3. UI Interaction
- Favorite button not visible/clickable
- Multiple matching elements
- Stale element references

### 4. Data Management
- Not cleaning up test dashboards
- Not handling existing favorites
- Missing unique dashboard names