mirror of
https://codeberg.org/Kankys/doxa.git
synced 2026-11-11 06:44:36 +01:00
new-doxa-monorepo
This commit is contained in:
kankys committed
1 parent
b4401527a3
commit
5eacbb0182
162 files changed
+21820
-2
No files matched your search
@@ -0,0 +1,194 @@
|
||||
# 📋 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
|
||||
Reference in new issue
Block a user