Fix issues in Toast component refactor

ifmeorg · Nov 25, 2024 · b834c5b · b834c5b
1 parent 163314f
commit b834c5b
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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');