From 5309e1f275747a3801565267dc4d6ea3eefa2a12 Mon Sep 17 00:00:00 2001 From: Christian Date: Tue, 15 Apr 2025 19:43:16 -0700 Subject: [PATCH] Improve the testability of MessageStore This changeintroduces a **targeted** approach to improve the testability of MessageStore: - Created a new ConfigurationStore as a Pinia store to replace usage of useConfiguration composable in MessageStore - Created a new EditRetryStore as a Pinia store to replace useEditAndRetry composable usage in MessageStore - Removed automatic initialization in the store definition to avoid network calls during tests and take advantage of Pinia testing infraestructure that stubs actions by default and allow tests to patch the stores state instead for each scenario - The Message store explicitly calls loadConfig() of the new stores during initialization, which in turn is properly stubbed by Pinia when used in tests - This allows component tests to run without unwanted network calls when patch the store state is preffered by the developer writing the component test - The original useConfiguration composable remains untouched for other components This focused refactoring prevents network calls from being made during tests while minimizing changes to the codebase, as it only affects MessageStore.ts without requiring a broader refactoring across all components that use configuration data. --- .../src/composables/useEditAndRetry.ts | 12 ---------- src/Frontend/src/stores/ConfigurationStore.ts | 24 +++++++++++++++++++ src/Frontend/src/stores/EditRetryStore.ts | 24 +++++++++++++++++++ src/Frontend/src/stores/MessageStore.ts | 14 +++++++---- 4 files changed, 57 insertions(+), 17 deletions(-) delete mode 100644 src/Frontend/src/composables/useEditAndRetry.ts create mode 100644 src/Frontend/src/stores/ConfigurationStore.ts create mode 100644 src/Frontend/src/stores/EditRetryStore.ts diff --git a/src/Frontend/src/composables/useEditAndRetry.ts b/src/Frontend/src/composables/useEditAndRetry.ts deleted file mode 100644 index 28cf9b138..000000000 --- a/src/Frontend/src/composables/useEditAndRetry.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls"; -import { EditAndRetryConfig } from "@/resources/Configuration"; -import { ref } from "vue"; - -export const editRetryConfig = ref({ enabled: false, locked_headers: [], sensitive_headers: [] }); - -async function populate() { - const [, data] = await useTypedFetchFromServiceControl("edit/config"); - - editRetryConfig.value = data; -} -populate(); diff --git a/src/Frontend/src/stores/ConfigurationStore.ts b/src/Frontend/src/stores/ConfigurationStore.ts new file mode 100644 index 000000000..673b4e588 --- /dev/null +++ b/src/Frontend/src/stores/ConfigurationStore.ts @@ -0,0 +1,24 @@ +import { acceptHMRUpdate, defineStore } from "pinia"; +import { ref } from "vue"; +import Configuration from "@/resources/Configuration"; +import { useFetchFromServiceControl } from "@/composables/serviceServiceControlUrls"; + +export const useConfigurationStore = defineStore("ConfigurationStore", () => { + const configuration = ref(null); + + async function loadConfig() { + const response = await useFetchFromServiceControl("configuration"); + configuration.value = await response.json(); + } + + return { + configuration, + loadConfig, + }; +}); + +if (import.meta.hot) { + import.meta.hot.accept(acceptHMRUpdate(useConfigurationStore, import.meta.hot)); +} + +export type ConfigurationStore = ReturnType; diff --git a/src/Frontend/src/stores/EditRetryStore.ts b/src/Frontend/src/stores/EditRetryStore.ts new file mode 100644 index 000000000..98576263f --- /dev/null +++ b/src/Frontend/src/stores/EditRetryStore.ts @@ -0,0 +1,24 @@ +import { acceptHMRUpdate, defineStore } from "pinia"; +import { ref } from "vue"; +import { EditAndRetryConfig } from "@/resources/Configuration"; +import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls"; + +export const useEditRetryStore = defineStore("EditRetryStore", () => { + const config = ref({ enabled: false, locked_headers: [], sensitive_headers: [] }); + + async function loadConfig() { + const [, data] = await useTypedFetchFromServiceControl("edit/config"); + config.value = data; + } + + return { + config, + loadConfig, + }; +}); + +if (import.meta.hot) { + import.meta.hot.accept(acceptHMRUpdate(useEditRetryStore, import.meta.hot)); +} + +export type EditRetryStore = ReturnType; diff --git a/src/Frontend/src/stores/MessageStore.ts b/src/Frontend/src/stores/MessageStore.ts index a3cfa5326..20dcf75e7 100644 --- a/src/Frontend/src/stores/MessageStore.ts +++ b/src/Frontend/src/stores/MessageStore.ts @@ -3,11 +3,11 @@ import { reactive, ref } from "vue"; import Header from "@/resources/Header"; import type EndpointDetails from "@/resources/EndpointDetails"; import FailedMessage, { ExceptionDetails, FailedMessageStatus } from "@/resources/FailedMessage"; -import { editRetryConfig } from "@/composables/useEditAndRetry"; +import { useEditRetryStore } from "@/stores/EditRetryStore"; +import { useConfigurationStore } from "@/stores/ConfigurationStore"; import { useFetchFromServiceControl, useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls"; import Message, { MessageStatus } from "@/resources/Message"; import moment from "moment/moment"; -import { useConfiguration } from "@/composables/configuration"; import { parse, stringify } from "lossless-json"; import xmlFormat from "xml-formatter"; import { useArchiveMessage, useRetryMessages, useUnarchiveMessage } from "@/composables/serviceFailedMessage"; @@ -67,6 +67,11 @@ export const useMessageStore = defineStore("MessageStore", () => { let bodyLoadedId = ""; let conversationLoadedId = ""; const conversationData = ref>({ data: [] }); + const editRetryStore = useEditRetryStore(); + const configStore = useConfigurationStore(); + + editRetryStore.loadConfig(); + configStore.loadConfig(); function reset() { state.data = { failure_metadata: {}, failure_status: {}, dialog_status: {} }; @@ -284,14 +289,13 @@ export const useMessageStore = defineStore("MessageStore", () => { return exportString; } - const configuration = useConfiguration(); - const error_retention_period = moment.duration(configuration.value?.data_retention.error_retention_period).asHours(); + const error_retention_period = moment.duration(configStore.configuration?.data_retention?.error_retention_period).asHours(); return { headers, body, state, - edit_and_retry_config: editRetryConfig, + edit_and_retry_config: editRetryStore.config, reset, loadMessage, loadFailedMessage,