@rancher/shell 3.0.9-rc.5 → 3.0.9

package/edit/monitoring.coreos.com.receiver/__tests__/index.test.ts

@@ -0,0 +1,153 @@
+import { shallowMount } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+import Index from '../index.vue';
+
+describe('shell/edit/monitoring.coreos.com.receiver/index.vue', () => {
+  const mockStore = (resourceFields = {}) => ({
+    getters: {
+      'cluster/schemaFor': jest.fn(() => ({ resourceFields })),
+      clusterId:           'c-cluster-123',
+      'i18n/t':            (key) => key,
+    },
+    dispatch: jest.fn(),
+  });
+
+  const baseValue = () => ({
+    spec: {
+      name:              'test-receiver',
+      email_configs:     [],
+      slack_configs:     [],
+      webhook_configs:   [],
+      pagerduty_configs: [],
+      opsgenie_configs:  [],
+      victorops_configs: [],
+      pushover_configs:  [],
+      wechat_configs:    [],
+    },
+    applyDefaults:      jest.fn(),
+    save:               jest.fn(),
+    done:               jest.fn(),
+    registerBeforeHook: jest.fn(),
+    doneRoute:          {},
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should mount and initialize data correctly in create mode', () => {
+    const value = baseValue();
+    const wrapper = shallowMount(Index, {
+      props: {
+        value,
+        mode: 'create'
+      },
+      global: {
+        mocks: {
+          $store:      mockStore(value.spec),
+          $fetchState: { pending: false },
+          $route:      { name: 'test-route' },
+        }
+      }
+    });
+
+    expect(wrapper.vm.suffixYaml).toBe('');
+  });
+
+  it('should correctly process email configs with smarthost on edit mode', () => {
+    const valueWithSmarthost = baseValue();
+
+    valueWithSmarthost.spec.email_configs = [{ smarthost: 'smtp.example.com:587' }];
+    const wrapper = shallowMount(Index, {
+      props: {
+        value: valueWithSmarthost,
+        mode:  _EDIT
+      },
+      global: {
+        mocks: {
+          $store:      mockStore(),
+          $fetchState: { pending: false },
+          $route:      { name: 'test-route' },
+        }
+      }
+    });
+
+    expect(wrapper.vm.value.spec.email_configs[0].host).toBe('smtp.example.com');
+    expect(wrapper.vm.value.spec.email_configs[0].port).toBe('587');
+    expect(wrapper.vm.value.spec.email_configs[0].smarthost).toBeUndefined();
+  });
+
+  it('should call saveOverride which calls save method on success', async() => {
+    const wrapper = shallowMount(Index, {
+      props: {
+        value: baseValue(),
+        mode:  _EDIT,
+      },
+      global: {
+        mocks: {
+          $store:      mockStore(),
+          $fetchState: { pending: false },
+          $route:      { name: 'test-route' },
+        }
+      },
+    });
+
+    const spy = jest.spyOn(wrapper.vm, 'save');
+    const buttonDone = jest.fn();
+
+    wrapper.vm.saveOverride(buttonDone);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call saveOverride which populates errors on yaml error', async() => {
+    const wrapper = shallowMount(Index, {
+      props: {
+        value: baseValue(),
+        mode:  _EDIT,
+      },
+      global: {
+        mocks: {
+          $store:      mockStore(),
+          $fetchState: { pending: false },
+          $route:      { name: 'test-route' },
+        }
+      },
+    });
+
+    const spy = jest.spyOn(wrapper.vm, 'save');
+
+    wrapper.vm.yamlError = 'Invalid YAML';
+    const buttonDone = jest.fn();
+
+    wrapper.vm.saveOverride(buttonDone);
+
+    expect(wrapper.vm.errors).toContain('Invalid YAML');
+    expect(spy).not.toHaveBeenCalled();
+    expect(buttonDone).toHaveBeenCalledWith(false);
+  });
+
+  it('should call createSmarthost and update email configs', () => {
+    const value = baseValue();
+
+    value.spec.email_configs = [{ host: 'smtp.example.com', port: '587' }];
+
+    const wrapper = shallowMount(Index, {
+      props: {
+        value,
+        mode: _EDIT
+      },
+      global: {
+        mocks: {
+          $store:      mockStore(),
+          $fetchState: { pending: false },
+          $route:      { name: 'test-route' },
+        }
+      }
+    });
+
+    wrapper.vm.createSmarthost();
+    expect(value.spec.email_configs[0].smarthost).toBe('smtp.example.com:587');
+    expect(value.spec.email_configs[0].host).toBeUndefined();
+    expect(value.spec.email_configs[0].port).toBeUndefined();
+  });
+});

package/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');
+  });
+});

package/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);
+  });
+});

package/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'
+        }]);
+      });
+    });
+  });
+});

package/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();
+    });
+  });
+});