Addressing review feedbacks

assets/js/common/DismissableToast/DismissableToast.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { toast } from 'react-hot-toast';
 
-function DismissableToast({ text, toastInstance }) {
+function DismissableToast({ text, toastID }) {
   return (
     <div className="flex space-x-4">
       <p className="text-sm font-medium text-gray-900">{text}</p>
       <button
         type="button"
         className="text-jungle-green-500"
-        onClick={() => toast.dismiss(toastInstance.id)}
+        onClick={() => toast.dismiss(toastID)}
       >
         Close
       </button>

assets/js/common/DismissableToast/DismissableToast.test.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { toast } from 'react-hot-toast';
+import { screen, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+
+import DismissableToast from '.';
+
+describe('DismissableToast component', () => {
+  afterEach(() => {
+    // restore the spy created with spyOn
+    jest.restoreAllMocks();
+  });
+
+  it('renders the text and forward the onclick event with the provided prop id', async () => {
+    const spy = jest.spyOn(toast, 'dismiss');
+    const toastID = 'toast-1';
+    const user = userEvent.setup();
+
+    render(<DismissableToast text="test" id={toastID} />);
+
+    expect(screen.getByText('test')).toBeVisible();
+    await user.click(screen.getByText('Close'));
+
+    expect(spy).toHaveBeenCalled();
+  });
+});

assets/js/state/sagas/notifications.jsx

@@ -9,29 +9,31 @@ import {
 } from '@state/notifications';
 import DismissableToast from '@common/DismissableToast';
 
+const DEFAULT_DURATION = 4000;
+
 export function* notification({ payload }) {
-  const { text, icon, id, duration } = payload;
+  const { id, text, icon, duration } = payload;
   toast(<p className="text-sm font-medium text-gray-900">{text}</p>, {
     position: 'top-right',
     icon,
     id,
-    duration: duration || 4000,
+    duration: duration || DEFAULT_DURATION,
   });
 }
 
 export function* dismissableNotification({ payload }) {
-  const { text, icon, id, duration } = payload;
-  toast((t) => <DismissableToast text={text} toastInstance={t} />, {
+  const { id, text, icon, duration } = payload;
+  toast((t) => <DismissableToast text={text} toastID={t.id} />, {
     position: 'top-right',
     icon,
     id,
-    duration: duration || 4000,
+    duration: duration || DEFAULT_DURATION,
   });
 }
 
 export function* dismissNotification({ payload }) {
-  const { notificationID } = payload;
-  toast.dismiss(notificationID);
+  const { id } = payload;
+  toast.dismiss(id);
 }
 
 export function* watchNotifications() {

assets/js/state/sagas/settings.test.jsx

@@ -46,7 +46,7 @@ describe('Settings sagas', () => {
       expect(dispatched).toEqual([expectedAction]);
     });
 
-    it('should dispatch an expires in dismissable notification if the api key expiration days are less then 30', async () => {
+    it('should dispatch a dismissable notification if the api key is to expire in less than 30 days', async () => {
       axiosMock.onGet('/api/v1/settings/api_key').reply(
         200,
         apiKeySettingsFactory.build({
@@ -63,6 +63,7 @@ describe('Settings sagas', () => {
       });
       expect(dispatched).toEqual([expectedAction]);
     });
+
     it('should not dispatch any action if the api key expiration days are more then 30', async () => {
       axiosMock.onGet('/api/v1/settings/api_key').reply(
         200,

test/e2e/cypress/e2e/settings.cy.js

@@ -9,6 +9,7 @@ context('Settings page', () => {
   after(() => {
     cy.updateApiKeyExpiration(null);
   });
+
   describe('Api key expiration notifications', () => {
     it('should show api key expired notification when first loading the page, when the api key is expired', () => {
       cy.updateApiKeyExpiration(subDays(new Date(), 1));