@testspectra/cli 1.2.11 → 1.2.13

package/templates/react-native-component/node_modules/.bin/tsc

@@ -0,0 +1,43 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+basedir_win="$basedir"
+exe=""
+msys=""
+
+case `uname -a` in
+  *CYGWIN*|*MINGW*|*MSYS*)
+    if command -v cygpath > /dev/null 2>&1; then
+      basedir_win=`cygpath -w "$basedir"`
+    fi
+    exe=".exe"
+    msys="true"
+  ;;
+  *WSL2*)
+    if command -v wslpath > /dev/null 2>&1; then
+      basedir_win="$(wslpath -w "$basedir" 2> /dev/null)"
+      if [ $? -ne 0 ] || [ -z "$basedir_win" ]; then
+        basedir_win="$basedir"
+      else
+        exe=".exe"
+      fi
+    fi
+  ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/typescript@5.9.3/node_modules:/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/typescript@5.9.3/node_modules:/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -n "$exe" ] && [ -x "$basedir/node.exe" ]; then
+  exec "$basedir/node.exe"  "$basedir_win/../../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsc" "$@"
+elif [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsc" "$@"
+elif command -v node >/dev/null 2>&1; then
+  exec node  "$basedir/../../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsc" "$@"
+elif [ -n "$exe" ] && command -v node.exe >/dev/null 2>&1; then
+  exec node.exe  "$basedir_win/../../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsc" "$@"
+fi
+# cmd-shim-target=/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsc

package/templates/react-native-component/node_modules/.bin/tsserver

@@ -0,0 +1,43 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+basedir_win="$basedir"
+exe=""
+msys=""
+
+case `uname -a` in
+  *CYGWIN*|*MINGW*|*MSYS*)
+    if command -v cygpath > /dev/null 2>&1; then
+      basedir_win=`cygpath -w "$basedir"`
+    fi
+    exe=".exe"
+    msys="true"
+  ;;
+  *WSL2*)
+    if command -v wslpath > /dev/null 2>&1; then
+      basedir_win="$(wslpath -w "$basedir" 2> /dev/null)"
+      if [ $? -ne 0 ] || [ -z "$basedir_win" ]; then
+        basedir_win="$basedir"
+      else
+        exe=".exe"
+      fi
+    fi
+  ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/typescript@5.9.3/node_modules:/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/typescript@5.9.3/node_modules:/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -n "$exe" ] && [ -x "$basedir/node.exe" ]; then
+  exec "$basedir/node.exe"  "$basedir_win/../../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsserver" "$@"
+elif [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsserver" "$@"
+elif command -v node >/dev/null 2>&1; then
+  exec node  "$basedir/../../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsserver" "$@"
+elif [ -n "$exe" ] && command -v node.exe >/dev/null 2>&1; then
+  exec node.exe  "$basedir_win/../../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsserver" "$@"
+fi
+# cmd-shim-target=/Volumes/Home/Documents/TestSpectra/testspectra-source/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsserver

package/templates/react-native-component/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@testspectra/template-react-native-component",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "spectra test --platform android",
+    "spectra": "spectra",
+    "doctor": "spectra doctor",
+    "type-check": "tsc -b",
+    "sync-types": "spectra sync-types",
+    "postinstall": "spectra sync-types"
+  },
+  "devDependencies": {
+    "@testspectra/cli": "link:../..",
+    "@testspectra/matchers": "link:../../../tools/matchers",
+    "@testspectra/react-native": "link:../../../tools/react-native",
+    "@types/node": "^20.14.0",
+    "@types/react": "^18.3.12",
+    "@types/react-native": "^0.73.0",
+    "react": "^18.3.1",
+    "react-native": "^0.76.0",
+    "typescript": "^5.4.5"
+  }
+}

package/templates/react-native-component/page-objects/BadgeComponent/mobile.ts

@@ -0,0 +1,13 @@
+class BadgeComponent {
+  /** Root badge element */
+  get root() {
+    return Spectra.get('~badge');
+  }
+
+  /** Label element inside badge */
+  get label() {
+    return Spectra.get('#badge-label');
+  }
+}
+
+export default new BadgeComponent();

package/templates/react-native-component/page-objects/ButtonComponent/mobile.ts

@@ -0,0 +1,13 @@
+class ButtonComponent {
+  /** Root button element */
+  get root() {
+    return Spectra.get('~button');
+  }
+
+  /** Label element inside button */
+  get label() {
+    return Spectra.get('#button-label');
+  }
+}
+
+export default new ButtonComponent();

package/templates/react-native-component/page-objects/InputComponent/mobile.ts

@@ -0,0 +1,8 @@
+class InputComponent {
+  /** Root text input element */
+  get root() {
+    return Spectra.get('~input');
+  }
+}
+
+export default new InputComponent();

package/templates/react-native-component/specs/BadgeComponent/TC-0002-badge-render/mobile.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Badge } from '../../../src/components/Badge/Badge.js';
+
+it('Verify Badge renders severity and text', async () => {
+  await Spectra.mount(<Badge label="Active" severity="success" />);
+
+  await BadgeComponent.root.shouldBeVisible();
+  await BadgeComponent.label.shouldHaveText('Active');
+});

package/templates/react-native-component/specs/BadgeComponent/TC-0002-badge-render/spec.md

@@ -0,0 +1,10 @@
+---
+id: TC-0002-badge-render
+title: Verify Badge renders severity and text
+platform: mobile
+type: component
+---
+
+# Verify Badge renders severity and text
+
+Ensure that the React Native Badge component renders with the correct text.

