@testspectra/cli 1.1.8-rc.2 → 1.1.8-rc.20

package/templates/react-component/.cursorrules

@@ -1,17 +1,17 @@
-# TestSpectra AI Instructions for Cursor
-
-You are developing automated tests and React components with the TestSpectra testing framework.
-
-## Key Rules & Conventions
-1. **Zero-Import Standard**: Never add manual `import` statements for Page/Component Objects (`ButtonComponent`, `BadgeComponent`, `InputComponent`), Steps (`Step.*`), Fixtures (`Fixture.*`), or Actions (`Spectra.*`). All typings are provided globally and ambiently via `.testspectra/types/`.
-2. **Component Testing Pattern**: Mount React components using `await Spectra.mount(<Component />)` (real JSX and static component imports are allowed in `*.test.tsx` files, unlike zero-import `*.web.test.ts` E2E specs), then inspect and interact using `Spectra.get(...)` / `Spectra.getAll(...)` or Page/Component Objects. Each `Spectra.mount()` call replaces the previous mount automatically — no cleanup command needed. Run via `spectra test` (a separate suite from E2E's `spectra run`).
-3. **Platform Separation**:
-   - `web.test.ts` / `web.test.tsx` / `web.ts`: Web / Browser component implementations.
-   - `common.test.ts` / `common.ts`: Cross-platform shared implementations.
-4. **CamelCase Naming Convention**:
-   - Component Objects (`page-objects/ButtonComponent/`, `page-objects/BadgeComponent/`)
-   - Reusable Actions (`support/actions/fillInputField/`)
-   - Reusable Steps (`support/steps/verifyButtonState/`)
-5. **Spec-as-Code**:
-   - Suites are defined in `specs/<suite-name>/suite.md` with YAML frontmatter (`id`, `name`, `executionOrder`, `tags`).
-   - Test cases are defined in `specs/<suite-name>/<TC-ID-slug>/spec.md` with YAML frontmatter (`id`, `title`, `priority`, `coverage`).
+# TestSpectra AI Instructions for Cursor
+
+You are developing automated tests and React components with the TestSpectra testing framework.
+
+## Key Rules & Conventions
+1. **Zero-Import Standard**: Never add manual `import` statements for Page/Component Objects (`ButtonComponent`, `BadgeComponent`, `InputComponent`), Steps (`Step.*`), Fixtures (`Fixture.*`), or Actions (`Spectra.*`). All typings are provided globally and ambiently via `.testspectra/types/`.
+2. **Component Testing Pattern**: Mount React components using `await Spectra.mount(<Component />)` (real JSX and static component imports are allowed in `*.test.tsx` files, unlike zero-import `*.web.test.ts` E2E specs), then inspect and interact using `Spectra.get(...)` / `Spectra.getAll(...)` or Page/Component Objects. Each `Spectra.mount()` call replaces the previous mount automatically — no cleanup command needed. Run via `spectra test` (a separate suite from E2E's `spectra run`).
+3. **Platform Separation**:
+   - `web.test.ts` / `web.test.tsx` / `web.ts`: Web / Browser component implementations.
+   - `common.test.ts` / `common.ts`: Cross-platform shared implementations.
+4. **CamelCase Naming Convention**:
+   - Component Objects (`page-objects/ButtonComponent/`, `page-objects/BadgeComponent/`)
+   - Reusable Actions (`support/actions/fillInputField/`)
+   - Reusable Steps (`support/steps/verifyButtonState/`)
+5. **Spec-as-Code**:
+   - Suites are defined in `specs/<suite-name>/suite.md` with YAML frontmatter (`id`, `name`, `executionOrder`, `tags`).
+   - Test cases are defined in `specs/<suite-name>/<TC-ID-slug>/spec.md` with YAML frontmatter (`id`, `title`, `priority`, `coverage`).

package/templates/react-component/.vscode/extensions.json

@@ -1,5 +1,5 @@
-{
-  "recommendations": [
-    "testspectra.testspectra-vscode"
-  ]
-}
+{
+  "recommendations": [
+    "testspectra.testspectra-vscode"
+  ]
+}

package/templates/react-component/CLAUDE.md

@@ -1,14 +1,14 @@
-# TestSpectra React Component Testing Workspace
-
-## Commands
-- `pnpm test` or `spectra test` — Run the component test suite (bundled Vitest browser mode via `@testspectra/react`)
-- `pnpm run test:headed` — Run component tests with a visible browser window
-- `pnpm run sync-types` — Scan workspace and regenerate ambient `.testspectra/types/`
-- `pnpm run type-check` — Type check with `tsc -b`
-
-## Architecture Rules
-
-1. Zero-import standard for `Spectra.*`, `ButtonComponent`, `BadgeComponent`, `InputComponent`, `Step.*`, and `Fixture.*` — these stay ambient globals, auto-discovered from `page-objects/`, `support/steps/`, and `fixtures/`.
-2. Component testing uses `Spectra.mount(<Component />)` — real JSX, real static imports for the component under test are allowed and expected in `*.test.tsx` files (unlike `*.web.test.ts` E2E specs). `Spectra.mount()` always replaces whatever was previously mounted; no manual cleanup call is needed between tests.
-3. Component tests are a **separate test suite** from E2E (`spectra run`) — they live in `specs/<Suite>/<TC-ID>/web.test.tsx` alongside `spec.md`, run via `spectra test`, not `spectra run`. See `docs/v2/features/component-testing/react/`.
-4. Assertions use the same TestSpectra DSL as E2E (`Spectra.get().shouldBeVisible()`, `.shouldHaveText()`, etc.) — nothing new to learn beyond `Spectra.mount()`.
+# TestSpectra React Component Testing Workspace
+
+## Commands
+- `pnpm test` or `spectra test` — Run the component test suite (bundled Vitest browser mode via `@testspectra/react`)
+- `pnpm run test:headed` — Run component tests with a visible browser window
+- `pnpm run sync-types` — Scan workspace and regenerate ambient `.testspectra/types/`
+- `pnpm run type-check` — Type check with `tsc -b`
+
+## Architecture Rules
+
+1. Zero-import standard for `Spectra.*`, `ButtonComponent`, `BadgeComponent`, `InputComponent`, `Step.*`, and `Fixture.*` — these stay ambient globals, auto-discovered from `page-objects/`, `support/steps/`, and `fixtures/`.
+2. Component testing uses `Spectra.mount(<Component />)` — real JSX, real static imports for the component under test are allowed and expected in `*.test.tsx` files (unlike `*.web.test.ts` E2E specs). `Spectra.mount()` always replaces whatever was previously mounted; no manual cleanup call is needed between tests.
+3. Component tests are a **separate test suite** from E2E (`spectra run`) — they live in `specs/<Suite>/<TC-ID>/web.test.tsx` alongside `spec.md`, run via `spectra test`, not `spectra run`. See `docs/v2/features/component-testing/react/`.
+4. Assertions use the same TestSpectra DSL as E2E (`Spectra.get().shouldBeVisible()`, `.shouldHaveText()`, etc.) — nothing new to learn beyond `Spectra.mount()`.

package/templates/react-component/README.md

@@ -1,69 +1,69 @@
-# TestSpectra React Component Testing Template
-
-A high-performance, real-browser React component testing template powered by **TestSpectra**, **WebdriverIO Browser Runner**, and **Testing Library**.
-
-## 🚀 Features
-
-- **Direct Component Mounting**: Mount TSX components directly in real Chromium/Blink engines using `@testing-library/react`.
-- **Zero Mock Browser**: Real layout calculations, CSS rendering, focus states, and browser events without JSDOM/HappyDOM limitations.
-- **Fast Vite HMR Core**: Instant test startup powered by Vite bundler inside the browser runner.
-- **TestSpectra Matchers**: Comprehensive semantic assertions (`.shouldBeVisible()`, `.shouldExist()`, `expect(el).toHaveText()`).
-
-## 📁 Directory Structure
-
-```
-.
-├── spectra.config.ts        # TestSpectra centralized configuration
-├── wdio.conf.ts             # WebdriverIO Browser Runner + Vite config
-├── tsconfig.json            # TypeScript configuration for JSX & runner types
-└── src/
-    ├── components/          # React components and tests
-    │   ├── Button/
-    │   │   ├── Button.tsx
-    │   │   └── Button.test.tsx
-    │   ├── Badge/
-    │   │   ├── Badge.tsx
-    │   │   └── Badge.test.tsx
-    │   └── Input/
-    │       ├── Input.tsx
-    │       └── Input.test.tsx
-    └── test-utils.tsx       # Common testing helpers & providers
-```
-
-## 🛠️ Usage & Commands
-
-```bash
-# Run all component tests
-pnpm test
-
-# Run component tests in headless mode
-pnpm run test:headless
-
-# Run tests in high-concurrency chunked worker mode
-pnpm run test:chunked
-
-# Type check
-pnpm run type-check
-```
-
-## 📝 Writing Component Tests
-
-```tsx
-import React from 'react';
-import { render } from '@testing-library/react';
-import { expect, $ } from '@wdio/globals';
-import { Button } from './Button';
-
-describe('Button Component', () => {
-  it('renders label and handles user clicks', async () => {
-    let clicked = false;
-    render(<Button label="Submit" onClick={() => (clicked = true)} />);
-
-    const button = await $('button=Submit');
-    await expect(button).toBeDisplayed();
-
-    await button.click();
-    expect(clicked).toBe(true);
-  });
-});
-```
+# TestSpectra React Component Testing Template
+
+A high-performance, real-browser React component testing template powered by **TestSpectra**, **WebdriverIO Browser Runner**, and **Testing Library**.
+
+## 🚀 Features
+
+- **Direct Component Mounting**: Mount TSX components directly in real Chromium/Blink engines using `@testing-library/react`.
+- **Zero Mock Browser**: Real layout calculations, CSS rendering, focus states, and browser events without JSDOM/HappyDOM limitations.
+- **Fast Vite HMR Core**: Instant test startup powered by Vite bundler inside the browser runner.
+- **TestSpectra Matchers**: Comprehensive semantic assertions (`.shouldBeVisible()`, `.shouldExist()`, `expect(el).toHaveText()`).
+
+## 📁 Directory Structure
+
+```
+.
+├── spectra.config.ts        # TestSpectra centralized configuration
+├── wdio.conf.ts             # WebdriverIO Browser Runner + Vite config
+├── tsconfig.json            # TypeScript configuration for JSX & runner types
+└── src/
+    ├── components/          # React components and tests
+    │   ├── Button/
+    │   │   ├── Button.tsx
+    │   │   └── Button.test.tsx
+    │   ├── Badge/
+    │   │   ├── Badge.tsx
+    │   │   └── Badge.test.tsx
+    │   └── Input/
+    │       ├── Input.tsx
+    │       └── Input.test.tsx
+    └── test-utils.tsx       # Common testing helpers & providers
+```
+
+## 🛠️ Usage & Commands
+
+```bash
+# Run all component tests
+pnpm test
+
+# Run component tests in headless mode
+pnpm run test:headless
+
+# Run tests in high-concurrency chunked worker mode
+pnpm run test:chunked
+
+# Type check
+pnpm run type-check
+```
+
+## 📝 Writing Component Tests
+
+```tsx
+import React from 'react';
+import { render } from '@testing-library/react';
+import { expect, $ } from '@wdio/globals';
+import { Button } from './Button';
+
+describe('Button Component', () => {
+  it('renders label and handles user clicks', async () => {
+    let clicked = false;
+    render(<Button label="Submit" onClick={() => (clicked = true)} />);
+
+    const button = await $('button=Submit');
+    await expect(button).toBeDisplayed();
+
+    await button.click();
+    expect(clicked).toBe(true);
+  });
+});
+```

package/templates/react-component/fixtures/component-mock.json

@@ -1,12 +1,12 @@
-{
-  "user": {
-    "name": "Alex Mercer",
-    "role": "Developer",
-    "status": "active"
-  },
-  "labels": {
-    "save": "Save Changes",
-    "cancel": "Cancel",
-    "delete": "Delete Item"
-  }
-}
+{
+  "user": {
+    "name": "Alex Mercer",
+    "role": "Developer",
+    "status": "active"
+  },
+  "labels": {
+    "save": "Save Changes",
+    "cancel": "Cancel",
+    "delete": "Delete Item"
+  }
+}

package/templates/react-component/global-hooks/after/web.hook.ts

@@ -1,3 +1,3 @@
-export default async function () {
-  // Global after hook for web component testing suite
-}
+export default async function () {
+  // Global after hook for web component testing suite
+}

package/templates/react-component/global-hooks/before/web.hook.ts

@@ -1,3 +1,3 @@
-export default async function () {
-  // Global before hook for web component testing suite
-}
+export default async function () {
+  // Global before hook for web component testing suite
+}

package/templates/react-component/package.json

@@ -1,27 +1,27 @@
-{
-  "name": "@testspectra/template-react-component",
-  "version": "1.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "test": "spectra test",
-    "test:headed": "spectra test --headed",
-    "spectra": "spectra",
-    "doctor": "spectra doctor",
-    "watch": "spectra watch",
-    "type-check": "tsc -b",
-    "sync-types": "spectra sync-types",
-    "postinstall": "spectra sync-types"
-  },
-  "devDependencies": {
-    "@testspectra/cli": "link:../..",
-    "@testspectra/matchers": "link:../../../tools/matchers",
-    "@testspectra/react": "link:../../../tools/react",
-    "@types/node": "^20.14.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "typescript": "^5.4.5"
-  }
-}
+{
+  "name": "@testspectra/template-react-component",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "spectra test",
+    "test:headed": "spectra test --headed",
+    "spectra": "spectra",
+    "doctor": "spectra doctor",
+    "watch": "spectra watch",
+    "type-check": "tsc -b",
+    "sync-types": "spectra sync-types",
+    "postinstall": "spectra sync-types"
+  },
+  "devDependencies": {
+    "@testspectra/cli": "^1.1.8-rc.20",
+    "@testspectra/matchers": "^1.1.8-rc.20",
+    "@testspectra/react": "^1.1.8-rc.20",
+    "@types/node": "^20.14.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.4.5"
+  }
+}

