From b834c5b8240513494756a83452067e0fe5730879 Mon Sep 17 00:00:00 2001
From: Julia Nguyen <tojulianguyen@gmail.com>
Date: Sun, 24 Nov 2024 23:46:51 -0800
Subject: [PATCH] Fix issues in Toast component refactor

---
 .../app/components/Toast/__tests__/Toast.spec.jsx | 15 +++------------
 client/app/components/Toast/index.jsx             |  6 +++++-
 client/app/stories/Toast.stories.jsx              |  2 +-
 .../__tests__/Notifications.spec.jsx              | 11 ++++++-----
 .../ToggleLocale/__tests__/ToggleLocale.spec.jsx  |  8 ++++++--
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/client/app/components/Toast/__tests__/Toast.spec.jsx b/client/app/components/Toast/__tests__/Toast.spec.jsx
index 5bf6532999..cc7aa0d7aa 100644
--- a/client/app/components/Toast/__tests__/Toast.spec.jsx
+++ b/client/app/components/Toast/__tests__/Toast.spec.jsx
@@ -9,20 +9,14 @@ describe('Toast', () => {
   describe('Toast Type: Alert', () => {
     it('renders correctly', () => {
       render(
-        <Toast
-          alert="Invalid username or password."
-          appendDashboardClass="true"
-        />,
+        <Toast alert="Invalid username or password." appendDashboardClass />,
       );
       expect(screen).not.toBeNull();
     });
 
     it('closes correctly on button click', () => {
       const { getByRole, container } = render(
-        <Toast
-          alert="Invalid username or password."
-          appendDashboardClass="true"
-        />,
+        <Toast alert="Invalid username or password." appendDashboardClass />,
       );
 
       const toastContent = getByRole('alert');
@@ -35,10 +29,7 @@ describe('Toast', () => {
 
     it('closes automatically after 7 seconds', async () => {
       const { getByRole } = render(
-        <Toast
-          alert="Invalid username or password."
-          appendDashboardClass="true"
-        />,
+        <Toast alert="Invalid username or password." appendDashboardClass />,
       );
 
       const toastContent = getByRole('alert');
diff --git a/client/app/components/Toast/index.jsx b/client/app/components/Toast/index.jsx
index 9402679858..bbcc16eaf6 100644
--- a/client/app/components/Toast/index.jsx
+++ b/client/app/components/Toast/index.jsx
@@ -34,12 +34,16 @@ export const Toast = ({ alert, notice, appendDashboardClass }: Props): Node => {
   };
 
   useEffect(() => {
+    let timer;
     if (showAlert || showNotice) {
-      setTimeout(() => {
+      timer = setTimeout(() => {
         hideNotice();
         hideAlert();
       }, 7000);
     }
+    return () => {
+      clearTimeout(timer);
+    };
   }, [showAlert, showNotice]);
 
   return (
diff --git a/client/app/stories/Toast.stories.jsx b/client/app/stories/Toast.stories.jsx
index b2f23b00f0..d33863c11d 100644
--- a/client/app/stories/Toast.stories.jsx
+++ b/client/app/stories/Toast.stories.jsx
@@ -13,7 +13,7 @@ export const noticeToast = Template.bind({});
 
 noticeToast.args = {
   notice: 'Login successful.',
-  appendDashboardClass: 'true',
+  appendDashboardClass: true,
 };
 noticeToast.storyName = 'Toast Type: Notice';
 
diff --git a/client/app/widgets/Notifications/__tests__/Notifications.spec.jsx b/client/app/widgets/Notifications/__tests__/Notifications.spec.jsx
index df3101e6ff..336636ce57 100644
--- a/client/app/widgets/Notifications/__tests__/Notifications.spec.jsx
+++ b/client/app/widgets/Notifications/__tests__/Notifications.spec.jsx
@@ -10,21 +10,22 @@ const button = <button type="button">Notifications</button>;
 
 describe('Notifications', () => {
   it('gets notifications and clears them', async (done) => {
-    jest
+    const axiosGetSpy = jest
       .spyOn(axios, 'get')
       .mockReturnValueOnce(Promise.resolve({ data: { signed_in: 1 } }))
       .mockReturnValueOnce(
         Promise.resolve({ data: { fetch_notifications: ['Hello'] } }),
-      );
+      )
+      .mockReturnValue(Promise.resolve());
     jest
       .spyOn(axios, 'delete')
       .mockReturnValue(Promise.resolve({ data: { ok: true } }));
     render(<Notifications element={button} />);
-    await waitFor(() => expect(axios.get).toHaveBeenCalledWith('/notifications/signed_in'));
-    await waitFor(() => expect(axios.get).toHaveBeenCalledWith(
+    await waitFor(() => expect(axiosGetSpy).toHaveBeenCalledWith('/notifications/signed_in'));
+    await waitFor(() => expect(axiosGetSpy).toHaveBeenCalledWith(
       '/notifications/fetch_notifications',
     ));
-    expect(axios.get).toHaveBeenCalledTimes(3);
+    expect(axiosGetSpy).toHaveBeenCalledTimes(3);
     expect(screen.getByText('Hello')).toBeInTheDocument();
     fireEvent.click(screen.getByText('Clear'));
     await waitFor(() => {
diff --git a/client/app/widgets/ToggleLocale/__tests__/ToggleLocale.spec.jsx b/client/app/widgets/ToggleLocale/__tests__/ToggleLocale.spec.jsx
index 49d4e73e54..21a4c1da29 100644
--- a/client/app/widgets/ToggleLocale/__tests__/ToggleLocale.spec.jsx
+++ b/client/app/widgets/ToggleLocale/__tests__/ToggleLocale.spec.jsx
@@ -16,14 +16,18 @@ describe('ToggleLocale', () => {
   });
 
   it('does nothing if the previous locale is the same as the selected', async () => {
-    const axiosPostSpy = jest.spyOn(axios, 'post').mockImplementation(() => Promise.resolve());
+    const axiosPostSpy = jest
+      .spyOn(axios, 'post')
+      .mockImplementation(() => Promise.resolve());
     render(component);
     await userEvent.selectOptions(screen.getByRole('combobox'), 'en');
     expect(axiosPostSpy).not.toHaveBeenCalled();
   });
 
   it('sets the locale cookie and makes a post request if the selected locale is different from the previous', async () => {
-    const axiosPostSpy = jest.spyOn(axios, 'post').mockImplementation(() => Promise.resolve());
+    const axiosPostSpy = jest
+      .spyOn(axios, 'post')
+      .mockImplementation(() => Promise.resolve());
     render(component);
     await userEvent.selectOptions(screen.getByRole('combobox'), 'es');
     expect(Cookies.set).toHaveBeenCalledWith('locale', 'es');