Detox: Testing Grey-Box para Aplicaciones React Native

// Enfoque black-box (tradicional)
await element(by.id('loginButton')).tap();
await waitFor(element(by.id('dashboard'))).toBeVisible().withTimeout(10000);

// Enfoque grey-box (Detox)
await element(by.id('loginButton')).tap();
// Detox espera automáticamente a que React Native esté inactivo
await expect(element(by.id('dashboard'))).toBeVisible();

// Detox espera automáticamente:
// 1. Thread de JavaScript esté inactivo
// 2. Peticiones de red completen
// 3. Animaciones finalicen
// 4. Timers expiren
// 5. Actualizaciones de componentes React

describe('Flujo de Login', () => {
  it('debería navegar al dashboard después de login exitoso', async () => {
    // No se necesitan esperas manuales
    await element(by.id('email')).typeText('user@example.com');
    await element(by.id('password')).typeText('password123');
    await element(by.id('loginButton')).tap();

    // Detox espera la llamada API de autenticación y navegación
    await expect(element(by.id('dashboard'))).toBeVisible();
  });
});

# Instalar CLI de Detox
npm install -g detox-cli

# Instalar Detox como dependencia de desarrollo
npm install --save-dev detox

# Inicializar configuración de Detox
detox init -r jest

{
  "detox": {
    "test-runner": "jest",
    "runner-config": "e2e/config.json",
    "configurations": {
      "ios (como se discute en [Espresso & XCUITest: Mastering Native Mobile Testing Frameworks](/blog/espresso-xcuitest-native-frameworks)).sim.debug": {
        "device": {
          "type": "iPhone 14 Pro"
        },
        "app": "ios (como se discute en [Appium 2.0: New Architecture and Cloud Integration for Modern Mobile Testing](/blog/appium-2-architecture-cloud)).debug"
      },
      "ios.sim.release": {
        "device": {
          "type": "iPhone 14 Pro"
        },
        "app": "ios.release"
      },
      "android.emu.debug": {
        "device": {
          "avdName": "Pixel_7_API_33"
        },
        "app": "android.debug"
      },
      "android.emu.release": {
        "device": {
          "avdName": "Pixel_7_API_33"
        },
        "app": "android.release"
      }
    },
    "apps": {
      "ios.debug": {
        "type": "ios.app",
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/YourApp.app",
        "build": "xcodebuild -workspace ios/YourApp.xcworkspace -scheme YourApp -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build"
      },
      "ios.release": {
        "type": "ios.app",
        "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/YourApp.app",
        "build": "xcodebuild -workspace ios/YourApp.xcworkspace -scheme YourApp -configuration Release -sdk iphonesimulator -derivedDataPath ios/build"
      },
      "android.debug": {
        "type": "android.apk",
        "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
        "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug"
      },
      "android.release": {
        "type": "android.apk",
        "binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
        "build": "cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release"
      }
    }
  }
}

{
  "testEnvironment": "node",
  "testRunner": "jest-circus/runner",
  "testTimeout": 120000,
  "testRegex": "\\.e2e\\.js$",
  "reporters": ["detox/runners/jest/reporter"],
  "globalSetup": "detox/runners/jest/globalSetup",
  "globalTeardown": "detox/runners/jest/globalTeardown",
  "verbose": true
}

describe('Pruebas de Visibilidad de Componentes', () => {
  it('debería validar estados de elementos', async () => {
    // Aserciones de visibilidad
    await expect(element(by.id('header'))).toBeVisible();
    await expect(element(by.id('loadingSpinner'))).toBeNotVisible();

    // Aserciones de existencia (elemento en jerarquía pero puede no ser visible)
    await expect(element(by.id('hiddenElement'))).toExist();

    // Coincidencia de texto
    await expect(element(by.id('title'))).toHaveText('Bienvenido');
    await expect(element(by.id('subtitle'))).toHaveLabel('Texto del subtítulo');

    // Aserciones de valor
    await expect(element(by.id('counter'))).toHaveValue('5');

    // Estado de toggle
    await expect(element(by.id('checkbox'))).toHaveToggleValue(true);
  });
});

