vue-markdown-render

Appearance

E2E Testing Report ​

中文版请查看 e2e-testing-report.zh-CN.md。

This document summarizes the end-to-end markdown parsing tests added to this repository.

Purpose ​

Provide a small, reproducible E2E test harness that validates the parser and renderer handle common markdown constructs and to serve as a base for future coverage expansion.

What was added ​

  • test/fixtures/ — directory with representative markdown fixtures:

    • headings.md
    • code-diff.md
    • table.md
    • admonition.md
    • math.md
    • footnotes.md
    • image-link.md
    • checkbox.md
    • mermaid.md

  • test/e2e.markdown.test.ts — a Vitest test that:

    • reads each fixture
    • parses it via parseMarkdownToStructure (using getMarkdown instance)
    • serializes a minimal stable structure and asserts a snapshot per fixture
    • includes a small renderMarkdown assertion for inline math/code block rendering

  • Snapshots — generated by Vitest (placed in the default snapshot location).

  • .github/workflows/ci.yml — GitHub Actions workflow that runs on push and pull_request to:

    • install dependencies
    • run pnpm test
    • run pnpm typecheck
    • run pnpm lint

How to run locally ​

Run tests (and update snapshots if you intentionally changed output):

bash
pnpm test -- -u

Run tests without updating snapshots:

bash
pnpm test

Typecheck and lint:

bash
pnpm typecheck
pnpm lint

Quality gates (local validation) ​

  • Tests: PASS (73 passed locally)
  • Typecheck: PASS
  • Lint: PASS

Recommendations / Next steps ​

  1. Convert snapshots to include more detailed fields in minimal serialization (for example, include children text snippets or node meta), to catch regressions in node payloads.
  2. Add fixtures for edge cases:
    • Unclosed fences
    • Complex nested lists with markup inside
    • Escaped bracket edge-cases
    • Streaming fence edgecases
  3. Add integration tests for rendering plugins that require DOM or workers (Mermaid, KaTeX worker, Monaco). Consider adding a browser-based test job (Playwright) for those.
  4. Configure CI to run snapshots or a visual regression step if the renderer's HTML output becomes more important.

If you want, I can:

  1. Expand snapshots to include richer metadata (children snippets, meta fields).
  2. Add the proposed edge-case fixtures and assertions.
  3. Draft a Playwright-based CI job for DOM-heavy plugins.

Let me know which option you’d prefer next。