Skip to content

QueryClientProvider refactor #544

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

QueryClientProvider refactor #544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
01a3732
Refactor query-client-provider and required-providers render to use t…
jpggvilaca Jun 19, 2025
69655aa
Fix unit tests
jpggvilaca Jun 20, 2025
d8f71e9
Fix remaining test
jpggvilaca Jun 25, 2025
e1cc979
Get rid of unnecessary customQueryClient prop
jpggvilaca Jun 25, 2025
2631381
Simplify unit tests
jpggvilaca Jul 9, 2025
2d67398
Fix addNotification reference
jpggvilaca Jul 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 47 additions & 33 deletions web_ui/src/core/jobs/hooks/utils.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
// Copyright (C) 2022-2025 Intel Corporation
// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE

import { QueryClient } from '@tanstack/react-query';
import { ReactNode } from 'react';

import { QueryClientProvider } from '@tanstack/react-query';
import { waitFor } from '@testing-library/react';

import { createGetiQueryClient } from '../../../providers/query-client-provider/query-client-provider.component';
import { getMockedWorkspaceIdentifier } from '../../../test-utils/mocked-items-factory/mocked-identifiers';
import { getMockedJob } from '../../../test-utils/mocked-items-factory/mocked-jobs';
import { renderHookWithProviders } from '../../../test-utils/render-hook-with-providers';
Expand All @@ -29,39 +32,50 @@ const getMockedResponse = (jobs: Job[]) => ({
});

const workspaceIdentifier = getMockedWorkspaceIdentifier({ workspaceId: 'workspaceId' });
const mockSetInvalidateQueries = jest.fn();

const queryClient = createGetiQueryClient({
addNotification: jest.fn(),
});
queryClient.invalidateQueries = mockSetInvalidateQueries;

const wrapper = ({ children }: { children: ReactNode }) => (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think instead of creating second QueryClientProvider instance we could just leave the previous implementation of the RequiredProvidersProps which accepts optionally the queryClient. In case we want to mock queryClient, we create it using createGetiQueryClient and pass it to the hook/provider. For instance: useInvalidateBalanceOnNewJob(..., { providerProps: { queryClient }}).

);

describe('Use jobs hook utils', () => {
beforeAll(() => {
jest.resetAllMocks();
beforeEach(() => {
jest.clearAllMocks();
});

it('Should not invalidate balance if feature flag is disabled', async () => {
const queryClient = new QueryClient();
queryClient.invalidateQueries = jest.fn();
renderHookWithProviders(
() =>
useInvalidateBalanceOnNewJob(
() => {
return useInvalidateBalanceOnNewJob(
workspaceIdentifier,
getMockedResponse([getMockedJob({ cost: { leaseId: '123', requests: [], consumed: [] } })]),
{ jobState: JobState.SCHEDULED }
),
);
},
{
providerProps: { queryClient, featureFlags: { FEATURE_FLAG_CREDIT_SYSTEM: false } },
wrapper,
providerProps: { featureFlags: { FEATURE_FLAG_CREDIT_SYSTEM: false } },
}
);

await waitFor(() => {
expect(queryClient.invalidateQueries).not.toHaveBeenCalled();
expect(mockSetInvalidateQueries).not.toHaveBeenCalled();
});
});

it('Should invalidate balance if feature flag is enabled', async () => {
const queryClient = new QueryClient();
queryClient.invalidateQueries = jest.fn();
const { rerender } = renderHookWithProviders(
({ jobs }) => useInvalidateBalanceOnNewJob(workspaceIdentifier, getMockedResponse(jobs), {}),
({ jobs }) => {
return useInvalidateBalanceOnNewJob(workspaceIdentifier, getMockedResponse(jobs), {});
},
{
providerProps: { queryClient, featureFlags: { FEATURE_FLAG_CREDIT_SYSTEM: true } },
wrapper,
providerProps: { featureFlags: { FEATURE_FLAG_CREDIT_SYSTEM: true } },
initialProps: {
jobs: [
getMockedJob({
Expand All @@ -87,54 +101,54 @@ describe('Use jobs hook utils', () => {
});

await waitFor(() => {
expect(queryClient.invalidateQueries).toHaveBeenCalledTimes(2);
expect(mockSetInvalidateQueries).toHaveBeenCalledTimes(2);
});
});

it('Should not invalidate balance if there are no jobs', async () => {
const queryClient = new QueryClient();
queryClient.invalidateQueries = jest.fn();

renderHookWithProviders(
() =>
useInvalidateBalanceOnNewJob(workspaceIdentifier, getMockedResponse([]), {
jobState: JobState.SCHEDULED,
}),
{ providerProps: { queryClient, featureFlags: { FEATURE_FLAG_CREDIT_SYSTEM: true } } }
{
wrapper,
providerProps: { featureFlags: { FEATURE_FLAG_CREDIT_SYSTEM: true } },
}
);

await waitFor(() => {
expect(queryClient.invalidateQueries).not.toHaveBeenCalled();
expect(mockSetInvalidateQueries).not.toHaveBeenCalled();
});
});

it('Should not invalidate balance if there are no jobs with cost', async () => {
const queryClient = new QueryClient();
queryClient.invalidateQueries = jest.fn();
renderHookWithProviders(
() =>
useInvalidateBalanceOnNewJob(workspaceIdentifier, getMockedResponse([getMockedJob()]), {
jobState: JobState.SCHEDULED,
}),
{ providerProps: { queryClient, featureFlags: { FEATURE_FLAG_CREDIT_SYSTEM: true } } }
{
wrapper,
providerProps: { featureFlags: { FEATURE_FLAG_CREDIT_SYSTEM: true } },
}
);

await waitFor(() => {
expect(queryClient.invalidateQueries).not.toHaveBeenCalled();
expect(mockSetInvalidateQueries).not.toHaveBeenCalled();
});
});

it('Should invalidate balance if there is a job with new id or a new job', async () => {
const queryClient = new QueryClient();
queryClient.invalidateQueries = jest.fn();
const { rerender } = renderHookWithProviders(
({ jobs }) =>
useInvalidateBalanceOnNewJob(workspaceIdentifier, getMockedResponse(jobs), {
({ jobs }) => {
return useInvalidateBalanceOnNewJob(workspaceIdentifier, getMockedResponse(jobs), {
jobState: JobState.SCHEDULED,
}),
});
},
{
wrapper,
providerProps: {
queryClient,
featureFlags: { FEATURE_FLAG_CREDIT_SYSTEM: true },
},
initialProps: {
Expand All @@ -149,7 +163,7 @@ describe('Use jobs hook utils', () => {
);

await waitFor(() => {
expect(queryClient.invalidateQueries).toHaveBeenCalledTimes(1);
expect(mockSetInvalidateQueries).toHaveBeenCalledTimes(1);
});

rerender({
Expand All @@ -163,7 +177,7 @@ describe('Use jobs hook utils', () => {
});

await waitFor(() => {
expect(queryClient.invalidateQueries).toHaveBeenCalledTimes(2);
expect(mockSetInvalidateQueries).toHaveBeenCalledTimes(2);
});

rerender({
Expand All @@ -178,7 +192,7 @@ describe('Use jobs hook utils', () => {
});

await waitFor(() => {
expect(queryClient.invalidateQueries).toHaveBeenCalledTimes(3);
expect(mockSetInvalidateQueries).toHaveBeenCalledTimes(3);
});
});
});
6 changes: 3 additions & 3 deletions web_ui/src/notification/notification.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ type addToastNotificationProps = Omit<NotificationToastProps, 'remove'> & {
placement?: NOTIFICATION_CONTAINER;
};

interface addNotificationProps {
export interface AddNotificationProps {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no big changes here, i just capitalised this, OCD

message: ReactChild;
type: NOTIFICATION_TYPE;
dismiss?: DismissOptions;
Expand All @@ -35,7 +35,7 @@ interface addNotificationProps {
interface NotificationContextProps {
removeNotification: (id: string) => void;
removeNotifications: () => void;
addNotification: ({ message, type, dismiss, actionButtons }: addNotificationProps) => string;
addNotification: ({ message, type, dismiss, actionButtons }: AddNotificationProps) => string;
addToastNotification: (data: addToastNotificationProps) => string;
}

Expand Down Expand Up @@ -70,7 +70,7 @@ export const NotificationProvider = ({ children }: NotificationProviderProps): J
hasCloseButton = true,
dismiss = DEFAULT_DISMISS_OPTIONS,
actionButtons,
}: addNotificationProps): string => {
}: AddNotificationProps): string => {
const notificationId = isString(message) || isNumber(message) ? `id-${message}` : `id-${message.key}`;

const NotificationContainer: iNotification = {
Expand Down
25 changes: 9 additions & 16 deletions web_ui/src/pages/media/hooks/media-delete/media-delete.hook.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
// Copyright (C) 2022-2025 Intel Corporation
// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE

import { QueryClient } from '@tanstack/react-query';
import { QueryClientProvider } 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 { createGetiQueryClient } from '../../../../providers/query-client-provider/query-client-provider.component';
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';
Expand All @@ -16,18 +16,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' },
Expand All @@ -42,14 +36,18 @@ const renderDeleteMediaMutationHook = ({
}: {
mediaService?: MediaService;
} = {}) => {
const queryClient = new QueryClient();
const queryClient = createGetiQueryClient({
addNotification: jest.fn(),
});
queryClient.setQueriesData = mockSetQueriesData;

return renderHookWithProviders(useDeleteMediaMutation, {
wrapper: ({ children }) => (
<ProjectProvider projectIdentifier={getMockedProjectIdentifier()}>{children}</ProjectProvider>
<QueryClientProvider client={queryClient}>
<ProjectProvider projectIdentifier={getMockedProjectIdentifier()}>{children}</ProjectProvider>
</QueryClientProvider>
),
providerProps: { mediaService, queryClient },
providerProps: { mediaService },
});
};

Expand Down Expand Up @@ -85,7 +83,6 @@ describe('useDeleteMediaMutation', () => {
await waitFor(() => {
expect(filterPageMedias).toHaveBeenCalled();
expect(mockSetQueriesData).toHaveBeenCalledTimes(1);
expect(mockAddNotification).not.toHaveBeenCalled();
});
});

Expand All @@ -106,10 +103,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,
});
});
});
});
Loading
Loading