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,135 @@
|
||||
# SEO a Playwright Testy - Audit a Plán Zlepšení
|
||||
|
||||
## Problémy Identifikované
|
||||
|
||||
### 🔴 SEO - Web (doxa-notes.org)
|
||||
|
||||
#### Kritické problémy:
|
||||
1. **Chybějící Open Graph obrázek v index.html**
|
||||
- `og:image` není specifikován, pouze Twitter image
|
||||
- Bez OG image se socmédia nezobrazí korektně
|
||||
|
||||
2. **Chybějící meta tags pro mobily**
|
||||
- Chybí `viewport` meta tag (nemá měřítko a zoomu)
|
||||
- Dopad: špatné zobrazení na mobilech, horší SEO ranking
|
||||
|
||||
3. **Nejednotný formát title tagů**
|
||||
- index.html: "DOXA Notes — Local-First poznámky..."
|
||||
- about.html: "O projektu — Doxa" (bez "DOXA Notes")
|
||||
- privacy.html: "Ochrana soukromí — DOXA Notes"
|
||||
- Nejednotnost není ideální, měly by být konsistentní
|
||||
|
||||
4. **Chybí meta description na web_app/index.html**
|
||||
- Web app má `robots: noindex, nofollow` (správně)
|
||||
- Ale chybí base meta description, jen title
|
||||
|
||||
5. **Canonical URL - web_app/index.html**
|
||||
- Chybí canonical tag na app stránce (jen na webu)
|
||||
|
||||
6. **Nejednotné sociální meta tags**
|
||||
- O projektu a privacy nemají OG image, Twitter image
|
||||
- Neúplné Twitter card metadata
|
||||
|
||||
7. **Missing lang attribute na web_app**
|
||||
- web_app/index.html má `lang="cs"`, ale chybí OG locale
|
||||
|
||||
8. **robots.txt nedostatky**
|
||||
- Sitemap odkazuje jen na wiki, ne na hlavní web
|
||||
- Chybí explicit allow/disallow pro jednotlivé web stránky
|
||||
|
||||
### 🔴 SEO - Web App
|
||||
|
||||
1. **robots.txt správně blokuje web_app (noindex)**
|
||||
- Správně: `Disallow: /web_app/`
|
||||
|
||||
2. **Chybějící Open Graph metadata**
|
||||
- Není `og:*` tags vůbec
|
||||
- Twitter card není definován
|
||||
|
||||
3. **Nedostatečný JSON-LD schema**
|
||||
- Na web_app není vůbec strukturovaná data
|
||||
- Jen na index.html SoftwareApplication schema
|
||||
|
||||
### 🔴 Playwright Testy - Problémy
|
||||
|
||||
1. **Chybí test pro Web App SEO**
|
||||
- noteApp.test.ts nemá žádné SEO testy
|
||||
- Měl by testovat noindex/nofollow, title, meta description
|
||||
|
||||
2. **Chybí testy pro OG tagy**
|
||||
- HomePage.ts nemá metodu `getOGImage()`, `getOGTitle()`
|
||||
- Chybí testy pro Twitter card
|
||||
|
||||
3. **Nevyhovující test abecedy menu**
|
||||
- textHelpers nemá "Návod" v menu (ale existuje na webu)
|
||||
- Neúplný seznam očekávaných textů
|
||||
|
||||
4. **Chybí accessibility testy (a11y)**
|
||||
- Žádné testy pro ARIA labels, heading struktura
|
||||
- Nejednotné heading struktura (h1, h2, h3)
|
||||
|
||||
5. **Chybí performance/lighthouse testy**
|
||||
- Žádné testy pro load time, Core Web Vitals
|
||||
- Žádné testy pro lazy loading obrázků
|
||||
|
||||
6. **Playwright config - omezený scope**
|
||||
- Jen chromium, chybí firefox, webkit
|
||||
- Reporter je jen HTML, žádné JSON/JUnit
|
||||
|
||||
7. **Chybí testy pro 404/error stránky**
|
||||
- Žádné testy pro chybové strany
|
||||
- Žádné testy pro chybné CSS/JS asety
|
||||
|
||||
8. **AppPage POM - nedostatečné selektory**
|
||||
- Závisí na ID selektorech, měly by být odolnější
|
||||
- Chybí error handling v navigate()
|
||||
|
||||
9. **Chybí data-testid atributy**
|
||||
- HTML nemá `data-testid` pro stabilní test selektory
|
||||
- Zranitelné na změny CSS/stylů
|
||||
|
||||
10. **Testy neuklízí state**
|
||||
- Testy nevymazávají localStorage mezi spuštěním
|
||||
- Chybí cleanup po testech
|
||||
|
||||
## Pracovní Plán
|
||||
|
||||
### Fáze 1: SEO Optimalizace (Primární)
|
||||
- [ ] Přidat meta viewport tag do všech HTML
|
||||
- [ ] Přidat Open Graph obrázek do všech stran
|
||||
- [ ] Unifikovat title tagy podle formátu
|
||||
- [ ] Doplnit meta descriptions na chybějící stránky
|
||||
- [ ] Přidat OG locale pro Czech
|
||||
- [ ] Doplnit Twitter Card tagy na všechny stránky
|
||||
- [ ] Vytvořit sitemap.xml pro web (ne jen wiki)
|
||||
- [ ] Zlepšit robots.txt
|
||||
|
||||
### Fáze 2: Web App Metadata
|
||||
- [ ] Přidat OG tagy na web_app (s noindex varováním)
|
||||
- [ ] Přidat JSON-LD schema pro WebApplication
|
||||
- [ ] Ověřit noindex direktiva na web_app
|
||||
|
||||
### Fáze 3: Playwright Testy - SEO
|
||||
- [ ] Přidat testy pro OG metadata
|
||||
- [ ] Přidat testy pro Twitter Card
|
||||
- [ ] Přidat testy pro meta descriptions
|
||||
- [ ] Vytvořit SEO utility metody v HomePage.ts
|
||||
- [ ] Vytvořit Web App SEO testy
|
||||
|
||||
### Fáze 4: Playwright Testy - Rozšíření
|
||||
- [ ] Přidat a11y testy (ARIA, heading struktura)
|
||||
- [ ] Přidat testy pro mobile viewport
|
||||
- [ ] Přidat Firefox a WebKit do playwright.config
|
||||
- [ ] Přidat data-testid atributy do HTML
|
||||
- [ ] Přidat AppPage testy pro error states
|
||||
- [ ] Přidat cleanup/setup hooks
|
||||
|
||||
### Fáze 5: Další Vylepšení
|
||||
- [ ] Přidat lighthouse integration testy
|
||||
- [ ] Přidat JSON reporter k playwright
|
||||
- [ ] Přidat CI/CD integration
|
||||
|
||||
## Poznámky
|
||||
- Zaměření primárně na SEO (dle požadavku)
|
||||
- Web vs Web App: Web je SEO friendly, App je noindex (správně)
|
||||
- Playwright testy potřebují kompletní refresh
|
||||
@@ -0,0 +1,19 @@
|
||||
# Testovací plán projektu DOXA
|
||||
|
||||
## 1. Web (Landing page)
|
||||
- [x] Ověření viditelnosti všech položek menu.
|
||||
- [x] Navigace na vnitřní stránky (O projektu, Ochrana soukromí).
|
||||
- [x] Kontrola funkčnosti externího odkazu na aplikaci.
|
||||
- [x] **SEO testy:** Validace `title`, `meta description` a `canonical link` na všech stránkách.
|
||||
- [ ] *Doporučení:* Přidat test na responsivitu (zobrazení na mobilu/tabletu).
|
||||
|
||||
## 2. Aplikace (Editor poznámek)
|
||||
- [x] Vytvoření, editace a uložení poznámky včetně tagů.
|
||||
- [x] Ověření zobrazení `Slash Commands` menu po napsání "/".
|
||||
- [ ] **Validace vstupů:** Test uložení prázdné poznámky.
|
||||
- [ ] **Správa tagů:** Test smazání tagu z existující poznámky.
|
||||
- [ ] **Persistence:** (Pokud lze) Ověřit, že po znovunačtení stránky poznámka zůstala.
|
||||
|
||||
## 3. Infrastruktura a kvalita
|
||||
- [ ] Implementovat testy na `Accessibility` (přístupnost) pomocí `@axe-core/playwright`.
|
||||
- [ ] Přidat vizuální regresní testy (snapshot testing) pro editor.
|
||||
@@ -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
|
||||
@@ -0,0 +1,70 @@
|
||||
1. Upravit `plawright.config.ts` (doxa)
|
||||
2. Do `package.json` přidat script BASE_URL (doxa)
|
||||
3. Upravit HomePage.ts a další dle (doxa)
|
||||
|
||||
|
||||
---
|
||||
## Spuštění testů
|
||||
|
||||
- local `npx playwright test --ui` nebo `npx playwright test`
|
||||
- prod `test:prod` nebo dle nastavení script v `package.json`
|
||||
|
||||
---
|
||||
|
||||
script package.json:
|
||||
|
||||
```
|
||||
"scripts": {
|
||||
"test": "playwright test",
|
||||
"test:prod": "BASE_URL=https://doxa-notes.org playwright test homePage.test.ts",
|
||||
"test:prodapp": "BASE_URL=https://app.doxa-notes.org playwright test noteApp.test.ts "
|
||||
}
|
||||
```
|
||||
playwright.config.ts:
|
||||
|
||||
```
|
||||
import { defineConfig, devices } from '@playwright/test';
|
||||
|
||||
export default defineConfig({
|
||||
testDir: './tests',
|
||||
fullyParallel: true,
|
||||
reporter: 'html',
|
||||
use: {
|
||||
// Pokud v terminálu nastavíš BASE_URL, použije ho. Jinak použije localhost.
|
||||
baseURL: process.env.BASE_URL || 'http://localhost:8080',
|
||||
trace: 'on-first-retry',
|
||||
},
|
||||
webServer: {
|
||||
// WebServer se spustí pouze tehdy, pokud NENÍ nastavena jiná BASE_URL
|
||||
// (nechceme spouštět lokální server, když testujeme produkci)
|
||||
command: process.env.BASE_URL ? undefined : 'npx http-server ../../ -p 8080',
|
||||
url: process.env.BASE_URL || 'http://localhost:8080',
|
||||
reuseExistingServer: !process.env.CI,
|
||||
},
|
||||
projects: [
|
||||
{
|
||||
name: 'chromium',
|
||||
use: { ...devices['Desktop Chrome'] },
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
HomePage.test.ts:
|
||||
|
||||
```
|
||||
readonly page: Page;
|
||||
|
||||
constructor(page: Page) {
|
||||
this.page = page;
|
||||
}
|
||||
|
||||
// Přidej metodu pro navigaci na konkrétní soubor
|
||||
async navigate(file: string = 'index.html') {
|
||||
// Pokud jsme na lokálu, přidáme složku /web/
|
||||
// Pokud jsme na produkci, předpokládáme root /
|
||||
const prefix = process.env.BASE_URL?.includes('doxa-notes.org') ? '' : 'web/';
|
||||
await this.page.goto(`${prefix}${file}`);
|
||||
}
|
||||
```
|
||||
|
||||
Reference in new issue
Block a user