diff --git a/shell/edit/monitoring.coreos.com.alertmanagerconfig/__tests__/auth.spec.ts b/shell/edit/monitoring.coreos.com.alertmanagerconfig/__tests__/auth.spec.ts
new file mode 100644
index 00000000000..8b569fe86a2
--- /dev/null
+++ b/shell/edit/monitoring.coreos.com.alertmanagerconfig/__tests__/auth.spec.ts
@@ -0,0 +1,145 @@
+import { shallowMount } from '@vue/test-utils';
+import Auth from '@shell/edit/monitoring.coreos.com.alertmanagerconfig/auth.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import SimpleSecretSelector from '@shell/components/form/SimpleSecretSelector';
+
+describe('component: Auth.vue', () => {
+  const defaultProps = {
+    mode:      'edit',
+    value:     {},
+    namespace: 'test-namespace'
+  };
+
+  it('should render correctly with initial props', () => {
+    const wrapper = shallowMount(Auth, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.find('h3').text()).toBe('%monitoringReceiver.auth.label%');
+    expect(wrapper.findComponent(LabeledSelect).exists()).toBe(true);
+  });
+
+  it('should initialize with basic auth type if present', () => {
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value: { basicAuth: { username: { name: 'test' } } } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.vm.authType).toBe('basicAuth');
+    expect(wrapper.findAllComponents(SimpleSecretSelector)).toHaveLength(2);
+  });
+
+  it('should initialize with bearer token auth type if present', () => {
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value: { bearerTokenSecret: { name: 'test' } } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.vm.authType).toBe('bearerTokenSecret');
+    expect(wrapper.findAllComponents(SimpleSecretSelector)).toHaveLength(1);
+  });
+
+  it('should switch to basic auth and clear other types', async() => {
+    const value = { bearerTokenSecret: { name: 'b', key: 'k' } };
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    await wrapper.findComponent(LabeledSelect).vm.$emit('update:value', 'basicAuth');
+    expect(wrapper.vm.authType).toBe('basicAuth');
+    expect(wrapper.props('value').bearerTokenSecret).toBeUndefined();
+    expect(wrapper.props('value').basicAuth).toBeDefined();
+  });
+
+  it('should switch to bearer token and clear other types', async() => {
+    const value = { basicAuth: { username: { name: 'u' } } };
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    await wrapper.findComponent(LabeledSelect).vm.$emit('update:value', 'bearerTokenSecret');
+    expect(wrapper.vm.authType).toBe('bearerTokenSecret');
+    expect(wrapper.props('value').basicAuth).toBeUndefined();
+    expect(wrapper.props('value').bearerTokenSecret).toBeDefined();
+  });
+
+  it('should switch to none and clear other types', async() => {
+    const value = { basicAuth: { username: { name: 'u' } } };
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    await wrapper.findComponent(LabeledSelect).vm.$emit('update:value', 'none');
+    expect(wrapper.vm.authType).toBe('none');
+    expect(wrapper.props('value').basicAuth).toBeUndefined();
+  });
+
+  it('should update basic auth username and password', async() => {
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value: { basicAuth: { username: { name: 'test' } } } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const selectors = wrapper.findAllComponents(SimpleSecretSelector);
+
+    expect(selectors).toHaveLength(2);
+
+    const usernameSelector = selectors[0];
+    const passwordSelector = selectors[1];
+
+    await usernameSelector.vm.$emit('updateSecretName', 'user-secret');
+    await usernameSelector.vm.$emit('updateSecretKey', 'user-key');
+    await passwordSelector.vm.$emit('updateSecretName', 'pass-secret');
+    await passwordSelector.vm.$emit('updateSecretKey', 'pass-key');
+
+    const basicAuth = wrapper.props('value').basicAuth;
+
+    expect(basicAuth.username.name).toBe('user-secret');
+    expect(basicAuth.username.key).toBe('user-key');
+    expect(basicAuth.password.name).toBe('pass-secret');
+    expect(basicAuth.password.key).toBe('pass-key');
+  });
+
+  it('should update bearer token secret', async() => {
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value: { bearerTokenSecret: { name: 'test' } } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const selector = wrapper.findComponent(SimpleSecretSelector);
+
+    expect(selector.exists()).toBe(true);
+
+    await selector.vm.$emit('updateSecretName', 'bearer-name');
+    await selector.vm.$emit('updateSecretKey', 'bearer-key');
+
+    const bearerToken = wrapper.props('value').bearerTokenSecret;
+
+    expect(bearerToken.name).toBe('bearer-name');
+    expect(bearerToken.key).toBe('bearer-key');
+  });
+
+  it('should render in view mode', () => {
+    const wrapper = shallowMount(Auth, {
+      props: {
+        mode: 'view', value: { basicAuth: {} }, namespace: 'ns'
+      },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.findComponent(LabeledSelect).attributes('disabled')).toBe('true');
+    const selectors = wrapper.findAllComponents(SimpleSecretSelector);
+
+    selectors.forEach((selector) => {
+      expect(selector.props('disabled')).toBe(true);
+    });
+  });
+});
diff --git a/shell/edit/monitoring.coreos.com.alertmanagerconfig/__tests__/tls.spec.ts b/shell/edit/monitoring.coreos.com.alertmanagerconfig/__tests__/tls.spec.ts
new file mode 100644
index 00000000000..cfa09d0bcdd
--- /dev/null
+++ b/shell/edit/monitoring.coreos.com.alertmanagerconfig/__tests__/tls.spec.ts
@@ -0,0 +1,226 @@
+
+import Tls from '@shell/edit/monitoring.coreos.com.alertmanagerconfig/tls.vue';
+import { shallowMount } from '@vue/test-utils';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import SimpleSecretSelector from '@shell/components/form/SimpleSecretSelector.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Banner } from '@components/Banner';
+
+describe('component: Tls', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':      (key: string) => key,
+      'i18n/exists': () => true,
+    },
+  };
+
+  const requiredProps = {
+    value:     { tlsConfig: {} },
+    namespace: 'test-namespace',
+  };
+
+  it('should render all child components', () => {
+    const wrapper = shallowMount(Tls, {
+      props:  { ...requiredProps, mode: _EDIT },
+      global: { mocks: mockStore },
+    });
+
+    const secretSelectors = wrapper.findAllComponents(SimpleSecretSelector);
+    const labeledInput = wrapper.findComponent(LabeledInput);
+
+    expect(secretSelectors).toHaveLength(3);
+    expect(labeledInput.exists()).toBe(true);
+  });
+
+  it('should show a banner if namespace is not provided', () => {
+    const wrapper = shallowMount(Tls, {
+      props: {
+        ...requiredProps,
+        namespace: undefined,
+        mode:      _EDIT,
+      },
+      global: { mocks: mockStore },
+    });
+    const banner = wrapper.findComponent(Banner);
+
+    expect(banner.exists()).toBe(true);
+    expect(banner.props().color).toBe('error');
+    expect(banner.vm.$slots.default()[0].children).toBe('%alertmanagerConfigReceiver.namespaceWarning%');
+  });
+
+  it('should not show a banner if namespace is provided', () => {
+    const wrapper = shallowMount(Tls, {
+      props:  { ...requiredProps, mode: _EDIT },
+      global: { mocks: mockStore },
+    });
+    const banner = wrapper.findComponent(Banner);
+
+    expect(banner.exists()).toBe(false);
+  });
+
+  it('should disable inputs when in view mode', () => {
+    const wrapper = shallowMount(Tls, {
+      props:  { ...requiredProps, mode: _VIEW },
+      global: { mocks: mockStore },
+    });
+
+    const secretSelectors = wrapper.findAllComponents(SimpleSecretSelector);
+    const labeledInput = wrapper.findComponent(LabeledInput);
+
+    secretSelectors.forEach((s) => expect(s.props().disabled).toBe(true));
+    expect(labeledInput.props().mode).toBe(_VIEW);
+  });
+
+  it('should initialize tlsConfig if not present', () => {
+    const value = {};
+    const wrapper = shallowMount(Tls, {
+      props: {
+        ...requiredProps,
+        value,
+        mode: _EDIT,
+      },
+      global: { mocks: mockStore },
+    });
+
+    expect(wrapper.props().value.tlsConfig).toBeDefined();
+  });
+
+  it('should correctly initialize data from props', () => {
+    const value = {
+      tlsConfig: {
+        ca: {
+          secret: {
+            key:  'ca-key',
+            name: 'ca-name'
+          }
+        },
+        cert: {
+          secret: {
+            key:  'cert-key',
+            name: 'cert-name'
+          }
+        },
+        keySecret: {
+          key:  'key-key',
+          name: 'key-name'
+        }
+      }
+    };
+
+    const wrapper = shallowMount(Tls, {
+      props: {
+        ...requiredProps,
+        value,
+        mode: _EDIT,
+      },
+      global: { mocks: mockStore },
+    });
+
+    const data = wrapper.vm.$data;
+
+    expect(data.initialCaSecretKey).toBe('ca-key');
+    expect(data.initialCaSecretName).toBe('ca-name');
+    expect(data.initialClientCertSecretKey).toBe('cert-key');
+    expect(data.initialClientCertSecretName).toBe('cert-name');
+    expect(data.initialClientKeySecretKey).toBe('key-key');
+    expect(data.initialClientKeySecretName).toBe('key-name');
+  });
+
+  describe('event handling', () => {
+    it.each([
+      ['ca', 0, 'ca', 'updateCaSecretName', 'updateCaSecretKey'],
+      ['cert', 1, 'cert', 'updateClientCertSecretName', 'updateClientCertSecretKey'],
+      ['key', 2, 'keySecret', 'updateClientKeySecretName', 'updateClientKeySecretKey'],
+    ])('should handle %p secret selector events', async(secretType, index, tlsConfigKey, nameHandler, keyHandler) => {
+      const value = { tlsConfig: {} };
+      const wrapper = shallowMount(Tls, {
+        props: {
+          ...requiredProps, value, mode: _EDIT
+        },
+        global: { mocks: mockStore },
+      });
+
+      const secretSelector = wrapper.findAllComponents(SimpleSecretSelector)[index];
+      const name = `${ secretType }-secret-name`;
+      const key = `${ secretType }-secret-key`;
+
+      await secretSelector.vm.$emit('updateSecretName', name);
+      await wrapper.vm.$nextTick();
+
+      const nameValue = tlsConfigKey === 'keySecret' ? value.tlsConfig[tlsConfigKey].name : value.tlsConfig[tlsConfigKey].secret.name;
+
+      expect(nameValue).toBe(name);
+
+      await secretSelector.vm.$emit('updateSecretKey', key);
+      await wrapper.vm.$nextTick();
+
+      const keyValue = tlsConfigKey === 'keySecret' ? value.tlsConfig[tlsConfigKey].key : value.tlsConfig[tlsConfigKey].secret.key;
+
+      expect(keyValue).toBe(key);
+    });
+  });
+
+  describe('secret updates', () => {
+    it.each([
+      ['Ca', 'updateCaSecretName', 'ca', 'name'],
+      ['Ca', 'updateCaSecretKey', 'ca', 'key'],
+      ['ClientCert', 'updateClientCertSecretName', 'cert', 'name'],
+      ['ClientCert', 'updateClientCertSecretKey', 'cert', 'key'],
+      ['ClientKey', 'updateClientKeySecretName', 'keySecret', 'name'],
+      ['ClientKey', 'updateClientKeySecretKey', 'keySecret', 'key'],
+    ])('should update %p secret %p', (secret, handler, obj, field) => {
+      const value = { tlsConfig: {} };
+      const wrapper = shallowMount(Tls, {
+        props: {
+          ...requiredProps,
+          value,
+          mode: _EDIT
+        },
+        global: { mocks: mockStore },
+      });
+
+      const data = 'test-data';
+
+      (wrapper.vm as any)[handler](data);
+
+      const dataValue = obj === 'keySecret' ? value.tlsConfig[obj][field] : value.tlsConfig[obj].secret[field];
+
+      expect(dataValue).toBe(data);
+    });
+
+    it.each([
+      ['Ca', 'updateCaSecretName', 'ca'],
+      ['ClientCert', 'updateClientCertSecretName', 'cert'],
+    ])('should remove %p secret', (secret, handler, obj) => {
+      const value = { tlsConfig: { [obj]: { secret: { name: 'test-name', key: 'test-key' } } } };
+      const wrapper = shallowMount(Tls, {
+        props: {
+          ...requiredProps,
+          value,
+          mode: _EDIT
+        },
+        global: { mocks: mockStore },
+      });
+
+      (wrapper.vm as any)[handler]('__[[NONE]]__');
+
+      expect(value.tlsConfig[obj]).toStrictEqual({});
+    });
+
+    it('should remove "ClientKey" secret', () => {
+      const value = { tlsConfig: { keySecret: { name: 'test-name', key: 'test-key' } } };
+      const wrapper = shallowMount(Tls, {
+        props: {
+          ...requiredProps,
+          value,
+          mode: _EDIT
+        },
+        global: { mocks: mockStore },
+      });
+
+      (wrapper.vm as any).updateClientKeySecretName('__[[NONE]]__');
+
+      expect(value.tlsConfig.keySecret).toStrictEqual({});
+    });
+  });
+});
diff --git a/shell/edit/monitoring.coreos.com.alertmanagerconfig/auth.vue b/shell/edit/monitoring.coreos.com.alertmanagerconfig/auth.vue
index c906a30d029..0bf8467c082 100644
--- a/shell/edit/monitoring.coreos.com.alertmanagerconfig/auth.vue
+++ b/shell/edit/monitoring.coreos.com.alertmanagerconfig/auth.vue
@@ -1,12 +1,15 @@
 <script>
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import SimpleSecretSelector from '@shell/components/form/SimpleSecretSelector';
+import Banner from '@components/Banner/Banner.vue';
 import isEmpty from 'lodash/isEmpty';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {
-  components: { LabeledSelect, SimpleSecretSelector },
-  props:      {
+  components: {
+    Banner, LabeledSelect, SimpleSecretSelector
+  },
+  props: {
     mode: {
       type:     String,
       required: true,
@@ -64,7 +67,7 @@ export default {
     initializeType(authOptions, type) {
       authOptions.forEach((authOption) => {
         if (authOption.value === type && type !== 'none') {
-          this.value.authOption.value = this.value[authOption.value] || authOption.default;
+          this.value[authOption.value] = this.value[authOption.value] || authOption.default;
         } else if (typeof this.value[authOption.value] !== 'undefined') {
           delete this.value[authOption.value];
         }
@@ -248,9 +251,9 @@ export default {
         />
       </div>
     </div>
-    <div
-      v-if="authType === 'basicAuth'"
-      class="row mb-20"
+    <div
+      v-if="authType === 'basicAuth'"
+      class="row mb-20"
     >
       <SimpleSecretSelector
         v-if="namespace"
@@ -265,16 +268,16 @@ export default {
         @updateSecretName="updateBasicAuthUsernameSecretName"
         @updateSecretKey="updateBasicAuthUsernameSecretKey"
       />
-      <Banner
-        v-else
-        color="error"
+      <Banner
+        v-else
+        color="error"
       >
         {{ t("alertmanagerConfigReceiver.namespaceWarning") }}
       </Banner>
     </div>
-    <div
-      v-if="authType === 'basicAuth'"
-      class="row mb-20"
+    <div
+      v-if="authType === 'basicAuth'"
+      class="row mb-20"
     >
       <SimpleSecretSelector
         v-if="namespace"
@@ -289,16 +292,16 @@ export default {
         @updateSecretName="updateBasicAuthPasswordSecretName"
         @updateSecretKey="updateBasicAuthPasswordSecretKey"
       />
-      <Banner
-        v-else
-        color="error"
+      <Banner
+        v-else
+        color="error"
       >
         {{ t("alertmanagerConfigReceiver.namespaceWarning") }}
       </Banner>
     </div>
-    <div
-      v-if="authType === 'bearerTokenSecret'"
-      class="row mb-20"
+    <div
+      v-if="authType === 'bearerTokenSecret'"
+      class="row mb-20"
     >
       <SimpleSecretSelector
         v-if="namespace"
@@ -313,9 +316,9 @@ export default {
         @updateSecretName="updateBearerTokenSecretName"
         @updateSecretKey="updateBearerTokenSecretKey"
       />
-      <Banner
-        v-else
-        color="error"
+      <Banner
+        v-else
+        color="error"
       >
         {{ t("alertmanagerConfigReceiver.namespaceWarning") }}
       </Banner>
diff --git a/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/__tests__/opsgenie.spec.ts b/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/__tests__/opsgenie.spec.ts
new file mode 100644
index 00000000000..68fb343977b
--- /dev/null
+++ b/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/__tests__/opsgenie.spec.ts
@@ -0,0 +1,159 @@
+import { shallowMount } from '@vue/test-utils';
+import Opsgenie from '@shell/edit/monitoring.coreos.com.alertmanagerconfig/types/opsgenie.vue';
+import { Checkbox } from '@components/Form/Checkbox';
+
+describe('component: Opsgenie.vue', () => {
+  const defaultProps = {
+    mode:      'edit',
+    value:     { responders: [] },
+    namespace: 'test-namespace'
+  };
+
+  it('should render correctly with initial props', () => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const headings = wrapper.findAll('h3');
+
+    expect(headings[0].text()).toBe('Target');
+    expect(headings[1].text()).toBe('Responders');
+    expect(wrapper.findComponent({ name: 'SimpleSecretSelector' }).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'LabeledInput' }).exists()).toBe(true);
+    expect(wrapper.findComponent(Checkbox).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'ArrayList' }).exists()).toBe(true);
+  });
+
+  it('should update proxy URL', async() => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const labeledInput = wrapper.findComponent({ name: 'LabeledInput' });
+
+    await labeledInput.vm.$emit('update:value', 'http://my-proxy.com');
+
+    expect(wrapper.props('value').httpConfig.proxyURL).toBe('http://my-proxy.com');
+  });
+
+  it('should toggle send resolved alerts checkbox', async() => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    await checkbox.vm.$emit('update:value', false);
+    expect(wrapper.props('value').sendResolved).toBe(false);
+  });
+
+  it('should handle API key secret updates', async() => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const secretSelector = wrapper.findComponent({ name: 'SimpleSecretSelector' });
+
+    await secretSelector.vm.$emit('updateSecretName', 'my-secret-name');
+    await secretSelector.vm.$emit('updateSecretKey', 'my-secret-key');
+
+    expect(wrapper.props('value').apiKey.name).toBe('my-secret-name');
+    expect(wrapper.props('value').apiKey.key).toBe('my-secret-key');
+  });
+
+  it('should add and update a responder', async() => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const arrayList = wrapper.findComponent({ name: 'ArrayList' });
+
+    await arrayList.vm.$emit('update:value', [wrapper.vm.defaultResponder]);
+
+    const responders = wrapper.vm.responders;
+
+    expect(responders).toHaveLength(1);
+    expect(responders[0].type).toBe('team');
+    expect(responders[0].target).toBe('id');
+
+    // Manually change responder type and check if watch updates the value prop
+    responders[0].type = 'user';
+    await wrapper.vm.$nextTick();
+    expect(wrapper.props('value').responders[0].type).toBe('user');
+
+    // Test updateResponder method
+    wrapper.vm.updateResponder({ selected: 'username', text: 'test-user' }, responders[0]);
+    await wrapper.vm.$nextTick();
+    expect(responders[0].target).toBe('username');
+    expect(responders[0].value).toBe('test-user');
+    // Check that the watcher has updated the value prop correctly
+    expect(wrapper.props('value').responders[0]).toEqual({ type: 'user', username: 'test-user' });
+  });
+
+  it('should remove a responder', async() => {
+    const wrapper = shallowMount(Opsgenie, {
+      props: {
+        ...defaultProps,
+        value: {
+          responders: [
+            {
+              type: 'team',
+              id:   'team-id'
+            }
+          ]
+        }
+      },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const arrayList = wrapper.findComponent({ name: 'ArrayList' });
+
+    // Simulate the internal workings of ArrayList for removing an item
+    wrapper.vm.responders.splice(0, 1);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.responders).toHaveLength(0);
+    expect(wrapper.props('value').responders).toHaveLength(0);
+  });
+
+  it('should render in view mode', () => {
+    const wrapper = shallowMount(Opsgenie, {
+      props: {
+        mode:  'view',
+        value: {
+          httpConfig:   { proxyURL: 'http://view-proxy.com' },
+          sendResolved: false,
+          responders:   [
+            {
+              type: 'user',
+              name: 'view-user'
+            }
+          ]
+        },
+        namespace: 'test-namespace'
+      },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const labeledInput = wrapper.findComponent({ name: 'LabeledInput' });
+    const checkbox = wrapper.findComponent(Checkbox);
+    const arrayList = wrapper.findComponent({ name: 'ArrayList' });
+
+    expect(labeledInput.props('mode')).toBe('view');
+    expect(checkbox.props('mode')).toBe('view');
+    expect(arrayList.props('mode')).toBe('view');
+
+    const responder = wrapper.vm.responders[0];
+
+    expect(responder.type).toBe('user');
+    expect(responder.target).toBe('name');
+    expect(responder.value).toBe('view-user');
+    expect(wrapper.vm.typeLabel(responder.type)).toBe('User');
+    expect(wrapper.vm.targetLabel(responder.target)).toBe('Name');
+  });
+});
diff --git a/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/__tests__/pagerduty.spec.ts b/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/__tests__/pagerduty.spec.ts
new file mode 100644
index 00000000000..fc52ee86077
--- /dev/null
+++ b/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/__tests__/pagerduty.spec.ts
@@ -0,0 +1,132 @@
+import { shallowMount } from '@vue/test-utils';
+import PagerDuty from '@shell/edit/monitoring.coreos.com.alertmanagerconfig/types/pagerduty.vue';
+import { Checkbox } from '@components/Form/Checkbox';
+
+describe('component: PagerDuty.vue', () => {
+  const defaultProps = {
+    mode:      'edit',
+    value:     {},
+    namespace: 'test-namespace'
+  };
+
+  it('should render correctly with initial props', () => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const headings = wrapper.findAll('h3');
+
+    expect(headings[0].text()).toBe('Target');
+
+    expect(wrapper.findComponent({ name: 'LabeledSelect' }).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'SimpleSecretSelector' }).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'LabeledInput' }).exists()).toBe(true);
+    expect(wrapper.findComponent(Checkbox).exists()).toBe(true);
+  });
+
+  it('should show routing key selector for "Events API v2"', () => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+    const selector = wrapper.findComponent({ name: 'SimpleSecretSelector' });
+
+    expect(selector.props('secretNameLabel')).toContain('monitoring.alertmanagerConfig.pagerDuty.routingKey');
+  });
+
+  it('should show service key selector for "Prometheus"', async() => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  { ...defaultProps, value: { serviceKey: { name: 's', key: 'k' } } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+    const selector = wrapper.findComponent({ name: 'SimpleSecretSelector' });
+
+    expect(selector.props('secretNameLabel')).toContain('monitoring.alertmanagerConfig.pagerDuty.serviceKey');
+  });
+
+  it('should clear other key when integration type changes', async() => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  { ...defaultProps, value: { routingKey: { name: 'r', key: 'k' } } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    wrapper.vm.integrationType = 'Prometheus';
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.props('value').routingKey).toBeNull();
+  });
+
+  it('should update routing key secret', async() => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const secretSelector = wrapper.findComponent({ name: 'SimpleSecretSelector' });
+
+    await secretSelector.vm.$emit('updateSecretName', 'routing-name');
+    await secretSelector.vm.$emit('updateSecretKey', 'routing-key');
+
+    expect(wrapper.props('value').routingKey.name).toBe('routing-name');
+    expect(wrapper.props('value').routingKey.key).toBe('routing-key');
+  });
+
+  it('should update service key secret', async() => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  { ...defaultProps, value: { serviceKey: {} } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const secretSelector = wrapper.findComponent({ name: 'SimpleSecretSelector' });
+
+    await secretSelector.vm.$emit('updateSecretName', 'service-name');
+    await secretSelector.vm.$emit('updateSecretKey', 'service-key');
+
+    expect(wrapper.props('value').serviceKey.name).toBe('service-name');
+    expect(wrapper.props('value').serviceKey.key).toBe('service-key');
+  });
+
+  it('should update proxy URL', async() => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+    const labeledInput = wrapper.findComponent({ name: 'LabeledInput' });
+
+    await labeledInput.vm.$emit('update:value', 'http://proxy.com');
+    expect(wrapper.props('value').httpConfig.proxyURL).toBe('http://proxy.com');
+  });
+
+  it('should toggle send resolved alerts', async() => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    await checkbox.vm.$emit('update:value', false);
+    expect(wrapper.props('value').sendResolved).toBe(false);
+  });
+
+  it('should render in view mode', () => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  { ...defaultProps, mode: 'view' },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.findComponent({ name: 'LabeledSelect' }).attributes('mode')).toBe('view');
+    expect(wrapper.findComponent({ name: 'SimpleSecretSelector' }).props('disabled')).toBe(true);
+    expect(wrapper.findComponent({ name: 'LabeledInput' }).attributes('mode')).toBe('view');
+    expect(wrapper.findComponent(Checkbox).attributes('mode')).toBe('view');
+  });
+
+  it('should show banner if no namespace is provided', () => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  { ...defaultProps, namespace: '' },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.findComponent({ name: 'Banner' }).exists()).toBe(true);
+  });
+});
diff --git a/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/__tests__/slack.spec.ts b/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/__tests__/slack.spec.ts
new file mode 100644
index 00000000000..66724583ea2
--- /dev/null
+++ b/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/__tests__/slack.spec.ts
@@ -0,0 +1,101 @@
+import { shallowMount } from '@vue/test-utils';
+import Slack from '@shell/edit/monitoring.coreos.com.alertmanagerconfig/types/slack.vue';
+import { Checkbox } from '@components/Form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { _CREATE } from '@shell/config/query-params';
+
+describe('component: Slack.vue', () => {
+  const defaultProps = {
+    mode:      'edit',
+    value:     {},
+    namespace: 'test-namespace'
+  };
+
+  it('should render correctly with initial props', () => {
+    const wrapper = shallowMount(Slack, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const headings = wrapper.findAll('h3');
+    expect(headings[0].text()).toBe('Target');
+
+    expect(wrapper.findComponent({ name: 'SimpleSecretSelector' }).exists()).toBe(true);
+    expect(wrapper.findAllComponents(LabeledInput)).toHaveLength(2);
+    expect(wrapper.findComponent(Checkbox).exists()).toBe(true);
+  });
+
+  it('should initialize text template in create mode', () => {
+    const wrapper = shallowMount(Slack, {
+      props:  { ...defaultProps, mode: _CREATE },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.props('value').text).toBe('{{ template "slack.rancher.text" . }}');
+  });
+
+  it('should update API URL secret', async() => {
+    const wrapper = shallowMount(Slack, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const secretSelector = wrapper.findComponent({ name: 'SimpleSecretSelector' });
+    await secretSelector.vm.$emit('updateSecretName', 'my-secret');
+    await secretSelector.vm.$emit('updateSecretKey', 'my-key');
+
+    expect(wrapper.props('value').apiURL.name).toBe('my-secret');
+    expect(wrapper.props('value').apiURL.key).toBe('my-key');
+  });
+
+  it('should update default channel', async() => {
+    const wrapper = shallowMount(Slack, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+    const channelInput = wrapper.findAllComponents(LabeledInput)[0];
+    await channelInput.vm.$emit('update:value', '#my-channel');
+    expect(wrapper.props('value').channel).toBe('#my-channel');
+  });
+
+  it('should update proxy URL', async() => {
+    const wrapper = shallowMount(Slack, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+    const proxyInput = wrapper.findAllComponents(LabeledInput)[1];
+    await proxyInput.vm.$emit('update:value', 'http://my-proxy.com');
+    expect(wrapper.props('value').httpConfig.proxyURL).toBe('http://my-proxy.com');
+  });
+
+  it('should toggle send resolved alerts', async() => {
+    const wrapper = shallowMount(Slack, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+    const checkbox = wrapper.findComponent(Checkbox);
+    await checkbox.vm.$emit('update:value', true);
+    expect(wrapper.props('value').sendResolved).toBe(true);
+  });
+
+  it('should render in view mode', () => {
+    const wrapper = shallowMount(Slack, {
+      props:  { ...defaultProps, mode: 'view' },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.findComponent({ name: 'SimpleSecretSelector' }).props('disabled')).toBe(true);
+    const inputs = wrapper.findAllComponents(LabeledInput);
+    expect(inputs[0].props('mode')).toBe('view');
+    expect(inputs[1].props('mode')).toBe('view');
+    expect(wrapper.findComponent(Checkbox).props('mode')).toBe('view');
+  });
+
+  it('should show banner if no namespace is provided', () => {
+    const wrapper = shallowMount(Slack, {
+      props:  { ...defaultProps, namespace: '' },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+    expect(wrapper.findComponent({ name: 'Banner' }).exists()).toBe(true);
+  });
+});
diff --git a/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/pagerduty.vue b/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/pagerduty.vue
index 57325c1ec2b..6f387a73aaa 100644
--- a/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/pagerduty.vue
+++ b/shell/edit/monitoring.coreos.com.alertmanagerconfig/types/pagerduty.vue
@@ -4,10 +4,11 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { Checkbox } from '@components/Form/Checkbox';
 import SimpleSecretSelector from '@shell/components/form/SimpleSecretSelector';
 import { _VIEW } from '@shell/config/query-params';
+import Banner from '@components/Banner/Banner.vue';
 
 export default {
   components: {
-    Checkbox, LabeledInput, LabeledSelect, SimpleSecretSelector
+    Banner, Checkbox, LabeledInput, LabeledSelect, SimpleSecretSelector
   },
   props: {
     mode: {
diff --git a/shell/edit/monitoring.coreos.com.receiver/__tests__/auth.spec.ts b/shell/edit/monitoring.coreos.com.receiver/__tests__/auth.spec.ts
new file mode 100644
index 00000000000..0619fc7dd5c
--- /dev/null
+++ b/shell/edit/monitoring.coreos.com.receiver/__tests__/auth.spec.ts
@@ -0,0 +1,165 @@
+import { shallowMount } from '@vue/test-utils';
+import Auth from '@shell/edit/monitoring.coreos.com.receiver/auth.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+describe('component: Auth', () => {
+  const defaultProps = {
+    mode:  'create',
+    value: {},
+  };
+
+  it('should render correctly with default auth type "none"', () => {
+    const wrapper = shallowMount(Auth, { props: { ...defaultProps } });
+
+    expect(wrapper.find('h3').text()).toBe('%monitoringReceiver.auth.label%');
+    const labeledSelect = wrapper.findComponent(LabeledSelect);
+
+    expect(labeledSelect.exists()).toBe(true);
+    expect(wrapper.vm.authType).toBe('none');
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+
+    expect(labeledInputs).toHaveLength(0);
+  });
+
+  it('should initialize with "basic_auth" if value contains it', () => {
+    const value = { basic_auth: { username: 'user' } };
+    const wrapper = shallowMount(Auth, { props: { ...defaultProps, value } });
+
+    expect(wrapper.vm.authType).toBe('basic_auth');
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+
+    expect(labeledInputs).toHaveLength(2);
+  });
+
+  it('should initialize with "bearer_token" if value contains it', () => {
+    const value = { bearer_token: 'token' };
+    const wrapper = shallowMount(Auth, { props: { ...defaultProps, value } });
+
+    expect(wrapper.vm.authType).toBe('bearer_token');
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+
+    expect(labeledInputs).toHaveLength(1);
+  });
+
+  it('should initialize with "bearer_token_file" if value contains it', () => {
+    const value = { bearer_token_file: '/path/to/file' };
+    const wrapper = shallowMount(Auth, { props: { ...defaultProps, value } });
+
+    expect(wrapper.vm.authType).toBe('bearer_token_file');
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+
+    expect(labeledInputs).toHaveLength(1);
+  });
+
+  it('should switch to "basic_auth" and display its inputs', async() => {
+    const wrapper = shallowMount(Auth, { props: { ...defaultProps } });
+
+    const labeledSelect = wrapper.findComponent(LabeledSelect);
+
+    await labeledSelect.vm.$emit('update:value', 'basic_auth');
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.authType).toBe('basic_auth');
+    expect(wrapper.props().value).toHaveProperty('basic_auth');
+    expect(wrapper.props().value.basic_auth).toStrictEqual({});
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+
+    expect(labeledInputs).toHaveLength(2);
+    expect(labeledInputs[0].props().label).toBe('%monitoringReceiver.auth.username%');
+    expect(labeledInputs[1].props().label).toBe('%monitoringReceiver.auth.password%');
+  });
+
+  it('should update basic_auth username and password', async() => {
+    const value = { basic_auth: { username: 'initial' } };
+    const wrapper = shallowMount(Auth, { props: { ...defaultProps, value } });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+
+    await labeledInputs[0].vm.$emit('update:value', 'testuser');
+    await labeledInputs[1].vm.$emit('update:value', 'testpass');
+
+    expect(wrapper.props().value.basic_auth.username).toBe('testuser');
+    expect(wrapper.props().value.basic_auth.password).toBe('testpass');
+  });
+
+  it('should switch to "bearer_token" and display its input', async() => {
+    const value = { basic_auth: { username: 'user' } };
+    const wrapper = shallowMount(Auth, { props: { ...defaultProps, value } });
+
+    const labeledSelect = wrapper.findComponent(LabeledSelect);
+
+    await labeledSelect.vm.$emit('update:value', 'bearer_token');
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.authType).toBe('bearer_token');
+    expect(wrapper.props().value).not.toHaveProperty('basic_auth');
+    expect(wrapper.props().value).toHaveProperty('bearer_token');
+    expect(wrapper.props().value.bearer_token).toBe('');
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+
+    expect(labeledInputs).toHaveLength(1);
+    expect(labeledInputs[0].props().label).toBe('%monitoringReceiver.auth.bearerToken.label%');
+  });
+
+  it('should update bearer_token', async() => {
+    const value = { bearer_token: 'initial-token' };
+    const wrapper = shallowMount(Auth, { props: { ...defaultProps, value } });
+    const labeledInput = wrapper.findComponent(LabeledInput);
+
+    await labeledInput.vm.$emit('update:value', 'secret-token');
+
+    expect(wrapper.props().value.bearer_token).toBe('secret-token');
+  });
+
+  it('should switch to "bearer_token_file" and display its input', async() => {
+    const value = { basic_auth: { username: 'user' } };
+    const wrapper = shallowMount(Auth, { props: { ...defaultProps, value } });
+
+    const labeledSelect = wrapper.findComponent(LabeledSelect);
+
+    await labeledSelect.vm.$emit('update:value', 'bearer_token_file');
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.authType).toBe('bearer_token_file');
+    expect(wrapper.props().value).not.toHaveProperty('basic_auth');
+    expect(wrapper.props().value).toHaveProperty('bearer_token_file');
+    expect(wrapper.props().value.bearer_token_file).toBe('');
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+
+    expect(labeledInputs).toHaveLength(1);
+    expect(labeledInputs[0].props().label).toBe('%monitoringReceiver.auth.bearerTokenFile.label%');
+  });
+
+  it('should update bearer_token_file', async() => {
+    const value = { bearer_token_file: '/initial/path' };
+    const wrapper = shallowMount(Auth, { props: { ...defaultProps, value } });
+    const labeledInput = wrapper.findComponent(LabeledInput);
+
+    await labeledInput.vm.$emit('update:value', '/path/to/token/file');
+
+    expect(wrapper.props().value.bearer_token_file).toBe('/path/to/token/file');
+  });
+
+  it('should switch from a selected auth type back to "none"', async() => {
+    const value = { basic_auth: { username: 'user' } };
+    const wrapper = shallowMount(Auth, { props: { ...defaultProps, value } });
+
+    expect(wrapper.vm.authType).toBe('basic_auth');
+
+    const labeledSelect = wrapper.findComponent(LabeledSelect);
+
+    await labeledSelect.vm.$emit('update:value', 'none');
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.authType).toBe('none');
+    expect(wrapper.props().value).not.toHaveProperty('basic_auth');
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+
+    expect(labeledInputs).toHaveLength(0);
+  });
+});
diff --git a/shell/edit/monitoring.coreos.com.receiver/__tests__/tls.spec.ts b/shell/edit/monitoring.coreos.com.receiver/__tests__/tls.spec.ts
new file mode 100644
index 00000000000..682c8c38554
--- /dev/null
+++ b/shell/edit/monitoring.coreos.com.receiver/__tests__/tls.spec.ts
@@ -0,0 +1,115 @@
+import { shallowMount } from '@vue/test-utils';
+import Tls from '@shell/edit/monitoring.coreos.com.receiver/tls.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Banner } from '@components/Banner';
+
+describe('shell/edit/monitoring.coreos.com.receiver/tls.vue', () => {
+  const mockValue = {
+    tls_config: {
+      ca_file: 'ca.pem', cert_file: 'cert.pem', key_file: 'key.pem'
+    }
+  };
+  const mockMode = 'edit';
+
+  it('should mount correctly', () => {
+    const wrapper = shallowMount(Tls, {
+      props: {
+        value: mockValue,
+        mode:  mockMode,
+      },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('should initialize tls_config if it does not exist', () => {
+    const wrapper = shallowMount(Tls, {
+      props: {
+        value: {},
+        mode:  mockMode,
+      },
+    });
+
+    expect(wrapper.props().value.tls_config).toBeDefined();
+    expect(wrapper.props().value.tls_config).toStrictEqual({});
+  });
+
+  it('should render all LabeledInput components with correct labels and modes', () => {
+    const wrapper = shallowMount(Tls, {
+      props: {
+        value: mockValue,
+        mode:  mockMode,
+      },
+    });
+
+    const inputs = wrapper.findAllComponents(LabeledInput);
+
+    expect(inputs).toHaveLength(3);
+
+    const labels = [
+      '%monitoring.receiver.tls.caFilePath.label%',
+      '%monitoring.receiver.tls.certFilePath.label%',
+      '%monitoring.receiver.tls.keyFilePath.label%',
+    ];
+
+    inputs.forEach((input, i) => {
+      expect(input.props('label')).toBe(labels[i]);
+      expect(input.props('mode')).toBe(mockMode);
+    });
+  });
+
+  it('should bind LabeledInput values correctly', () => {
+    const wrapper = shallowMount(Tls, {
+      props: {
+        value: mockValue,
+        mode:  mockMode,
+      },
+    });
+
+    const inputs = wrapper.findAllComponents(LabeledInput);
+
+    expect(inputs[0].props('value')).toBe(mockValue.tls_config.ca_file);
+    expect(inputs[1].props('value')).toBe(mockValue.tls_config.cert_file);
+    expect(inputs[2].props('value')).toBe(mockValue.tls_config.key_file);
+  });
+
+  it('should update the value when LabeledInput emits an update', async() => {
+    const wrapper = shallowMount(Tls, {
+      props: {
+        value: {
+          tls_config: {
+            ca_file: '', cert_file: '', key_file: ''
+          }
+        },
+        mode: mockMode,
+      },
+    });
+
+    const inputs = wrapper.findAllComponents(LabeledInput);
+    const newCaFile = 'new-ca.pem';
+    const newCertFile = 'new-cert.pem';
+    const newKeyFile = 'new-key.pem';
+
+    await inputs[0].vm.$emit('update:value', newCaFile);
+    await inputs[1].vm.$emit('update:value', newCertFile);
+    await inputs[2].vm.$emit('update:value', newKeyFile);
+
+    expect(wrapper.props().value.tls_config.ca_file).toBe(newCaFile);
+    expect(wrapper.props().value.tls_config.cert_file).toBe(newCertFile);
+    expect(wrapper.props().value.tls_config.key_file).toBe(newKeyFile);
+  });
+
+  it('should display the informational banner', () => {
+    const wrapper = shallowMount(Tls, {
+      props: {
+        value: mockValue,
+        mode:  mockMode,
+      },
+    });
+
+    const banner = wrapper.findComponent(Banner);
+
+    expect(banner.exists()).toBe(true);
+    expect(banner.props('color')).toBe('info');
+  });
+});
diff --git a/shell/edit/monitoring.coreos.com.receiver/types/__tests__/email.spec.ts b/shell/edit/monitoring.coreos.com.receiver/types/__tests__/email.spec.ts
new file mode 100644
index 00000000000..6c35bd3aa2f
--- /dev/null
+++ b/shell/edit/monitoring.coreos.com.receiver/types/__tests__/email.spec.ts
@@ -0,0 +1,86 @@
+
+import { shallowMount } from '@vue/test-utils';
+import Email from '@shell/edit/monitoring.coreos.com.receiver/types/email.vue';
+import TLS from '@shell/edit/monitoring.coreos.com.receiver/tls.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: Email', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':      (key: string) => key,
+      'i18n/exists': () => true,
+    },
+  };
+
+  const requiredProps = {
+    mode:  _EDIT,
+    value: {},
+  };
+
+  it('should render all child components', () => {
+    const wrapper = shallowMount(Email, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkboxes = wrapper.findAllComponents(Checkbox);
+    const tls = wrapper.findComponent(TLS);
+
+    expect(labeledInputs).toHaveLength(6);
+    expect(checkboxes).toHaveLength(2);
+    expect(tls.exists()).toBe(true);
+  });
+
+  it('should pass down the mode prop to child components', () => {
+    const wrapper = shallowMount(Email, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkboxes = wrapper.findAllComponents(Checkbox);
+    const tls = wrapper.findComponent(TLS);
+
+    labeledInputs.forEach((input) => {
+      expect(input.props().mode).toBe(_EDIT);
+    });
+
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox.props().mode).toBe(_EDIT);
+    });
+
+    expect(tls.props().mode).toBe(_EDIT);
+  });
+
+  it('should initialize send_resolved and require_tls to false if not present', () => {
+    const value = {};
+    const wrapper = shallowMount(Email, {
+      props: {
+        ...requiredProps,
+        value,
+      },
+      global: { mocks: mockStore },
+    });
+
+    expect(wrapper.props().value.send_resolved).toBe(false);
+    expect(wrapper.props().value.require_tls).toBe(false);
+  });
+
+  it('should emit an input event when TLS component emits an update:value event', async() => {
+    const wrapper = shallowMount(Email, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const tls = wrapper.findComponent(TLS);
+    const updatedValue = { smarthost: 'new-value' };
+
+    await tls.vm.$emit('update:value', updatedValue);
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('input')?.[0][0]).toStrictEqual(updatedValue);
+  });
+});
diff --git a/shell/edit/monitoring.coreos.com.receiver/types/__tests__/opsgenie.spec.ts b/shell/edit/monitoring.coreos.com.receiver/types/__tests__/opsgenie.spec.ts
new file mode 100644
index 00000000000..c5fdb534cfb
--- /dev/null
+++ b/shell/edit/monitoring.coreos.com.receiver/types/__tests__/opsgenie.spec.ts
@@ -0,0 +1,209 @@
+
+import { shallowMount } from '@vue/test-utils';
+import Opsgenie, { TARGETS, TYPES } from '@shell/edit/monitoring.coreos.com.receiver/types/opsgenie.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import ArrayList from '@shell/components/form/ArrayList.vue';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+
+describe('component: Opsgenie', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':      (key: string) => key,
+      'i18n/exists': () => true,
+    },
+  };
+
+  const requiredProps = {
+    mode:  _EDIT,
+    value: { responders: [] },
+  };
+
+  it('should render all child components', () => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+    const arrayList = wrapper.findComponent(ArrayList);
+
+    expect(labeledInputs).toHaveLength(2);
+    expect(checkbox.exists()).toBe(true);
+    expect(arrayList.exists()).toBe(true);
+  });
+
+  it('should pass down the mode prop to child components', () => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+    const arrayList = wrapper.findComponent(ArrayList);
+
+    labeledInputs.forEach((input) => {
+      expect(input.props().mode).toBe(_EDIT);
+    });
+
+    expect(checkbox.props().mode).toBe(_EDIT);
+    expect(arrayList.props().mode).toBe(_EDIT);
+  });
+
+  describe('data initialization', () => {
+    it('should initialize http_config, send_resolved, and responders', () => {
+      const value = {};
+      const wrapper = shallowMount(Opsgenie, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.props().value.http_config).toBeDefined();
+      expect(wrapper.props().value.send_resolved).toBe(true);
+      expect(wrapper.props().value.responders).toBeDefined();
+    });
+
+    it('should correctly transform responders from props', () => {
+      const value = {
+        responders: [
+          { type: 'team', id: 'team-id' },
+          { type: 'user', name: 'user-name' },
+        ],
+      };
+      const wrapper = shallowMount(Opsgenie, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.vm.responders).toStrictEqual([
+        {
+          type: 'team', target: 'id', value: 'team-id'
+        },
+        {
+          type: 'user', target: 'name', value: 'user-name'
+        },
+      ]);
+    });
+  });
+
+  describe('watchers', () => {
+    it('should update value.responders when responders data changes', async() => {
+      const value = { responders: [] };
+      const wrapper = shallowMount(Opsgenie, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      wrapper.vm.responders = [
+        {
+          type: 'team', target: 'id', value: 'team-id'
+        },
+        {
+          type: 'user', target: 'name', value: 'user-name'
+        },
+      ];
+
+      await wrapper.vm.$nextTick();
+
+      expect(value.responders).toStrictEqual([
+        { type: 'team', id: 'team-id' },
+        { type: 'user', name: 'user-name' },
+      ]);
+    });
+  });
+
+  describe('methods', () => {
+    it('should update a responder with updateResponder', () => {
+      const wrapper = shallowMount(Opsgenie, {
+        props:  requiredProps,
+        global: { mocks: mockStore },
+      });
+      const responder = {
+        type:   'team',
+        target: 'id',
+        value:  'old-value',
+      };
+
+      wrapper.vm.updateResponder({ selected: 'name', text: 'new-value' }, responder);
+
+      expect(responder.target).toBe('name');
+      expect(responder.value).toBe('new-value');
+    });
+
+    it('should return the correct label with typeLabel', () => {
+      const wrapper = shallowMount(Opsgenie, {
+        props:  requiredProps,
+        global: { mocks: mockStore },
+      });
+
+      TYPES.forEach((type) => {
+        expect(wrapper.vm.typeLabel(type.value)).toBe(type.label);
+      });
+    });
+
+    it('should return the correct label with targetLabel', () => {
+      const wrapper = shallowMount(Opsgenie, {
+        props:  requiredProps,
+        global: { mocks: mockStore },
+      });
+
+      TARGETS.forEach((target) => {
+        expect(wrapper.vm.targetLabel(target.value)).toBe(target.label);
+      });
+    });
+  });
+
+  describe('template', () => {
+    describe('responders', () => {
+      it('should render responders correctly in edit mode', async() => {
+        const value = { responders: [{ type: 'team', id: 'team-id' }] };
+        const wrapper = shallowMount(Opsgenie, {
+          props: {
+            ...requiredProps,
+            value,
+          },
+          global: { mocks: mockStore },
+        });
+
+        const arrayList = wrapper.findComponent(ArrayList);
+
+        expect(arrayList.props().value).toStrictEqual([{
+          type:   'team',
+          target: 'id',
+          value:  'team-id'
+        }]);
+      });
+
+      it('should render responders correctly in view mode', async() => {
+        const value = { responders: [{ type: 'team', id: 'team-id' }] };
+        const wrapper = shallowMount(Opsgenie, {
+          props: {
+            ...requiredProps,
+            value,
+            mode: _VIEW,
+          },
+          global: { mocks: mockStore },
+        });
+
+        const arrayList = wrapper.findComponent(ArrayList);
+
+        expect(arrayList.props().value).toStrictEqual([{
+          type:   'team',
+          target: 'id',
+          value:  'team-id'
+        }]);
+      });
+    });
+  });
+});
diff --git a/shell/edit/monitoring.coreos.com.receiver/types/__tests__/pagerduty.spec.ts b/shell/edit/monitoring.coreos.com.receiver/types/__tests__/pagerduty.spec.ts
new file mode 100644
index 00000000000..65084516e45
--- /dev/null
+++ b/shell/edit/monitoring.coreos.com.receiver/types/__tests__/pagerduty.spec.ts
@@ -0,0 +1,105 @@
+
+import { shallowMount } from '@vue/test-utils';
+import Pagerduty from '@shell/edit/monitoring.coreos.com.receiver/types/pagerduty.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: Pagerduty', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':      (key: string) => key,
+      'i18n/exists': () => true,
+    },
+  };
+
+  const requiredProps = {
+    mode:  _EDIT,
+    value: {},
+  };
+
+  it('should render all child components', () => {
+    const wrapper = shallowMount(Pagerduty, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+    const labeledSelect = wrapper.findComponent(LabeledSelect);
+
+    expect(labeledInputs).toHaveLength(2);
+    expect(checkbox.exists()).toBe(true);
+    expect(labeledSelect.exists()).toBe(true);
+  });
+
+  it('should pass down the mode prop to child components', () => {
+    const wrapper = shallowMount(Pagerduty, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+    const labeledSelect = wrapper.findComponent(LabeledSelect);
+
+    labeledInputs.forEach((input) => {
+      expect(input.props().mode).toBe(_EDIT);
+    });
+
+    expect(checkbox.props().mode).toBe(_EDIT);
+    expect(labeledSelect.attributes().mode).toBe(_EDIT);
+  });
+
+  describe('data initialization', () => {
+    it('should initialize http_config and send_resolved', () => {
+      const value = {};
+      const wrapper = shallowMount(Pagerduty, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.props().value.http_config).toBeDefined();
+      expect(wrapper.props().value.send_resolved).toBe(true);
+    });
+
+    it.each([
+      ['Events API v2', { routing_key: 'test-key' }],
+      ['Prometheus', { service_key: 'test-key' }],
+      ['Events API v2', {}],
+    ])('should set integrationType to %p', (expectedType, value) => {
+      const wrapper = shallowMount(Pagerduty, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.vm.integrationType).toBe(expectedType);
+    });
+  });
+
+  describe('watchers', () => {
+    it('should clear old integration key when integrationType changes', async() => {
+      const value = { routing_key: 'test-key' };
+      const wrapper = shallowMount(Pagerduty, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      wrapper.vm.integrationType = 'Prometheus';
+
+      await wrapper.vm.$nextTick();
+
+      expect(value.routing_key).toBeNull();
+    });
+  });
+});
diff --git a/shell/edit/monitoring.coreos.com.receiver/types/__tests__/slack.spec.ts b/shell/edit/monitoring.coreos.com.receiver/types/__tests__/slack.spec.ts
new file mode 100644
index 00000000000..f54758173c6
--- /dev/null
+++ b/shell/edit/monitoring.coreos.com.receiver/types/__tests__/slack.spec.ts
@@ -0,0 +1,92 @@
+
+import { shallowMount } from '@vue/test-utils';
+import Slack from '@shell/edit/monitoring.coreos.com.receiver/types/slack.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
+
+describe('component: Slack', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':      (key: string) => key,
+      'i18n/exists': () => true,
+    },
+  };
+
+  const requiredProps = {
+    mode:  _EDIT,
+    value: {},
+  };
+
+  it('should render all child components', () => {
+    const wrapper = shallowMount(Slack, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    expect(labeledInputs).toHaveLength(3);
+    expect(checkbox.exists()).toBe(true);
+  });
+
+  it('should pass down the mode prop to child components', () => {
+    const wrapper = shallowMount(Slack, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    labeledInputs.forEach((input) => {
+      expect(input.props().mode).toBe(_EDIT);
+    });
+
+    expect(checkbox.props().mode).toBe(_EDIT);
+  });
+
+  describe('data initialization', () => {
+    it('should initialize http_config and send_resolved', () => {
+      const value = {};
+      const wrapper = shallowMount(Slack, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.props().value.http_config).toBeDefined();
+      expect(wrapper.props().value.send_resolved).toBe(false);
+    });
+
+    it('should set default text when mode is create', () => {
+      const value = {};
+      const wrapper = shallowMount(Slack, {
+        props: {
+          ...requiredProps,
+          value,
+          mode: _CREATE,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.props().value.text).toBe('{{ template "slack.rancher.text" . }}');
+    });
+
+    it('should not set default text when mode is not create', () => {
+      const value = {};
+      const wrapper = shallowMount(Slack, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.props().value.text).toBeUndefined();
+    });
+  });
+});
diff --git a/shell/edit/monitoring.coreos.com.receiver/types/__tests__/webhook.spec.ts b/shell/edit/monitoring.coreos.com.receiver/types/__tests__/webhook.spec.ts
new file mode 100644
index 00000000000..40bfb7aac72
--- /dev/null
+++ b/shell/edit/monitoring.coreos.com.receiver/types/__tests__/webhook.spec.ts
@@ -0,0 +1,131 @@
+
+import { shallowMount } from '@vue/test-utils';
+import Webhook from '@shell/edit/monitoring.coreos.com.receiver/types/webhook.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import TLS from '@shell/edit/monitoring.coreos.com.receiver/tls.vue';
+import Auth from '@shell/edit/monitoring.coreos.com.receiver/auth.vue';
+import { Banner } from '@components/Banner';
+import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
+import { ALIBABA_CLOUD_SMS_URL, MS_TEAMS_URL } from '@shell/edit/monitoring.coreos.com.receiver/types/webhook.add.vue';
+
+describe('component: Webhook', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':      (key: string) => key,
+      'i18n/exists': () => true,
+    },
+  };
+
+  const requiredProps = {
+    mode:  _EDIT,
+    value: {},
+  };
+
+  it('should render all child components', () => {
+    const wrapper = shallowMount(Webhook, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+    const tls = wrapper.findComponent(TLS);
+    const auth = wrapper.findComponent(Auth);
+
+    expect(labeledInputs).toHaveLength(2);
+    expect(checkbox.exists()).toBe(true);
+    expect(tls.exists()).toBe(true);
+    expect(auth.exists()).toBe(true);
+  });
+
+  it('should pass down the mode prop to child components', () => {
+    const wrapper = shallowMount(Webhook, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+    const tls = wrapper.findComponent(TLS);
+    const auth = wrapper.findComponent(Auth);
+
+    labeledInputs.forEach((input) => {
+      expect(input.props().mode).toBe(_EDIT);
+    });
+
+    expect(checkbox.props().mode).toBe(_EDIT);
+    expect(tls.props().mode).toBe(_EDIT);
+    expect(auth.props().mode).toBe(_EDIT);
+  });
+
+  describe('data initialization', () => {
+    it('should initialize http_config and send_resolved', () => {
+      const value = {};
+      const wrapper = shallowMount(Webhook, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.props().value.http_config).toBeDefined();
+      expect(wrapper.props().value.send_resolved).toBe(false);
+    });
+
+    it.each([
+      [true, _CREATE, MS_TEAMS_URL],
+      [true, _EDIT, MS_TEAMS_URL],
+      [false, _VIEW, MS_TEAMS_URL],
+      [true, _CREATE, ALIBABA_CLOUD_SMS_URL],
+      [true, _EDIT, ALIBABA_CLOUD_SMS_URL],
+      [false, _VIEW, ALIBABA_CLOUD_SMS_URL],
+      [false, _CREATE, 'https://some.other.url/'],
+    ])('should set showNamespaceBanner to %p when mode is %p and url is %p', (expected, mode, url) => {
+      const value = { url };
+      const wrapper = shallowMount(Webhook, {
+        props: {
+          ...requiredProps,
+          value,
+          mode,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.vm.showNamespaceBanner).toBe(expected);
+    });
+  });
+
+  describe('banner', () => {
+    it('should show banner when showNamespaceBanner is true', () => {
+      const wrapper = shallowMount(Webhook, {
+        props: {
+          ...requiredProps,
+          value: { url: MS_TEAMS_URL },
+          mode:  _CREATE,
+        },
+        global: { mocks: mockStore },
+      });
+
+      const banner = wrapper.findComponent(Banner);
+
+      expect(banner.exists()).toBe(true);
+    });
+
+    it('should not show banner when showNamespaceBanner is false', () => {
+      const wrapper = shallowMount(Webhook, {
+        props: {
+          ...requiredProps,
+          value: { url: 'https://some.other.url/' },
+          mode:  _CREATE,
+        },
+        global: { mocks: mockStore },
+      });
+
+      const banner = wrapper.findComponent(Banner);
+
+      expect(banner.exists()).toBe(false);
+    });
+  });
+});