download asset corrupted app cache scenario

Author: jancajthaml

bootstrap/scripts/verify-dlls.mjs

@@ -67,4 +67,4 @@ async function checkManifests(pattern) {
 
 await cleanupManifest("bootstrap-prod-manifest.json");
 
-await checkManifests("bootstrap*-manifest.json");
+await checkManifests("bootstrap*-manifest.json");

jest/setupTests.js

@@ -1,4 +1,5 @@
 import matchers from "@testing-library/jest-dom/matchers";
+import "whatwg-fetch";
 
 global.IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -21,19 +22,4 @@ jest.mock("@linaria/core", () => ({
   css: jest.fn(() => ""),
 }));
 
-if (!globalThis.fetch) {
-  globalThis.fetch = jest.fn();
-  globalThis.Request = jest.fn();
-  globalThis.Response = jest.fn();
-}
-
-if (!globalThis.AbortController) {
-  globalThis.AbortController = jest.fn();
-}
-
-if (!globalThis.TextEncoder || !globalThis.TextDecoder) {
-  globalThis.TextEncoder = jest.fn();
-  globalThis.TextDecoder = jest.fn();
-}
-
 globalThis.DEFAULT_LOCALE = "en-US";

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastui/rocker",
-  "version": "0.17.6",
+  "version": "0.18.0",
   "license": "Apache-2.0",
   "author": "[email protected]",
   "homepage": "https://github.com/lastui/rocker#readme",
@@ -134,6 +134,7 @@
     "weak-napi": "2.0.2",
     "webpack": "5.89.0",
     "webpack-dev-server": "4.15.1",
+    "whatwg-fetch": "3.6.19",
     "yargs": "17.7.2"
   },
   "engines": {

package.json

@@ -67,4 +67,4 @@ async function checkManifests(pattern) {
 
 await cleanupManifest("platform-prod-manifest.json");
 
-await checkManifests("platform*-manifest.json");
+await checkManifests("platform*-manifest.json");

platform/scripts/verify-dlls.mjs

@@ -23,14 +23,7 @@ describe("assets registry", () => {
 
   describe("downloadAsset", () => {
     it("happy path", async () => {
-      global.fetch.mockImplementationOnce(async () => ({
-        ok: true,
-        status: 200,
-        text: async () => "data",
-        headers: {
-          get() {},
-        },
-      }));
+      global.fetch.mockImplementationOnce(async () => new Response("data", { status: 200, statusText: "OK" }));
 
       const result = await downloadAsset("/path/data.json");
 
@@ -49,10 +42,7 @@ describe("assets registry", () => {
     });
 
     it("error path", async () => {
-      global.fetch.mockImplementationOnce(async () => ({
-        ok: false,
-        status: 404,
-      }));
+      global.fetch.mockImplementationOnce(async () => new Response(null, { status: 404, statusText: "Not Found" }));
 
       await expect(downloadAsset("/path/data.json")).rejects.toThrow("404");
     });
@@ -118,16 +108,10 @@ describe("assets registry", () => {
     });
 
     it("compiles program", async () => {
-      global.fetch.mockImplementationOnce(async () => ({
-        ok: true,
-        status: 200,
-        text: async () => `!function(){
-          window.__SANDBOX_SCOPE__.component = () => 'main'
-        }();`,
-        headers: {
-          get() {},
-        },
-      }));
+      global.fetch.mockImplementationOnce(
+        async () =>
+          new Response(`!function(){ window.__SANDBOX_SCOPE__.component = () => 'main' }();`, { status: 200, statusText: "OK" }),
+      );
 
       const result = await downloadProgram("my-feature", {
         url: "/service/program.js",
@@ -141,16 +125,9 @@ describe("assets registry", () => {
       spy.mockImplementation(() => {});
       spy.mockClear();
 
-      global.fetch.mockImplementationOnce(async () => ({
-        ok: true,
-        status: 200,
-        text: async () => `
-          window.__SANDBOX_SCOPE__.component = () => 'main';
-        `,
-        headers: {
-          get() {},
-        },
-      }));
+      global.fetch.mockImplementationOnce(
+        async () => new Response(`window.__SANDBOX_SCOPE__.component = () => 'main';`, { status: 200, statusText: "OK" }),
+      );
 
       const result = await downloadProgram("my-feature", {
         url: "/service/program.js",
@@ -166,16 +143,9 @@ describe("assets registry", () => {
       spy.mockImplementation(() => {});
       spy.mockClear();
 
-      global.fetch.mockImplementationOnce(async () => ({
-        ok: true,
-        status: 200,
-        text: async () => `!function(){
-          throw new Error('ouch');
-        }();`,
-        headers: {
-          get() {},
-        },
-      }));
+      global.fetch.mockImplementationOnce(
+        async () => new Response(`!function(){ throw new Error('ouch'); }();`, { status: 200, statusText: "OK" }),
+      );
 
       const result = await downloadProgram("my-feature", {
         url: "/service/program.js",

platform/src/kernel/registry/__tests__/assets.test.js

@@ -127,9 +127,13 @@ function downloadAsset(resource, parentController) {
     /* istanbul ignore next */
     if (response.status === 304) {
       if (currentEtag) {
-        const assetEntry = await resources.match(`${resource}_${currentEtag}`);
-        if (assetEntry) {
-          return assetEntry.clone();
+        try {
+          const assetEntry = await resources.match(`${resource}_${currentEtag}`);
+          if (assetEntry) {
+            return assetEntry.clone();
+          }
+        } catch (error) {
+          /* silence the cache error */
         }
         resources.delete(`${resource}_${currentEtag}`);
       }
@@ -150,12 +154,14 @@ function downloadAsset(resource, parentController) {
       resources.delete(`${resource}_${currentEtag}`);
     }
     const latestEtag = response.headers.get("Etag");
+    const blob = await response.blob();
+    const cleaned = new Response(blob, { status: 200, statusText: "OK" });
     /* istanbul ignore next */
     if (latestEtag) {
-      resources.put(`${resource}_${latestEtag}`, response.clone());
+      resources.put(`${resource}_${latestEtag}`, cleaned.clone());
       etags.put(resource, new Response(latestEtag, { status: 200, statusText: "OK" }));
     }
-    return response;
+    return cleaned;
   }
 
   const request = Promise.race([aborter, fetcher()]).catch((error) => {