ezCater logoCustomer story

ezCater helps businesses order food from over 100,000 restaurants using Chromatic

ezCater is the leading food-for-work technology company in the United States, connecting anyone who needs food for their workplace to over 100,000 restaurants. ezCater’s services include solutions for everything from recurring employee meals to one-off meetings while enabling companies to manage all their food spending in a single, customizable platform.

The frontend application that drives ezCater’s digital product is as delicious as its meals. Read on to learn how ezCater maintains and guarantees code quality on every new change.

100,000+
Caterers
1,000+
Stories
5
Projects on Chromatic
Noranda Brown
Senior Software Engineer at ezCater

Challenge

In the past, ezCater’s dev team depended on a mix of functional tests to catch bugs before they reached production.

However, over time, ezCater’s developers found their tests were returning false positives. In particular, they realized that even though their tests passed (using Jest and React Testing Library), buggy UI was getting missed and still getting shipped. If you can’t rely on your tests, then what use are they?

Two of ezCater's Storybooks

You eat (and test) with your eyes

Ask any chef worth their salt (literally), and they’ll tell you that a significant factor in judging the quality of a meal is its appearance.

The same holds true in software testing. Functional tests don’t give you the coverage you need to catch visual bugs in UI because they aren’t designed to test the pixels that get rendered. UI can technically work but still look terrible. For most non-technical users, the UI is one of the leading indicators of application quality.

For ezCater, this is where visual testing (aka visual regression testing) came in. Visual testing is a specialized type of non-functional test that focuses on validating how UI appears, rather than solely focusing on logic and behavior.

Visual tests, performed by visual testing tools like Chromatic, use a process of pixel comparison. These tests compare a snapshot of application UI after code changes (at any scale of composition) against a previously accepted snapshot of the same UI (a test baseline). Visual testing tools can then highlight and diff any pixel changes that the new code introduces.

“Visual testing is a no-brainer, and Chromatic solved all these issues for us. On top of making it a lot easier to write tests, it also made our testing a lot more comprehensive. I’ve pushed up a lot of code that I thought was ready for review, only to have Chromatic notify me of an inadvertent change that affected another component. I was able to fix these issues before any code was merged.”
Noranda Brown
Noranda Brown
Senior Software Engineer at ezCater

Combine visual and functional testing

We built Chromatic as a visual testing tool that integrates with Storybook, Playwright, and Cypress, to bring you specialized visual test coverage alongside your functional tests.

By introducing Chromatic to their test suite, ezCater’s developers were able to test every code change for functional and visual correctness.

Chromatic's integration with Storybook enabled the ezCater team to perform visual tests across all states of their application's UI (isolated as stories), ensuring full visual coverage on every commit.

“Chromatic helps simplify testing, especially for components that just deal with UI elements. Plus, there are benefits and perks to built-in regression testing and being able to use the story approach to show different versions of the same component easily.”
Phillip Michalowski
Phillip Michalowski
Senior Software Engineer at ezCater

Additionally, ezCater was also able to use Chromatic & Storybook's component testing (interaction tests) to perform functional tests in a way that was faster and clearer than using tools like Jest. They created bespoke interaction tests to simulate real user flows, testing and validating user behavior in a dynamic yet straightforward way.

“Love being able to see the tests play out visually rather than just in the console. Also, I think interaction tests are faster and easier to write.”
Royce Threadgill
Royce Threadgill
Contractor at ezCater

Discover Chromatic

With Storybook and Chromatic, ezCater removed the guesswork from reviewing UI changes. This is more important than ever in enterprises where teams frequently contribute code.

“Visual testing provides a way for us to prevent regressions as our company grows. As new teams start introducing code into our marketplace app it becomes crucial that unintended changes get caught without having one team becoming the gatekeeper of all changes. With visual regression testing, we can ensure the bits of our application that we care about do not change unless we intend for them to change!”
Peter Grippi
Peter Grippi
Staff Software Engineer at ezCater

Functional UI tests are great for checking if your app works, but they can't catch visual bugs. Chromatic solves this by letting you visually test your UI. By combining it with Storybook's interaction tests, you can test the functionality and appearance of your UI at the same time.

If this sounds like an outcome your team could also benefit from, try Chromatic for free or contact our sales team to learn more.