@testspectra/cli 1.0.70 → 1.1.0-rc.1

package/templates/nx/pnpm-workspace.yaml

@@ -1,8 +1,9 @@
 packages:
-  - "modules/**/*"
+  - "packages/**/*"
   - "shared/**/*"
 allowBuilds:
   chromedriver: true
   edgedriver: true
+  esbuild: true
   geckodriver: true
   nx: true

package/templates/nx/shared/testing/fixtures/apiData.json

@@ -0,0 +1,24 @@
+{
+  "mockPosts": [
+    {
+      "id": 1,
+      "title": "Mocked Post 1 - TestSpectra Matchers",
+      "body": "First mocked post body for verifying GET API interception in TestSpectra."
+    },
+    {
+      "id": 2,
+      "title": "Mocked Post 2 - Cross-Platform Automation",
+      "body": "Second mocked post body for verifying collection and item assertions."
+    }
+  ],
+  "mockNewPost": {
+    "title": "TestSpectra Automated Post",
+    "body": "End-to-End API mock verification with browser.intercept command."
+  },
+  "mockPostResponse": {
+    "id": 101,
+    "title": "TestSpectra Automated Post",
+    "body": "End-to-End API mock verification with browser.intercept command.",
+    "userId": 1
+  }
+}

package/templates/nx/shared/testing/page-objects/MatchersPage/mobile.ts

@@ -1,4 +1,4 @@
-export class MatchersPage {
+class MatchersPage {
   get visibleElement() { return Spectra.get("~visible_element"); }
   get hiddenElement() { return Spectra.get("~hidden_element"); }
   get existingElement() { return Spectra.get("~existing_element"); }
@@ -15,6 +15,18 @@ export class MatchersPage {
   get productCards() { return Spectra.getAll("~product_card"); }
   get emptyList() { return Spectra.getAll("~empty_list"); }
 
+  // API Demo elements
+  get fetchApiButton() { return Spectra.get("~fetch_api_btn"); }
+  get fetchStatusBadge() { return Spectra.get("~fetch_status_badge"); }
+  get fetchedItems() { return Spectra.getAll("~api_fetched_item"); }
+  get fetchLoadingIndicator() { return Spectra.get("~fetch_loading_indicator"); }
+  get postTitleInput() { return Spectra.get("~post_input_title"); }
+  get postBodyInput() { return Spectra.get("~post_input_body"); }
+  get submitPostButton() { return Spectra.get("~submit_post_btn"); }
+  get postStatusBadge() { return Spectra.get("~post_status_badge"); }
+  get postSuccessBanner() { return Spectra.get("~post_success_banner"); }
+  get postResponseJson() { return Spectra.get("~post_response_json"); }
+
   async open(_section = "") {}
 }
 

package/templates/nx/shared/testing/page-objects/MatchersPage/web.ts

@@ -1,22 +1,90 @@
-export class MatchersPage {
-  get visibleElement() { return Spectra.get("#demo-visible-el"); }
-  get hiddenElement() { return Spectra.get("#demo-hidden-el"); }
-  get existingElement() { return Spectra.get("#demo-existing-el"); }
-  get submitButton() { return Spectra.get("#demo-submit-btn"); }
-  get disabledButton() { return Spectra.get("#demo-disabled-btn"); }
-  get checkbox() { return Spectra.get("#demo-checkbox"); }
-  get radio() { return Spectra.get("#demo-radio"); }
-  get emailInput() { return Spectra.get("#demo-email-input"); }
-  get tokenInput() { return Spectra.get("#demo-token-input"); }
-  get exactText() { return Spectra.get("#demo-exact-text"); }
-  get partialText() { return Spectra.get("#demo-partial-text"); }
-  get activeTab() { return Spectra.get("#demo-active-tab"); }
-  get navLink() { return Spectra.get("#demo-nav-link"); }
-  get productCards() { return Spectra.getAll(".demo-product-card"); }
-  get emptyList() { return Spectra.getAll("#demo-empty-list > *"); }
+class MatchersPage {
+  get visibleElement() {
+    return Spectra.get("#demo-visible-el");
+  }
+  get hiddenElement() {
+    return Spectra.get("#demo-hidden-el");
+  }
+  get existingElement() {
+    return Spectra.get("#demo-existing-el");
+  }
+  get submitButton() {
+    return Spectra.get("#demo-submit-btn");
+  }
+  get disabledButton() {
+    return Spectra.get("#demo-disabled-btn");
+  }
+  get checkbox() {
+    return Spectra.get("#demo-checkbox");
+  }
+  get radio() {
+    return Spectra.get("#demo-radio");
+  }
+  get emailInput() {
+    return Spectra.get("#demo-email-input");
+  }
+  get tokenInput() {
+    return Spectra.get("#demo-token-input");
+  }
+  get exactText() {
+    return Spectra.get("#demo-exact-text");
+  }
+  get partialText() {
+    return Spectra.get("#demo-partial-text");
+  }
+  get activeTab() {
+    return Spectra.get("#demo-active-tab");
+  }
+  get navLink() {
+    return Spectra.get("#demo-nav-link");
+  }
+  get styledElement() {
+    return Spectra.get("#demo-styled-el");
+  }
+  get focusInput() {
+    return Spectra.get("#demo-focus-input");
+  }
+  get productCards() {
+    return Spectra.getAll(".demo-product-card");
+  }
+  get emptyList() {
+    return Spectra.getAll("#demo-empty-list > *");
+  }
+
+  // API Interception & Mocking elements
+  get fetchApiButton() {
+    return Spectra.get("#fetch-api-btn");
+  }
+  get fetchStatusBadge() {
+    return Spectra.get("#fetch-status-badge");
+  }
+  get fetchedItems() {
+    return Spectra.getAll(".api-fetched-item");
+  }
+  get fetchLoadingIndicator() {
+    return Spectra.get("#fetch-loading-indicator");
+  }
+  get postTitleInput() {
+    return Spectra.get("#post-input-title");
+  }
+  get postBodyInput() {
+    return Spectra.get("#post-input-body");
+  }
+  get submitPostButton() {
+    return Spectra.get("#submit-post-btn");
+  }
+  get postStatusBadge() {
+    return Spectra.get("#post-status-badge");
+  }
+  get postSuccessBanner() {
+    return Spectra.get("#post-success-banner");
+  }
+  get postResponseJson() {
+    return Spectra.get("#post-response-json");
+  }
 
   async open(section = "") {
-    await browser.url("/" + (section ? "#" + section : ""));
+    await Spectra.navigate("/" + (section ? "#" + section : ""));
   }
 }
 

package/templates/nx/shared/testing/page-objects/NavigationPage/mobile.ts

@@ -1,4 +1,4 @@
-export class NavigationPage {
+class NavigationPage {
   get sidebarLinks() { return Spectra.getAll("~sidebar_link"); }
 }
 

package/templates/nx/shared/testing/page-objects/NavigationPage/web.ts

@@ -1,4 +1,4 @@
-export class NavigationPage {
+class NavigationPage {
   get sidebarLinks() { return Spectra.getAll("aside a"); }
   get overviewLink() { return Spectra.get("aside a[href='#overview']"); }
   get visibilityLink() { return Spectra.get("aside a[href='#visibility']"); }

package/templates/nx/shared/testing/page-objects/PlaygroundPage/mobile.ts

@@ -1,4 +1,4 @@
-export class PlaygroundPage {
+class PlaygroundPage {
   get visibleElement() { return Spectra.get("~visible_element"); }
   get hiddenElement() { return Spectra.get("~hidden_element"); }
   get existingElement() { return Spectra.get("~existing_element"); }

package/templates/nx/shared/testing/page-objects/PlaygroundPage/web.ts

@@ -1,4 +1,4 @@
-export class PlaygroundPage {
+class PlaygroundPage {
   get visibleElement() { return Spectra.get("#demo-visible-el-pg"); }
   get hiddenElement() { return Spectra.get("#demo-hidden-el-pg"); }
   get existingElement() { return Spectra.get("#demo-existing-el-pg"); }
@@ -13,11 +13,13 @@ export class PlaygroundPage {
   get partialText() { return Spectra.get("#demo-partial-text-pg"); }
   get activeTab() { return Spectra.get("#demo-active-tab-pg"); }
   get navLink() { return Spectra.get("#demo-nav-link-pg"); }
+  get styledElement() { return Spectra.get("#demo-styled-el-pg"); }
+  get focusInput() { return Spectra.get("#demo-focus-input-pg"); }
   get productItems() { return Spectra.getAll(".demo-product-item"); }
   get emptyList() { return Spectra.getAll("#demo-empty-list-pg > *"); }
 
   async open() {
-    await browser.url("/#playground");
+    await Spectra.navigate("/#playground");
   }
 
   async fillCredentials(email = Fixture.playgroundData.defaultEmail, token = Fixture.playgroundData.defaultToken) {

package/templates/nx/shared/testing/project.json

@@ -0,0 +1,19 @@
+{
+  "name": "shared-testing",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "shared/testing",
+  "targets": {
+    "type-check": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "tsc -b",
+        "cwd": "."
+      }
+    }
+  },
+  "tags": [
+    "scope:shared",
+    "type:shared"
+  ]
+}

package/templates/nx/shared/testing/support/actions/fillCredentials/mobile.action.ts

@@ -1,4 +1,4 @@
-export default async function fillCredentials(this: any, email: string, token: string) {
+export default async function (this: any, email: string, token: string) {
   await this.get("~email_input").type(email);
   await this.get("~token_input").type(token);
 }

package/templates/nx/shared/testing/support/actions/fillCredentials/web.action.ts

@@ -1,4 +1,4 @@
-export default async function fillCredentials(this: any, email: string, token: string) {
+export default async function (this: any, email: string, token: string) {
   await this.get("#demo-email-input-pg").type(email);
   await this.get("#demo-token-input-pg").type(token);
 }

package/templates/nx/shared/testing/support/steps/togglePlaygroundStates/mobile.step.ts

@@ -1,3 +1,3 @@
-export default async function togglePlaygroundStates() {
+export default async function () {
   await PlaygroundPage.open();
 }

package/templates/nx/shared/testing/support/steps/togglePlaygroundStates/web.step.ts

@@ -1,5 +1,5 @@
-export default async function togglePlaygroundStates() {
+export default async function () {
   await PlaygroundPage.open();
-  await PlaygroundPage.hiddenElement.should("be.visible");
-  await PlaygroundPage.existingElement.should("exist");
+  await PlaygroundPage.hiddenElement.shouldBeVisible();
+  await PlaygroundPage.existingElement.shouldExist();
 }

package/templates/nx/shared/testing/support/steps/verifyPlaygroundState/mobile.step.ts

@@ -1,4 +1,4 @@
-export default async function verifyPlaygroundState() {
+export default async function () {
   await PlaygroundPage.open();
-  await PlaygroundPage.visibleElement.should("be.visible");
+  await PlaygroundPage.visibleElement.shouldBeVisible();
 }

package/templates/nx/shared/testing/support/steps/verifyPlaygroundState/web.step.ts

@@ -1,6 +1,6 @@
-export default async function verifyPlaygroundState() {
+export default async function () {
   await PlaygroundPage.open();
-  await PlaygroundPage.visibleElement.should("be.visible");
-  await PlaygroundPage.enabledButton.should("be.enabled");
-  await PlaygroundPage.termsCheckbox.should("be.checked");
+  await PlaygroundPage.visibleElement.shouldBeVisible();
+  await PlaygroundPage.enabledButton.shouldBeEnabled();
+  await PlaygroundPage.termsCheckbox.shouldBeChecked();
 }

package/templates/nx/spectra.config.ts

@@ -4,58 +4,49 @@ export default defineConfig({
   webConfig: {
     baseUrl: "http://localhost:5173",
     maxConcurrentSessions: "1",
-    headlessMode: true,
+    headless: true,
     implicitWait: "5000",
-    pageLoadTimeout: "30000",
-    scriptTimeout: "30000",
     parallelizationMode: "testcase",
   },
-  browsers: [
-    {
-      id: "chrome-desktop",
-      type: "chrome",
-      mobileEmulation: false,
-    },
-  ],
   androidConfig: {
-    appiumServer: "http://127.0.0.1:4723",
-    platformName: "Android",
-    platformVersion: "13",
-    deviceName: "emulator-5554",
-    automationName: "UiAutomator2",
+    driverServer: "tcp://127.0.0.1:8200",
     appPackage: "",
     appActivity: "",
-    autoGrantPermissions: true,
     noReset: false,
     implicitWait: "10000",
     parallelizationMode: "suite",
+    devices: [
+      {
+        id: "emulator-5554",
+        name: "Pixel 7 Pro Emulator",
+        version: "14.0",
+        systemPort: 8200,
+      },
+    ],
   },
   iosConfig: {
     appiumServer: "http://127.0.0.1:4723",
-    platformName: "iOS",
-    platformVersion: "16.0",
-    deviceName: "iPhone 14",
     automationName: "XCUITest",
     bundleId: "",
-    udid: "auto",
-    xcodeOrgId: "",
-    xcodeSigningId: "iPhone Developer",
     autoAcceptAlerts: true,
     noReset: false,
     implicitWait: "10000",
     parallelizationMode: "suite",
+    devices: [
+      {
+        id: "iphone-15-pro",
+        name: "iPhone 15 Pro Simulator",
+        version: "17.0",
+        udid: "auto",
+        wdaLocalPort: 8100,
+      },
+    ],
   },
-  loadConfig: {
-    virtualUsers: "10",
-    duration: "1m",
-  },
-  loadStages: [],
-  thresholds: [],
   executionConfig: {
     networkMonitoringEnabled: true,
     fastResponseTime: "200",
     normalResponseTime: "1000",
     monitoredDomains: [],
-    environmentVariables: [],
+    environmentVariables: { DEMO_API_MODE: "sandbox" },
   },
 });

package/templates/nx/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "files": [],
   "references": [
-    { "path": "./tsconfig.spectra.json" }
+    {
+      "path": "./.testspectra/tsconfig.json"
+    }
   ]
 }

package/templates/react-component/.cursorrules

@@ -0,0 +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`).

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

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

package/templates/react-component/CLAUDE.md

@@ -0,0 +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()`.

package/templates/react-component/README.md

@@ -0,0 +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);
+  });
+});
+```

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

@@ -0,0 +1,12 @@
+{
+  "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

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

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

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

package/templates/react-component/package.json

@@ -0,0 +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"
+  }
+}

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

@@ -0,0 +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();

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

@@ -0,0 +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();

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

@@ -0,0 +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();

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

@@ -0,0 +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"`.

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

@@ -0,0 +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');
+});

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

@@ -0,0 +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.