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

package/templates/react-component/specs/BadgeComponent/suite.md

@@ -1,12 +1,12 @@
----
-id: badge-component-suite
-name: Badge Component Suite
-executionOrder: 2
-tags:
-  - component
-  - badge
-  - status
----
-
-# Badge Component Testing Suite
-Verification of badge labels, severity color variants, and dot indicators.
+---
+id: badge-component-suite
+name: Badge Component Suite
+executionOrder: 2
+tags:
+  - component
+  - badge
+  - status
+---
+
+# Badge Component Testing Suite
+Verification of badge labels, severity color variants, and dot indicators.

package/templates/react-component/specs/ButtonComponent/TC-0001-button-rendering-and-click/spec.md

@@ -1,19 +1,19 @@
----
-id: TC-0001
-title: Verify button render, text, and click with Spectra DSL
-priority: Critical
-caseType: Positive
-status: automated
-coverage:
-  web: automated
----
-
-# TC-0001: Button Rendering and Click Interaction
-
-Verify that the `<Button />` component renders with the requested label and variant, and fires its `onClick` callback when clicked.
-
-## Test Steps
-
-1. Mount `<Button label="Save Changes" variant="primary" />`.
-2. Verify the button is visible with the correct label and `data-variant` attribute.
-3. Click the button and verify the `onClick` callback fires.
+---
+id: TC-0001
+title: Verify button render, text, and click with Spectra DSL
+priority: Critical
+caseType: Positive
+status: automated
+coverage:
+  web: automated
+---
+
+# TC-0001: Button Rendering and Click Interaction
+
+Verify that the `<Button />` component renders with the requested label and variant, and fires its `onClick` callback when clicked.
+
+## Test Steps
+
+1. Mount `<Button label="Save Changes" variant="primary" />`.
+2. Verify the button is visible with the correct label and `data-variant` attribute.
+3. Click the button and verify the `onClick` callback fires.

package/templates/react-component/specs/ButtonComponent/TC-0001-button-rendering-and-click/web.test.tsx

@@ -1,28 +1,28 @@
-import { Button } from '../../../src/components/Button/Button.js';
-import { withProviders } from '../../../src/test-utils.js';
-
-it('Verify button render, text, and click with Spectra DSL', async () => {
-  let isClicked = false;
-
-  // Spectra.mount() renders into the shared root — no explicit cleanup between mounts needed.
-  await Spectra.mount(
-    withProviders(
-      <Button
-        label="Save Changes"
-        variant="primary"
-        onClick={() => {
-          isClicked = true;
-        }}
-      />,
-    ),
-  );
-
-  // TestSpectra Ambient Component Object (ButtonComponent)
-  await ButtonComponent.root.shouldBeVisible();
-  await ButtonComponent.root.shouldHaveText('Save Changes');
-  await ButtonComponent.root.shouldHaveAttribute('data-variant', 'primary');
-  await ButtonComponent.root.click();
-
-  // Verify callback state
-  expect(isClicked).toBe(true);
-});
+import { Button } from '../../../src/components/Button/Button.js';
+import { withProviders } from '../../../src/test-utils.js';
+
+it('Verify button render, text, and click with Spectra DSL', async () => {
+  let isClicked = false;
+
+  // Spectra.mount() renders into the shared root — no explicit cleanup between mounts needed.
+  await Spectra.mount(
+    withProviders(
+      <Button
+        label="Save Changes"
+        variant="primary"
+        onClick={() => {
+          isClicked = true;
+        }}
+      />,
+    ),
+  );
+
+  // TestSpectra Ambient Component Object (ButtonComponent)
+  await ButtonComponent.root.shouldBeVisible();
+  await ButtonComponent.root.shouldHaveText('Save Changes');
+  await ButtonComponent.root.shouldHaveAttribute('data-variant', 'primary');
+  await ButtonComponent.root.click();
+
+  // Verify callback state
+  expect(isClicked).toBe(true);
+});