package/templates/react-component/page-objects/BadgeComponent/web.ts

@@ -1,23 +1,23 @@
-class BadgeComponent {
-  /** Root badge element */
-  get root() {
-    return Spectra.get("[data-testid='testspectra-badge']");
-  }
-
-  /** Dot indicator element */
-  get dot() {
-    return Spectra.get("[data-testid='badge-dot']");
-  }
-
-  /** Badge label text element */
-  get label() {
-    return Spectra.get("[data-testid='badge-label']");
-  }
-
-  /** Lookup badge by severity attribute */
-  bySeverity(severity: 'info' | 'success' | 'warning' | 'danger') {
-    return Spectra.get(`[data-testid='testspectra-badge'][data-severity='${severity}']`);
-  }
-}
-
-export default new BadgeComponent();
+class BadgeComponent {
+  /** Root badge element */
+  get root() {
+    return Spectra.get("[data-testid='testspectra-badge']");
+  }
+
+  /** Dot indicator element */
+  get dot() {
+    return Spectra.get("[data-testid='badge-dot']");
+  }
+
+  /** Badge label text element */
+  get label() {
+    return Spectra.get("[data-testid='badge-label']");
+  }
+
+  /** Lookup badge by severity attribute */
+  bySeverity(severity: 'info' | 'success' | 'warning' | 'danger') {
+    return Spectra.get(`[data-testid='testspectra-badge'][data-severity='${severity}']`);
+  }
+}
+
+export default new BadgeComponent();

package/templates/react-component/page-objects/ButtonComponent/web.ts

@@ -1,23 +1,23 @@
-class ButtonComponent {
-  /** Root button element */
-  get root() {
-    return Spectra.get("[data-testid='testspectra-button']");
-  }
-
-  /** Label element inside button */
-  get label() {
-    return Spectra.get("[data-testid='button-label']");
-  }
-
-  /** Optional icon element */
-  get icon() {
-    return Spectra.get("[data-testid='button-icon']");
-  }
-
-  /** Lookup button element by visible text */
-  byText(text: string) {
-    return Spectra.get(`button*=${text}`);
-  }
-}
-
-export default new ButtonComponent();
+class ButtonComponent {
+  /** Root button element */
+  get root() {
+    return Spectra.get("[data-testid='testspectra-button']");
+  }
+
+  /** Label element inside button */
+  get label() {
+    return Spectra.get("[data-testid='button-label']");
+  }
+
+  /** Optional icon element */
+  get icon() {
+    return Spectra.get("[data-testid='button-icon']");
+  }
+
+  /** Lookup button element by visible text */
+  byText(text: string) {
+    return Spectra.get(`button*=${text}`);
+  }
+}
+
+export default new ButtonComponent();

package/templates/react-component/page-objects/InputComponent/web.ts

@@ -1,13 +1,13 @@
-class InputComponent {
-  /** Root input element */
-  get root() {
-    return Spectra.get("[data-testid='testspectra-input']");
-  }
-
-  /** Lookup input element by placeholder substring */
-  byPlaceholder(placeholder: string) {
-    return Spectra.get(`input[placeholder*='${placeholder}']`);
-  }
-}
-
-export default new InputComponent();
+class InputComponent {
+  /** Root input element */
+  get root() {
+    return Spectra.get("[data-testid='testspectra-input']");
+  }
+
+  /** Lookup input element by placeholder substring */
+  byPlaceholder(placeholder: string) {
+    return Spectra.get(`input[placeholder*='${placeholder}']`);
+  }
+}
+
+export default new InputComponent();

package/templates/react-component/specs/BadgeComponent/TC-0002-badge-severities-and-dot/spec.md

@@ -1,18 +1,18 @@
----
-id: TC-0002
-title: Verify default badge with info severity
-priority: Critical
-caseType: Positive
-status: automated
-coverage:
-  web: automated
----
-
-# TC-0002: Badge Default Rendering
-
-Verify that `<Badge />` renders with the default `info` severity when no `severity` prop is provided.
-
-## Test Steps
-
-1. Mount `<Badge label="System Active" />`.
-2. Verify the badge is visible, shows the correct label text, and has `data-severity="info"`.
+---
+id: TC-0002
+title: Verify default badge with info severity
+priority: Critical
+caseType: Positive
+status: automated
+coverage:
+  web: automated
+---
+
+# TC-0002: Badge Default Rendering
+
+Verify that `<Badge />` renders with the default `info` severity when no `severity` prop is provided.
+
+## Test Steps
+
+1. Mount `<Badge label="System Active" />`.
+2. Verify the badge is visible, shows the correct label text, and has `data-severity="info"`.

package/templates/react-component/specs/BadgeComponent/TC-0002-badge-severities-and-dot/web.test.tsx

@@ -1,11 +1,11 @@
-import { Badge } from '../../../src/components/Badge/Badge.js';
-import { withProviders } from '../../../src/test-utils.js';
-
-it('Verify default badge with info severity', async () => {
-  await Spectra.mount(withProviders(<Badge label="System Active" />));
-
-  // Assert via BadgeComponent component object
-  await BadgeComponent.root.shouldBeVisible();
-  await BadgeComponent.label.shouldHaveText('System Active');
-  await BadgeComponent.root.shouldHaveAttribute('data-severity', 'info');
-});
+import { Badge } from '../../../src/components/Badge/Badge.js';
+import { withProviders } from '../../../src/test-utils.js';
+
+it('Verify default badge with info severity', async () => {
+  await Spectra.mount(withProviders(<Badge label="System Active" />));
+
+  // Assert via BadgeComponent component object
+  await BadgeComponent.root.shouldBeVisible();
+  await BadgeComponent.label.shouldHaveText('System Active');
+  await BadgeComponent.root.shouldHaveAttribute('data-severity', 'info');
+});

package/templates/react-component/specs/BadgeComponent/TC-0006-badge-success-with-dot/spec.md

@@ -1,18 +1,18 @@
----
-id: TC-0006
-title: Verify badge with success severity and dot indicator
-priority: High
-caseType: Positive
-status: automated
-coverage:
-  web: automated
----
-
-# TC-0006: Badge Success Severity with Dot Indicator
-
-Verify that `<Badge />` renders the `success` severity styling and shows a dot indicator when the `dot` prop is set.
-
-## Test Steps
-
-1. Mount `<Badge label="Completed" severity="success" dot />`.
-2. Verify the badge is visible with `data-severity="success"` and the dot indicator is visible.
+---
+id: TC-0006
+title: Verify badge with success severity and dot indicator
+priority: High
+caseType: Positive
+status: automated
+coverage:
+  web: automated
+---
+
+# TC-0006: Badge Success Severity with Dot Indicator
+
+Verify that `<Badge />` renders the `success` severity styling and shows a dot indicator when the `dot` prop is set.
+
+## Test Steps
+
+1. Mount `<Badge label="Completed" severity="success" dot />`.
+2. Verify the badge is visible with `data-severity="success"` and the dot indicator is visible.

