Skip to content

Add CI verification build and component unit tests#48

Draft
Copilot wants to merge 2 commits into
masterfrom
copilot/add-ci-verification-build
Draft

Add CI verification build and component unit tests#48
Copilot wants to merge 2 commits into
masterfrom
copilot/add-ci-verification-build

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented May 22, 2026

Summary

Adds a CI pipeline and a full suite of Vitest unit tests that verify props and rendering for all Astro components under /src.

Changes

CI workflow (.github/workflows/ci.yml)

Two parallel jobs on every push/PR to main:

  • test – installs root dependencies and runs npm test (Vitest)
  • build – installs root + playground dependencies, type-checks the playground (astro check), then performs a full static build (astro build) that renders every component page

Test infrastructure

  • vitest.config.ts – configures Vitest using getViteConfig from astro/config so .astro files are processed correctly; includes an inline Vite plugin that stubs virtual:docs-template/site-meta and virtual:docs-template/nav-html (normally provided by siteMetaIntegration)
  • tests/setup.ts – shared MOCK_PLATFORM / MOCK_ENV fixtures passed via AstroContainer locals to components that read Astro.locals.platformContext
  • package.json – added vitest devDependency and test / test:watch scripts

Component tests (tests/components/ — 112 tests, 21 files)

File What is tested
DocsAside type variants, custom title, icon suppression
DocsToc empty/non-empty headings, labels, anchor links
DocsTree variant, leaf/group rendering, aria-current, aria-label
DocsTreeItem leaf/group output, depth attr, aria-current, data-* passthrough
DocsBreadcrumb site title, slug lookup, pageTitle fallback, accessibility
DocsSidebar items, active state, filter show/hide
DocsSubHeader theme toggle, package/version selectors, sidebar toggle
ApiLink URL generation, platform prefix, member anchor, sass kind
ApiRef list rendering, prefix toggle, enum/class URL segments
PlatformBlock match/no-match, comma-separated platform list
Sample demosBaseUrl, dvDemosBaseUrl, iframeOnly, height, title
MobileSidebarToggle label prop, aria attributes
MobileTocToggle empty headings guard, label, anchor links
Search trigger button, dialog, input, keyboard hint
SearchAdvanced placeholder, tabs serialisation, showScope, dialog
LicenseIndicator premium/opensource badges, icon, no-render guard
GlobalNavBar container rendered with transition-persist
GlobalFooter footer container rendered
SidebarFilterInput input id, aria attrs, clear button, status paragraph
SidebarLabel leaf/group label, child count, badges, premium icon
ThemingWidget hidden when themeApiUrl is empty

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds automated CI verification and a comprehensive Vitest-based unit-test suite to validate rendering/props behavior for the Astro component library, ensuring regressions are caught on PRs and pushes to main.

Changes:

  • Added a GitHub Actions CI workflow with parallel test (Vitest) and build (playground type-check + static build) jobs.
  • Introduced Vitest configuration for .astro support, including virtual module stubs for docs-template integrations.
  • Added shared test fixtures plus a full set of component render/props unit tests; updated root scripts/deps to run them.

Reviewed changes

Copilot reviewed 25 out of 26 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
.github/workflows/ci.yml Adds CI jobs for unit tests and a full playground check/build.
package.json Adds vitest + test/test:watch scripts.
package-lock.json Locks vitest and its dependency graph.
vitest.config.ts Configures Vitest via Astro’s Vite config and stubs required virtual modules.
tests/setup.ts Adds shared mock fixtures (platform/env) for component tests.
tests/components/ApiLink.test.ts Verifies ApiLink URL generation, prefixing, and anchors.
tests/components/ApiRef.test.ts Verifies ApiRef list rendering and URL segments.
tests/components/DocsAside.test.ts Verifies aside variants, labels, and icon behavior.
tests/components/DocsBreadcrumb.test.ts Verifies breadcrumb rendering and accessibility attributes.
tests/components/DocsSidebar.test.ts Verifies sidebar rendering, active state, and filter visibility.
tests/components/DocsSubHeader.test.ts Verifies subheader sections (theme toggle/selectors/sidebar toggle).
tests/components/DocsToc.test.ts Verifies TOC empty guard, labels, and anchors.
tests/components/DocsTree.test.ts Verifies tree variants, active state, and aria-label.
tests/components/DocsTreeItem.test.ts Verifies leaf/group rendering and data/aria attributes.
tests/components/GlobalFooter.test.ts Verifies footer container rendering.
tests/components/GlobalNavBar.test.ts Verifies nav container rendering.
tests/components/LicenseIndicator.test.ts Verifies license badge rendering/guards.
tests/components/MobileSidebarToggle.test.ts Verifies toggle label + aria attributes.
tests/components/MobileTocToggle.test.ts Verifies headings guard, labels, anchors, and aria-expanded.
tests/components/PlatformBlock.test.ts Verifies conditional slot rendering by platform.
tests/components/Sample.test.ts Verifies sample widget iframe URL derivation and props.
tests/components/Search.test.ts Verifies search trigger/dialog/input markup.
tests/components/SearchAdvanced.test.ts Verifies advanced search element attributes + tab serialization.
tests/components/SidebarFilterInput.test.ts Verifies filter input accessibility/clear/status elements.
tests/components/SidebarLabel.test.ts Verifies label rendering, child count, badges, and premium icon.
tests/components/ThemingWidget.test.ts Verifies widget no-render guard when themeApiUrl is empty.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +1 to +11
import { describe, it, expect } from 'vitest';
import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import GlobalNavBar from '../../src/components/GlobalNavBar/GlobalNavBar.astro';

describe('GlobalNavBar', () => {
it('renders the nav bar container element', async () => {
const container = await AstroContainer.create();
// The component fetches remote nav HTML; it renders an empty div when offline.
const html = await container.renderToString(GlobalNavBar, {
props: { lang: 'en' },
});
Comment on lines +1 to +11
import { describe, it, expect } from 'vitest';
import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import GlobalFooter from '../../src/components/GlobalFooter/GlobalFooter.astro';

describe('GlobalFooter', () => {
it('renders the footer container element', async () => {
const container = await AstroContainer.create();
// The component fetches remote footer HTML; it renders an empty div when offline.
const html = await container.renderToString(GlobalFooter, {
props: { lang: 'en' },
});
Comment thread tests/setup.ts
Comment on lines +3 to +6
/**
* Shared mock `platformContext` injected via `AstroContainer` locals
* for every component that reads `Astro.locals.platformContext`.
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants