New Features of Detox Demo: CI/CD + Logging + Reports, oh my!

To prepare for the talk I'll be giving to the TestGuild in a few months, since I can't share actual source code of the SELF Mobile app or the automation source code I've written on-the-job, I created a toy project, Detox Demo at https://github.com/tjmaher/detox-demo, a React Native app tested with Wix's Detox + TypeScript. 

It's got reports using Detox's Allure Adapter

It's got GitHub Pages integration at https://tjmaher.github.io/detox-demo/ios/ ! 

It's got logs you can examine! 

It's got CI / CD with GitHub Action workflows, which you can kick off manually by branch, by cron job, or by each time you push code into main! 

And it's got documentation up the wazoo in the README file, since I just don't know how to be brief.

And it's all open-source, so you can examine the source code to see how things were set up. 

DetoxDemo is a working React Native demo app that gives examples of:

• Mobile automation tests written in Detox + TypeScript
• Commonly used test code refactored into Page Objects
• Common methods used by Page Objects refactored into a Base Page
• Log reports published after a test run, written like a manual test plan testers can follow
• Pre-written yarn scripts to build and test stored in a package.json
• detox-allure2-adapter set up in .detoxrc.js and the e2e/jest.config.js
• Allure Reports configured to show historical data
• CI/CD provided by GitHub Action workflow
• A working React Native mobile app for iOS complete with source code
• A detailed README documenting the Project Structure, and all the setup for the tools and technologies of this project, along with listing various historical tidbits.
• Scalable Vector Graphic (SVG) showing the DetoxDemo iPhone desktop icon and a setup script generating various sizes of icons.

Take a look at Detox Demo at https://github.com/tjmaher/detox-demo

NEXT

Detox Demo:

• Part One: DetoxDemo, a vibe-coded React Native app
• Part Two: First Time Vibe Coding? What Could Go Wrong?
• Part Three: Features of Detox Demo: CI/ CD, Logging and Reporting
• Part Four: Using GitHub Action Workflows to kick off tests in CI/ CD
• Part Five:  The Facebook Ecosystem: React, React Native, Metro, and Yarn
• Part Six: How Detox Interacts with Mobile applications
• Part Seven:  Building Blocks and Page Objects
• Part Eight:  Creating Automated Tests
• Part Nine:  Integrating Allure Reports into GitHub Action Workflows
• Source Code:  https://github.com/tjmaher/detox-demo

Happy testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles