test: Make ReferenceTab tests able to run independently (#18108)

Author: TomasEng

src/Designer/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/ReferenceTab/ReferenceTab.test.tsx

@@ -1,20 +1,24 @@
 import { screen } from '@testing-library/react';
+import type { RenderResult } from '@testing-library/react';
 import { ReferenceTab } from './ReferenceTab';
 import { renderWithProviders } from '../../../../../../testing/mocks';
+import type { ExtendedRenderOptions } from '../../../../../../testing/mocks';
 import { ComponentType } from 'app-shared/types/ComponentType';
 import type { FormComponent } from '../../../../../../types/FormComponent';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import userEvent from '@testing-library/user-event';
 import { componentMocks } from '../../../../../../testing/componentMocks';
+import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
+import { QueryKey } from 'app-shared/types/QueryKey';
 
 // Test data:
 const mockComponent = componentMocks[ComponentType.Dropdown];
 const mockOptionsId1 = 'test1';
 const mockOptionsId2 = 'test2';
-const getOptionListIds = jest
-  .fn()
-  .mockImplementation(() => Promise.resolve<string[]>([mockOptionsId1, mockOptionsId2]));
+const optionListIds: string[] = [mockOptionsId1, mockOptionsId2];
 const handleComponentChange = jest.fn();
+const org = 'org';
+const app = 'app';
 
 describe('ReferenceTab', () => {
   afterEach(() => jest.clearAllMocks());
@@ -25,15 +29,15 @@ describe('ReferenceTab', () => {
   });
 
   it('should render the component', () => {
-    renderReferenceTab();
+    renderReferenceTabWithData();
 
     expect(
       screen.getByText(textMock('ux_editor.options.code_list_reference_id.description')),
     ).toBeInTheDocument();
   });
 
   it('should render value when optionsId is set', () => {
-    renderReferenceTab({
+    renderReferenceTabWithData({
       componentProps: {
         optionsId: 'some-id',
       },
@@ -43,7 +47,7 @@ describe('ReferenceTab', () => {
   });
 
   it('should render no value if optionsId is a codeList from the library', () => {
-    renderReferenceTab({
+    renderReferenceTabWithData({
       componentProps: {
         optionsId: mockOptionsId1,
       },
@@ -54,7 +58,7 @@ describe('ReferenceTab', () => {
 
   it('should call handleComponentChange when input value changes', async () => {
     const user = userEvent.setup();
-    renderReferenceTab();
+    renderReferenceTabWithData();
     const inputElement = getInputElement();
     await user.type(inputElement, 'new-id');
     expect(handleComponentChange).toHaveBeenCalledWith({
@@ -65,7 +69,7 @@ describe('ReferenceTab', () => {
 
   it('should call remove options property (if it exists) when input value changes', async () => {
     const user = userEvent.setup();
-    renderReferenceTab({
+    renderReferenceTabWithData({
       componentProps: {
         options: [
           {
@@ -90,14 +94,27 @@ function getInputElement() {
   });
 }
 
-const renderReferenceTab = ({
-  componentProps = {},
-}: {
-  handleComponentChange?: () => void;
+type RenderReferenceTabWithDataProps = Pick<RenderReferenceTabProps, 'componentProps'>;
+
+function renderReferenceTabWithData({
+  componentProps,
+}: RenderReferenceTabWithDataProps = {}): RenderResult {
+  const queryClient = createQueryClientMock();
+  queryClient.setQueryData([QueryKey.OptionListIds, org, app], optionListIds);
+  return renderReferenceTab({ componentProps, options: { queryClient } });
+}
+
+type RenderReferenceTabProps = {
   componentProps?: Partial<
     FormComponent<ComponentType.RadioButtons | ComponentType.Checkboxes | ComponentType.Dropdown>
   >;
-} = {}) => {
+  options?: ExtendedRenderOptions;
+};
+
+const renderReferenceTab = ({
+  componentProps = {},
+  options,
+}: RenderReferenceTabProps = {}): RenderResult =>
   renderWithProviders(
     <ReferenceTab
       handleComponentChange={handleComponentChange}
@@ -106,6 +123,8 @@ const renderReferenceTab = ({
         ...componentProps,
       }}
     />,
-    { queries: { getOptionListIds } },
+    {
+      appRouteParams: { org, app },
+      ...options,
+    },
   );
-};