package/templates/react-component/specs/BadgeComponent/TC-0006-badge-success-with-dot/web.test.tsx

@@ -1,10 +1,10 @@
-import { Badge } from '../../../src/components/Badge/Badge.js';
-import { withProviders } from '../../../src/test-utils.js';
-
-it('Verify badge with success severity and dot indicator', async () => {
-  await Spectra.mount(withProviders(<Badge label="Completed" severity="success" dot />));
-
-  await BadgeComponent.root.shouldBeVisible();
-  await BadgeComponent.root.shouldHaveAttribute('data-severity', 'success');
-  await BadgeComponent.dot.shouldBeVisible();
-});
+import { Badge } from '../../../src/components/Badge/Badge.js';
+import { withProviders } from '../../../src/test-utils.js';
+
+it('Verify badge with success severity and dot indicator', async () => {
+  await Spectra.mount(withProviders(<Badge label="Completed" severity="success" dot />));
+
+  await BadgeComponent.root.shouldBeVisible();
+  await BadgeComponent.root.shouldHaveAttribute('data-severity', 'success');
+  await BadgeComponent.dot.shouldBeVisible();
+});

package/templates/react-component/specs/BadgeComponent/TC-0007-badge-by-severity-lookup/spec.md

@@ -1,18 +1,18 @@
----
-id: TC-0007
-title: Verify dynamic lookup using bySeverity helper
-priority: Medium
-caseType: Positive
-status: automated
-coverage:
-  web: automated
----
-
-# TC-0007: Badge Lookup by Severity Helper
-
-Verify that multiple `<Badge />` instances rendered together can be located individually via `BadgeComponent.bySeverity(...)`.
-
-## Test Steps
-
-1. Mount two badges: `<Badge label="Warning Alert" severity="warning" />` and `<Badge label="Critical Error" severity="danger" />`.
-2. Verify each badge can be located and is visible via `BadgeComponent.bySeverity('warning')` and `BadgeComponent.bySeverity('danger')`.
+---
+id: TC-0007
+title: Verify dynamic lookup using bySeverity helper
+priority: Medium
+caseType: Positive
+status: automated
+coverage:
+  web: automated
+---
+
+# TC-0007: Badge Lookup by Severity Helper
+
+Verify that multiple `<Badge />` instances rendered together can be located individually via `BadgeComponent.bySeverity(...)`.
+
+## Test Steps
+
+1. Mount two badges: `<Badge label="Warning Alert" severity="warning" />` and `<Badge label="Critical Error" severity="danger" />`.
+2. Verify each badge can be located and is visible via `BadgeComponent.bySeverity('warning')` and `BadgeComponent.bySeverity('danger')`.

package/templates/react-component/specs/BadgeComponent/TC-0007-badge-by-severity-lookup/web.test.tsx

@@ -1,16 +1,16 @@
-import { Badge } from '../../../src/components/Badge/Badge.js';
-import { withProviders } from '../../../src/test-utils.js';
-
-it('Verify dynamic lookup using bySeverity helper', async () => {
-  await Spectra.mount(
-    withProviders(
-      <div>
-        <Badge label="Warning Alert" severity="warning" />
-        <Badge label="Critical Error" severity="danger" />
-      </div>,
-    ),
-  );
-
-  await BadgeComponent.bySeverity('warning').shouldBeVisible();
-  await BadgeComponent.bySeverity('danger').shouldBeVisible();
-});
+import { Badge } from '../../../src/components/Badge/Badge.js';
+import { withProviders } from '../../../src/test-utils.js';
+
+it('Verify dynamic lookup using bySeverity helper', async () => {
+  await Spectra.mount(
+    withProviders(
+      <div>
+        <Badge label="Warning Alert" severity="warning" />
+        <Badge label="Critical Error" severity="danger" />
+      </div>,
+    ),
+  );
+
+  await BadgeComponent.bySeverity('warning').shouldBeVisible();
+  await BadgeComponent.bySeverity('danger').shouldBeVisible();
+});