test(Networking): add hostAliases config unit test case

rancher · Jan 8, 2025 · 35db71a · 35db71a
1 parent a6c08c2
commit 35db71a
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 0 deletions.
diff --git a/shell/components/form/Networking.vue b/shell/components/form/Networking.vue
@@ -257,6 +257,7 @@ export default {
       <div class="col span-12">
         <KeyValue
           key="hostAliases"
+          data-test="hostAliases"
           :value="hostAliases"
           :mode="mode"
           :title="t('workload.networking.hostAliases.label')"

diff --git a/shell/components/form/__tests__/Networking.test.ts b/shell/components/form/__tests__/Networking.test.ts
@@ -0,0 +1,101 @@
+import { mount } from '@vue/test-utils';
+import Networking from '@shell/components/form/Networking.vue';
+import { nextTick } from 'vue';
+
+describe('component: Networking', () => {
+  it('should render host aliases form if the value contains host aliases config', () => {
+    const hostAliasesConfigs = [{
+      ip:        '10.1.1.1',
+      hostnames: ['host011']
+    },
+    {
+      ip:        '10.1.1.2',
+      hostnames: ['host021', 'host022']
+    },
+    {
+      ip:        '10.1.1.3',
+      hostnames: []
+    },
+    ];
+    const wrapper = mount(Networking, {
+      props: {
+        value: { hostAliases: hostAliasesConfigs },
+        mode:  'create',
+      },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } }
+    });
+
+    const hostAliases = wrapper.findComponent('[data-test="hostAliases"]');
+
+    hostAliasesConfigs.forEach((item, index) => {
+      const keyInput = hostAliases.find(`[data-testid="input-kv-item-key-${ index }"]`);
+      const valueInput = hostAliases.find(`[data-testid="kv-item-value-${ index }"]`);
+
+      expect(keyInput.element.value).toBe(item.ip);
+      expect(valueInput.find('[data-testid="value-multiline"]').element.value).toBe(item.hostnames.join(', '));
+    });
+  });
+
+  it('should render host aliases form correctly if click add host aliases button and modify 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_link_button"]');
+    let keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    let valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    expect(keyInput.exists()).toBe(false);
+    expect(valueInput.exists()).toBe(false);
+    expect(wrapper.props('value')).toStrictEqual({});
+    addButton.trigger('click');
+    await nextTick();
+
+    keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    expect(keyInput.exists()).toBe(true);
+    expect(valueInput.exists()).toBe(true);
+
+    await new Promise((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, 500);
+    });
+    let v = wrapper.props('value');
+
+    expect(v.hostAliases).toHaveLength(1);
+    expect(v.hostAliases[0].ip).toBe('');
+    expect(v.hostAliases[0].hostnames).toStrictEqual([]);
+
+    keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    expect(keyInput.exists()).toBe(true);
+    expect(valueInput.exists()).toBe(true);
+
+    keyInput.setValue('10.1.1.1');
+    valueInput.find('[data-testid="value-multiline"]').setValue('test1, test2');
+    await new Promise((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, 500);
+    });
+    v = wrapper.props('value');
+
+    expect(v.hostAliases).toHaveLength(1);
+    expect(v.hostAliases[0].ip).toBe('10.1.1.1');
+    expect(v.hostAliases[0].hostnames).toStrictEqual(['test1', 'test2']);
+
+    keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+    expect(keyInput.exists()).toBe(true);
+    expect(valueInput.exists()).toBe(true);
+  });
+});