doxa/doxa-notes/docs/plansCopilotTest.md

📋 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:

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)

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)

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