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