From e1c602099736c9c8055611fdc14f4e17973ff511 Mon Sep 17 00:00:00 2001
From: Aaron Klinker <aaronklinker1@gmail.com>
Date: Wed, 28 Feb 2024 11:17:20 -0600
Subject: [PATCH] docs: Add testing example for `ContentScriptContext`

Apart of #491
---
 .../content-scripts/content-script-context.ts | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/client/content-scripts/content-script-context.ts b/src/client/content-scripts/content-script-context.ts
index 9233113e..fca93cb4 100644
--- a/src/client/content-scripts/content-script-context.ts
+++ b/src/client/content-scripts/content-script-context.ts
@@ -10,6 +10,29 @@ import { createLocationWatcher } from './location-watcher';
  *
  * It also provides several utilities like `ctx.setTimeout` and `ctx.setInterval` that should be used in
  * content scripts instead of `window.setTimeout` or `window.setInterval`.
+ *
+ * To create context for testing, you can use the class's constructor:
+ *
+ * ```ts
+ * import { ContentScriptContext } from 'wxt/client';
+ *
+ * test("storage listener should be removed when context is invalidated", () => {
+ *   const ctx = new ContentScriptContext('test');
+ *   const item = storage.defineItem("local:count", { defaultValue: 0 });
+ *   const watcher = vi.fn();
+ *
+ *   const unwatch = item.watch(watcher);
+ *   ctx.onInvalidated(unwatch); // Listen for invalidate here
+ *
+ *   await item.setValue(1);
+ *   expect(watcher).toBeCalledTimes(1);
+ *   expect(watcher).toBeCalledWith(1, 0);
+ *
+ *   ctx.notifyInvalidated(); // Use this function to invalidate the context
+ *   await item.setValue(2);
+ *   expect(watcher).toBeCalledTimes(1);
+ * });
+ * ```
  */
 export class ContentScriptContext implements AbortController {
   private static SCRIPT_STARTED_MESSAGE_TYPE = 'wxt:content-script-started';