Keep/keep-notes/tests/favorites-section.spec.ts

import { test, expect } from '@playwright/test'

test.describe('Favorites Section', () => {
  test.beforeEach(async ({ page }) => {
    // Navigate to home page
    await page.goto('/')
    // Wait for page to load
    await page.waitForLoadState('networkidle')
  })

  test('should not show favorites section when no notes are pinned', async ({ page }) => {
    // Favorites section should not be present
    const favoritesSection = page.locator('[data-testid="favorites-section"]')
    await expect(favoritesSection).not.toBeVisible()
  })

  test('should pin a note and show it in favorites section', async ({ page }) => {
    // Check if there are any existing notes
    const existingNotes = page.locator('[data-testid="note-card"]')
    const noteCount = await existingNotes.count()

    if (noteCount === 0) {
      // Skip test if no notes exist
      test.skip()
      return
    }

    // Pin the first note
    const firstNoteCard = existingNotes.first()
    await firstNoteCard.hover()

    // Find and click the pin button (it's near the top right)
    const pinButton = firstNoteCard.locator('button').filter({ hasText: '' }).nth(0)
    await pinButton.click()

    // Wait for page refresh after pinning
    await page.waitForTimeout(2000)

    // Favorites section should be visible
    const favoritesSection = page.locator('[data-testid="favorites-section"]')
    await expect(favoritesSection).toBeVisible()

    // Should have section title
    const sectionTitle = favoritesSection.locator('h2')
    await expect(sectionTitle).toContainText('Pinned')

    // Should have at least 1 pinned note
    const pinnedNotes = favoritesSection.locator('[data-testid="note-card"]')
    await expect(pinnedNotes).toHaveCount(1)
  })

  test('should unpin a note and remove it from favorites', async ({ page }) => {
    // Check if there are any pinned notes already
    const favoritesSection = page.locator('[data-testid="favorites-section"]')
    const isFavoritesVisible = await favoritesSection.isVisible().catch(() => false)

    if (!isFavoritesVisible) {
      // Skip test if no favorites exist
      test.skip()
      return
    }

    const pinnedNotes = favoritesSection.locator('[data-testid="note-card"]')
    const pinnedCount = await pinnedNotes.count()

    if (pinnedCount === 0) {
      // Skip test if no pinned notes
      test.skip()
      return
    }

    // Unpin the first pinned note
    const firstPinnedNote = pinnedNotes.first()
    await firstPinnedNote.hover()

    const pinButton = firstPinnedNote.locator('button').filter({ hasText: '' }).nth(0)
    await pinButton.click()

    // Wait for page refresh after unpinning
    await page.waitForTimeout(2000)

    // After unpinning the last pinned note, section should be hidden
    const updatedPinnedCount = await favoritesSection.locator('[data-testid="note-card"]').count().catch(() => 0)
    const isStillVisible = await favoritesSection.isVisible().catch(() => false)

    // If there were only 1 pinned note, section should be hidden
    // Otherwise, count should be reduced
    if (pinnedCount === 1) {
      await expect(isStillVisible).toBe(false)
    } else {
      await expect(updatedPinnedCount).toBe(pinnedCount - 1)
    }
  })

  test('should show multiple pinned notes in favorites section', async ({ page }) => {
    // Check if there are existing notes
    const existingNotes = page.locator('[data-testid="note-card"]')
    const noteCount = await existingNotes.count()

    if (noteCount < 2) {
      // Skip test if not enough notes exist
      test.skip()
      return
    }

    // Pin first two notes
    for (let i = 0; i < 2; i++) {
      const noteCard = existingNotes.nth(i)
      await noteCard.hover()

      const pinButton = noteCard.locator('button').filter({ hasText: '' }).nth(0)
      await pinButton.click()

      // Wait for page refresh
      await page.waitForTimeout(2000)

      // Re-query notes after refresh
      const refreshedNotes = page.locator('[data-testid="note-card"]')
      await refreshedNotes.count()
    }

    // Favorites section should be visible
    const favoritesSection = page.locator('[data-testid="favorites-section"]')
    await expect(favoritesSection).toBeVisible()

    // Should have 2 pinned notes
    const pinnedNotes = favoritesSection.locator('[data-testid="note-card"]')
    await expect(pinnedNotes).toHaveCount(2)
  })

  test('should show favorites section above main notes', async ({ page }) => {
    // Check if there are existing notes
    const existingNotes = page.locator('[data-testid="note-card"]')
    const noteCount = await existingNotes.count()

    if (noteCount === 0) {
      // Skip test if no notes exist
      test.skip()
      return
    }

    // Pin a note
    const firstNoteCard = existingNotes.first()
    await firstNoteCard.hover()

    const pinButton = firstNoteCard.locator('button').filter({ hasText: '' }).nth(0)
    await pinButton.click()

    // Wait for page refresh
    await page.waitForTimeout(2000)

    // Both sections should be visible
    const favoritesSection = page.locator('[data-testid="favorites-section"]')
    const mainNotesGrid = page.locator('[data-testid="notes-grid"]')

    await expect(favoritesSection).toBeVisible()

    // Main notes grid might be visible only if there are unpinned notes
    const hasUnpinnedNotes = await mainNotesGrid.isVisible().catch(() => false)
    if (hasUnpinnedNotes) {
      // Get Y positions to verify favorites is above
      const favoritesY = await favoritesSection.boundingBox()
      const mainNotesY = await mainNotesGrid.boundingBox()

      if (favoritesY && mainNotesY) {
        expect(favoritesY.y).toBeLessThan(mainNotesY.y)
      }
    }
  })
})