React Native QA process

How to test a BAgel React Native component before it is released. The manual pass runs in the bagel-qa-react-native app. Shared rules, including WCAG and how to write a Given–When–Then case, live on the Web QA process.

Engineers build and review a component in Storybook, in the bagel-react-native repository. That workflow is on React Native getting started. Screen sizes and the system settings for the checks below are on Devices and settings.

Where to test

Install a development or preview build of bagel-qa-react-native, then repeat the pass on a simulator or emulator and on a physical device. Expo Go cannot load the fonts and native modules this app uses. Jest and React Native Testing Library cover unit tests in the library. This page is the manual pass.

QA app

From the bagel-qa-react-native repository, with a GitHub token that can read packages:

npm install: Installs the app and the published @britishairways-ent/bagel-react-native package.
npx expo run:ios: Builds and opens the app in the iOS Simulator.
npx expo run:android: Builds and opens the app in the Android Emulator.
npx expo start --dev-client: Starts Metro when a development build is already installed. Open that build.

JDK, Android SDK, and token setup are in the repository README. The home screen shows the installed library version and the components that have a fixture. Open a component from that list. Its screens hold the cases for the topics below, and those cases link back to this page. Deep links use the bagel-qa-react-native:// scheme.

Maestro flows in maestro/ smoke-test fixture screens. With a development build installed and Metro running, run maestro test maestro/.

Simulator and emulator

Use the iOS Simulator and the Android Emulator to cover the device matrix, VoiceOver, TalkBack, and the system settings on that page. Run the QA app on each device.

A physical device

Use hardware for anything a simulator smooths over: a real finger on the control, the system text size, an external keyboard, screen brightness, performance, and the hinge on a foldable. The ideal devices to test are listed on Devices and settings.

Run on an iOS device

Connect the iPhone or iPad with a cable. Unlock it and tap Trust.
On iOS 16 and newer, turn on Developer Mode under Settings, Privacy & Security. The device restarts.
From the repository, run npx expo run:ios --device and choose that device.
The first build signs the app. If Xcode asks for a team, open the ios project, select the app target, and set a development team under Signing & Capabilities.

Run on an Android device

On the phone or tablet, turn on Developer options. In Settings, About phone, tap Build number until developer mode turns on.
Turn on USB debugging under Settings, System, Developer options. The menu name varies by version.
Connect the device with a cable and allow USB debugging when the prompt appears.
From the repository, run npx expo run:android --device and choose that device.

Open the component's fixture in the QA app. Test with VoiceOver on iOS and TalkBack on Android, on a simulator or emulator and again on a physical device.

Turn on VoiceOver

Open Settings.
Tap Accessibility.
Tap VoiceOver and turn it on.

On a device you can also triple-click the side button when that shortcut is set. In the simulator, swipe by dragging, and double-tap to activate.

Turn on TalkBack

Open Settings.
Tap Accessibility.
Tap TalkBack and turn it on.

The menu name varies by Android version. An emulator needs the Android Accessibility Suite installed before TalkBack appears. Swipe right and left to move, and double-tap to activate.

What to listen for

Name and role: The accessible name matches the visible label, and the role matches the control.
State: A loading or busy state is announced when the component has one.
Activate: Double-tap runs a control that can be activated, and leaves a control that cannot.
Order: Swipe through the fixture. Every interactive control is reached once, in an order that matches the layout.

The written case is on the component's fixture. Given–When–Then, including I SEE and I HEAR, is explained on the Web QA process.

Focus and keyboard

Check two orders against the layout of the fixture:

Screen reader: Swipe through with VoiceOver and with TalkBack. Every interactive control is reached once, in an order that matches the layout.
Hardware keyboard: Connect a keyboard and press Tab. Focus lands on each interactive control in that same order, and the focused control is visible.

Responsive design

Open the component's fixture on a phone and on a tablet, including with the device rotated. Widths, breakpoints, and the devices to use are on Devices and settings. The QA app fills the device it is running on, so change the simulator, the emulator, or turn the device to move between rows.

Visible and usable: The component stays on screen and stays easy to use. Text stays readable and does not overlap.
Scroll: The screen scrolls when content would otherwise be clipped. Content that starts off screen scrolls into view.
Breakpoints: Phones, including both fold covers, sit in 320vw. A different layout starts at 480. Tablet portrait reaches 800vw, and tablet landscape reaches 1024vw.

Reduced motion

Turn on Reduce Motion, then exercise anything that moves in the component's fixture. Turn it off and confirm the motion returns. The Settings path is on Devices and settings.

Reduce Motion on: Animation that can cause discomfort stops. The component stays understandable without it.
Reduce Motion off: The motion returns.

High contrast mode

Turn on Increase Contrast on iOS, or High contrast text on Android, then open the component's fixture. A component that supports the setting includes that case. The Settings path is on Devices and settings.

Readable: Text, icons, and controls stay readable and distinguishable from their background.
Colour: The component stays understandable without relying on colour alone.
Setting off: Turn the setting off and confirm the component returns to its usual appearance.

Parent and child elements

Open the fixture where the component sits inside the parents it is designed to be used with.

Content: Labels and other content stay readable inside the parent.
Screen reader: VoiceOver and TalkBack still announce the component's name and role.
Activate: Interactive parts can still be reached and activated.

Long text

Open the fixture that uses a long label, and repeat the check at the largest system text size. How to raise text size is on Devices and settings.

Layout: The layout stays intact. Text wraps or remains fully readable in the way the component is designed to. No text is cut off unexpectedly.
Use: The control stays easy to use.

Open the component's fixture. Change the system text size from smaller than the default through to the largest size, then set it back to the default. On iOS this is Larger Text, under Settings, Accessibility, Display & Text Size. On Android this is Font size. The same path is on Devices and settings.

Follows the system size: Text follows the system text size as it decreases and increases. At the default size again, it returns to its usual size.
Smaller than the default: Text stays readable and controls stay easy to use.
Largest size: Text stays on screen and is not cut off. Controls stay easy to use. Content that no longer fits can still be reached by scrolling.
Bold Text: With Bold Text on as well, labels stay readable and controls stay easy to use.