dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.2

package/components/form/__tests__/KeyValue.test.ts

@@ -176,4 +176,40 @@ describe('component: KeyValue', () => {
     expect(firstKeyInput.element.value).toBe('testkey1');
     expect(firstValueInput.element.value).toBe('testvalue1');
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const value = [{ key: 'testkey1', value: 'testvalue1' }];
+
+    const wrapper = mount(KeyValue, {
+      props: {
+        value,
+        mode:           'edit',
+        valueMultiline: false,
+        asMap:          false,
+        readAllowed:    true
+      }
+    });
+
+    const mainContainer = wrapper.find('.kv-container');
+    const keyGroup = wrapper.find('.kv-item.key');
+    const valueGroup = wrapper.find('.kv-item.value');
+    const firstKeyInput = wrapper.find('[data-testid="input-kv-item-key-0"]');
+    const firstValueInput = wrapper.find('[data-testid="input-kv-item-value-0"]');
+    const rowRemove = wrapper.find('[data-testid="remove-column-0"] button');
+    const rowAdd = wrapper.find('[data-testid="add_row_item_button"]');
+    const readKeyValueFromFile = wrapper.find('[data-testid="read_all_key_value_button"]');
+
+    expect(wrapper.vm.rows[0].key).toBe(value[0].key);
+    expect(wrapper.vm.rows[0].value).toBe(value[0].value);
+
+    expect(mainContainer.attributes('aria-label')).toBe('%generic.ariaLabel.keyValue%');
+    expect(mainContainer.attributes('role')).toBe('grid');
+    expect(keyGroup.attributes('role')).toBe('gridcell');
+    expect(valueGroup.attributes('role')).toBe('gridcell');
+    expect(firstKeyInput.attributes('aria-label')).toBe('%generic.ariaLabel.key%');
+    expect(firstValueInput.attributes('aria-label')).toBe('%generic.ariaLabel.value%');
+    expect(rowRemove.attributes('aria-label')).toBe('%generic.ariaLabel.remove%');
+    expect(rowAdd.attributes('aria-label')).toBe('%generic.ariaLabel.addKeyValue%');
+    expect(readKeyValueFromFile.attributes('aria-label')).toBe('%generic.ariaLabel.readKeyValue%');
+  });
 });

package/components/form/__tests__/LabeledSelect.test.ts

@@ -168,9 +168,9 @@ describe('component: LabeledSelect', () => {
 
       await wrapper.trigger('click');
 
-      const dropdownOpen = wrapper.find('.vs--open');
+      const dropdownOpen = wrapper.vm.isOpen;
 
-      expect(dropdownOpen.exists()).toBe(isOpen);
+      expect(dropdownOpen).toBe(isOpen);
     });
   });
 
