In my last blog post we saw how to automate the build process of your React Native library.
Reviewing PRs are an important part of managing Open Source libraries. However, they might require a considerable amount of time & effort from your busy life which means, you need to be as efficient as possible.
My whole toolchain was set up around making the review process as easy as possible. This time we'll create Github Action workflows to make the review process a whole lot simpler.
Every PR raised to the library will have the following checks performed automatically
- Linting & Testing
- Code coverage report
- Deploy preview of the updated storybook docs
- Build a review version of the example mobile app with link to quickly test it
- Send all stories to chromatic to do a visual review
As soon as the PR is sent, you should be able to see the progress of the review workflow ﹣
The above image is from a PR of my rex-state library. Let's look into how we can implement this effectively.
You can find my working review workflow at .github/workflows/review.yml file of my rex-state library.
Triggering the workflow
This workflow will run on all pull requests
name: review
on: pull_request
Linting & Testing
This step is the same as what we did for our build workflow. All the other jobs will run only after Linting & Testing are complete.
lint:
name: lint
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- uses: actions/setup-node@master
with:
node-version: 12.x
- run: npx yarn bootstrap
- run: npx yarn typescript
- run: npx yarn lint
test:
strategy:
matrix:
platform: [ubuntu-latest, macOS-latest]
node: ['12.x']
name: test/node ${{ matrix.node }}/${{ matrix.platform }}
runs-on: ${{ matrix.platform }}
steps:
- uses: actions/checkout@master
- uses: actions/setup-node@master
with:
node-version: ${{ matrix.node }}
- run: npx yarn bootstrap
- run: npx yarn test
Coverage report
Previously on the build step, we used Code Climate to store our test coverage reports. However, on PRs we need a way to quickly check the test coverage for the incoming code.
For this, we can use the romeovs/lcov-reporter-action which will post a nice comment on the PR with the test coverage details. You'd get a report like this following comment ﹣
Add the following configuration for receiving the coverage as a comment ﹣
coverage:
needs: [test, lint]
name: coverage
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- uses: actions/setup-node@master
with:
node-version: 12.x
- run: npx yarn bootstrap
- run: npx yarn test --coverage
- uses: romeovs/lcov-reporter-action@v0.2.16
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
Deploy preview of the updated storybook docs
Since I was using the Netlify Github App, I'm getting the deploy previews out of the box without any kind of additional setup. You can try the Netlify CLI if you want to manually enable deploy previews with Github Actions.
Review Version of the Example App
This is where the power of expo toolchain shines. You can use the expo-cli to publish the app in a separate channel which you can use for your review purpose.
The expo team have also provided detailed documentation on their expo-github-action. Add the following configuration to your workflow (replace the URL in the msg
with your application's URL)﹣
expo-publish:
needs: [test, lint]
name: Publish to Expo 🚀
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: 12.x
- uses: expo/expo-github-action@v5
with:
expo-version: 3.x
expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
- run: npx yarn bootstrap
- run: expo publish --release-channel=pr-${{ github.event.number }}
working-directory: example
- uses: unsplash/comment-on-pr@master
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
msg: App is ready for review, you can [see it here](https://expo.io/@daniakash/rex-state-example?release-channel=pr-${{ github.event.number }}).
From now on, for every PRs you'll get a comment just like this one ﹣
Sending stories to chromatic
Finally to do a visual review if the PR has affected your stories you can send the stories to chromatic. The configuration is the same as our last one, chromatic is smart enough to figure out that the data is from a PR!
chromatic:
needs: [test, lint]
name: Publish storybook to chromatic 🧪
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: 12.x
- run: npx yarn bootstrap
- run: npx yarn chromatic
working-directory: example
env:
CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
Once you have everything ready, Your PRs will now have detailed information on the things you'd otherwise have to check manually every time ﹣
We got a powerful review workflow now. In the next blog post, let's publish the library to NPM every time you create a new release in GitHub!
Top comments (0)