Mock rules JSON schema in tests and cancel state update on unmount

packages/app-elements/src/mocks/data/core_schemas.ts

@@ -0,0 +1,16 @@
+import { HttpResponse, http } from "msw"
+
+import orderRulesJsonSchema from "#ui/forms/RuleEngine/json_schema/order_rules.json"
+import priceRulesJsonSchema from "#ui/forms/RuleEngine/json_schema/price_rules.json"
+
+const orderRulesSchema = http.get(
+  `https://core.commercelayer.*/api/public/schemas/order_rules`,
+  async () => HttpResponse.json(orderRulesJsonSchema),
+)
+
+const priceRulesSchema = http.get(
+  `https://core.commercelayer.*/api/public/schemas/price_rules`,
+  async () => HttpResponse.json(priceRulesJsonSchema),
+)
+
+export default [orderRulesSchema, priceRulesSchema]

packages/app-elements/src/mocks/handlers.ts

@@ -1,6 +1,7 @@
 import { HttpResponse, http } from "msw"
 
 import corePublicResources from "./data/core_resources"
+import coreSchemas from "./data/core_schemas"
 import countries from "./data/countries"
 import customers from "./data/customers"
 import markets from "./data/markets"
@@ -107,6 +108,7 @@ export const handlers = [
   }),
 
   ...corePublicResources,
+  ...coreSchemas,
   ...customers,
   ...countries,
   ...markets,

packages/app-elements/src/mocks/setup.ts

@@ -10,13 +10,6 @@ beforeAll(() => {
         return
       }
 
-      if (
-        url.href ===
-        "https://core.commercelayer.io/api/public/schemas/order_rules"
-      ) {
-        return
-      }
-
       // Otherwise, print a warning for any unhandled request.
       print.error()
     },

packages/app-elements/src/ui/forms/RuleEngine/RuleEngineComponent.tsx

@@ -93,13 +93,23 @@ export function RuleEngine(props: RuleEngineProps): React.JSX.Element {
 
   useEffect(
     function parseSchema() {
-      fetchJsonSchema(props.schemaType, domain).then((jsonSchema) => {
+      let cancelled = false
+
+      void fetchJsonSchema(props.schemaType, domain).then((jsonSchema) => {
+        if (cancelled) {
+          return
+        }
+
         const parsedOptionsConfig = parseOptionsFromSchema(
           jsonSchema as any,
           props.schemaType,
         )
         setOptionsConfig(parsedOptionsConfig)
       })
+
+      return () => {
+        cancelled = true
+      }
     },
     [domain],
   )