diff --git a/shell/components/form/Networking.vue b/shell/components/form/Networking.vue
index 8612f262ad5..1377e33ec9e 100644
--- a/shell/components/form/Networking.vue
+++ b/shell/components/form/Networking.vue
@@ -257,6 +257,7 @@ export default {
{
+ 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);
+ });
+});