@testspectra/cli 1.1.8-rc.5 → 1.1.8-rc.6

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

@@ -1,57 +1,57 @@
-import React from 'react';
-
-export interface ButtonProps {
-  label: string;
-  variant?: 'primary' | 'secondary' | 'danger';
-  disabled?: boolean;
-  onClick?: () => void;
-  icon?: React.ReactNode;
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  label,
-  variant = 'primary',
-  disabled = false,
-  onClick,
-  icon,
-}) => {
-  const getBackgroundColor = () => {
-    if (disabled) return '#9ca3af';
-    switch (variant) {
-      case 'secondary':
-        return '#4b5563';
-      case 'danger':
-        return '#ef4444';
-      case 'primary':
-      default:
-        return '#3b82f6';
-    }
-  };
-
-  return (
-    <button
-      type="button"
-      data-testid="testspectra-button"
-      data-variant={variant}
-      disabled={disabled}
-      onClick={onClick}
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '8px',
-        padding: '8px 16px',
-        borderRadius: '6px',
-        border: 'none',
-        backgroundColor: getBackgroundColor(),
-        color: '#ffffff',
-        fontWeight: 500,
-        fontSize: '14px',
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        transition: 'background-color 0.2s ease',
-      }}
-    >
-      {icon && <span data-testid="button-icon">{icon}</span>}
-      <span>{label}</span>
-    </button>
-  );
-};
+import React from 'react';
+
+export interface ButtonProps {
+  label: string;
+  variant?: 'primary' | 'secondary' | 'danger';
+  disabled?: boolean;
+  onClick?: () => void;
+  icon?: React.ReactNode;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  label,
+  variant = 'primary',
+  disabled = false,
+  onClick,
+  icon,
+}) => {
+  const getBackgroundColor = () => {
+    if (disabled) return '#9ca3af';
+    switch (variant) {
+      case 'secondary':
+        return '#4b5563';
+      case 'danger':
+        return '#ef4444';
+      case 'primary':
+      default:
+        return '#3b82f6';
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      data-testid="testspectra-button"
+      data-variant={variant}
+      disabled={disabled}
+      onClick={onClick}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '8px 16px',
+        borderRadius: '6px',
+        border: 'none',
+        backgroundColor: getBackgroundColor(),
+        color: '#ffffff',
+        fontWeight: 500,
+        fontSize: '14px',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        transition: 'background-color 0.2s ease',
+      }}
+    >
+      {icon && <span data-testid="button-icon">{icon}</span>}
+      <span>{label}</span>
+    </button>
+  );
+};

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

@@ -1,41 +1,41 @@
-import React from 'react';
-
-export interface InputProps {
-  placeholder?: string;
-  value?: string;
-  defaultValue?: string;
-  disabled?: boolean;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  ariaLabel?: string;
-}
-
-export const Input: React.FC<InputProps> = ({
-  placeholder = '',
-  value,
-  defaultValue,
-  disabled = false,
-  onChange,
-  ariaLabel,
-}) => {
-  return (
-    <input
-      type="text"
-      data-testid="testspectra-input"
-      placeholder={placeholder}
-      value={value}
-      defaultValue={defaultValue}
-      disabled={disabled}
-      onChange={onChange}
-      aria-label={ariaLabel}
-      style={{
-        padding: '8px 12px',
-        borderRadius: '6px',
-        border: '1px solid #d1d5db',
-        fontSize: '14px',
-        outline: 'none',
-        backgroundColor: disabled ? '#f3f4f6' : '#ffffff',
-        cursor: disabled ? 'not-allowed' : 'text',
-      }}
-    />
-  );
-};
+import React from 'react';
+
+export interface InputProps {
+  placeholder?: string;
+  value?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  ariaLabel?: string;
+}
+
+export const Input: React.FC<InputProps> = ({
+  placeholder = '',
+  value,
+  defaultValue,
+  disabled = false,
+  onChange,
+  ariaLabel,
+}) => {
+  return (
+    <input
+      type="text"
+      data-testid="testspectra-input"
+      placeholder={placeholder}
+      value={value}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      onChange={onChange}
+      aria-label={ariaLabel}
+      style={{
+        padding: '8px 12px',
+        borderRadius: '6px',
+        border: '1px solid #d1d5db',
+        fontSize: '14px',
+        outline: 'none',
+        backgroundColor: disabled ? '#f3f4f6' : '#ffffff',
+        cursor: disabled ? 'not-allowed' : 'text',
+      }}
+    />
+  );
+};

