mirror of
https://codeberg.org/Kankys/doxa.git
synced 2026-11-11 14:44:36 +01:00
194 lines
7.5 KiB
Markdown
194 lines
7.5 KiB
Markdown
# 📋 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 |