diff --git a/src/common/hooks/useComplexLookup.ts b/src/common/hooks/useComplexLookup.ts index 2ed56211..965e4c15 100644 --- a/src/common/hooks/useComplexLookup.ts +++ b/src/common/hooks/useComplexLookup.ts @@ -1,5 +1,5 @@ import { ChangeEvent, useCallback, useState } from 'react'; -import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'; +import { useRecoilState, useResetRecoilState } from 'recoil'; import { generateEmptyValueUuid, getLinkedField, @@ -12,7 +12,7 @@ import state from '@state'; import { useModalControls } from './useModalControls'; import { useMarcData } from './useMarcData'; import { useServicesContext } from './useServicesContext'; -import { useMarcPreviewState } from '@src/store'; +import { useMarcPreviewState, useProfileState } from '@src/store'; export const useComplexLookup = ({ entry, @@ -27,7 +27,7 @@ export const useComplexLookup = ({ }) => { const { selectedEntriesService } = useServicesContext() as Required; const [localValue, setLocalValue] = useState(value || []); - const schema = useRecoilValue(state.config.schema); + const { schema } = useProfileState(); const [selectedEntries, setSelectedEntries] = useRecoilState(state.config.selectedEntries); const { setComplexValue, diff --git a/src/common/hooks/useConfig.hook.ts b/src/common/hooks/useConfig.hook.ts index 34b94eb3..23cf2efa 100644 --- a/src/common/hooks/useConfig.hook.ts +++ b/src/common/hooks/useConfig.hook.ts @@ -1,10 +1,11 @@ import { useRef } from 'react'; -import { useRecoilState, useSetRecoilState } from 'recoil'; +import { useSetRecoilState } from 'recoil'; import { v4 as uuidv4 } from 'uuid'; import state from '@state'; import { fetchProfiles } from '@common/api/profiles.api'; import { PROFILE_NAMES } from '@common/constants/bibframe.constants'; import { getPrimaryEntitiesFromRecord, getRecordTitle } from '@common/helpers/record.helper'; +import { useProfileState } from '@src/store'; import { useProcessedRecordAndSchema } from './useProcessedRecordAndSchema.hook'; import { useServicesContext } from './useServicesContext'; @@ -22,12 +23,16 @@ type GetProfiles = { export const useConfig = () => { const { schemaCreatorService, userValuesService, selectedEntriesService } = useServicesContext() as Required; - const [profiles, setProfiles] = useRecoilState(state.config.profiles); - const setSelectedProfile = useSetRecoilState(state.config.selectedProfile); + const { + profiles, + setProfiles, + setSelectedProfile, + preparedFields, + setPreparedFields, + setInitialSchemaKey, + setSchema, + } = useProfileState(); const setUserValues = useSetRecoilState(state.inputs.userValues); - const [preparedFields, setPreparedFields] = useRecoilState(state.config.preparedFields); - const setSchema = useSetRecoilState(state.config.schema); - const setInitialSchemaKey = useSetRecoilState(state.config.initialSchemaKey); const setSelectedEntries = useSetRecoilState(state.config.selectedEntries); const setPreviewContent = useSetRecoilState(state.inputs.previewContent); const setSelectedRecordBlocks = useSetRecoilState(state.inputs.selectedRecordBlocks); diff --git a/src/common/hooks/useProfileSchema.ts b/src/common/hooks/useProfileSchema.ts index 6d5b5972..161f7a2f 100644 --- a/src/common/hooks/useProfileSchema.ts +++ b/src/common/hooks/useProfileSchema.ts @@ -1,16 +1,16 @@ -import { useRecoilState, useSetRecoilState } from 'recoil'; +import { useSetRecoilState } from 'recoil'; import state from '@state'; import { useServicesContext } from './useServicesContext'; import { deleteFromSetImmutable } from '@common/helpers/common.helper'; -import { useStatusState } from '@src/store'; +import { useProfileState, useStatusState } from '@src/store'; export const useProfileSchema = () => { const { selectedEntriesService, schemaWithDuplicatesService } = useServicesContext() as Required; - const [schema, setSchema] = useRecoilState(state.config.schema); const setSelectedEntries = useSetRecoilState(state.config.selectedEntries); const setCollapsibleEntries = useSetRecoilState(state.ui.collapsibleEntries); const setUserValues = useSetRecoilState(state.inputs.userValues); const { setIsEditedRecord: setIsEdited } = useStatusState(); + const { schema, setSchema } = useProfileState(); const getSchemaWithCopiedEntries = (entry: SchemaEntry, selectedEntries: string[]) => { selectedEntriesService.set(selectedEntries); diff --git a/src/common/hooks/useRecordControls.ts b/src/common/hooks/useRecordControls.ts index 6c34cbb9..fe58fb4c 100644 --- a/src/common/hooks/useRecordControls.ts +++ b/src/common/hooks/useRecordControls.ts @@ -28,7 +28,7 @@ import { RecordStatus, ResourceType } from '@common/constants/record.constants'; import { generateEditResourceUrl } from '@common/helpers/navigation.helper'; import { ApiErrorCodes, ExternalResourceIdType } from '@common/constants/api.constants'; import { checkHasErrorOfCodeType } from '@common/helpers/api.helper'; -import { useLoadingState, useStatusState } from '@src/store'; +import { useLoadingState, useStatusState, useProfileState } from '@src/store'; import state from '@state'; import { useRecordGeneration } from './useRecordGeneration'; import { useBackToSearchUri } from './useBackToSearchUri'; @@ -51,7 +51,7 @@ export const useRecordControls = () => { const [searchParams, setSearchParams] = useSearchParams(); const { setIsLoading } = useLoadingState(); const setUserValues = useSetRecoilState(state.inputs.userValues); - const setSelectedProfile = useSetRecoilState(state.config.selectedProfile); + const { setSelectedProfile } = useProfileState(); const [record, setRecord] = useRecoilState(state.inputs.record); const { setRecordStatus, setLastSavedRecordId, setIsEditedRecord: setIsEdited, addStatusMessage } = useStatusState(); const setCurrentlyEditedEntityBfid = useSetRecoilState(state.ui.currentlyEditedEntityBfid); diff --git a/src/common/hooks/useRecordGeneration.ts b/src/common/hooks/useRecordGeneration.ts index 4495f3d3..d33e6e1b 100644 --- a/src/common/hooks/useRecordGeneration.ts +++ b/src/common/hooks/useRecordGeneration.ts @@ -1,13 +1,13 @@ import { useRecoilValue } from 'recoil'; -import { useServicesContext } from './useServicesContext'; +import { useProfileState } from '@src/store'; import state from '@state'; +import { useServicesContext } from './useServicesContext'; export const useRecordGeneration = () => { const { recordGeneratorService } = useServicesContext(); - const schema = useRecoilValue(state.config.schema); const userValues = useRecoilValue(state.inputs.userValues); const selectedEntries = useRecoilValue(state.config.selectedEntries); - const initialSchemaKey = useRecoilValue(state.config.initialSchemaKey); + const { schema, initialSchemaKey } = useProfileState(); const generateRecord = () => { recordGeneratorService?.init({ diff --git a/src/components/EditSection/EditSection.tsx b/src/components/EditSection/EditSection.tsx index 6521e792..2e33ae11 100644 --- a/src/components/EditSection/EditSection.tsx +++ b/src/components/EditSection/EditSection.tsx @@ -13,12 +13,12 @@ import { useServicesContext } from '@common/hooks/useServicesContext'; import { renderDrawComponent } from './renderDrawComponent'; import './EditSection.scss'; import { useRecordGeneration } from '@common/hooks/useRecordGeneration'; -import { useStatusState } from '@src/store'; +import { useProfileState, useStatusState } from '@src/store'; export const EditSection = memo(() => { const { selectedEntriesService } = useServicesContext() as Required; - const resourceTemplates = useRecoilValue(state.config.selectedProfile)?.json.Profile.resourceTemplates; - const initialSchemaKey = useRecoilValue(state.config.initialSchemaKey); + const { selectedProfile, initialSchemaKey } = useProfileState(); + const resourceTemplates = selectedProfile?.json.Profile.resourceTemplates; const [selectedEntries, setSelectedEntries] = useRecoilState(state.config.selectedEntries); const [userValues, setUserValues] = useRecoilState(state.inputs.userValues); const { isEditedRecord: isEdited, setIsEditedRecord: setIsEdited } = useStatusState(); diff --git a/src/components/FieldWithMetadataAndControls/FieldWithMetadataAndControls.tsx b/src/components/FieldWithMetadataAndControls/FieldWithMetadataAndControls.tsx index 4256f0e2..eb8898d9 100644 --- a/src/components/FieldWithMetadataAndControls/FieldWithMetadataAndControls.tsx +++ b/src/components/FieldWithMetadataAndControls/FieldWithMetadataAndControls.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; import { useRecoilValue } from 'recoil'; import { checkRepeatableGroup, checkRepeatableSubcomponent } from '@common/helpers/repeatableFields.helper'; import { useProfileSchema } from '@common/hooks/useProfileSchema'; +import { useProfileState } from '@src/store'; import state from '@state'; import { CompactLayout } from './CompactLayout'; import { ExtendedLayout } from './ExtendedLayout'; @@ -31,8 +32,8 @@ export const FieldWithMetadataAndControls: FC = ( disabled = false, ...restProps }) => { - const schema = useRecoilValue(state.config.schema); const selectedEntries = useRecoilValue(state.config.selectedEntries); + const { schema } = useProfileState(); const { getSchemaWithCopiedEntries, getSchemaWithDeletedEntries } = useProfileSchema(); const { uuid, displayName, htmlId } = entry; diff --git a/src/components/Fields/Fields.tsx b/src/components/Fields/Fields.tsx index ff3abc94..8c09b990 100644 --- a/src/components/Fields/Fields.tsx +++ b/src/components/Fields/Fields.tsx @@ -8,6 +8,7 @@ import { ENTITY_LEVEL } from '@common/constants/bibframe.constants'; import { DuplicateGroupContainer } from '@components/DuplicateGroupContainer'; import { ConditionalWrapper } from '@components/ConditionalWrapper'; import { DuplicateSubcomponentContainer } from '@components/DuplicateSubcomponentContainer'; +import { useProfileState } from '@src/store'; export type IFields = { uuid: string | null; @@ -37,9 +38,9 @@ export const Fields: FC = memo( scrollToEnabled = false, groupingDisabled = false, }) => { - const schema = useRecoilValue(state.config.schema); const selectedEntries = useRecoilValue(state.config.selectedEntries); const currentlyEditedEntityBfid = useRecoilValue(state.ui.currentlyEditedEntityBfid); + const { schema } = useProfileState(); const entry = uuid && schema?.get(uuid); diff --git a/src/components/Preview/Fields.tsx b/src/components/Preview/Fields.tsx index f0a07a8a..8869b8cf 100644 --- a/src/components/Preview/Fields.tsx +++ b/src/components/Preview/Fields.tsx @@ -10,7 +10,7 @@ import { getRecordId, getPreviewFieldsConditions } from '@common/helpers/record. import { getParentEntryUuid } from '@common/helpers/schema.helper'; import { useNavigateToEditPage } from '@common/hooks/useNavigateToEditPage'; import { ConditionalWrapper } from '@components/ConditionalWrapper'; -import { useStatusState } from '@src/store'; +import { useProfileState, useStatusState } from '@src/store'; import state from '@state'; import { Labels } from './Labels'; import { Values } from './Values'; @@ -77,10 +77,10 @@ export const Fields = ({ forceRenderAllTopLevelEntities, }: FieldsProps) => { const userValuesFromState = useRecoilValue(state.inputs.userValues); - const schemaFromState = useRecoilValue(state.config.schema); const selectedEntries = useRecoilValue(state.config.selectedEntries); const record = useRecoilValue(state.inputs.record); const currentlyPreviewedEntityBfid = useRecoilValue(state.ui.currentlyPreviewedEntityBfid); + const { schema: schemaFromState } = useProfileState(); const { isEditedRecord: isEdited, setRecordStatus } = useStatusState(); const { navigateToEditPage } = useNavigateToEditPage(); const userValues = altUserValues || userValuesFromState; diff --git a/src/components/Preview/Preview.tsx b/src/components/Preview/Preview.tsx index d03b19b9..4e59f8f0 100644 --- a/src/components/Preview/Preview.tsx +++ b/src/components/Preview/Preview.tsx @@ -2,6 +2,7 @@ import { FC } from 'react'; import { useRecoilValue } from 'recoil'; import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; +import { useProfileState } from '@src/store'; import state from '@state'; import { Fields } from './Fields'; import './Preview.scss'; @@ -28,8 +29,7 @@ export const Preview: FC = ({ entityRowDisplay, }) => { const userValuesFromState = useRecoilValue(state.inputs.userValues); - const schemaFromState = useRecoilValue(state.config.schema); - const initialSchemaKeyFromState = useRecoilValue(state.config.initialSchemaKey); + const { schema: schemaFromState, initialSchemaKey: initialSchemaKeyFromState } = useProfileState(); const userValues = altUserValues || userValuesFromState; const schema = altSchema || schemaFromState; const initialSchemaKey = altInitKey ?? initialSchemaKeyFromState; diff --git a/src/state/config.ts b/src/state/config.ts index ac333908..3e1bf984 100644 --- a/src/state/config.ts +++ b/src/state/config.ts @@ -3,31 +3,6 @@ import { LOCALES } from '@common/i18n/locales'; import { localStorageService } from '@common/services/storage'; import { atom } from 'recoil'; -const profiles = atom>({ - key: 'config.profiles', - default: [], -}); - -const selectedProfile = atom({ - key: 'config.selectedProfile', - default: null, -}); - -const preparedFields = atom({ - key: 'config.preparedFields', - default: null, -}); - -const initialSchemaKey = atom({ - key: 'config.initialSchemaKey', - default: null, -}); - -const schema = atom>({ - key: 'config.schema', - default: new Map(), -}); - const selectedEntries = atom>({ key: 'config.selectedEntries', default: [], @@ -43,11 +18,6 @@ const i18nMessages = atom({ default: {}, }); -const collectRecordDataForPreview = atom({ - key: 'config.collectRecordDataForPreview', - default: false, -}); - const customEvents = atom | null>({ key: 'config.customEvents', default: null, @@ -59,15 +29,9 @@ const hasNavigationOrigin = atom({ }); export default { - profiles, - selectedProfile, - preparedFields, - schema, - initialSchemaKey, selectedEntries, locale, i18nMessages, - collectRecordDataForPreview, customEvents, hasNavigationOrigin, }; diff --git a/src/store/config.ts b/src/store/config.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/store/index.ts b/src/store/index.ts index 560a33d2..0f3d2a79 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,4 +1,8 @@ +// Stores export * from './status'; export * from './loadingState'; export * from './marcPreview'; +export * from './profile'; + +// Selector hooks export * from './selectors'; diff --git a/src/store/inputs.ts b/src/store/inputs.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/store/loadingState.ts b/src/store/loadingState.ts index cf71e3f9..6b668498 100644 --- a/src/store/loadingState.ts +++ b/src/store/loadingState.ts @@ -4,7 +4,7 @@ import { generateStore } from './utils/storeCreator'; export type LoadingState = SliceState<'isLoading', boolean>; -const STORE_NAME = 'LoadingState'; +const STORE_NAME = 'Loading'; const loadingStateStore: StateCreator = (...args) => ({ ...createBaseSlice({ basic: 'isLoading' }, false)(...args), diff --git a/src/store/profile.ts b/src/store/profile.ts new file mode 100644 index 00000000..1d7b6dca --- /dev/null +++ b/src/store/profile.ts @@ -0,0 +1,25 @@ +import { StateCreator } from 'zustand'; +import { createBaseSlice, SliceState } from './utils/slice'; +import { generateStore } from './utils/storeCreator'; + +type SelectedProfileType = ProfileEntry | null; +type PreparedFieldsType = ResourceTemplates | null; +type InitialSchemaKeyType = string | null; + +export type ProfileState = SliceState<'profiles', ProfileEntry[]> & + SliceState<'selectedProfile', SelectedProfileType> & + SliceState<'preparedFields', PreparedFieldsType> & + SliceState<'initialSchemaKey', InitialSchemaKeyType> & + SliceState<'schema', Map>; + +const STORE_NAME = 'Profile'; + +const profileStore: StateCreator = (...args) => ({ + ...createBaseSlice({ basic: 'profiles' }, [] as ProfileEntry[])(...args), + ...createBaseSlice({ basic: 'selectedProfile' }, null as SelectedProfileType)(...args), + ...createBaseSlice({ basic: 'preparedFields' }, null as PreparedFieldsType)(...args), + ...createBaseSlice({ basic: 'initialSchemaKey' }, null as InitialSchemaKeyType)(...args), + ...createBaseSlice({ basic: 'schema' }, new Map())(...args), +}); + +export const useProfileStore = generateStore(profileStore, STORE_NAME); diff --git a/src/store/search.ts b/src/store/search.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/store/selectors.ts b/src/store/selectors.ts index 8d0ee942..4f3dc0bd 100644 --- a/src/store/selectors.ts +++ b/src/store/selectors.ts @@ -2,7 +2,9 @@ import { createSelectors } from './utils/selectors'; import { useStatusStore } from './status'; import { useLoadingStateStore } from './loadingState'; import { useMarcPreviewStore } from './marcPreview'; +import { useProfileStore } from './profile'; export const useStatusState = () => createSelectors(useStatusStore).use; export const useLoadingState = () => createSelectors(useLoadingStateStore).use; export const useMarcPreviewState = () => createSelectors(useMarcPreviewStore).use; +export const useProfileState = () => createSelectors(useProfileStore).use; diff --git a/src/store/ui.ts b/src/store/ui.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/store/utils/storeCreator.ts b/src/store/utils/storeCreator.ts index 42fa737d..42453d12 100644 --- a/src/store/utils/storeCreator.ts +++ b/src/store/utils/storeCreator.ts @@ -1,6 +1,6 @@ -import { IS_PROD_MODE } from '@common/constants/bundle.constants'; import { create, StateCreator } from 'zustand'; import { devtools } from 'zustand/middleware'; +import { IS_PROD_MODE } from '@common/constants/bundle.constants'; const STORE_NAME = 'Linked Data Editor'; diff --git a/src/test/__mocks__/store/index.ts b/src/test/__mocks__/store/index.ts index beb1c47c..5f235c67 100644 --- a/src/test/__mocks__/store/index.ts +++ b/src/test/__mocks__/store/index.ts @@ -5,3 +5,9 @@ export const setInitialGlobalState = (store: StoreApi, initialState: any) ...store.getInitialState(), ...initialState, }); + +export const setUpdatedGlobalState = (store: StoreApi, updatedState: any) => + store.setState({ + ...store.getState(), + ...updatedState, + }); diff --git a/src/test/__tests__/common/hooks/useConfig.hook.test.ts b/src/test/__tests__/common/hooks/useConfig.hook.test.ts index aca49c8c..1b927ea1 100644 --- a/src/test/__tests__/common/hooks/useConfig.hook.test.ts +++ b/src/test/__tests__/common/hooks/useConfig.hook.test.ts @@ -1,9 +1,11 @@ import '@src/test/__mocks__/common/hooks/useServicesContext.mock'; +import { setInitialGlobalState, setUpdatedGlobalState } from '@src/test/__mocks__/store'; import { renderHook } from '@testing-library/react'; -import { useRecoilState, useSetRecoilState } from 'recoil'; +import { useSetRecoilState } from 'recoil'; import { useConfig } from '@common/hooks/useConfig.hook'; import { fetchProfiles } from '@common/api/profiles.api'; import * as SchemaService from '@common/services/schema'; +import { useProfileStore } from '@src/store'; const profiles = [ { @@ -42,11 +44,6 @@ jest.mock('@common/api/client', () => ({ jest.mock('@state', () => ({ default: { config: { - profiles: [], - selectedProfile: {}, - preparedFields: {}, - schema: {}, - initialSchemaKey: '', selectedEntries: [], }, inputs: { @@ -81,23 +78,29 @@ describe('useConfig', () => { const setSelectedRecordBlocks = jest.fn(); const mockUseRecoilState = (profiles: ProfileEntry[] = []) => { - (useRecoilState as jest.Mock) - .mockReturnValueOnce([profiles, setProfiles]) - .mockReturnValueOnce([null, setPreparedFields]); + setUpdatedGlobalState(useProfileStore, { profiles, preparedFields: null }); }; beforeEach(() => { (useSetRecoilState as jest.Mock) - .mockReturnValueOnce(setProfiles) - .mockReturnValueOnce(setSelectedProfile) .mockReturnValueOnce(setUserValues) - .mockReturnValueOnce(setPreparedFields) - .mockReturnValueOnce(setSchema) - .mockReturnValueOnce(setInitialSchemaKey) .mockReturnValueOnce(setSelectedEntries) .mockReturnValueOnce(setPreviewContent) .mockReturnValueOnce(setSelectedRecordBlocks); + setInitialGlobalState(useProfileStore, { + profiles: [], + setProfiles, + selectedProfile: {}, + setSelectedProfile, + preparedFields: {}, + setPreparedFields, + schema: {}, + setSchema, + initialSchemaKey: '', + setInitialSchemaKey, + }); + (SchemaService.SchemaService as jest.Mock).mockImplementation(() => ({ generate: jest.fn() })); }); diff --git a/src/test/__tests__/common/hooks/useRecordGeneration.test.ts b/src/test/__tests__/common/hooks/useRecordGeneration.test.ts index 03740efe..466947af 100644 --- a/src/test/__tests__/common/hooks/useRecordGeneration.test.ts +++ b/src/test/__tests__/common/hooks/useRecordGeneration.test.ts @@ -2,6 +2,8 @@ import { recordGeneratorService } from '@src/test/__mocks__/common/hooks/useServ import { useRecoilValue } from 'recoil'; import { renderHook } from '@testing-library/react'; import { useRecordGeneration } from '@common/hooks/useRecordGeneration'; +import { setInitialGlobalState } from '@src/test/__mocks__/store'; +import { useProfileStore } from '@src/store'; jest.mock('recoil'); @@ -12,11 +14,9 @@ describe('useRecordGeneration', () => { const selectedEntries = 'mockSelectedEntries'; const initKey = 'mockInitialSchemaKey'; - (useRecoilValue as jest.Mock) - .mockReturnValueOnce(schema) - .mockReturnValueOnce(userValues) - .mockReturnValueOnce(selectedEntries) - .mockReturnValueOnce(initKey); + setInitialGlobalState(useProfileStore, { schema, initialSchemaKey: initKey }); + + (useRecoilValue as jest.Mock).mockReturnValueOnce(userValues).mockReturnValueOnce(selectedEntries); const { result } = renderHook(() => useRecordGeneration()); diff --git a/src/test/__tests__/components/ComplexLookupField/ComplexLookupField.test.tsx b/src/test/__tests__/components/ComplexLookupField/ComplexLookupField.test.tsx index c75e3775..f4efbfac 100644 --- a/src/test/__tests__/components/ComplexLookupField/ComplexLookupField.test.tsx +++ b/src/test/__tests__/components/ComplexLookupField/ComplexLookupField.test.tsx @@ -3,6 +3,8 @@ import { RecoilRoot } from 'recoil'; import { MockServicesProvider } from '@src/test/__mocks__/providers/ServicesProvider.mock'; import { ComplexLookupField } from '@components/ComplexLookupField'; import state from '@state'; +import { setInitialGlobalState } from '@src/test/__mocks__/store'; +import { useProfileStore } from '@src/store'; const mockModalComponent =
; @@ -29,11 +31,12 @@ describe('Complex Lookup Field', () => { const { getByTestId, getAllByTestId, queryByTestId, queryAllByTestId, getByRole } = screen; function renderComponent(entry: SchemaEntry = {} as SchemaEntry, value: UserValueContents[] = []) { + setInitialGlobalState(useProfileStore, { schema: {} as Schema }); + render( { snapshot.set(state.config.selectedEntries, []); - snapshot.set(state.config.schema, {} as Schema); }} > diff --git a/src/test/__tests__/components/EditSection.test.tsx b/src/test/__tests__/components/EditSection.test.tsx index bb820609..7dd51055 100644 --- a/src/test/__tests__/components/EditSection.test.tsx +++ b/src/test/__tests__/components/EditSection.test.tsx @@ -3,10 +3,12 @@ import '@src/test/__mocks__/common/hooks/useConfig.mock'; import { fireEvent, render, waitFor, within } from '@testing-library/react'; import { RouterProvider, createMemoryRouter } from 'react-router-dom'; import { RecoilRoot } from 'recoil'; +import { setInitialGlobalState } from '@src/test/__mocks__/store'; import * as RecordHelper from '@common/helpers/record.helper'; import { AdvancedFieldType } from '@common/constants/uiControls.constants'; import { ServicesProvider } from '@src/providers'; import { routes } from '@src/App'; +import { useProfileStore } from '@src/store'; import state from '@state'; const userValues = { @@ -186,14 +188,17 @@ jest.mock('@common/constants/build.constants', () => ({ IS_EMBEDDED_MODE: false describe('EditSection', () => { const renderScreen = () => { + setInitialGlobalState(useProfileStore, { + selectedProfile: monograph as unknown as ProfileEntry, + initialSchemaKey: 'uuid0', + schema: schema as Schema, + }); + return render( { snapshot.set(state.ui.currentlyEditedEntityBfid, new Set(['uuid2Bfid'])); - snapshot.set(state.config.schema, schema as Schema); snapshot.set(state.inputs.userValues, userValues); - snapshot.set(state.config.initialSchemaKey, 'uuid0'); - snapshot.set(state.config.selectedProfile, monograph as unknown as ProfileEntry); snapshot.set(state.config.selectedEntries, ['uuid7']); }} > diff --git a/src/test/__tests__/components/Preview.test.tsx b/src/test/__tests__/components/Preview.test.tsx index d0d1725d..c2c4ef29 100644 --- a/src/test/__tests__/components/Preview.test.tsx +++ b/src/test/__tests__/components/Preview.test.tsx @@ -1,4 +1,6 @@ import { Preview } from '@components/Preview'; +import { useProfileStore } from '@src/store'; +import { setInitialGlobalState } from '@src/test/__mocks__/store'; import state from '@state'; import { render, screen } from '@testing-library/react'; import { BrowserRouter } from 'react-router-dom'; @@ -38,13 +40,13 @@ const schema = new Map([ describe('Preview', () => { const { getAllByTestId, getByText } = screen; - beforeEach(() => - render( + beforeEach(() => { + setInitialGlobalState(useProfileStore, { initialSchemaKey, schema }); + + return render( { snapshot.set(state.ui.currentlyPreviewedEntityBfid, new Set(['uuid1Bfid'])); - snapshot.set(state.config.schema, schema); - snapshot.set(state.config.initialSchemaKey, initialSchemaKey); snapshot.set(state.inputs.userValues, userValues); }} > @@ -52,8 +54,8 @@ describe('Preview', () => { , - ), - ); + ); + }); test('renders Preview component if a profile is selected', () => { expect(getAllByTestId('preview-fields')[0]).toBeInTheDocument(); diff --git a/src/test/__tests__/views/Edit.test.tsx b/src/test/__tests__/views/Edit.test.tsx index ff6581b6..e4a6b417 100644 --- a/src/test/__tests__/views/Edit.test.tsx +++ b/src/test/__tests__/views/Edit.test.tsx @@ -1,4 +1,3 @@ -import '@src/test/__mocks__/common/hooks/useConfig.mock'; import '@src/test/__mocks__/common/helpers/pageScrolling.helper.mock'; import { getProfiles } from '@src/test/__mocks__/common/hooks/useConfig.mock'; import { fetchRecord, clearRecordState } from '@src/test/__mocks__/common/hooks/useRecordControls.mock'; @@ -9,7 +8,8 @@ import * as Router from 'react-router-dom'; import * as recordHelper from '@common/helpers/record.helper'; import * as BibframeConstants from '@src/common/constants/bibframe.constants'; import { Edit } from '@views'; -import state from '@state'; +import { useProfileStore } from '@src/store/profile'; +import { setInitialGlobalState } from '@src/test/__mocks__/store'; const monograph = { id: 'id', @@ -49,15 +49,17 @@ describe('Edit', () => { }; const renderComponent = (recordState: ProfileEntry | null) => - act(async () => - render( - snapshot.set(state.config.selectedProfile, recordState)}> + act(async () => { + setInitialGlobalState(useProfileStore, { selectedProfile: recordState }); + + return render( + , - ), - ); + ); + }); test('renders EditSection component if a profile is selected and calls fetchRecord', async () => { jest.spyOn(Router, 'useParams').mockReturnValue({ resourceId: 'testResourceId' });