davide
91181f2170
tests/{unit,integration,e2e}/, at the repo root (not under frontend/,
since e2e exercises the frontend and PocketBase together) — all
against real code rather than mocks:
- unit/: Vitest (nuxt environment) — pure functions in server/utils
and shared/utils, plus components/composables via
@nuxt/test-utils/runtime's mountSuspended.
- integration/: Vitest (node environment) — @nuxt/test-utils/e2e's
setup() builds and runs the real Nitro server against a real
ephemeral PocketBase instance, exercising the actual /content/* and
/admin routes end to end.
- e2e/: Playwright, a real browser against the built app and another
ephemeral PocketBase, covering the user-facing flows (home, blog
archive, article detail incl. JSON-LD, category filter, 404s, the
/admin redirect).
The Vitest/Playwright tooling (and node_modules) stays in frontend/,
the repo's only npm project; its configs just point at ../tests/.
Playwright resolves packages from the node_modules nearest each spec
file, so `npm run test:e2e` first symlinks tests/node_modules to
frontend/node_modules (pretest:e2e, idempotent, gitignored).
tests/support/pocketbase.ts is the shared piece behind integration
and e2e: it downloads the same pinned PocketBase binary
pocketbase/Dockerfile uses, starts it against the real
pocketbase/pb_migrations/ (not a copy), and seeds it from
tests/support/fixtures.ts — so these tests run against the exact
schema and API rules that ship to production, catching the class of
bug that only shows up when PocketBase actually enforces them (e.g. a
wrong filter/fields query string silently returning nothing, or too
much).
CLAUDE.md and docs/frontend.md document the new npm scripts and the
single-test commands for each layer.
46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
import { mountSuspended } from '@nuxt/test-utils/runtime'
|
|
import ArticleCard from '~/components/ArticleCard.vue'
|
|
import type { ArticleSummary } from '#shared/types/blog'
|
|
|
|
const baseArticle: ArticleSummary = {
|
|
title: 'Titolo di prova',
|
|
slug: 'titolo-di-prova',
|
|
publishedAt: '2025-01-15T10:00:00.000Z',
|
|
cover: null,
|
|
category: { name: 'Economia', slug: 'economia' },
|
|
}
|
|
|
|
describe('ArticleCard', () => {
|
|
it('renders title, category and date, with no cover link when cover is null', async () => {
|
|
const wrapper = await mountSuspended(ArticleCard, { props: { article: baseArticle } })
|
|
expect(wrapper.text()).toContain('Titolo di prova')
|
|
expect(wrapper.text()).toContain('Economia')
|
|
expect(wrapper.find('.cover-link').exists()).toBe(false)
|
|
})
|
|
|
|
it('renders the cover image with alt text and no width/height attributes', async () => {
|
|
const article: ArticleSummary = {
|
|
...baseArticle,
|
|
cover: { url: '/api/files/articles/abc/cover.jpg', alt: 'Testo alternativo' },
|
|
}
|
|
const wrapper = await mountSuspended(ArticleCard, { props: { article } })
|
|
const img = wrapper.find('img.cover')
|
|
|
|
expect(img.exists()).toBe(true)
|
|
expect(img.attributes('alt')).toBe('Testo alternativo')
|
|
expect(img.attributes('src')).toContain('/api/files/articles/abc/cover.jpg')
|
|
expect(img.attributes('width')).toBeUndefined()
|
|
expect(img.attributes('height')).toBeUndefined()
|
|
})
|
|
|
|
it('falls back to an empty alt when the cover has none', async () => {
|
|
const article: ArticleSummary = {
|
|
...baseArticle,
|
|
cover: { url: '/api/files/articles/abc/cover.jpg', alt: null },
|
|
}
|
|
const wrapper = await mountSuspended(ArticleCard, { props: { article } })
|
|
expect(wrapper.find('img.cover').attributes('alt')).toBe('')
|
|
})
|
|
})
|