Testing mobile apps

npx create-expo-app@latest app --template blank-typescript
cd app
npx expo install jest-expo jest @types/jest @testing-library/react-native --dev

{
  "scripts": {
    "test": "jest --watchAll",
    "test:ci": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  }
}

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "types": [
      "jest"
    ]
  }
}

// Нормализует казахстанский номер к виду +7XXXXXXXXXX или возвращает null
export function normalizePhone(input: string): string | null {
  const digits = input.replace(/\D/g, "");
  if (digits.length === 11 && (digits.startsWith("7") || digits.startsWith("8"))) {
    return `+7${digits.slice(1)}`;
  }
  if (digits.length === 10) {
    return `+7${digits}`;
  }
  return null;
}

import { useState } from "react";
import { Pressable, Text, TextInput, View } from "react-native";
import { normalizePhone } from "../lib/phone";

type Props = {
  onSubmit: (phone: string) => void;
};

export function CallbackForm({ onSubmit }: Props) {
  const [value, setValue] = useState("");
  const [error, setError] = useState<string | null>(null);

  function handlePress() {
    const phone = normalizePhone(value);
    if (!phone) {
      setError("Проверьте номер телефона");
      return;
    }
    setError(null);
    onSubmit(phone);
  }

  return (
    <View>
      <TextInput
        testID="phone-input"
        accessibilityLabel="Телефон"
        keyboardType="phone-pad"
        value={value}
        onChangeText={setValue}
      />
      {error ? <Text role="alert">{error}</Text> : null}
      <Pressable testID="submit-button" role="button" onPress={handlePress}>
        <Text>Перезвоните мне</Text>
      </Pressable>
    </View>
  );
}

import { normalizePhone } from "../lib/phone";

describe("normalizePhone", () => {
  it("приводит разные записи к +7XXXXXXXXXX", () => {
    expect(normalizePhone("8 (701) 123-45-67")).toBe("+77011234567");
    expect(normalizePhone("+7 701 123 45 67")).toBe("+77011234567");
    expect(normalizePhone("7011234567")).toBe("+77011234567");
  });

  it("возвращает null для неполного номера", () => {
    expect(normalizePhone("701 123")).toBeNull();
  });
});

import { render, screen, userEvent } from "@testing-library/react-native";
import { CallbackForm } from "../components/CallbackForm";

describe("CallbackForm", () => {
  it("отправляет нормализованный номер", async () => {
    const onSubmit = jest.fn();
    const user = userEvent.setup();
    await render(<CallbackForm onSubmit={onSubmit} />);

    await user.type(screen.getByLabelText("Телефон"), "8 701 123 45 67");
    await user.press(screen.getByRole("button", { name: "Перезвоните мне" }));

    expect(onSubmit).toHaveBeenCalledWith("+77011234567");
    expect(screen.queryByRole("alert")).toBeNull();
  });

  it("показывает ошибку и не отправляет неполный номер", async () => {
    const onSubmit = jest.fn();
    const user = userEvent.setup();
    await render(<CallbackForm onSubmit={onSubmit} />);

    await user.type(screen.getByLabelText("Телефон"), "701");
    await user.press(screen.getByRole("button", { name: "Перезвоните мне" }));

    expect(screen.getByRole("alert")).toHaveTextContent("Проверьте номер телефона");
    expect(onSubmit).not.toHaveBeenCalled();
  });
});

$ npx jest --verbose
PASS __tests__/phone-test.ts
  normalizePhone
    √ приводит разные записи к +7XXXXXXXXXX (6 ms)
    √ возвращает null для неполного номера

PASS __tests__/callback-form-test.tsx
  CallbackForm
    √ отправляет нормализованный номер (1017 ms)
    √ показывает ошибку и не отправляет неполный номер (245 ms)

Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total

/// Нормализует казахстанский номер к виду +7XXXXXXXXXX или возвращает null.
String? normalizePhone(String input) {
  final digits = input.replaceAll(RegExp(r'\D'), '');
  if (digits.length == 11 &&
      (digits.startsWith('7') || digits.startsWith('8'))) {
    return '+7${digits.substring(1)}';
  }
  if (digits.length == 10) {
    return '+7$digits';
  }
  return null;
}

import 'package:flutter/material.dart';

import 'phone.dart';

class CallbackForm extends StatefulWidget {
  const CallbackForm({super.key, required this.onSubmit});

  final ValueChanged<String> onSubmit;

  @override
  State<CallbackForm> createState() => _CallbackFormState();
}

class _CallbackFormState extends State<CallbackForm> {
  final _controller = TextEditingController();
  String? _error;

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _submit() {
    final phone = normalizePhone(_controller.text);
    setState(() => _error = phone == null ? 'Проверьте номер телефона' : null);
    if (phone != null) widget.onSubmit(phone);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _controller,
          keyboardType: TextInputType.phone,
          decoration: InputDecoration(labelText: 'Телефон', errorText: _error),
        ),
        FilledButton(onPressed: _submit, child: const Text('Перезвоните мне')),
      ],
    );
  }
}

import 'package:callback_app/phone.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  test('приводит разные записи к +7XXXXXXXXXX', () {
    expect(normalizePhone('8 (701) 123-45-67'), '+77011234567');
    expect(normalizePhone('7011234567'), '+77011234567');
  });

  test('возвращает null для неполного номера', () {
    expect(normalizePhone('701 123'), isNull);
  });
}

import 'package:callback_app/callback_form.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  Future<List<String>> pumpForm(WidgetTester tester) async {
    final sent = <String>[];
    await tester.pumpWidget(
      MaterialApp(
        home: Scaffold(body: CallbackForm(onSubmit: sent.add)),
      ),
    );
    return sent;
  }

  testWidgets('отправляет нормализованный номер', (tester) async {
    final sent = await pumpForm(tester);

    await tester.enterText(find.byType(TextField), '8 701 123 45 67');
    await tester.tap(find.text('Перезвоните мне'));
    await tester.pump();

    expect(sent, ['+77011234567']);
    expect(find.text('Проверьте номер телефона'), findsNothing);
  });

  testWidgets('показывает ошибку для неполного номера', (tester) async {
    final sent = await pumpForm(tester);

    await tester.enterText(find.byType(TextField), '701');
    await tester.tap(find.text('Перезвоните мне'));
    await tester.pump();

    expect(sent, isEmpty);
    expect(find.text('Проверьте номер телефона'), findsOneWidget);
  });
}

$ flutter analyze
No issues found!
$ flutter test
00:01 +4: All tests passed!

appId: kz.example.callback
---
- launchApp:
    clearState: true
- tapOn:
    id: "phone-input"
- inputText: "701"
- tapOn:
    id: "submit-button"
- assertVisible: "Проверьте номер телефона"