feat(Toast): Expose dismissToast function

packages/react-component-library/src/components/Toast/Toast.stories.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react'
 import { Meta, StoryFn } from '@storybook/react'
 
-import { TOAST_APPEARANCE, Toast, ToastProps, showToast } from '.'
+import { TOAST_APPEARANCE, Toast, ToastProps, showToast, dismissToast } from '.'
 import { Button } from '../Button'
+import { Group } from '../Group'
 
 export default {
   component: Toast,
@@ -31,13 +32,22 @@ const ToastButton = (props: ToastProps) => {
   return (
     <div style={{ minHeight: '10rem' }}>
       <Toast {...props} />
-      <Button
-        onClick={(_: React.FormEvent<HTMLButtonElement>) => {
-          showToast({ label: 'another', message: DESCRIPTION })
-        }}
-      >
-        Show Toast
-      </Button>
+      <Group gap="6">
+        <Button
+          onClick={(_: React.FormEvent<HTMLButtonElement>) => {
+            showToast({ label: 'Another Toast', message: DESCRIPTION })
+          }}
+        >
+          Show Toast
+        </Button>
+        <Button
+          onClick={(_: React.FormEvent<HTMLButtonElement>) => {
+            dismissToast()
+          }}
+        >
+          Dismiss All Toasts
+        </Button>
+      </Group>
     </div>
   )
 }

packages/react-component-library/src/components/Toast/Toast.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { color } from '@royalnavy/design-tokens'
-import { render, screen, waitFor, within } from '@testing-library/react'
+import { render, screen, within, waitFor } from '@testing-library/react'
 
-import { TOAST_APPEARANCE, Toast, showToast } from '.'
+import { TOAST_APPEARANCE, Toast, dismissToast, showToast } from '.'
 
 const LABEL = 'Example label'
 const MESSAGE = 'This is an example toast message'
@@ -19,12 +19,20 @@ function setup() {
 
 /* Added this function to resolve an issue when running tests for
  * the whole of this file and more than one toast is shown */
-async function getLastToast(lastToastLabel: string) {
-  await waitFor(() => {
-    expect(screen.getByText(lastToastLabel)).toBeInTheDocument()
-  })
-
-  return screen.getAllByRole('status')[0]
+async function getLastToast(label?: string) {
+  try {
+    const toasts = await screen.findAllByRole('status', {
+      name: label ? new RegExp(label, 'i') : undefined,
+    })
+
+    return toasts[0]
+  } catch (error) {
+    if (error instanceof Error && error.message.includes('Unable to find')) {
+      return null
+    }
+
+    throw error
+  }
 }
 
 it('renders the toast', async () => {
@@ -41,11 +49,11 @@ it('renders the toast', async () => {
   const contentId = screen.getByText(MESSAGE).getAttribute('id')
   expect(lastToast).toHaveAttribute('aria-describedby', contentId)
 
-  expect(within(lastToast).getByTestId('icon')).toHaveAttribute(
+  expect(within(lastToast!).getByTestId('icon')).toHaveAttribute(
     'aria-hidden',
     'true'
   )
-  expect(within(lastToast).getByTestId('icon')).toHaveStyle({
+  expect(within(lastToast!).getByTestId('icon')).toHaveStyle({
     color: color('action', '500'),
   })
 
@@ -66,9 +74,9 @@ it('sets new props when `showToast` is called with new props', async () => {
 
   const lastToast = await getLastToast(expectedNewLabel)
 
-  expect(within(lastToast).getByText(expectedNewLabel)).toBeInTheDocument()
-  expect(within(lastToast).getByText(expectedNewMessage)).toBeInTheDocument()
-  expect(within(lastToast).getByTestId('icon')).toHaveStyle({
+  expect(within(lastToast!).getByText(expectedNewLabel)).toBeInTheDocument()
+  expect(within(lastToast!).getByText(expectedNewMessage)).toBeInTheDocument()
+  expect(within(lastToast!).getByTestId('icon')).toHaveStyle({
     color: color('danger', '500'),
   })
 })
@@ -91,8 +99,8 @@ it('sets the message when the message is JSX', async () => {
 
   const lastToast = await getLastToast(expectedNewLabel)
 
-  expect(within(lastToast).getByText(expectedNewLabel)).toBeInTheDocument()
-  expect(within(lastToast).getAllByRole('paragraph')).toHaveLength(2)
+  expect(within(lastToast!).getByText(expectedNewLabel)).toBeInTheDocument()
+  expect(within(lastToast!).getAllByRole('paragraph')).toHaveLength(2)
 })
 
 it('sets unique IDs when there are multiple toasts', async () => {
@@ -121,3 +129,18 @@ it('sets an accessible name when there is no message', async () => {
 
   expect(toast).toHaveAccessibleName(new RegExp(label))
 })
+
+it('dismisses all toasts when `dismissToast` is called', async () => {
+  setup()
+
+  showToast(MESSAGE)
+  showToast(MESSAGE)
+
+  expect(screen.queryAllByRole('status').length).toBeGreaterThan(0)
+
+  dismissToast()
+
+  await waitFor(() => {
+    expect(screen.queryAllByRole('status')).toHaveLength(0)
+  })
+})

packages/react-component-library/src/components/Toast/Toast.tsx

@@ -183,3 +183,7 @@ export const showToast = (
     })
   }
 }
+
+export const dismissToast = (id?: string) => {
+  toast.dismiss(id)
+}