feat(pie-toast-provider): DSW-2222 add tests

apps/pie-docs/src/components/toast/overview/priority-queue.json

@@ -18,7 +18,7 @@
     ],
     [
       "4",
-      "Positive - actionable"
+      "Success - actionable"
     ],
     [
       "5",
@@ -34,7 +34,7 @@
     ],
     [
       "8",
-      "Positive"
+      "Success"
     ],
     [
       "9",

apps/pie-storybook/stories/pie-toast-provider.stories.ts

@@ -11,14 +11,6 @@ import { createStory } from '../utilities';
 
 type ToastProviderStoryMeta = Meta<ToastProviderProps>;
 
-const onQueueUpdate = (event: CustomEvent) => {
-    action('pie-toast-provider-queue-update')(event.detail);
-
-    const queueLengthTag = document.querySelector('#queue-length-tag') as HTMLElement;
-    if (queueLengthTag) {
-        queueLengthTag.textContent = `Toast Queue Length: ${event.detail.length}`;
-    }
-};
 const defaultArgs: ToastProviderProps = {
     ...defaultProps,
     options: {
@@ -35,7 +27,7 @@ const toastProviderStoryMeta: ToastProviderStoryMeta = {
     component: 'pie-toast-provider',
     argTypes: {
         options: {
-            description: 'Global options to configure default toast behavior.',
+            description: 'Default options for all toasts; accepts all toast props.',
             control: 'object',
             defaultValue: {
                 summary: defaultProps.options,
@@ -53,7 +45,15 @@ const toastProviderStoryMeta: ToastProviderStoryMeta = {
 
 export default toastProviderStoryMeta;
 
-const Template = ({ options }: ToastProviderProps) => html`
+const Template = ({ options }: ToastProviderProps) => {
+    const onQueueUpdate = (event: CustomEvent) => {
+        const queueLength = document.querySelector('#queue-length-tag') as HTMLElement;
+        if (queueLength) {
+            queueLength.textContent = `Toast Queue Length: ${event.detail.length}`;
+        }
+    };
+
+    return html`
     <pie-toast-provider 
         .options=${options} 
         @pie-toast-provider-queue-update=${onQueueUpdate}>
@@ -66,57 +66,64 @@ const Template = ({ options }: ToastProviderProps) => html`
     <div style="margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap;">
         <pie-button 
             @click=${() => {
-    toaster.create({
-        message: 'Low Priority Info Toast',
-        variant: 'info',
-        duration: null,
-        leadingAction: {
-            text: 'Confirm',
-        },
-    });
-}}>
+        toaster.create({
+            message: 'Low Priority Info',
+            variant: 'info',
+        });
+    }}>
             Trigger Info Toast (Low Priority)
         </pie-button>
 
         <pie-button
             @click=${() => {
-    toaster.create({
-        message: 'Medium Priority Warning Toast',
-        variant: 'warning',
-    });
-}}>
+        toaster.create({
+            message: 'Medium Priority Warning Toast',
+            variant: 'warning',
+        });
+    }}>
             Trigger Warning Toast (Medium Priority)
         </pie-button>
 
         <pie-button
             @click=${() => {
-    toaster.create({
-        message: 'High Priority Error Toast',
-        variant: 'error',
-    });
-}}>
+        toaster.create({
+            message: 'High Priority Error Toast',
+            variant: 'error',
+        });
+    }}>
             Trigger Error Toast (High Priority)
         </pie-button>
 
         <pie-button
             @click=${() => {
-    toaster.create({
-        message: 'Actionable Info Toast',
-        variant: 'info',
-        leadingAction: { text: 'Retry' },
-    });
-}}>
+        toaster.create({
+            message: 'Actionable Info Toast',
+            variant: 'info',
+            leadingAction: { text: 'Retry' },
+        });
+    }}>
             Trigger Actionable Info Toast
         </pie-button>
 
+        <pie-button
+            @click=${() => {
+        toaster.create({
+            message: 'Persistent Toast',
+            duration: null,
+        });
+    }}>
+            Trigger Persistent Toast
+        </pie-button>
+
         <pie-button
             variant="secondary"
             @click=${() => {
-    toaster.clearAll();
-}}>
+        toaster.clearAll();
+    }}>
             Clear All Toasts
         </pie-button>
     </div>
 `;
+};
 
 export const Default = createStory<ToastProviderProps>(Template, defaultArgs)();

packages/components/pie-toast-provider/src/defs.ts

@@ -1,48 +1,52 @@
 import { type ToastProps } from '@justeattakeaway/pie-toast';
 
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
 export const PRIORITY_ORDER: { [x: string]: number } = {
     'error-actionable': 1,
     error: 2,
     'warning-actionable': 3,
-    'positive-actionable': 4,
+    'success-actionable': 4,
     'info-actionable': 5,
     'neutral-actionable': 6,
     warning: 7,
-    positive: 8,
+    success: 8,
     info: 9,
     neutral: 10,
 };
 
 export interface ExtendedToastProps extends ToastProps {
     /**
-     * Callback for when the toast is closed.
+     * Triggered when the user interacts with the close icon or when the toast auto dismiss.
      */
     onPieToastClose?: () => void;
 
     /**
-     * Callback for when the toast is opened.
+     * Triggered when the toast is opened.
      */
     onPieToastOpen?: () => void;
 
     /**
-     * Callback for when the leading action is clicked.
+     * Triggered when the user interacts with the leading action.
      */
     onPieToastLeadingActionClick?: (event: Event) => void;
 }
 
 export interface ToastProviderProps {
     /**
-     * Default options for all toasts.
+     * Default options for all toasts; accepts all toast props.
      */
     options?: Partial<ExtendedToastProps>;
 }
 
-export const defaultProps: ToastProviderProps = {
+export type DefaultProps = ComponentDefaultProps<ToastProviderProps>;
+
+export const defaultProps: DefaultProps = {
     options: {},
 };
 
 /**
- * Event name for when the chip is closed.
+ * Event name for when the toast provider queue is updated.
  *
  * @constant
  */

packages/components/pie-toast-provider/src/index.ts

@@ -12,6 +12,7 @@ import {
     defineCustomElement,
     dispatchCustomEvent,
 } from '@justeattakeaway/pie-webc-core';
+import '@justeattakeaway/pie-toast';
 import styles from './toast-provider.scss?inline';
 import {
     defaultProps,
@@ -23,6 +24,7 @@ import {
 
 // Valid values available to consumers
 export * from './defs';
+export { toaster } from './toaster';
 
 const componentSelector = 'pie-toast-provider';
 
@@ -118,7 +120,7 @@ export class PieToastProvider extends RtlMixin(LitElement) implements ToastProvi
       const { _currentToast, _dismissToast } = this;
 
       return html`
-      <div class="c-toast-provider">
+      <div class="c-toast-provider" data-test-id="pie-toast-provider">
       ${_currentToast
           ? html`
               <pie-toast
@@ -151,31 +153,3 @@ declare global {
   }
 }
 
-/**
- * Singleton toaster interface for global access.
- */
-export const toaster = {
-    _getToastProvider (): PieToastProvider | null {
-        const toastProvider = document.querySelector(componentSelector) as PieToastProvider;
-
-        if (!toastProvider) {
-            console.error('ToastProvider is not initialized.');
-            return null;
-        }
-
-        return toastProvider;
-    },
-    create (toast: ExtendedToastProps) {
-        const toastProvider = this._getToastProvider();
-        if (!toastProvider) return;
-
-        toastProvider.createToast(toast);
-    },
-    clearAll () {
-        const toastProvider = this._getToastProvider();
-        if (!toastProvider) return;
-
-        toastProvider.clearToasts();
-    },
-};
-

packages/components/pie-toast-provider/src/toaster.ts

@@ -0,0 +1,30 @@
+import { type PieToastProvider } from './index';
+import { type ExtendedToastProps } from './defs';
+
+/**
+ * Singleton toaster interface for global access.
+ */
+export const toaster = {
+    _getToastProvider (): PieToastProvider | null {
+        const toastProvider = document.querySelector('pie-toast-provider') as PieToastProvider;
+
+        if (!toastProvider) {
+            console.error('ToastProvider is not initialized.');
+            return null;
+        }
+
+        return toastProvider;
+    },
+    create (toast: ExtendedToastProps) {
+        const toastProvider = this._getToastProvider();
+        if (!toastProvider) return;
+
+        toastProvider.createToast(toast);
+    },
+    clearAll () {
+        const toastProvider = this._getToastProvider();
+        if (!toastProvider) return;
+
+        toastProvider.clearToasts();
+    },
+};