@@ -208,10 +208,87 @@ describe('component: LabeledSelect', () => {
       const wrapper = mount(ParentComponent);
 
       // https://test-utils.vuejs.org/guide/essentials/event-handling#Asserting-the-arguments-of-the-event
+      await wrapper.trigger('click');
       await wrapper.find('input').trigger('focus');
       await wrapper.find('.vs__dropdown-option').trigger('click');
 
       expect(wrapper.vm.$data.myValue).toStrictEqual(expectation);
     });
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const label = 'Foo';
+    const value = 'foo';
+    const ariaDescribedById = 'some-described-by-id';
+    const itemLabel = 'some-label';
+
+    const wrapper = mount(LabeledSelect, {
+      props: {
+        value,
+        label:   itemLabel,
+        options: [
+          { label, value },
+        ],
+        required: true
+      },
+      attrs: { 'aria-describedby': ariaDescribedById }
+    });
+
+    const labeledSelectContainer = wrapper.find('.labeled-select');
+    const ariaExpanded = labeledSelectContainer.attributes('aria-expanded');
+    const ariaDescribedBy = labeledSelectContainer.attributes('aria-describedby');
+    const ariaRequired = labeledSelectContainer.attributes('aria-required');
+    const containerId = labeledSelectContainer.attributes('id');
+    const labelFor = wrapper.find('label').attributes('for');
+
+    const vSelectInput = wrapper.find('.v-select');
+
+    expect(ariaExpanded).toBe('false');
+    expect(ariaDescribedBy).toBe(ariaDescribedById);
+    expect(ariaRequired).toBe('true');
+    expect(containerId).toBe(wrapper.vm.labeledSelectLabelId);
+    expect(labelFor).toBe(wrapper.vm.labeledSelectLabelId);
+
+    // make sure it's hardcoded to a "neutral" value so that
+    // in the current architecture of the component
+    // screen readers won't pick up the default "Select option" aria-label
+    // from the library
+    expect(vSelectInput.attributes('aria-label')).toBe('-');
+  });
+
+  it('pressing space key while focused on search should not prevent event propagation', async() => {
+    const value = 'value-1';
+    const options = [
+      { label: 'label-1', value: 'value-1' },
+      { label: 'label-2', value: 'value-2' },
+    ];
+
+    const wrapper = mount(LabeledSelect, {
+      props: {
+        value,
+        label:      'some-label',
+        options,
+        searchable: true,
+        loading:    false,
+      }
+    });
+
+    const mockEvent = { preventDefault: jest.fn() };
+    const spyFocus = jest.spyOn(wrapper.vm, 'focusSearch');
+    const spyPreventDefault = jest.spyOn(mockEvent, 'preventDefault');
+
+    const input = wrapper.find('.labeled-select');
+
+    // open labeled-select first
+    await input.trigger('keydown.enter');
+
+    // mimic pressing space on search box inside v-select
+    const search = input.find('input');
+
+    await search.trigger('keydown.space', mockEvent);
+
+    // eslint-disable-next-line
+    expect(spyFocus).toHaveBeenCalled();
+    expect(spyPreventDefault).not.toHaveBeenCalled();
+  });
 });

package/components/form/__tests__/Labels.test.ts