package/templates/react-component/src/test-utils.tsx

@@ -1,23 +1,23 @@
-import { ReactElement, ReactNode } from 'react';
-
-export interface TestProviderProps {
-  children: ReactNode;
-}
-
-/**
- * Common test provider wrapper for components (theme, context, locale). Compose it directly in
- * the test file around whatever you pass to `Spectra.mount()` — see
- * docs/v2/features/component-testing/react/mount-convention.md §8.
- */
-export function TestProvider({ children }: TestProviderProps) {
-  return (
-    <div className="testspectra-test-root" style={{ padding: '16px', fontFamily: 'system-ui, sans-serif' }}>
-      {children}
-    </div>
-  );
-}
-
-/** Convenience wrapper for `Spectra.mount(withProviders(<Component />))`. */
-export function withProviders(children: ReactElement): ReactElement {
-  return <TestProvider>{children}</TestProvider>;
-}
+import { ReactElement, ReactNode } from 'react';
+
+export interface TestProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Common test provider wrapper for components (theme, context, locale). Compose it directly in
+ * the test file around whatever you pass to `Spectra.mount()` — see
+ * docs/v2/features/component-testing/react/mount-convention.md §8.
+ */
+export function TestProvider({ children }: TestProviderProps) {
+  return (
+    <div className="testspectra-test-root" style={{ padding: '16px', fontFamily: 'system-ui, sans-serif' }}>
+      {children}
+    </div>
+  );
+}
+
+/** Convenience wrapper for `Spectra.mount(withProviders(<Component />))`. */
+export function withProviders(children: ReactElement): ReactElement {
+  return <TestProvider>{children}</TestProvider>;
+}

package/templates/react-component/support/actions/fillInputField/web.action.ts

@@ -1,9 +1,9 @@
-/**
- * Custom Spectra Action to clear and fill an input field.
- */
-export default async function (selector: string, text: string) {
-  const el = Spectra.get(selector);
-  await el.shouldBeVisible();
-  await el.clear();
-  await el.type(text);
-}
+/**
+ * Custom Spectra Action to clear and fill an input field.
+ */
+export default async function (selector: string, text: string) {
+  const el = Spectra.get(selector);
+  await el.shouldBeVisible();
+  await el.clear();
+  await el.type(text);
+}

package/templates/react-component/support/steps/verifyButtonState/web.step.ts

@@ -1,12 +1,12 @@
-/**
- * Reusable step to verify button presence and enabled/disabled state.
- */
-export default async function (label: string, isEnabled = true) {
-  const btn = Spectra.get(`button*=${label}`);
-  await btn.shouldBeVisible();
-  if (isEnabled) {
-    await btn.shouldBeEnabled();
-  } else {
-    await btn.shouldBeDisabled();
-  }
-}
+/**
+ * Reusable step to verify button presence and enabled/disabled state.
+ */
+export default async function (label: string, isEnabled = true) {
+  const btn = Spectra.get(`button*=${label}`);
+  await btn.shouldBeVisible();
+  if (isEnabled) {
+    await btn.shouldBeEnabled();
+  } else {
+    await btn.shouldBeDisabled();
+  }
+}

package/bin/.testspectra-runner.hash

@@ -1 +0,0 @@
-ee8892a6b2c4c19bf5da415da3d29172023c383de2d12c0080b5dc61dc339af3