Momento/memento-note/tests/favorites-section.spec.ts

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

test.describe('Favorites Section', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/')
    await page.waitForLoadState('networkidle')
  })

  test('should not show favorites section when no notes are pinned', async ({ page }) => {
    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 }) => {
    const existingNotes = page.locator('[data-testid="note-card"]')
    const noteCount = await existingNotes.count()

    if (noteCount === 0) {
      test.skip(true, 'No notes exist to test pinning')
      return
    }

    const firstNoteCard = existingNotes.first()
    await firstNoteCard.hover()

    const pinButton = firstNoteCard.locator('[data-testid="pin-button"]')
    await expect(pinButton).toBeVisible({ timeout: 5000 })
    await pinButton.click()

    await expect(page.locator('[data-testid="favorites-section"]')).toBeVisible({ timeout: 10000 })

    const sectionTitle = page.locator('[data-testid="favorites-section"] h2')
    await expect(sectionTitle).toContainText('Pinned')

    const pinnedNotes = page.locator('[data-testid="favorites-section"] [data-testid="note-card"]')
    await expect(pinnedNotes.first()).toBeVisible({ timeout: 5000 })
  })

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

    if (!isFavoritesVisible) {
      test.skip(true, 'No favorites exist to test unpinning')
      return
    }

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

    if (pinnedCount === 0) {
      test.skip(true, 'No pinned notes to unpin')
      return
    }

    const firstPinnedNote = pinnedNotes.first()
    await firstPinnedNote.hover()

    const pinButton = firstPinnedNote.locator('[data-testid="pin-button"]')
    await pinButton.click()

    await page.waitForTimeout(500)

    const updatedPinnedCount = await favoritesSection.locator('[data-testid="note-card"]').count().catch(() => 0)

    if (pinnedCount === 1) {
      await expect(favoritesSection).not.toBeVisible({ timeout: 10000 })
    } else {
      expect(updatedPinnedCount).toBe(pinnedCount - 1)
    }
  })

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

    if (noteCount < 2) {
      test.skip(true, 'Not enough notes to test multiple pins')
      return
    }

    for (let i = 0; i < 2; i++) {
      const noteCard = existingNotes.nth(i)
      await noteCard.hover()

      const pinButton = noteCard.locator('[data-testid="pin-button"]')
      await expect(pinButton).toBeVisible({ timeout: 5000 })
      await pinButton.click()

      await page.waitForTimeout(500)
    }

    const favoritesSection = page.locator('[data-testid="favorites-section"]')
    await expect(favoritesSection).toBeVisible({ timeout: 10000 })

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

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

    if (noteCount === 0) {
      test.skip(true, 'No notes exist to test ordering')
      return
    }

    const firstNoteCard = existingNotes.first()
    await firstNoteCard.hover()

    const pinButton = firstNoteCard.locator('[data-testid="pin-button"]')
    await expect(pinButton).toBeVisible({ timeout: 5000 })
    await pinButton.click()

    const favoritesSection = page.locator('[data-testid="favorites-section"]')
    const mainNotesGrid = page.locator('[data-testid="notes-grid"]')

    await expect(favoritesSection).toBeVisible({ timeout: 10000 })

    const hasUnpinnedNotes = await mainNotesGrid.isVisible().catch(() => false)
    if (hasUnpinnedNotes) {
      const favoritesY = await favoritesSection.boundingBox()
      const mainNotesY = await mainNotesGrid.boundingBox()

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

  test('should collapse and expand favorites section', async ({ page }) => {
    const favoritesSection = page.locator('[data-testid="favorites-section"]')
    const isFavoritesVisible = await favoritesSection.isVisible().catch(() => false)

    if (!isFavoritesVisible) {
      const existingNotes = page.locator('[data-testid="note-card"]')
      const noteCount = await existingNotes.count()

      if (noteCount === 0) {
        test.skip(true, 'No notes to pin for collapse test')
        return
      }

      const firstNoteCard = existingNotes.first()
      await firstNoteCard.hover()
      const pinButton = firstNoteCard.locator('[data-testid="pin-button"]')
      await pinButton.click()

      await expect(favoritesSection).toBeVisible({ timeout: 10000 })
    }

    const collapseButton = favoritesSection.locator('button').first()
    const pinnedNoteCards = favoritesSection.locator('[data-testid="note-card"]')

    await expect(pinnedNoteCards.first()).toBeVisible()

    await collapseButton.click()
    await expect(pinnedNoteCards.first()).not.toBeVisible()

    await collapseButton.click()
    await expect(pinnedNoteCards.first()).toBeVisible()
  })
})