Container Queries: Cross-Resolution Testing

Failure to test is why I started to work on ember-container-query.

A few months ago, my team and I introduced ember-fill-up to our apps. It worked well but we noticed something strange. Percy snapshots that were taken at a mobile width would show ember-fill-up using the desktop breakpoint. They didn’t match what we were seeing on our browsers.

For a while, we ignored this issue because our CSS wasn’t great. We performed some tricks with flex and position that could have affected Percy snapshots. Guess what happened when we switched to grid and improved the document flow. We still saw incorrect Percy snapshots.

Continue reading “Container Queries: Cross-Resolution Testing”

CI with GitHub Actions for Ember Apps

Lately I’ve been working on Ember Music, an app that I can use as a playground to test addons and ideas in Ember. When I need to write a blog post, I can reach for this app instead of designing a new one each time. Since the app will grow over time, I wanted to introduce continuous integration (CI) and continuous deployment early.

Heroku Dashboard makes deploying code on GitHub simple. From the Deploy tab, you select GitHub, find your repo, then check “Wait for CI to pass before deploy.”

Heroku makes deploying code on GitHub simple.
Heroku makes deploying code on GitHub simple.

For continuous integration, I tried out GitHub Actions since it is free (there are limits to minutes and storage for private repos) and my code is on GitHub. I also wanted to find an alternative to Codeship Pro that I use for work. One app has about 150 tests, but CI time wildly varies between 3 and 15 minutes. Because ten minutes is how long CI took for a larger app that I had worked on, I haven’t been content.

With GitHub Actions, I was able to make a workflow that did everything I want:

  • Set operating system and Node version
  • Cache ​dependencies (avoid yarn install)
  • Lint files and dependencies
  • Run tests separately from linting
  • Split tests and run in parallel
  • Take Percy snapshots in parallel
  • Be cost effective

In this blog post, I will share my workflow because there is a high chance that you, too, want to solve the problems listed above. Rather than dumping the entire workflow on you, I will start with a simple one and let it organically grow. Throughout, I will assume that you use yarn to manage packages. If you use npm, please check the GitHub Gist at the end to see the differences.

Continue reading “CI with GitHub Actions for Ember Apps”