package/templates/react-component/specs/ButtonComponent/TC-0004-disabled-button-not-clickable/spec.md

@@ -1,19 +1,19 @@
----
-id: TC-0004
-title: Verify disabled button cannot be clicked
-priority: High
-caseType: Negative
-status: automated
-coverage:
-  web: automated
----
-
-# TC-0004: Disabled Button Interaction
-
-Verify that a disabled `<Button />` renders in a disabled state and its `onClick` callback does not fire when clicked.
-
-## Test Steps
-
-1. Mount `<Button label="Disabled Action" disabled />`.
-2. Verify the button is visible and disabled.
-3. Attempt to click the button and verify the `onClick` callback does not fire.
+---
+id: TC-0004
+title: Verify disabled button cannot be clicked
+priority: High
+caseType: Negative
+status: automated
+coverage:
+  web: automated
+---
+
+# TC-0004: Disabled Button Interaction
+
+Verify that a disabled `<Button />` renders in a disabled state and its `onClick` callback does not fire when clicked.
+
+## Test Steps
+
+1. Mount `<Button label="Disabled Action" disabled />`.
+2. Verify the button is visible and disabled.
+3. Attempt to click the button and verify the `onClick` callback does not fire.

package/templates/react-component/specs/ButtonComponent/TC-0004-disabled-button-not-clickable/web.test.tsx

@@ -1,22 +1,22 @@
-import { Button } from '../../../src/components/Button/Button.js';
-
-it('Verify disabled button cannot be clicked', async () => {
-  let isClicked = false;
-
-  await Spectra.mount(
-    <Button
-      label="Disabled Action"
-      disabled
-      onClick={() => {
-        isClicked = true;
-      }}
-    />,
-  );
-
-  await ButtonComponent.root.shouldBeVisible();
-  await ButtonComponent.root.shouldBeDisabled();
-
-  // Attempt click - should not fire callback
-  await ButtonComponent.root.click().catch(() => {});
-  expect(isClicked).toBe(false);
-});
+import { Button } from '../../../src/components/Button/Button.js';
+
+it('Verify disabled button cannot be clicked', async () => {
+  let isClicked = false;
+
+  await Spectra.mount(
+    <Button
+      label="Disabled Action"
+      disabled
+      onClick={() => {
+        isClicked = true;
+      }}
+    />,
+  );
+
+  await ButtonComponent.root.shouldBeVisible();
+  await ButtonComponent.root.shouldBeDisabled();
+
+  // Attempt click - should not fire callback
+  await ButtonComponent.root.click().catch(() => {});
+  expect(isClicked).toBe(false);
+});

package/templates/react-component/specs/ButtonComponent/TC-0005-button-renders-icon/spec.md

@@ -1,18 +1,18 @@
----
-id: TC-0005
-title: Verify button renders optional icon
-priority: Medium
-caseType: Positive
-status: automated
-coverage:
-  web: automated
----
-
-# TC-0005: Button Optional Icon Rendering
-
-Verify that `<Button />` renders an optional leading icon when the `icon` prop is provided.
-
-## Test Steps
-
-1. Mount `<Button label="Download Report" icon={...} />` with an icon element.
-2. Verify the icon is visible and renders the expected content.
+---
+id: TC-0005
+title: Verify button renders optional icon
+priority: Medium
+caseType: Positive
+status: automated
+coverage:
+  web: automated
+---
+
+# TC-0005: Button Optional Icon Rendering
+
+Verify that `<Button />` renders an optional leading icon when the `icon` prop is provided.
+
+## Test Steps
+
+1. Mount `<Button label="Download Report" icon={...} />` with an icon element.
+2. Verify the icon is visible and renders the expected content.

package/templates/react-component/specs/ButtonComponent/TC-0005-button-renders-icon/web.test.tsx

@@ -1,8 +1,8 @@
-import { Button } from '../../../src/components/Button/Button.js';
-
-it('Verify button renders optional icon', async () => {
-  await Spectra.mount(<Button label="Download Report" icon={<span data-testid="button-icon">📥</span>} />);
-
-  await ButtonComponent.icon.shouldBeVisible();
-  await ButtonComponent.icon.shouldHaveText('📥');
-});
+import { Button } from '../../../src/components/Button/Button.js';
+
+it('Verify button renders optional icon', async () => {
+  await Spectra.mount(<Button label="Download Report" icon={<span data-testid="button-icon">📥</span>} />);
+
+  await ButtonComponent.icon.shouldBeVisible();
+  await ButtonComponent.icon.shouldHaveText('📥');
+});

package/templates/react-component/specs/ButtonComponent/suite.md

@@ -1,12 +1,12 @@
----
-id: button-component-suite
-name: Button Component Suite
-executionOrder: 1
-tags:
-  - component
-  - button
-  - atoms
----
-
-# Button Component Testing Suite
-Verification of isolated button props, event listeners, accessibility, and visual variants.
+---
+id: button-component-suite
+name: Button Component Suite
+executionOrder: 1
+tags:
+  - component
+  - button
+  - atoms
+---
+
+# Button Component Testing Suite
+Verification of isolated button props, event listeners, accessibility, and visual variants.

package/templates/react-component/specs/InputComponent/TC-0003-input-typing-and-clear/spec.md

@@ -1,20 +1,20 @@
----
-id: TC-0003
-title: Verify input placeholder and typing interaction
-priority: Critical
-caseType: Positive
-status: automated
-coverage:
-  web: automated
----
-
-# TC-0003: Input Typing and Placeholder
-
-Verify that `<Input />` renders its placeholder, accepts typed text, and fires `onChange` with the typed value.
-
-## Test Steps
-
-1. Mount `<Input placeholder="Enter email address" />` with an `onChange` handler.
-2. Verify the input is visible and the placeholder is discoverable.
-3. Type `test@example.com` into the input and verify the value updates.
-4. Verify the `onChange` handler received the typed value.
+---
+id: TC-0003
+title: Verify input placeholder and typing interaction
+priority: Critical
+caseType: Positive
+status: automated
+coverage:
+  web: automated
+---
+
+# TC-0003: Input Typing and Placeholder
+
+Verify that `<Input />` renders its placeholder, accepts typed text, and fires `onChange` with the typed value.
+
+## Test Steps
+
+1. Mount `<Input placeholder="Enter email address" />` with an `onChange` handler.
+2. Verify the input is visible and the placeholder is discoverable.
+3. Type `test@example.com` into the input and verify the value updates.
+4. Verify the `onChange` handler received the typed value.

package/templates/react-component/specs/InputComponent/TC-0003-input-typing-and-clear/web.test.tsx

@@ -1,28 +1,28 @@
-import { Input } from '../../../src/components/Input/Input.js';
-import { withProviders } from '../../../src/test-utils.js';
-
-it('Verify input placeholder and typing interaction', async () => {
-  let currentVal = '';
-
-  await Spectra.mount(
-    withProviders(
-      <Input
-        placeholder="Enter email address"
-        onChange={(e) => {
-          currentVal = e.target.value;
-        }}
-      />,
-    ),
-  );
-
-  // 1. Assert element is visible via InputComponent
-  await InputComponent.root.shouldBeVisible();
-  await InputComponent.byPlaceholder('email address').shouldBeVisible();
-
-  // 2. Type text using Spectra DSL
-  await InputComponent.root.type('test@example.com');
-  await InputComponent.root.shouldHaveValue('test@example.com');
-
-  // 3. Verify onChange state
-  expect(currentVal).toBe('test@example.com');
-});
+import { Input } from '../../../src/components/Input/Input.js';
+import { withProviders } from '../../../src/test-utils.js';
+
+it('Verify input placeholder and typing interaction', async () => {
+  let currentVal = '';
+
+  await Spectra.mount(
+    withProviders(
+      <Input
+        placeholder="Enter email address"
+        onChange={(e) => {
+          currentVal = e.target.value;
+        }}
+      />,
+    ),
+  );
+
+  // 1. Assert element is visible via InputComponent
+  await InputComponent.root.shouldBeVisible();
+  await InputComponent.byPlaceholder('email address').shouldBeVisible();
+
+  // 2. Type text using Spectra DSL
+  await InputComponent.root.type('test@example.com');
+  await InputComponent.root.shouldHaveValue('test@example.com');
+
+  // 3. Verify onChange state
+  expect(currentVal).toBe('test@example.com');
+});

