Support new Cache API

[tiarebalbi]

🚀 Feature Proposal

Support the Cache API in the same way localStorage is supported. One of the ways to access it would be window.caches.

Note: this is an experimental API but I think right now would be a good moment to start review and prepare the changes to support it.

• https://developer.mozilla.org/en-US/docs/Web/API/Cache
• https://googlechrome.github.io/samples/service-worker/window-caches

Motivation

Be able to test classes using the Cache API without have to mock all methods.

Example

Code to be tested:

export class CacheAPI {
  #cacheKey = 'container-key';

  async get(request: RequestInfo): Promise<Response> {
    const cache = await caches.open(this.#cacheKey);

    await cache.add(request);
    return await cache.match(request);
  }
}

Test:

describe('CacheAPI', () => {
  const api = new CacheAPI();

  describe('get', () => {
    it('should be able to execute get request', async () => {
      const scope = nock('http://site.com')
        .defaultReplyHeaders({ 'access-control-allow-origin': '*' })
        .get('/sample')
        .reply(200);

      const response = await api.get('http://site.com/sample');

      expect(response.status).toBe(200);
      expect(scope.isDone()).toBeTruthy();
    });

    it('should throw an error if the request fails', async () => {
      const scope = nock('http://site.com')
        .defaultReplyHeaders({ 'access-control-allow-origin': '*' })
        .get('/sample')
        .reply(500);

      try {
        await api.get('http://site.com/sample');
      } catch (err) {
        expect(err.message).toBe('Internal server error');
      }

      expect(scope.isDone()).toBeTruthy();
    });
  });
});

Right now if I try to run this test the error that I receive is:

ReferenceError: caches is not defined

      at CacheAPI._callee$ (src/service/CacheAPI.js:239:17)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:288:22)
      at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:114:21)
      at asyncGeneratorStep (src/service/CacheAPI.js:192:130)
      at _next (src/service/CacheAPI.js:194:194)
      at src/service/CacheAPI.js:194:364
      at CacheAPI.<anonymous> (src/service/CacheAPI.js:194:97)
      at CacheAPI.get (src/service/CacheAPI.js:294:21)

Pitch

ServiceWorks usage has increased and this feature will help everyone who are looking to test their online/offline api calls...

• https://www.youtube.com/watch?v=jVfXiv03y5c

[thymikee]

This is a request to jsdom, Jest is DOM-independent. Please move this issue there. Also please note that we're also stuck on older version of jsdom because it drops older Node version pretty fast – and we don't. You can use a custom jsdom environment though where you can use whichever version you prefer (see this for example: https://github.com/dmnsgn/jest-environment-jsdom-latest).

[SimenB]

There is https://github.com/theneva/jest-environment-jsdom-twelve and https://github.com/theneva/jest-environment-jsdom-thirteen which are updated

[thymikee]

Oh man, I was looking for *-jsdom-12 and couldn't find it 🤦‍♂️
Thanks for posting links!

[SimenB]

npm apparently refused the digits one as their algorithms picked it up as spam packages...

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.