Fix remaining test

Author: jpggvilaca

web_ui/src/pages/media/hooks/media-delete/media-delete.hook.test.tsx

@@ -1,13 +1,12 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient, useQueryClient } from '@tanstack/react-query';
 import { waitFor } from '@testing-library/react';
 
 import { MEDIA_TYPE } from '../../../../core/media/base-media.interface';
 import { createInMemoryMediaService } from '../../../../core/media/services/in-memory-media-service/in-memory-media-service';
 import { MediaService } from '../../../../core/media/services/media-service.interface';
-import { NOTIFICATION_TYPE } from '../../../../notification/notification-toast/notification-type.enum';
 import { getMockedProjectIdentifier } from '../../../../test-utils/mocked-items-factory/mocked-identifiers';
 import { getMockedImageMediaItem } from '../../../../test-utils/mocked-items-factory/mocked-media';
 import { renderHookWithProviders } from '../../../../test-utils/render-hook-with-providers';
@@ -16,18 +15,12 @@ import { filterPageMedias } from '../../utils';
 import { useDeleteMediaMutation } from './media-delete.hook';
 
 const mockSetQueriesData = jest.fn();
-const mockAddNotification = jest.fn();
 
 jest.mock('../../utils', () => ({
     ...jest.requireActual('../../utils'),
     filterPageMedias: jest.fn(),
 }));
 
-jest.mock('../../../../notification/notification.component', () => ({
-    ...jest.requireActual('../../../../notification/notification.component'),
-    useNotification: () => ({ addNotification: mockAddNotification }),
-}));
-
 const mockedImageMedia = getMockedImageMediaItem({
     name: 'image-1',
     identifier: { type: MEDIA_TYPE.IMAGE, imageId: '1111' },
@@ -42,15 +35,22 @@ const renderDeleteMediaMutationHook = ({
 }: {
     mediaService?: MediaService;
 } = {}) => {
-    const queryClient = new QueryClient();
-    queryClient.setQueriesData = mockSetQueriesData;
-
-    return renderHookWithProviders(useDeleteMediaMutation, {
-        wrapper: ({ children }) => (
-            <ProjectProvider projectIdentifier={getMockedProjectIdentifier()}>{children}</ProjectProvider>
-        ),
-        providerProps: { mediaService, queryClient },
-    });
+    let queryClient: QueryClient;
+
+    return renderHookWithProviders(
+        () => {
+            queryClient = useQueryClient();
+            queryClient.setQueriesData = mockSetQueriesData;
+
+            return useDeleteMediaMutation();
+        },
+        {
+            wrapper: ({ children }) => (
+                <ProjectProvider projectIdentifier={getMockedProjectIdentifier()}>{children}</ProjectProvider>
+            ),
+            providerProps: { mediaService },
+        }
+    );
 };
 
 const mockedResponse = {
@@ -85,7 +85,6 @@ describe('useDeleteMediaMutation', () => {
         await waitFor(() => {
             expect(filterPageMedias).toHaveBeenCalled();
             expect(mockSetQueriesData).toHaveBeenCalledTimes(1);
-            expect(mockAddNotification).not.toHaveBeenCalled();
         });
     });
 
@@ -106,10 +105,6 @@ describe('useDeleteMediaMutation', () => {
         await waitFor(() => {
             expect(filterPageMedias).toHaveBeenCalled();
             expect(mockSetQueriesData).toHaveBeenCalledTimes(2);
-            expect(mockAddNotification).toHaveBeenCalledWith({
-                message: `Media cannot be deleted. ${errorMessage}`,
-                type: NOTIFICATION_TYPE.ERROR,
-            });
         });
     });
 });

web_ui/src/providers/query-client-provider/query-client-provider.component.tsx

@@ -17,6 +17,20 @@ import { isAxiosError } from 'axios';
 import { NOTIFICATION_TYPE } from '../../notification/notification-toast/notification-type.enum';
 import { AddNotificationProps, useNotification } from '../../notification/notification.component';
 
+declare module '@tanstack/react-query' {
+    interface Register {
+        queryMeta: {
+            notifyOnError?: boolean;
+            errorMessage?: string;
+            disableGlobalErrorHandling?: boolean;
+        };
+        mutationMeta: {
+            notifyOnError?: boolean;
+            errorMessage?: string;
+        };
+    }
+}
+
 export const createGetiQueryClient = ({
     defaultQueryOptions,
     addNotification,
@@ -30,6 +44,7 @@ export const createGetiQueryClient = ({
         onError: (error, query) => {
             if (isAxiosError(error) && query.meta && 'notifyOnError' in query.meta) {
                 const message = query.meta.errorMessage;
+
                 if (query.meta.notifyOnError === true) {
                     notify.current({
                         message: typeof message === 'string' ? message : getErrorMessage(error),
@@ -47,11 +62,10 @@ export const createGetiQueryClient = ({
     });
 
     const mutationCache = new MutationCache({
-        onError: (error) => {
-            // TODO: If we decide to add an "opt-out" mechanism we can use the same logic
-            // as query cache and use the `meta` field
-            if (isAxiosError(error)) {
-                const message = error.message;
+        onError: (error, _variables, _ctx, mutation) => {
+            if (isAxiosError(error) && mutation.meta && 'notifyOnError' in mutation.meta) {
+                const message = mutation.meta.errorMessage;
+
                 notify.current({
                     message: typeof message === 'string' ? message : getErrorMessage(error),
                     type: NOTIFICATION_TYPE.ERROR,
@@ -73,19 +87,6 @@ export const createGetiQueryClient = ({
     });
 };
 
-declare module '@tanstack/react-query' {
-    interface Register {
-        queryMeta: {
-            notifyOnError?: boolean;
-            errorMessage?: string;
-            disableGlobalErrorHandling?: boolean;
-        };
-        mutationMeta: {
-            notifyOnError?: boolean;
-        };
-    }
-}
-
 export const QueryClientProvider = ({
     children,
     defaultQueryOptions,