package/templates/react-component/specs/InputComponent/TC-0008-disabled-input-not-editable/spec.md

@@ -1,18 +1,18 @@
----
-id: TC-0008
-title: Verify disabled input cannot be typed into
-priority: High
-caseType: Negative
-status: automated
-coverage:
-  web: automated
----
-
-# TC-0008: Disabled Input State
-
-Verify that a disabled `<Input />` renders in a disabled state.
-
-## Test Steps
-
-1. Mount `<Input disabled placeholder="Disabled field" />`.
-2. Verify the input is visible and disabled.
+---
+id: TC-0008
+title: Verify disabled input cannot be typed into
+priority: High
+caseType: Negative
+status: automated
+coverage:
+  web: automated
+---
+
+# TC-0008: Disabled Input State
+
+Verify that a disabled `<Input />` renders in a disabled state.
+
+## Test Steps
+
+1. Mount `<Input disabled placeholder="Disabled field" />`.
+2. Verify the input is visible and disabled.

package/templates/react-component/specs/InputComponent/TC-0008-disabled-input-not-editable/web.test.tsx

@@ -1,9 +1,9 @@
-import { Input } from '../../../src/components/Input/Input.js';
-import { withProviders } from '../../../src/test-utils.js';
-
-it('Verify disabled input cannot be typed into', async () => {
-  await Spectra.mount(withProviders(<Input disabled placeholder="Disabled field" />));
-
-  await InputComponent.root.shouldBeVisible();
-  await InputComponent.root.shouldBeDisabled();
-});
+import { Input } from '../../../src/components/Input/Input.js';
+import { withProviders } from '../../../src/test-utils.js';
+
+it('Verify disabled input cannot be typed into', async () => {
+  await Spectra.mount(withProviders(<Input disabled placeholder="Disabled field" />));
+
+  await InputComponent.root.shouldBeVisible();
+  await InputComponent.root.shouldBeDisabled();
+});

package/templates/react-component/specs/InputComponent/suite.md

@@ -1,12 +1,12 @@
----
-id: input-component-suite
-name: Input Component Suite
-executionOrder: 3
-tags:
-  - component
-  - input
-  - forms
----
-
-# Input Component Testing Suite
-Verification of text inputs, placeholder labels, keyboard typing, and onChange events.
+---
+id: input-component-suite
+name: Input Component Suite
+executionOrder: 3
+tags:
+  - component
+  - input
+  - forms
+---
+
+# Input Component Testing Suite
+Verification of text inputs, placeholder labels, keyboard typing, and onChange events.

package/templates/react-component/spectra.config.ts

@@ -1,27 +1,27 @@
-import { defineConfig } from "@testspectra/cli";
-
-export default defineConfig({
-  webConfig: {
-    baseUrl: "http://localhost:5173",
-    maxConcurrentSessions: "4",
-    headless: true,
-    implicitWait: "5000",
-    pageLoadTimeout: "30000",
-    scriptTimeout: "30000",
-    parallelizationMode: "testcase",
-  },
-  browsers: [
-    {
-      id: "chrome-desktop",
-      type: "chrome",
-      mobileEmulation: false,
-    },
-  ],
-  executionConfig: {
-    networkMonitoringEnabled: true,
-    fastResponseTime: "200",
-    normalResponseTime: "1000",
-    monitoredDomains: [],
-    environmentVariables: [],
-  },
-});
+import { defineConfig } from "@testspectra/cli";
+
+export default defineConfig({
+  webConfig: {
+    baseUrl: "http://localhost:5173",
+    maxConcurrentSessions: "4",
+    headless: true,
+    implicitWait: "5000",
+    pageLoadTimeout: "30000",
+    scriptTimeout: "30000",
+    parallelizationMode: "testcase",
+  },
+  browsers: [
+    {
+      id: "chrome-desktop",
+      type: "chrome",
+      mobileEmulation: false,
+    },
+  ],
+  executionConfig: {
+    networkMonitoringEnabled: true,
+    fastResponseTime: "200",
+    normalResponseTime: "1000",
+    monitoredDomains: [],
+    environmentVariables: [],
+  },
+});

package/templates/react-component/src/components/Badge/Badge.tsx

@@ -1,60 +1,60 @@
-import React from 'react';
-
-export interface BadgeProps {
-  label: string;
-  severity?: 'info' | 'success' | 'warning' | 'danger';
-  dot?: boolean;
-}
-
-export const Badge: React.FC<BadgeProps> = ({
-  label,
-  severity = 'info',
-  dot = false,
-}) => {
-  const getColors = () => {
-    switch (severity) {
-      case 'success':
-        return { bg: '#dcfce7', text: '#15803d' };
-      case 'warning':
-        return { bg: '#fef9c3', text: '#a16207' };
-      case 'danger':
-        return { bg: '#fee2e2', text: '#b91c1c' };
-      case 'info':
-      default:
-        return { bg: '#e0f2fe', text: '#0369a1' };
-    }
-  };
-
-  const { bg, text } = getColors();
-
-  return (
-    <span
-      data-testid="testspectra-badge"
-      data-severity={severity}
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '6px',
-        padding: '2px 8px',
-        borderRadius: '9999px',
-        backgroundColor: bg,
-        color: text,
-        fontSize: '12px',
-        fontWeight: 600,
-      }}
-    >
-      {dot && (
-        <span
-          data-testid="badge-dot"
-          style={{
-            width: '6px',
-            height: '6px',
-            borderRadius: '50%',
-            backgroundColor: text,
-          }}
-        />
-      )}
-      <span data-testid="badge-label">{label}</span>
-    </span>
-  );
-};
+import React from 'react';
+
+export interface BadgeProps {
+  label: string;
+  severity?: 'info' | 'success' | 'warning' | 'danger';
+  dot?: boolean;
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  label,
+  severity = 'info',
+  dot = false,
+}) => {
+  const getColors = () => {
+    switch (severity) {
+      case 'success':
+        return { bg: '#dcfce7', text: '#15803d' };
+      case 'warning':
+        return { bg: '#fef9c3', text: '#a16207' };
+      case 'danger':
+        return { bg: '#fee2e2', text: '#b91c1c' };
+      case 'info':
+      default:
+        return { bg: '#e0f2fe', text: '#0369a1' };
+    }
+  };
+
+  const { bg, text } = getColors();
+
+  return (
+    <span
+      data-testid="testspectra-badge"
+      data-severity={severity}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '6px',
+        padding: '2px 8px',
+        borderRadius: '9999px',
+        backgroundColor: bg,
+        color: text,
+        fontSize: '12px',
+        fontWeight: 600,
+      }}
+    >
+      {dot && (
+        <span
+          data-testid="badge-dot"
+          style={{
+            width: '6px',
+            height: '6px',
+            borderRadius: '50%',
+            backgroundColor: text,
+          }}
+        />
+      )}
+      <span data-testid="badge-label">{label}</span>
+    </span>
+  );
+};