fix(t9n): fix error caused by disconnecting components during the set…

…ting of initial message overrides (#9368)

**Related Issue:** #9240

## Summary

This updates the `t9n` module to use a noop function (instead of
undefined) for the injected watcher callback when disconnected. This
change addresses an issue where a component invokes watchers during
disconnection.

packages/calcite-components/src/tests/commonTests/t9n.ts

@@ -1,9 +1,10 @@
 import { E2EElement, E2EPage } from "@stencil/core/testing";
 import { toHaveNoViolations } from "jest-axe";
+import { HTMLStencilElement } from "@stencil/core/internal";
 import { MessageBundle } from "../../utils/t9n";
-import { IntrinsicElementsWithProp } from "./../utils";
+import { IntrinsicElementsWithProp, newProgrammaticE2EPage } from "./../utils";
 import { getTagAndPage } from "./utils";
-import { ComponentTestSetup } from "./interfaces";
+import { ComponentTag, ComponentTestSetup } from "./interfaces";
 
 expect.extend(toHaveNoViolations);
 
@@ -40,6 +41,7 @@ export async function t9n(componentTestSetup: ComponentTestSetup): Promise<void>
   it("has defined default messages", async () => await assertDefaultMessages());
   it("overrides messages", async () => await assertOverrides());
   it("switches messages", async () => await assertLangSwitch());
+  it("does not throw when removed during message loading", async () => await assertNoErrorOnRemovalDuringMessageLoad());
 
   async function assertDefaultMessages(): Promise<void> {
     expect(await getCurrentMessages()).toBeDefined();
@@ -97,4 +99,22 @@ export async function t9n(componentTestSetup: ComponentTestSetup): Promise<void>
     component.removeAttribute("lang");
     await page.waitForChanges();
   }
+
+  async function assertNoErrorOnRemovalDuringMessageLoad(): Promise<void> {
+    async function runTest(): Promise<void> {
+      type CalciteComponentsWithMessageOverrides = IntrinsicElementsWithProp<"messageOverrides"> & HTMLStencilElement;
+
+      const page = await newProgrammaticE2EPage();
+      await page.evaluate(async (tag: ComponentTag) => {
+        const component = document.createElement(tag) as CalciteComponentsWithMessageOverrides;
+        document.body.append(component);
+        await component.componentOnReady();
+        component.messageOverrides = { ...component.messageOverrides };
+        component.remove();
+      }, component.tagName.toLowerCase());
+      await page.waitForChanges();
+    }
+
+    await expect(runTest()).resolves.toBeUndefined();
+  }
 }

packages/calcite-components/src/utils/t9n.ts

@@ -35,6 +35,10 @@ function mergeMessages(component: T9nComponent): void {
   };
 }
 
+function noop(): void {
+  // intentionally empty
+}
+
 /**
  * This utility sets up the messages used by the component. It should be awaited in the `componentWillLoad` lifecycle hook.
  *
@@ -94,7 +98,8 @@ export function connectMessages(component: T9nComponent): void {
  * @param component
  */
 export function disconnectMessages(component: T9nComponent): void {
-  component.onMessagesChange = undefined;
+  // we set this to noop to for watchers triggered when components are disconnected
+  component.onMessagesChange = noop;
 }
 
 /**