From 7337e195d1c44d974c7e5512ee41ba2039b63b24 Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael.cousins@viam.com>
Date: Fri, 2 Aug 2024 07:51:57 -0400
Subject: [PATCH] Test: add `createToastContext` fixture (#550)

---
 packages/core/README.md                     | 44 +++++++++++++++++++--
 packages/core/package.json                  |  6 ++-
 packages/core/src/lib/__fixtures__/index.ts | 40 +++++++++++++++++++
 packages/core/src/lib/toast/context.ts      |  2 +-
 4 files changed, 86 insertions(+), 6 deletions(-)
 create mode 100644 packages/core/src/lib/__fixtures__/index.ts

diff --git a/packages/core/README.md b/packages/core/README.md
index 6134bef6..627f63fc 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -35,7 +35,9 @@ Import the stylesheet. If you are using [SvelteKit][], you can do this in `src/r
 import '@viamrobotics/prime-core/prime.css';
 ```
 
-You can now use the components in your app:
+## Usage
+
+Once installed, you can use the components in your app:
 
 ```html
 <script lang="ts">
@@ -51,6 +53,40 @@ You can now use the components in your app:
 [tailwind]: https://tailwindcss.com/
 [sveltekit]: https://kit.svelte.dev/
 
+### Testing components that use Prime
+
+All Prime components have their own test suites, so in your application tests, you generally only need to test that the component itself is rendered rather than try to test that all the behaviors work - we've already written those tests.
+
+#### Testing toasts
+
+The `useToast` hook requires a Svelte context to render. In order to test a component that issues toasts, you can use the `createNoopToastContext` fixture. Before using this fixture, consider if you can re-structure your components to avoid the need for testing a component wired to `useToast` directly.
+
+```ts
+import { describe, expect, test, vi } from 'vitest';
+import { render } from '@testing-library/svelte';
+
+import { createNoopToastContext } from '@viamrobotics/prime-core/__fixtures__';
+
+import Subject from '../cool-component.svelte';
+
+const toast = vi.fn();
+
+const renderSubject = () => {
+  const toastContext = createNoopToastContext(toast);
+  return render(Subject, {
+    props: { message: 'hello' },
+    context: new Map([toastContext]),
+  });
+};
+
+describe('<CoolComponent>', () => {
+  it('toasts `message` on mount', () => {
+    renderSubject();
+    expect(toast).toHaveBeenCalledWith({ message: 'hello' });
+  });
+});
+```
+
 ## Playground
 
 The playground can be used during development but is not used outside of the package.
@@ -157,9 +193,9 @@ For easier readability, we try to use a standard ordering for component composit
 
 <!-- Your layout -->
 <div class="border-black">
-  <!-- 
-    all slots should be named if there are multiple; otherwise a single slot 
-    can be the default `<slot />`  
+  <!--
+    all slots should be named if there are multiple; otherwise a single slot
+    can be the default `<slot />`
   -->
   <slot name="title" />
   <slot name="content" />
diff --git a/packages/core/package.json b/packages/core/package.json
index 01d614ac..5a35cb8b 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.138",
+  "version": "0.0.139",
   "publishConfig": {
     "access": "public"
   },
@@ -24,6 +24,10 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
+    "./__fixtures__": {
+      "types": "./dist/__fixtures__/index.d.ts",
+      "svelte": "./dist/__fixtures__/index.js"
+    },
     "./prime.css": "./prime.css",
     "./plugins": "./plugins.ts",
     "./theme": "./theme.ts"
diff --git a/packages/core/src/lib/__fixtures__/index.ts b/packages/core/src/lib/__fixtures__/index.ts
new file mode 100644
index 00000000..4d5fe479
--- /dev/null
+++ b/packages/core/src/lib/__fixtures__/index.ts
@@ -0,0 +1,40 @@
+/** prime-core test fixtures. */
+import { readable, writable } from 'svelte/store';
+import { noop } from 'lodash-es';
+
+// NOTE: imported directly from `$lib/toast/context` to avoid
+// exporting implementation details in `$lib/toast/index`
+import {
+  ToastContextKey,
+  type ToastContext,
+  type Toast,
+} from '$lib/toast/context';
+
+/**
+ * Create a no-op toast context.
+ *
+ * @param toast - The `toast` function to return from `useToast` (defaults to `noop`)
+ *
+ * @example
+ * ```ts
+ * import { vi } from 'vitest';
+ * import { render } from '@testing-library/svelte';
+ *
+ * import { createNoopToastContext } from '@viamrobotics/prime-core/__fixtures__';
+ *
+ * import Subject from '../cool-component.svelte';
+ *
+ * const toast = vi.fn();
+ * const renderSubject = () => {
+ *   const toastContext = createNoopToastContext(toast)
+ *   return render(Subject, { props: {}, context: new Map([toastContext]) });
+ * }
+ * ```
+ */
+export const createNoopToastContext = (toast?: Toast): [unknown, unknown] => [
+  ToastContextKey,
+  {
+    state: { toasts: readable([]), pageIsVisible: writable(false) },
+    toast: toast ?? noop,
+  } satisfies ToastContext,
+];
diff --git a/packages/core/src/lib/toast/context.ts b/packages/core/src/lib/toast/context.ts
index 444fc95a..a3375b7a 100644
--- a/packages/core/src/lib/toast/context.ts
+++ b/packages/core/src/lib/toast/context.ts
@@ -42,7 +42,7 @@ export interface ToastElement {
   dismiss: () => void;
 }
 
-const ToastContextKey = Symbol('toast-context');
+export const ToastContextKey = Symbol('toast-context');
 const ToastDuration = 4000;
 
 /** Create the internal toast state and context object. */