fix noCache and add debug

Author: vitalets

package-lock.json

@@ -22,8 +22,8 @@
     "knip": "knip -c knip.config.ts",
     "prettier": "prettier --check --ignore-unknown .",
     "prettier:w": "prettier --write --ignore-unknown .",
-    "test": "rm -rf test/.network-cache && npx playwright test",
-    "test:d": "npm test -- --debug",
+    "test": "npx playwright test",
+    "test:d": "DEBUG=playwright-network-cache npm test",
     "example": "npx playwright test -c example",
     "example:serve": "npx ts-node ./example/src/server",
     "toc": "markdown-toc -i README.md --maxdepth 3",
@@ -33,6 +33,7 @@
   "devDependencies": {
     "@eslint/js": "9.5.0",
     "@playwright/test": "1.44.1",
+    "@types/debug": "4.1.12",
     "@types/mime-types": "2.1.4",
     "@types/node": "^18.15.0",
     "eslint": "8.57.0",
@@ -62,6 +63,7 @@
   "funding": "https://github.com/sponsors/vitalets",
   "license": "MIT",
   "dependencies": {
+    "debug": "4.3.7",
     "mime-types": "2.1.35"
   }
 }

package.json

@@ -5,6 +5,7 @@ const baseURL = 'http://localhost:3000';
 export default defineConfig({
   testDir: 'test',
   fullyParallel: true,
+  globalSetup: './test/global-setup.ts',
   use: {
     baseURL,
     viewport: { width: 800, height: 600 },

playwright.config.ts

@@ -9,6 +9,7 @@ import { BodyFile } from './BodyFile';
 import { SyntheticApiResponse } from './SyntheticApiResponse';
 import { BuildCacheDirArg } from '../CacheRoute/options';
 import { HttpMethod, ResolvedCacheRouteOptions } from '../CacheRoute';
+import { debug } from '../debug';
 
 export class CacheRouteHandler {
   private req: Request;
@@ -23,6 +24,7 @@ export class CacheRouteHandler {
     this.req = route.request();
   }
 
+  // eslint-disable-next-line complexity, max-statements
   async handle() {
     if (!this.isRequestMatched()) {
       await this.route.fallback();
@@ -40,10 +42,14 @@ export class CacheRouteHandler {
     this.buildCacheDir();
     this.storeLastModified();
 
-    const response =
-      forceUpdate || this.isExpired()
-        ? await this.fetchFromServer() // prettier-ignore
-        : await this.fetchFromCache();
+    const useRealRequest = forceUpdate || this.isExpired();
+    const response = useRealRequest
+      ? await this.fetchFromServer() // prettier-ignore
+      : await this.fetchFromCache();
+
+    if (useRealRequest && this.matchHttpStatus(response)) {
+      await this.saveResponse(response);
+    }
 
     await this.fulfillRoute(response);
   }
@@ -62,17 +68,13 @@ export class CacheRouteHandler {
   }
 
   private async fetchFromServer() {
+    debug(`Fetching from server: ${this.req.method()} ${this.req.url()}`);
     const overrides = toFunction(this.options.overrides)(this.req);
-    const response = await this.route.fetch(overrides);
-
-    if (this.matchHttpStatus(response)) {
-      await this.trySaveResponse(response);
-    }
-
-    return response;
+    return this.route.fetch(overrides);
   }
 
   private async fetchFromCache() {
+    debug(`Fetching from cache: ${this.req.method()} ${this.req.url()}`);
     const responseInfo = await new HeadersFile(this.cacheDir).read();
     const bodyFile = new BodyFile(this.cacheDir, responseInfo);
     const body = await bodyFile.read();
@@ -90,7 +92,7 @@ export class CacheRouteHandler {
     return lastModified > this.lastModified;
   }
 
-  private async trySaveResponse(response: APIResponse) {
+  private async saveResponse(response: APIResponse) {
     const responseInfo: ResponseInfo = {
       url: response.url(),
       status: response.status(),
@@ -100,8 +102,11 @@ export class CacheRouteHandler {
     const body = await response.body();
     // file can be updated by another worker
     if (!this.isUpdated()) {
+      debug(`Writing cache: ${this.cacheDir}`);
       new HeadersFile(this.cacheDir).save(responseInfo);
       new BodyFile(this.cacheDir, responseInfo).save(body);
+    } else {
+      debug(`Skip writing cache, updated by another worker: ${this.cacheDir}`);
     }
   }
 

src/CacheRouteHandler/index.ts

@@ -0,0 +1,3 @@
+import createDebug from 'debug';
+
+export const debug = createDebug('playwright-network-cache');

src/debug.ts

@@ -0,0 +1,5 @@
+import fs from 'fs';
+
+export default function clearCacheDir() {
+  fs.rmSync('test/.network-cache', { recursive: true, force: true });
+}