package/templates/react-native-component/specs/ButtonComponent/TC-0001-button-press/mobile.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from '../../../src/components/Button/Button.js';
+
+it('Verify Button renders label and triggers onPress callback', async () => {
+  let isPressed = false;
+
+  await Spectra.mount(
+    <Button
+      label="Save Settings"
+      variant="primary"
+      onPress={() => {
+        isPressed = true;
+      }}
+    />,
+  );
+
+  await ButtonComponent.root.shouldBeVisible();
+  await ButtonComponent.label.shouldHaveText('Save Settings');
+  await ButtonComponent.root.click();
+  Spectra.expect(isPressed).toBe(true);
+});

package/templates/react-native-component/specs/ButtonComponent/TC-0001-button-press/spec.md

@@ -0,0 +1,10 @@
+---
+id: TC-0001-button-press
+title: Verify Button renders label and triggers onPress callback
+platform: mobile
+type: component
+---
+
+# Verify Button renders label and triggers onPress callback
+
+Ensure that the React Native Button component renders correctly with the expected label and dispatches the onPress callback when clicked.

package/templates/react-native-component/specs/InputComponent/TC-0003-input-typing/mobile.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Input } from '../../../src/components/Input/Input.js';
+
+it('Verify Input renders placeholder and accepts text', async () => {
+  let textValue = '';
+
+  await Spectra.mount(
+    <Input
+      placeholder="Type username..."
+      onChangeText={(val) => {
+        textValue = val;
+      }}
+    />,
+  );
+
+  await InputComponent.root.shouldBeVisible();
+  await InputComponent.root.setValue('budi_santoso');
+  Spectra.expect(textValue).toBe('budi_santoso');
+});

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

@@ -0,0 +1,10 @@
+---
+id: TC-0003-input-typing
+title: Verify Input renders placeholder and accepts text
+platform: mobile
+type: component
+---
+
+# Verify Input renders placeholder and accepts text
+
+Ensure that the React Native Input component displays the placeholder and handles text changes.

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

@@ -0,0 +1,10 @@
+import { defineConfig } from "@testspectra/cli";
+
+export default defineConfig({
+  androidConfig: {
+    implicitWait: "5000",
+  },
+  executionConfig: {
+    networkMonitoringEnabled: true,
+  },
+});

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export interface BadgeProps {
+  label: string;
+  severity?: 'info' | 'success' | 'warning' | 'error';
+  testID?: string;
+  accessibilityLabel?: string;
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  label,
+  severity = 'info',
+  testID = 'badge',
+  accessibilityLabel,
+}) => {
+  const getBackgroundColor = () => {
+    switch (severity) {
+      case 'success':
+        return '#10b981';
+      case 'warning':
+        return '#f59e0b';
+      case 'error':
+        return '#ef4444';
+      case 'info':
+      default:
+        return '#3b82f6';
+    }
+  };
+
+  return (
+    <View
+      testID={testID}
+      accessibilityLabel={accessibilityLabel || testID}
+      style={[styles.badge, { backgroundColor: getBackgroundColor() }]}
+    >
+      <Text style={styles.text} testID={`${testID}-label`}>
+        {label}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  badge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 9999,
+    alignSelf: 'flex-start',
+  },
+  text: {
+    color: '#ffffff',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+});

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+
+export interface ButtonProps {
+  label: string;
+  variant?: 'primary' | 'secondary' | 'danger';
+  disabled?: boolean;
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  label,
+  variant = 'primary',
+  disabled = false,
+  onPress,
+  accessibilityLabel,
+  testID = 'button',
+}) => {
+  const getBackgroundColor = () => {
+    if (disabled) return '#9ca3af';
+    switch (variant) {
+      case 'secondary':
+        return '#4b5563';
+      case 'danger':
+        return '#ef4444';
+      case 'primary':
+      default:
+        return '#3b82f6';
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      accessibilityLabel={accessibilityLabel || 'button'}
+      testID={testID}
+      disabled={disabled}
+      onPress={onPress}
+      activeOpacity={0.7}
+      style={[styles.btn, { backgroundColor: getBackgroundColor() }]}
+    >
+      <Text style={styles.text} testID={`${testID}-label`}>
+        {label}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  btn: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleSheet, TextInput, View } from 'react-native';
+
+export interface InputProps {
+  value?: string;
+  placeholder?: string;
+  onChangeText?: (text: string) => void;
+  disabled?: boolean;
+  testID?: string;
+  accessibilityLabel?: string;
+}
+
+export const Input: React.FC<InputProps> = ({
+  value,
+  placeholder = 'Enter text...',
+  onChangeText,
+  disabled = false,
+  testID = 'input',
+  accessibilityLabel,
+}) => {
+  return (
+    <View style={styles.container}>
+      <TextInput
+        testID={testID}
+        accessibilityLabel={accessibilityLabel || testID}
+        value={value}
+        placeholder={placeholder}
+        placeholderTextColor="#94a3b8"
+        onChangeText={onChangeText}
+        editable={!disabled}
+        style={[styles.input, disabled && styles.disabled]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    marginVertical: 4,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#cbd5e1',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 14,
+    color: '#0f172a',
+    backgroundColor: '#ffffff',
+  },
+  disabled: {
+    backgroundColor: '#f1f5f9',
+    color: '#94a3b8',
+  },
+});

package/templates/react-native-component/tsconfig.json

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