describe('Interacciones de Usuario', () => {
  it('debería manejar varios gestos de usuario', async () => {
    // Interacciones básicas
    await element(by.id('button')).tap();
    await element(by.id('button')).longPress();
    await element(by.id('button')).multiTap(3);

    // Entrada de texto
    await element(by.id('input')).typeText('Hola Mundo');
    await element(by.id('input')).replaceText('Nuevo Texto');
    await element(by.id('input')).clearText();

    // Scrolling
    await element(by.id('scrollView')).scroll(200, 'down');
    await element(by.id('scrollView')).scrollTo('bottom');

    // Gestos de swipe
    await element(by.id('swipeable')).swipe('left', 'fast', 0.75);
    await element(by.id('swipeable')).swipe('right', 'slow', 0.5);

    // Gestos avanzados
    await element(by.id('pinchable')).pinch(1.5, 'outward'); // Zoom in
    await element(by.id('pinchable')).pinch(0.5, 'inward');  // Zoom out
  });
});

// Por testID (recomendado)
element(by.id('loginButton'));

// Por texto
element(by.text('Login'));

// Por label (accessibility label)
element(by.label('Botón de login'));

// Por tipo (tipo de componente)
element(by.type('RCTButton'));

// Por traits (traits de accesibilidad)
element(by.traits(['button']));

// Combinando matchers
element(by.id('loginButton').and(by.text('Login')));

// Selección basada en índice
element(by.text('Item')).atIndex(2);

// Relaciones padre-hijo
element(by.id('parent')).withDescendant(by.text('child'));
element(by.id('child')).withAncestor(by.id('parent'));

describe('Flujo de Navegación', () => {
  it('debería navegar a través de pantallas de la app', async () => {
    // Iniciar en home
    await expect(element(by.id('homeScreen'))).toBeVisible();

    // Navegar a perfil
    await element(by.id('profileTab')).tap();
    await expect(element(by.id('profileScreen'))).toBeVisible();

    // Abrir configuración
    await element(by.id('settingsButton')).tap();
    await expect(element(by.id('settingsScreen'))).toBeVisible();

    // Navegar atrás
    await element(by.id('backButton')).tap();
    await expect(element(by.id('profileScreen'))).toBeVisible();
  });
});

describe('Formulario de Registro', () => {
  beforeEach(async () => {
    await element(by.id('registerTab')).tap();
  });

  it('debería mostrar errores de validación para entrada inválida', async () => {
    // Enviar formulario vacío
    await element(by.id('submitButton')).tap();

    // Verificar mensajes de validación
    await expect(element(by.id('emailError'))).toHaveText('Email es requerido');
    await expect(element(by.id('passwordError'))).toHaveText('Contraseña es requerida');

    // Formato de email inválido
    await element(by.id('emailInput')).typeText('email-invalido');
    await element(by.id('submitButton')).tap();
    await expect(element(by.id('emailError'))).toHaveText('Formato de email inválido');

    // Contraseña muy corta
    await element(by.id('passwordInput')).typeText('123');
    await element(by.id('submitButton')).tap();
    await expect(element(by.id('passwordError'))).toHaveText('La contraseña debe tener al menos 8 caracteres');
  });

  it('debería registrarse exitosamente con datos válidos', async () => {
    await element(by.id('emailInput')).typeText('user@example.com');
    await element(by.id('passwordInput')).typeText('SecurePass123');
    await element(by.id('confirmPasswordInput')).typeText('SecurePass123');
    await element(by.id('submitButton')).tap();

    // Debería navegar a pantalla de éxito
    await expect(element(by.id('successScreen'))).toBeVisible();
    await expect(element(by.id('successMessage'))).toHaveText('¡Registro exitoso!');
  });
});

describe('Lista de Productos', () => {
  it('debería scrollear e interactuar con items de lista', async () => {
    // Scrollear a elemento específico
    await waitFor(element(by.id('product-50')))
      .toBeVisible()
      .whileElement(by.id('productList'))
      .scroll(200, 'down');

    // Tap en item
    await element(by.id('product-50')).tap();

    // Verificar pantalla de detalle
    await expect(element(by.id('productDetail'))).toBeVisible();
  });

  it('debería manejar scroll infinito', async () => {
    // Scrollear al final para disparar carga de más
    await element(by.id('productList')).scrollTo('bottom');

    // Esperar indicador de carga
    await expect(element(by.id('loadingMore'))).toBeVisible();

    // Esperar a que nuevos items carguen
    await waitFor(element(by.id('product-100')))
      .toBeVisible()
      .withTimeout(5000);
  });
});

