Having worked for both Playstation and , both with huge numbers of users, there is nothing that scares me more than pushing code with zero tests. I mean, I know I’m good, but my bugs disagree. Pinterest As I started looking into workers, I was really excited about the potential. Faster asset caching, offline mode, and the ability to finally have mobile web native_._ The more I learned, the more I realized that there was no easy way to test service workers, which was scary. A service worker caching bug can cripple your site in an almost invisible way. Best to be careful. service feel Shout out to for writing . The answer to testing service workers was: there is no easy way, but here’s how you CAN. I didn’t like that answer. Matt Gaunt Testing Service Workers So I built a thing. . Service Worker Mock The idea is that you can write your tests as if the tests themselves were being executed within a service worker environment. That means that you can your service worker script, and make assertions against the contents of your cache, the registered listeners, and visible notifications. Super easy, and open-source. Let’s look at how it works. require For each test, we transform the current global context into a service-worker environment. That means that when you require your service worker, variables like and will be available to your script. Notice the ; this is important so that when you require your service worker multiple times in your tests it actually executes the script each time. If you’re not using jest, you should be able to clear the . self addEventListener jest.resetModules() require.cache Now let’s write our first test! The following tests are based off of Google’s . Here we want to test that when ‘activate’ is fired, it clears out old caches. basic service worker example Using this is trivial. All we need to do is execute the service worker (which will add our event listeners), open a cache, and fire the ‘activate’ event. We can use the ServiceWorkerMock global ‘snapshot’ function to check the current contents of the cache. It really doesn’t get much simpler than that. service-worker-mock So what about ? That is the bread and butter of service workers. Caching responses and deciding our strategy for using the cached data for future requests. Testing this is really hard without service-worker-mock. Let’s see what it looks like using the helpers. fetch First we put a response in the cache, then trigger a fetch request. The response should exactly equal the response that we put in the cache. Easy peasy! You’ll want to mock out the method as well, to test when you don’t get a cached response. fetch Overall, I’m pretty happy with how the mock environment turned out. Let’s start writing more tests for service workers! is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising & sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

Facebook

Fetch

Google

PlayStation

Super

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Service Worker Testing Made Easy

Too Long; Didn't Read

Companies Mentioned

Zack Argyle

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Service Worker Testing Made Easy

Too Long; Didn't Read

Companies Mentioned

Zack Argyle

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES