From b8cf1a2d0285622798ef4cb62516c8c9bfd71f5f Mon Sep 17 00:00:00 2001
From: Linda Paiste <lindapaiste@gmail.com>
Date: Wed, 2 Aug 2023 20:48:08 -0500
Subject: [PATCH 1/2] Create unit tests for Toast component.

---
 client/modules/IDE/components/Toast.jsx      |  2 +-
 client/modules/IDE/components/Toast.test.jsx | 54 ++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 client/modules/IDE/components/Toast.test.jsx

diff --git a/client/modules/IDE/components/Toast.jsx b/client/modules/IDE/components/Toast.jsx
index 0f16282220..882d101748 100644
--- a/client/modules/IDE/components/Toast.jsx
+++ b/client/modules/IDE/components/Toast.jsx
@@ -13,7 +13,7 @@ export default function Toast() {
     return null;
   }
   return (
-    <section className="toast">
+    <section className="toast" role="status" aria-live="polite">
       <p>{t(text)}</p>
       <button
         className="toast__close"
diff --git a/client/modules/IDE/components/Toast.test.jsx b/client/modules/IDE/components/Toast.test.jsx
new file mode 100644
index 0000000000..fd92d3633c
--- /dev/null
+++ b/client/modules/IDE/components/Toast.test.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  act,
+  reduxRender,
+  screen,
+  fireEvent,
+  waitFor
+} from '../../../test-utils';
+import { setToastText, showToast } from '../actions/toast';
+import Toast from './Toast';
+
+// TODO: update action calls after reducer refactor is merged.
+
+describe(`Toast`, () => {
+  it('is hidden by default', () => {
+    reduxRender(<Toast />);
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+  });
+
+  it('opens when an action is dispatched', async () => {
+    const { store } = reduxRender(<Toast />);
+    act(() => {
+      store.dispatch(showToast(1500));
+      store.dispatch(setToastText('Toast.SketchSaved'));
+    });
+
+    const toast = screen.queryByRole('status');
+    expect(toast).toBeVisible();
+    expect(toast).toHaveTextContent('Sketch saved.');
+  });
+
+  it('closes automatically after time', async () => {
+    const { store } = reduxRender(<Toast />);
+    act(() => {
+      store.dispatch(showToast(100));
+      store.dispatch(setToastText('Toast.SketchSaved'));
+    });
+
+    expect(screen.queryByRole('status')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    });
+  });
+
+  it('closes when "X" button is pressed', () => {
+    reduxRender(<Toast />, {
+      initialState: { toast: { isVisible: true, text: 'Hello World' } }
+    });
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+  });
+});

From d18d6fdd6f3453c7e740a418f341e466bd05d7a8 Mon Sep 17 00:00:00 2001
From: Linda Paiste <lindapaiste@gmail.com>
Date: Mon, 28 Aug 2023 16:09:40 -0500
Subject: [PATCH 2/2] update showToast action syntax

---
 client/modules/IDE/components/Toast.test.jsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/client/modules/IDE/components/Toast.test.jsx b/client/modules/IDE/components/Toast.test.jsx
index fd92d3633c..f02fa42eae 100644
--- a/client/modules/IDE/components/Toast.test.jsx
+++ b/client/modules/IDE/components/Toast.test.jsx
@@ -6,11 +6,9 @@ import {
   fireEvent,
   waitFor
 } from '../../../test-utils';
-import { setToastText, showToast } from '../actions/toast';
+import { showToast } from '../actions/toast';
 import Toast from './Toast';
 
-// TODO: update action calls after reducer refactor is merged.
-
 describe(`Toast`, () => {
   it('is hidden by default', () => {
     reduxRender(<Toast />);
@@ -20,8 +18,7 @@ describe(`Toast`, () => {
   it('opens when an action is dispatched', async () => {
     const { store } = reduxRender(<Toast />);
     act(() => {
-      store.dispatch(showToast(1500));
-      store.dispatch(setToastText('Toast.SketchSaved'));
+      store.dispatch(showToast('Toast.SketchSaved'));
     });
 
     const toast = screen.queryByRole('status');
@@ -32,8 +29,7 @@ describe(`Toast`, () => {
   it('closes automatically after time', async () => {
     const { store } = reduxRender(<Toast />);
     act(() => {
-      store.dispatch(showToast(100));
-      store.dispatch(setToastText('Toast.SketchSaved'));
+      store.dispatch(showToast('Toast.SketchSaved', 100));
     });
 
     expect(screen.queryByRole('status')).toBeInTheDocument();