describe('Permisos', () => {
  it('debería manejar solicitud de permiso de ubicación', async () => {
    await element(by.id('requestLocationButton')).tap();

    // Manejar alerta de permiso iOS
    if (device.getPlatform() === 'ios') {
      await expect(element(by.label('¿Permitir que "TuApp" acceda a tu ubicación?'))).toBeVisible();
      await element(by.label('Permitir Mientras se Usa la App')).tap();
    }

    // Verificar permiso otorgado
    await expect(element(by.id('locationEnabled'))).toBeVisible();
  });

  it('debería manejar permisos de notificaciones push', async () => {
    await element(by.id('enableNotifications')).tap();

    if (device.getPlatform() === 'ios') {
      await expect(element(by.label('"TuApp" Quiere Enviarte Notificaciones'))).toBeVisible();
      await element(by.label('Permitir')).tap();
    }
  });
});

describe('Estados del Dispositivo', () => {
  it('debería manejar cambios de orientación', async () => {
    // Modo portrait
    await device.setOrientation('portrait');
    await expect(element(by.id('portraitLayout'))).toBeVisible();

    // Modo landscape
    await device.setOrientation('landscape');
    await expect(element(by.id('landscapeLayout'))).toBeVisible();
  });

  it('debería manejar cambios de estado de app', async () => {
    // Enviar app al fondo
    await device.sendToHome();
    await device.launchApp({ newInstance: false });

    // Verificar estado de app restaurado
    await expect(element(by.id('currentScreen'))).toBeVisible();
  });

  it('debería manejar deep links de URL', async () => {
    await device.openURL({ url: 'myapp://product/123' });
    await expect(element(by.id('productDetail-123'))).toBeVisible();
  });
});

name: Pruebas E2E Detox

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main, develop]

jobs:
  ios-tests:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Instalar dependencias
        run: npm ci

      - name: Instalar CLI de Detox
        run: npm install -g detox-cli

      - name: Compilar app iOS
        run: detox build --configuration ios.sim.release

      - name: Ejecutar pruebas iOS
        run: detox test --configuration ios.sim.release --cleanup

      - name: Subir resultados de pruebas
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: detox-ios-results
          path: e2e/artifacts

  android-tests:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Setup Java
        uses: actions/setup-java@v3
        with:
          distribution: 'temurin'
          java-version: '11'

      - name: Instalar dependencias
        run: npm ci

      - name: AVD cache
        uses: actions/cache@v3
        id: avd-cache
        with:
          path: |
            ~/.android/avd/*
            ~/.android/adb*
          key: avd-33

      - name: Crear AVD
        if: steps.avd-cache.outputs.cache-hit != 'true'
        run: |
          echo "y" | $ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager --install 'system-images;android-33;google_apis;x86_64'
          echo "no" | $ANDROID_HOME/cmdline-tools/latest/bin/avdmanager create avd -n Pixel_7_API_33 -k 'system-images;android-33;google_apis;x86_64' --force

      - name: Compilar app Android
        run: detox build --configuration android.emu.release

      - name: Ejecutar pruebas Android
        run: detox test --configuration android.emu.release --cleanup

      - name: Subir resultados de pruebas
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: detox-android-results
          path: e2e/artifacts

// e2e/config.json
{
  "artifacts": {
    "rootDir": "./e2e/artifacts",
    "plugins": {
      "screenshot": {
        "enabled": true,
        "shouldTakeAutomaticSnapshots": true,
        "keepOnlyFailedTestsArtifacts": true,
        "takeWhen": {
          "testStart": false,
          "testDone": true,
          "appNotReady": true
        }
      },
      "video": {
        "enabled": true,
        "keepOnlyFailedTestsArtifacts": true,
        "android": {
          "bitRate": 4000000,
          "size": "1080x1920"
        },
        "ios": {
          "codec": "hevc"
        }
      },
      "log": {
        "enabled": true,
        "keepOnlyFailedTestsArtifacts": true
      }
    }
  }
}

// Reutilizar instancia de app entre pruebas
beforeAll(async () => {
  await device.launchApp({ newInstance: true });
});

afterEach(async () => {
  // Resetear estado de app en lugar de relanzar
  await device.reloadReactNative();
});

// Deshabilitar sincronización para operaciones específicas
await device.disableSynchronization();
await element(by.id('heavyAnimation')).tap();
await new Promise(resolve => setTimeout(resolve, 3000));
await device.enableSynchronization();