Detox: Grey-Box Тестирование для React Native Приложений

// Подход black-box (традиционный)
await element(by.id('loginButton')).tap();
await waitFor(element(by.id('dashboard'))).toBeVisible().withTimeout(10000);

// Подход grey-box (Detox)
await element(by.id('loginButton')).tap();
// Detox автоматически ждет, пока React Native станет idle
await expect(element(by.id('dashboard'))).toBeVisible();

// Detox автоматически ждет:
// 1. JavaScript поток станет idle
// 2. Сетевые запросы завершатся
// 3. Анимации закончатся
// 4. Таймеры истекут
// 5. Обновления React компонентов

describe('Флоу Входа', () => {
  it('должен перейти на dashboard после успешного входа', async () => {
    // Не нужны ручные ожидания
    await element(by.id('email')).typeText('user@example.com');
    await element(by.id('password')).typeText('password123');
    await element(by.id('loginButton')).tap();

    // Detox ждет API вызов аутентификации и навигацию
    await expect(element(by.id('dashboard'))).toBeVisible();
  });
});

# Установить CLI Detox
npm install -g detox-cli

# Установить Detox как dev зависимость
npm install --save-dev detox

# Инициализировать конфигурацию Detox
detox init -r jest

{
  "detox": {
    "test-runner": "jest",
    "runner-config": "e2e/config.json",
    "configurations": {
      "ios (как обсуждается в [Espresso & XCUITest: Mastering Native Mobile Testing Frameworks](/blog/espresso-xcuitest-native-frameworks)).sim.debug": {
        "device": {
          "type": "iPhone 14 Pro"
        },
        "app": "ios (как обсуждается в [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('Тесты Видимости Компонентов', () => {
  it('должен валидировать состояния элементов', async () => {
    // Утверждения видимости
    await expect(element(by.id('header'))).toBeVisible();
    await expect(element(by.id('loadingSpinner'))).toBeNotVisible();

    // Утверждения существования (элемент в иерархии, но может быть не виден)
    await expect(element(by.id('hiddenElement'))).toExist();

    // Совпадение текста
    await expect(element(by.id('title'))).toHaveText('Добро пожаловать');
    await expect(element(by.id('subtitle'))).toHaveLabel('Текст подзаголовка');

    // Утверждения значения
    await expect(element(by.id('counter'))).toHaveValue('5');

    // Состояние переключателя
    await expect(element(by.id('checkbox'))).toHaveToggleValue(true);
  });
});

describe('Пользовательские Взаимодействия', () => {
  it('должен обрабатывать различные жесты пользователя', async () => {
    // Базовые взаимодействия
    await element(by.id('button')).tap();
    await element(by.id('button')).longPress();
    await element(by.id('button')).multiTap(3);

    // Ввод текста
    await element(by.id('input')).typeText('Привет Мир');
    await element(by.id('input')).replaceText('Новый Текст');
    await element(by.id('input')).clearText();

    // Прокрутка
    await element(by.id('scrollView')).scroll(200, 'down');
    await element(by.id('scrollView')).scrollTo('bottom');

    // Жесты свайпа
    await element(by.id('swipeable')).swipe('left', 'fast', 0.75);
    await element(by.id('swipeable')).swipe('right', 'slow', 0.5);

    // Продвинутые жесты
    await element(by.id('pinchable')).pinch(1.5, 'outward'); // Увеличение
    await element(by.id('pinchable')).pinch(0.5, 'inward');  // Уменьшение
  });
});

// По testID (рекомендуется)
element(by.id('loginButton'));

// По тексту
element(by.text('Войти'));

// По label (accessibility label)
element(by.label('Кнопка входа'));

// По типу (тип компонента)
element(by.type('RCTButton'));

// По traits (accessibility traits)
element(by.traits(['button']));

// Комбинирование матчеров
element(by.id('loginButton').and(by.text('Войти')));

// Выбор по индексу
element(by.text('Элемент')).atIndex(2);

// Отношения родитель-ребенок
element(by.id('parent')).withDescendant(by.text('child'));
element(by.id('child')).withAncestor(by.id('parent'));

describe('Флоу Навигации', () => {
  it('должен перемещаться по экранам приложения', async () => {
    // Начать на главной
    await expect(element(by.id('homeScreen'))).toBeVisible();

    // Перейти в профиль
    await element(by.id('profileTab')).tap();
    await expect(element(by.id('profileScreen'))).toBeVisible();

    // Открыть настройки
    await element(by.id('settingsButton')).tap();
    await expect(element(by.id('settingsScreen'))).toBeVisible();

    // Вернуться назад
    await element(by.id('backButton')).tap();
    await expect(element(by.id('profileScreen'))).toBeVisible();
  });
});

describe('Форма Регистрации', () => {
  beforeEach(async () => {
    await element(by.id('registerTab')).tap();
  });

  it('должен показывать ошибки валидации для неверного ввода', async () => {
    // Отправить пустую форму
    await element(by.id('submitButton')).tap();

    // Проверить сообщения валидации
    await expect(element(by.id('emailError'))).toHaveText('Email обязателен');
    await expect(element(by.id('passwordError'))).toHaveText('Пароль обязателен');

    // Неверный формат email
    await element(by.id('emailInput')).typeText('неверный-email');
    await element(by.id('submitButton')).tap();
    await expect(element(by.id('emailError'))).toHaveText('Неверный формат email');

    // Слишком короткий пароль
    await element(by.id('passwordInput')).typeText('123');
    await element(by.id('submitButton')).tap();
    await expect(element(by.id('passwordError'))).toHaveText('Пароль должен быть не менее 8 символов');
  });

  it('должен успешно зарегистрироваться с валидными данными', 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();

    // Должен перейти на экран успеха
    await expect(element(by.id('successScreen'))).toBeVisible();
    await expect(element(by.id('successMessage'))).toHaveText('Регистрация успешна!');
  });
});

describe('Список Продуктов', () => {
  it('должен прокручивать и взаимодействовать с элементами списка', async () => {
    // Прокрутить к конкретному элементу
    await waitFor(element(by.id('product-50')))
      .toBeVisible()
      .whileElement(by.id('productList'))
      .scroll(200, 'down');

    // Тап по элементу
    await element(by.id('product-50')).tap();

    // Проверить экран деталей
    await expect(element(by.id('productDetail'))).toBeVisible();
  });

  it('должен обрабатывать бесконечную прокрутку', async () => {
    // Прокрутить вниз для загрузки еще
    await element(by.id('productList')).scrollTo('bottom');

    // Ждать индикатор загрузки
    await expect(element(by.id('loadingMore'))).toBeVisible();

    // Ждать загрузки новых элементов
    await waitFor(element(by.id('product-100')))
      .toBeVisible()
      .withTimeout(5000);
  });
});

describe('Разрешения', () => {
  it('должен обрабатывать запрос разрешения на местоположение', async () => {
    await element(by.id('requestLocationButton')).tap();

    // Обработать iOS оповещение о разрешении
    if (device.getPlatform() === 'ios') {
      await expect(element(by.label('Разрешить "ВашеПриложение" доступ к вашему местоположению?'))).toBeVisible();
      await element(by.label('Разрешить При Использовании')).tap();
    }

    // Проверить разрешение предоставлено
    await expect(element(by.id('locationEnabled'))).toBeVisible();
  });

  it('должен обрабатывать разрешения push-уведомлений', async () => {
    await element(by.id('enableNotifications')).tap();

    if (device.getPlatform() === 'ios') {
      await expect(element(by.label('"ВашеПриложение" Хочет Отправлять Вам Уведомления'))).toBeVisible();
      await element(by.label('Разрешить')).tap();
    }
  });
});

describe('Состояния Устройства', () => {
  it('должен обрабатывать изменения ориентации', async () => {
    // Портретный режим
    await device.setOrientation('portrait');
    await expect(element(by.id('portraitLayout'))).toBeVisible();

    // Ландшафтный режим
    await device.setOrientation('landscape');
    await expect(element(by.id('landscapeLayout'))).toBeVisible();
  });

  it('должен обрабатывать изменения состояния приложения', async () => {
    // Отправить приложение в фон
    await device.sendToHome();
    await device.launchApp({ newInstance: false });

    // Проверить состояние приложения восстановлено
    await expect(element(by.id('currentScreen'))).toBeVisible();
  });

  it('должен обрабатывать URL deep links', async () => {
    await device.openURL({ url: 'myapp://product/123' });
    await expect(element(by.id('productDetail-123'))).toBeVisible();
  });
});

name: Detox E2E Тесты

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: Установить зависимости
        run: npm ci

      - name: Установить CLI Detox
        run: npm install -g detox-cli

      - name: Собрать iOS приложение
        run: detox build --configuration ios.sim.release

      - name: Запустить iOS тесты
        run: detox test --configuration ios.sim.release --cleanup

      - name: Загрузить результаты тестов
        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: Установить зависимости
        run: npm ci

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

      - name: Создать 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: Собрать Android приложение
        run: detox build --configuration android.emu.release

      - name: Запустить Android тесты
        run: detox test --configuration android.emu.release --cleanup

      - name: Загрузить результаты тестов
        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
      }
    }
  }
}

// Переиспользовать инстанс приложения между тестами
beforeAll(async () => {
  await device.launchApp({ newInstance: true });
});

afterEach(async () => {
  // Сбросить состояние приложения вместо перезапуска
  await device.reloadReactNative();
});

// Отключить синхронизацию для конкретных операций
await device.disableSynchronization();
await element(by.id('heavyAnimation')).tap();
await new Promise(resolve => setTimeout(resolve, 3000));
await device.enableSynchronization();