@@ -0,0 +1,360 @@
+import { mount } from '@vue/test-utils';
+import Labels, { Factory } from '@shell/components/form/Labels.vue';
+import KeyValue from '@shell/components/form/KeyValue.vue';
+import { ToggleSwitch } from '@components/Form/ToggleSwitch';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+
+const mockT = jest.fn((key: string) => key);
+
+describe('class: Factory', () => {
+  const mockProtectedWarning = 'Protected Key';
+
+  it('should correctly initialize with no protected keys or regexes', () => {
+    const factory = new Factory([], [], mockProtectedWarning, { a: '1', b: '2' });
+
+    expect((factory as any).protectedKeys).toStrictEqual([]);
+    expect((factory as any).protectedRegexes).toStrictEqual([]);
+    expect((factory as any).protectedWarning).toBe(mockProtectedWarning);
+    expect(factory.initValue).toStrictEqual({ a: '1', b: '2' });
+    expect(factory.value).toStrictEqual({ a: '1', b: '2' });
+    expect(factory.keyErrors).toStrictEqual({});
+    expect(factory.hasProtectedKeys).toBe(false);
+  });
+
+  it('should correctly initialize with protected keys', () => {
+    const factory = new Factory(['key1'], [], mockProtectedWarning, { key1: 'value1', key2: 'value2' });
+
+    expect((factory as any).protectedKeys).toStrictEqual(['key1']);
+    expect(factory.value).toStrictEqual({ key2: 'value2' });
+    expect(factory.hasProtectedKeys).toBe(true);
+  });
+
+  it('should correctly initialize with protected regexes', () => {
+    const factory = new Factory([], [/^key/], mockProtectedWarning, { key1: 'value1', other: 'value2' });
+
+    expect((factory as any).protectedRegexes.map((r: RegExp) => r.source)).toStrictEqual(['^key']);
+    expect(factory.value).toStrictEqual({ other: 'value2' });
+    expect(factory.hasProtectedKeys).toBe(true);
+  });
+
+  it('should omit protected keys from value but keep them in initValue', () => {
+    const factory = new Factory(['protected'], [], mockProtectedWarning, { protected: 'pVal', normal: 'nVal' });
+
+    expect(factory.initValue).toStrictEqual({ protected: 'pVal', normal: 'nVal' });
+    expect(factory.value).toStrictEqual({ normal: 'nVal' });
+  });
+
+  it('should update value and call callbackFn, preserving initial protected keys', () => {
+    const initialValue = {
+      system: 'sysVal', user: 'userVal', system2: 'sysVal'
+    };
+    const factory = new Factory(['system', 'system2'], [], mockProtectedWarning, initialValue);
+    const callback = jest.fn();
+
+    const newValue = {
+      newUser: 'newUVal', user: 'updatedUserVal', newProtected: 'newPVal', system: 'foo'
+    };
+
+    factory.update(newValue, callback);
+
+    // The internal factory.value is just the new set
+    expect(factory.value).toStrictEqual(newValue);
+
+    // The callback should receive the mix of new unprotected values and initial protected values
+    expect(callback).toHaveBeenCalledWith({
+      newProtected: 'newPVal',
+      newUser:      'newUVal',
+      user:         'updatedUserVal',
+      system:       'sysVal', // 'system' is the original protected from initialValue, sysVal is the original value
+      system2:      'sysVal' // 'system2' is the original protected from initialValue
+    });
+  });
+
+  it('should handle null/undefined update value gracefully', () => {
+    const initialValue = { system: 'sysVal', user: 'userVal' };
+    const factory = new Factory(['system'], [], mockProtectedWarning, initialValue);
+    const callback = jest.fn();
+
+    factory.update({}, callback);
+
+    expect(factory.value).toStrictEqual({});
+    expect(factory.keyErrors).toStrictEqual({});
+    expect(callback).toHaveBeenCalledWith({ system: 'sysVal' }); // Only the original protected values
+  });
+
+  it('should correctly identify protected keys based on both array and regex', () => {
+    const factory = new Factory(['staticKey'], [/^dynamic/], mockProtectedWarning, {});
+
+    expect((factory as any).isProtected('staticKey')).toBe(true);
+    expect((factory as any).isProtected('dynamicKey')).toBe(true);
+    expect((factory as any).isProtected('otherKey')).toBe(false);
+  });
+});
+
+describe('component: Labels', () => {
+  const mockValue = {
+    labels: {
+      'kubernetes.io/hostname': 'test-app',
+      'my-label':               'my-value'
+    },
+    systemLabels: ['kubernetes.io/hostname'],
+    annotations:  {
+      'cattle.io/system': 'user',
+      'my-annotation':    'my-annotation'
+    },
+    systemAnnotations: ['cattle.io/system'],
+    setLabels:         jest.fn(),
+    setAnnotations:    jest.fn(),
+  };
+
+  it('should initialize with correct data properties', () => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  'create',
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const data = (wrapper.vm as any).$data;
+
+    expect(data.labels).toBeDefined();
+    expect(data.labels.initValue).toStrictEqual(mockValue.labels);
+    expect(data.labels.protectedKeys).toStrictEqual(mockValue.systemLabels);
+    expect(data.labels.value).toStrictEqual({ 'my-label': 'my-value' });
+    expect(data.labels.hasProtectedKeys).toBe(true);
+    expect(data.labels.keyErrors).toStrictEqual({}); // only when manually update
+
+    expect(data.annotations).toBeDefined();
+    expect(data.annotations.initValue).toStrictEqual(mockValue.annotations);
+    expect(data.annotations.protectedKeys).toStrictEqual(mockValue.systemAnnotations);
+    expect(data.annotations.value).toStrictEqual({ 'my-annotation': 'my-annotation' });
+    expect(data.annotations.hasProtectedKeys).toBe(true);
+    expect(data.annotations.keyErrors).toStrictEqual({}); // only when manually update
+
+    expect(data.toggler).toBe(false);
+  });
+
+  it('should render KeyValue for labels', () => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  'create',
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const labelsKeyValue = wrapper.findComponent(KeyValue);
+
+    expect(labelsKeyValue.exists()).toBe(true);
+    expect(labelsKeyValue.props('value')).toStrictEqual({ 'my-label': 'my-value' });
+    expect(labelsKeyValue.props('addLabel')).toBe('labels.addLabel');
+    expect(labelsKeyValue.props('mode')).toBe('create');
+    expect(labelsKeyValue.props('keyErrors')).toStrictEqual({});
+  });
+
+  it('should render KeyValue for annotations if showAnnotations is true', () => {
+    const wrapper = mount(Labels, {
+      props: {
+        value:           mockValue,
+        mode:            'create',
+        showAnnotations: true,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const keyValueComponents = wrapper.findAllComponents(KeyValue);
+
+    expect(keyValueComponents).toHaveLength(2);
+    const annotationsKeyValue = keyValueComponents[1]; // The second KeyValue is for annotations
+
+    expect(annotationsKeyValue.exists()).toBe(true);
+    expect(annotationsKeyValue.props('value')).toStrictEqual({ 'my-annotation': 'my-annotation' });
+    expect(annotationsKeyValue.props('addLabel')).toBe('labels.addAnnotation');
+    expect(annotationsKeyValue.props('mode')).toBe('create');
+    expect(annotationsKeyValue.props('keyErrors')).toStrictEqual({});
+  });
+
+  it('should not render KeyValue for annotations if showAnnotations is false', () => {
+    const wrapper = mount(Labels, {
+      props: {
+        value:           mockValue,
+        mode:            'create',
+        showAnnotations: false,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const keyValueComponents = wrapper.findAllComponents(KeyValue);
+
+    expect(keyValueComponents).toHaveLength(1); // Only the KeyValue for labels
+  });
+
+  it('should show ToggleSwitch in VIEW mode if there are protected keys', async() => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  _VIEW,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    expect((wrapper.vm as any).showToggler).toBe(true);
+    const toggleSwitch = wrapper.findComponent(ToggleSwitch);
+
+    expect(toggleSwitch.exists()).toBe(true);
+    expect(toggleSwitch.props('onLabel')).toBe('labels.labels.show');
+  });
+
+  it('should not show ToggleSwitch in non-VIEW mode', () => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  _EDIT,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    expect((wrapper.vm as any).showToggler).toBe(false);
+    expect(wrapper.findComponent(ToggleSwitch).exists()).toBe(false);
+  });
+
+  it('should not show ToggleSwitch in VIEW mode if no protected keys', () => {
+    const mockValueNoProtected = {
+      labels:            { 'my-label': 'my-value' },
+      systemLabels:      [],
+      annotations:       { 'my-annotation': 'my-annotation' },
+      systemAnnotations: [],
+      setLabels:         jest.fn(),
+      setAnnotations:    jest.fn(),
+    };
+
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValueNoProtected,
+        mode:  _VIEW,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    expect((wrapper.vm as any).showToggler).toBe(false);
+    expect(wrapper.findComponent(ToggleSwitch).exists()).toBe(false);
+  });
+
+  it('should toggle label values when ToggleSwitch is activated', async() => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  _VIEW,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const labelsKeyValue = wrapper.findComponent(KeyValue);
+
+    expect(labelsKeyValue.props('value')).toStrictEqual({ 'my-label': 'my-value' }); // Initial: hidden protected
+
+    // Activate the toggle
+    await wrapper.findComponent(ToggleSwitch).vm.$emit('update:value', true);
+    await wrapper.vm.$nextTick();
+
+    expect((wrapper.vm as any).toggler).toBe(true);
+    expect(labelsKeyValue.props('value')).toStrictEqual(mockValue.labels); // Should show all labels including protected
+  });
+
+  it('should toggle annotation values when ToggleSwitch is activated', async() => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  _VIEW,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const annotationsKeyValue = wrapper.findAllComponents(KeyValue)[1];
+
+    expect(annotationsKeyValue.props('value')).toStrictEqual({ 'my-annotation': 'my-annotation' }); // Initial: hidden protected
+
+    // Activate the toggle
+    await wrapper.findComponent(ToggleSwitch).vm.$emit('update:value', true);
+    await wrapper.vm.$nextTick();
+
+    expect((wrapper.vm as any).toggler).toBe(true);
+    expect(annotationsKeyValue.props('value')).toStrictEqual(mockValue.annotations); // Should show all annotations including protected
+  });
+
+  it('should call setLabels when labels KeyValue emits update:value', async() => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  'create',
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const labelsKeyValue = wrapper.findComponent(KeyValue);
+    const newLabels = { 'new-label': 'new-value', 'my-label': 'my-value' };
+
+    await labelsKeyValue.vm.$emit('update:value', newLabels);
+
+    // We expect setLabels to be called with the new values, preserving initial protected ones
+    expect(mockValue.setLabels).toHaveBeenCalledWith({
+      'new-label':              'new-value',
+      'my-label':               'my-value',
+      'kubernetes.io/hostname': 'test-app'
+    });
+  });
+
+  it('should call setAnnotations when annotations KeyValue emits update:value', async() => {
+    const wrapper = mount(Labels, {
+      props: {
+        value:           mockValue,
+        mode:            'create',
+        showAnnotations: true,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const annotationsKeyValue = wrapper.findAllComponents(KeyValue)[1];
+    const newAnnotations = { 'new-anno': 'new-value', 'my-annotation': 'my-annotation' };
+
+    await annotationsKeyValue.vm.$emit('update:value', newAnnotations);
+
+    // We expect setAnnotations to be called with the new values, preserving initial protected ones
+    expect(mockValue.setAnnotations).toHaveBeenCalledWith({
+      'new-anno':         'new-value',
+      'my-annotation':    'my-annotation',
+      'cattle.io/system': 'user'
+    });
+  });
+
+  it('should add newly entered protected keys to keyErrors', async() => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  'create',
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    // Insert new protected key
+    const newLabels = {
+      'my-label':               'my-value',
+      'kubernetes.io/hostname': 'new-protected-value',
+      'non-protected':          'value'
+    };
+
+    await wrapper.vm.labels.update(newLabels, () => {});
+    await wrapper.vm.$nextTick();
+
+    // Expect to add protected labels in keyErrors
+    expect((wrapper.vm as any).labels.keyErrors).toStrictEqual({ 'kubernetes.io/hostname': 'labels.protectedWarning' });
+
+    // On edit, should key the protected label in the list
+    expect((wrapper.vm as any).labels.value).toStrictEqual({
+      'my-label':               'my-value',
+      'kubernetes.io/hostname': 'new-protected-value',
+      'non-protected':          'value'
+    });
+  });
+});

package/components/form/__tests__/MatchExpressions.test.ts

@@ -53,19 +53,22 @@ describe('component: MatchExpressions', () => {
   it.each([
     'operator',
   ])('should emit an update on %p selection change', async(field) => {
-    const wrapper = mount(MatchExpressions, {
-      props: {
-        mode:  _CREATE,
-        value: [
-          {
-            id:       '123',
-            key:      '123',
-            operator: 'anything',
-            values:   '123'
-          }
-        ]
-      },
-    });
+    const wrapper = mount(
+      MatchExpressions,
+      {
+        attachTo: document.body,
+        props:    {
+          mode:  _CREATE,
+          value: [
+            {
+              id:       '123',
+              key:      '123',
+              operator: 'anything',
+              values:   '123'
+            }
+          ]
+        },
+      });
 
     const select = wrapper.find(`[data-testid="input-match-expression-${ field }-0"]`);
 

package/components/form/__tests__/Networking.test.ts

@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils';
+import Networking from '@shell/components/form/Networking.vue';
+import { nextTick } from 'vue';
+
+jest.mock('lodash/debounce', () => jest.fn((fn) => fn));
+
+describe('component: Networking', () => {
+  it.each([
+    {
+      ip:        '10.1.1.1',
+      hostnames: ['host1']
+    },
+    {
+      ip:        '10.1.1.2',
+      hostnames: ['host1', 'host2']
+    },
+    {
+      ip:        '10.1.1.3',
+      hostnames: []
+    }
+  ])('should render host aliases form if the value contains host aliases config: [%j]', (hostAliasesConfig) => {
+    const wrapper = mount(Networking, {
+      props: {
+        value: { hostAliases: [hostAliasesConfig] },
+        mode:  'create',
+      },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } }
+    });
+
+    const hostAliases = wrapper.findComponent('[data-test="hostAliases"]');
+    const keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    const valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    expect(keyInput.element.value).toBe(hostAliasesConfig.ip);
+    expect(valueInput.find('[data-testid="value-multiline"]').element.value).toBe(hostAliasesConfig.hostnames.join(', '));
+  });
+
+  it('should not render host aliases form, if there is no host aliases configuration', async() => {
+    const wrapper = mount(Networking, {
+      props: {
+        value:            {},
+        'onUpdate:value': (e) => wrapper.setProps({ value: e }),
+        mode:             'create',
+      },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } }
+    });
+
+    const hostAliases = wrapper.findComponent('[data-test="hostAliases"]');
+    const keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    const valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    expect(keyInput.exists()).toBe(false);
+    expect(valueInput.exists()).toBe(false);
+    expect(wrapper.props('value')).toStrictEqual({});
+  });
+
+  it('should render host aliases form correctly if click add host aliases button', async() => {
+    const wrapper = mount(Networking, {
+      props: {
+        value:            {},
+        'onUpdate:value': (e) => wrapper.setProps({ value: e }),
+        mode:             'create',
+      },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } }
+    });
+
+    const hostAliases = wrapper.findComponent('[data-test="hostAliases"]');
+    const addButton = hostAliases.find('[data-testid="add_row_item_button"]');
+
+    addButton.trigger('click');
+    await nextTick();
+
+    const keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    const valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+    const v = wrapper.props('value');
+
+    expect(keyInput.exists()).toBe(true);
+    expect(valueInput.exists()).toBe(true);
+    expect(v.hostAliases).toHaveLength(1);
+    expect(v.hostAliases[0].ip).toBe('');
+    expect(v.hostAliases[0].hostnames).toStrictEqual([]);
+  });
+
+  it('should render host aliases form correctly if modify the form values', async() => {
+    const wrapper = mount(Networking, {
+      props: {
+        value:            {},
+        'onUpdate:value': (e) => wrapper.setProps({ value: e }),
+        mode:             'create',
+      },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } }
+    });
+
+    const hostAliases = wrapper.findComponent('[data-test="hostAliases"]');
+    const addButton = hostAliases.find('[data-testid="add_row_item_button"]');
+
+    addButton.trigger('click');
+    await nextTick();
+    let v = wrapper.props('value');
+    let keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    let valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    keyInput.setValue('10.1.1.1');
+    valueInput.find('[data-testid="value-multiline"]').setValue('test1, test2');
+    await nextTick();
+    v = wrapper.props('value');
+    keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    expect(v.hostAliases).toHaveLength(1);
+    expect(v.hostAliases[0].ip).toBe('10.1.1.1');
+    expect(v.hostAliases[0].hostnames).toStrictEqual(['test1', 'test2']);
+    expect(keyInput.exists()).toBe(true);
+    expect(valueInput.exists()).toBe(true);
+  });
+});

package/components/form/__tests__/SSHKnownHosts.test.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import SSHKnownHosts from '@shell/components/form/SSHKnownHosts/index.vue';
+import { createStore } from 'vuex';
 
 jest.mock('focus-trap', () => {
   return {
@@ -53,18 +54,26 @@ describe('component: SSHKnownHosts', () => {
   });
 
   it('mode edit: should open edit dialog', async() => {
+    const actions = { 'management/promptModal': jest.fn() };
+
     const wrapper = mount(SSHKnownHosts, {
       props: {
         mode:  _EDIT,
         value: '',
+      },
+      global: {
+        mocks: {
+          $store:      createStore({ actions }),
+          $fetchState: {}
+        },
+        stubs: { transition: false }
       }
     });
 
     const knownSshHostsOpenDialog = wrapper.find('[data-testid="input-known-ssh-hosts_open-dialog"]');
-    const editDialog = wrapper.vm.$refs['editDialog'] as any;
 
     await knownSshHostsOpenDialog.trigger('click');
 
-    expect(editDialog.showModal).toBe(true);
+    expect(actions['management/promptModal']).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ component: 'KnownHostsEditDialog' }));
   });
 });