# 📋 Plán rozšíření automatizovaných testů pro DOXA Notes

## 1. Analýza současného stavu vs. Cíl
* **Současný stav:** Testuje se pouze viditelnost menu a navigace na webu `https://doxa-notes.org`. Core aplikace (`https://app.doxa-notes.org` / `web_app`) nemá žádné testy.
* **Cíl:** Vytvořit robustní e2e testy, které pokryjí kompletní životní cyklus poznámky (CRUD), tagy, drag-and-drop, exporty, motivy vzhledu a rychlé příkazy (Slash Commands) na lokálně běžícím serveru.

---

## 2. Navržené testovací scénáře (Test Suite)

### Oblast A: Jádro aplikace (složka `test/playwright/tests/app/`)
Tato část bude testovat funkčnost v `web_app/index.html`.

1. **Správa poznámek (CRUD)**
   * **Vytvoření:** Kliknutí na `➕ Nová poznámka`, zadání názvu do promptu, ověření, že se přidala do seznamu a otevřela v editoru.
   * **Editace:** Zápis textu do editoru, uložení pomocí tlačítka `Uložit nyní` a ověření stavu „Uloženo“.
   * **Smazání:** Kliknutí na 🗑, potvrzení dialogu (`page.on('dialog')`) a ověření, že poznámka zmizela.
   * **Pokročilá editace:** Otevření modálu přes ikonu ✎, změna textu, uložení a ověření.

2. **Tagování a vyhledávání**
   * **Přidání tagů:** Vyplnění pole `#noteTags` a ověření, že se tagy uložily k poznámce v seznamu.
   * **Filtrování:** Zadání tagu do vyhledávacího pole a ověření, že se zobrazí pouze poznámky s tímto tagem.

3. **Markdown a Náhled (Live Preview)**
   * **Formátování:** Vložení formátování přes tlačítka v toolbaru (Bold, Italic, Nadpisy) a ověření, zda se v textu objevily správné Markdown znaky (`**`, `*`, `#`).
   * **Náhled:** Přepnutí do režimu „Náhled“ a ověření, že se text správně vyrenderoval do HTML (např. `<strong>` pro tučný text).

4. **Přesouvání poznámek (Reordering)**
   * **Šipky:** Kliknutí na šipku dolů/nahoru u poznámky a ověření, zda se změnilo její pořadí v seznamu.
   * **Drag & Drop:** Simulace přetažení jedné poznámky na druhou a ověření nového pořadí.

5. **Import & Export**
   * **Export do Markdownu:** Kliknutí na `Exportovat do Markdown`, zachycení staženého souboru (`page.waitForEvent('download')`) a ověření jeho obsahu.
   * **Export JSON:** Ověření stažení souboru `doxa.json`.

6. **Slash Commands (Rychlá volba `/`)**
   * **Zobrazení menu:** Napsání znaku `/` do editoru a ověření zobrazení slash menu.
   * **Filtrování:** Napsání `/da` a ověření, že v menu zůstala pouze možnost `/date`.
   * **Vložení:** Výběr příkazu (Enter/klik) a ověření, že se na pozici kurzoru vložilo např. dnešní datum.

---

## 3. Architektura testů (Page Object Model)

Pro udržení čistoty kódu vytvoříme nový Page Object `AppPage.ts` a přesuneme spouštění aplikací na lokální server v configu.

### Krok 1: Úprava `playwright.config.ts`
Chceme, aby testy běžely nezávisle na produkční síti. Nakonfigurujeme lokální webserver:

```typescript
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:8080', // Lokální adresa pro testy
    trace: 'on-first-retry',
  },
  webServer: {
    command: 'npx http-server ../../web_app -p 8080', // Spustí web_app lokálně
    url: 'http://localhost:8080',
    reuseExistingServer: !process.env.CI,
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
});
```

### Krok 2: Vytvoření Page Object Modelu (`tests/app/pages/AppPage.ts`)

```typescript
import { Page, Locator, expect } from '@playwright/test';

export class AppPage {
  readonly page: Page;
  readonly newNoteButton: Locator;
  readonly noteTitleInput: Locator;
  readonly noteTagsInput: Locator;
  readonly noteEditor: Locator;
  readonly saveButton: Locator;
  readonly notesContainer: Locator;
  readonly searchTagInput: Locator;
  readonly slashMenu: Locator;

  constructor(page: Page) {
    this.page = page;
    this.newNoteButton = page.locator('#newNoteButton');
    this.noteTitleInput = page.locator('#noteTitle');
    this.noteTagsInput = page.locator('#noteTags');
    this.noteEditor = page.locator('#noteInput');
    this.saveButton = page.getByRole('button', { name: 'Uložit nyní' });
    this.notesContainer = page.locator('#notesContainer');
    this.searchTagInput = page.locator('#searchTagInput');
    this.slashMenu = page.locator('#slashCommandMenu');
  }

  async navigate() {
    await this.page.goto('/');
  }

  async createNewNote(name: string) {
    // Zachytíme nativní JS prompt
    this.page.once('dialog', async dialog => {
      await dialog.accept(name);
    });
    await this.newNoteButton.click();
  }

  async fillNote(content: string, tags?: string) {
    await this.noteEditor.fill(content);
    if (tags) {
      await this.noteTagsInput.fill(tags);
    }
    await this.saveButton.click();
  }

  async getNoteList() {
    return this.notesContainer.locator('.note-item');
  }
}
```

### Krok 3: Vzorový test (`tests/app/noteApp.test.ts`)

```typescript
import { test, expect } from '@playwright/test';
import { AppPage } from './pages/AppPage';

test.describe('DOXA Web App - Core Functionality', () => {
  let appPage: AppPage;

  test.beforeEach(async ({ page }) => {
    appPage = new AppPage(page);
    await appPage.navigate();
  });

  test('Vytvoření, editace a ověření poznámky s tagy', async () => {
    // 1. Vytvoření nové poznámky
    const noteName = 'Moje Stoická Poznámka';
    await appPage.createNewNote(noteName);

    // Ověříme, že se poznámka objevila v seznamu jako aktivní
    const notes = await appPage.getNoteList();
    await expect(notes.first()).toContainText(noteName);
    await expect(notes.first()).toHaveClass(/active/);

    // 2. Editace poznámky a tagů
    await appPage.fillNote('Dnes odepřena digitální iluze.', 'filozofie, stoicismus');

    // 3. Ověření uložení a zobrazení tagu
    await expect(notes.first().locator('.note-preview-tags')).toContainText('🏷️ filozofie, stoicismus');
  });

  test('Slash Commands menu se zobrazí po napsání /', async () => {
    const noteName = 'Test slash příkazů';
    await appPage.createNewNote(noteName);

    // Klikneme do editoru a napíšeme "/"
    await appPage.noteEditor.focus();
    await appPage.page.keyboard.type('/');

    // Ověříme, že se menu zobrazilo
    await expect(appPage.slashMenu).toBeVisible();
    await expect(appPage.slashMenu).toContainText('Vložit dnešní datum');
  });
});
```

---

## 4. Postup implementace (Roadmap)

1. **Fáze 1: Příprava prostředí**
   * Nainstalovat `http-server` jako dev dependency do rootu nebo využít playwright webServer (`npm install --save-dev http-server`).
   * Aktualizovat `playwright.config.ts`.
2. **Fáze 2: Základní POM a CRUD**
   * Vytvořit soubor `AppPage.ts`.
   * Pokrýt základní chování (vytvoření, uložení, smazání poznámky).
3. **Fáze 3: Pokročilé interakce**
   * Přidat testy na Drag & Drop řazení poznámek.
   * Přidat testy na klávesové zkratky a Slash Command menu.
4. **Fáze 4: Výstupy a Integrace (CI)**
   * Pokrýt stahování a nahrávání JSON záloh.
   * Zapojit testy do GitHub Actions/Codeberg CI tak, aby automaticky běžely při každém Pull Requestu.

Pokud se ti tento plán líbí, mohu rovnou začít s přípravou konfigurace a implementací prvního testovacího balíčku pro samotnou aplikaci! Dej mi vědět, jak chceš pokračovat.

plansCopilot