Add unit-tests: KnownHostsEditDialog.test.ts, SSHKnownHosts.test.ts

Signed-off-by: Francesco Torchia <[email protected]>

shell/components/form/SSHKnownHosts/KnownHostsEditDialog.vue

@@ -79,7 +79,7 @@ export default {
 <template>
   <app-modal
     v-if="showModal"
-    name="sshKnownHostsDialog"
+    ref="sshKnownHostsDialog"
     height="auto"
     :scrollable="true"
     @close="closeDialog(false)"
@@ -93,8 +93,9 @@ export default {
       <div class="custom mt-10">
         <div class="dialog-panel">
           <CodeMirror
+            class="code-mirror"
             :value="text"
-            class="editor"
+            data-testid="ssh-known-hosts-dialog_code-mirror"
             :options="codeMirrorOptions"
             :showKeyMapBox="true"
             @onInput="onTextChange"
@@ -104,21 +105,22 @@ export default {
           <div class="action-pannel file-selector">
             <FileSelector
               class="btn role-secondary"
+              data-testid="ssh-known-hosts-dialog_file-selector"
               :label="t('generic.readFromFile')"
               @selected="onTextChange"
             />
           </div>
           <div class="action-pannel form-actions">
             <button
               class="btn role-secondary"
-              data-testid="ssh-known-hosts-dialog-cancel-btn"
+              data-testid="ssh-known-hosts-dialog_cancel-btn"
               @click="closeDialog(false)"
             >
               {{ t('generic.cancel') }}
             </button>
             <button
               class="btn role-primary"
-              data-testid="ssh-known-hosts-dialog-save-btn"
+              data-testid="ssh-known-hosts-dialog_save-btn"
               @click="closeDialog(true)"
             >
               {{ t('generic.save') }}
@@ -145,7 +147,7 @@ export default {
       min-height: 100px;
       border: 1px solid var(--border);
 
-      :deep() .editor {
+      :deep() .code-mirror {
         display: flex;
         flex-direction: column;
         resize: none;

shell/components/form/SSHKnownHosts/__tests__/KnownHostsEditDialog.test.ts

@@ -0,0 +1,104 @@
+import { mount, VueWrapper } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+import KnownHostsEditDialog from '@shell/components/form/SSHKnownHosts/KnownHostsEditDialog.vue';
+import CodeMirror from '@shell/components/CodeMirror.vue';
+import FileSelector from '@shell/components/form/FileSelector.vue';
+
+let wrapper: VueWrapper<InstanceType<typeof KnownHostsEditDialog>>;
+
+const mockedStore = () => {
+  return { getters: { 'prefs/get': () => jest.fn() } };
+};
+
+const requiredSetup = () => {
+  return { global: { mocks: { $store: mockedStore() } } };
+};
+
+describe('component: KnownHostsEditDialog', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="modals"></div>';
+    wrapper = mount(KnownHostsEditDialog, {
+      attachTo: document.body,
+      props:    {
+        mode:  _EDIT,
+        value: 'line1\nline2\n',
+      },
+      ...requiredSetup(),
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+    document.body.innerHTML = '';
+  });
+
+  it('should update text from CodeMirror', async() => {
+    await wrapper.setData({ showModal: true });
+
+    expect(wrapper.vm.text).toBe('line1\nline2\n');
+
+    const codeMirror = wrapper.getComponent(CodeMirror);
+
+    expect(codeMirror.element).toBeDefined();
+
+    await codeMirror.setData({ loaded: true });
+
+    // Emit CodeMirror value
+    codeMirror.vm.$emit('onInput', 'bar');
+    await codeMirror.vm.$nextTick();
+
+    expect(wrapper.vm.text).toBe('bar');
+  });
+
+  it('should update text from FileSelector', async() => {
+    await wrapper.setData({ showModal: true });
+
+    expect(wrapper.vm.text).toBe('line1\nline2\n');
+
+    const fileSelector = wrapper.getComponent(FileSelector);
+
+    expect(fileSelector.element).toBeDefined();
+
+    // Emit Fileselector value
+    fileSelector.vm.$emit('selected', 'foo');
+    await fileSelector.vm.$nextTick();
+
+    expect(wrapper.vm.text).toBe('foo');
+  });
+
+  it('should save changes and close dialog', async() => {
+    await wrapper.setData({
+      showModal: true,
+      text:      'foo',
+    });
+
+    expect(wrapper.vm.value).toBe('line1\nline2\n');
+    expect(wrapper.vm.text).toBe('foo');
+
+    await wrapper.vm.closeDialog(true);
+
+    expect((wrapper.emitted('closed') as any)[0][0].value).toBe('foo');
+
+    const dialog = wrapper.vm.$refs['sshKnownHostsDialog'];
+
+    expect(dialog).toBeNull();
+  });
+
+  it('should discard changes and close dialog', async() => {
+    await wrapper.setData({
+      showModal: true,
+      text:      'foo',
+    });
+
+    expect(wrapper.vm.value).toBe('line1\nline2\n');
+    expect(wrapper.vm.text).toBe('foo');
+
+    await wrapper.vm.closeDialog(false);
+
+    expect((wrapper.emitted('closed') as any)[0][0].value).toBe('line1\nline2\n');
+
+    const dialog = wrapper.vm.$refs['sshKnownHostsDialog'];
+
+    expect(dialog).toBeNull();
+  });
+});

shell/components/form/SSHKnownHosts/index.vue

@@ -27,11 +27,13 @@ export default defineComponent({
       return this.mode === _VIEW;
     },
 
-    // Summarize number of entries - exclude empty lines and comments
-    summary() {
-      const lines = this.value.split('\n').filter((line: string) => !!line.length && !line.startsWith('#')).length;
+    // The number of entries - exclude empty lines and comments
+    entries() {
+      return this.value.split('\n').filter((line: string) => !!line.trim().length && !line.startsWith('#')).length;
+    },
 
-      return this.t('secret.ssh.editKnownHosts.entries', { entries: lines });
+    summary() {
+      return this.t('secret.ssh.editKnownHosts.entries', { entries: this.entries });
     }
   },
 
@@ -50,14 +52,21 @@ export default defineComponent({
 });
 </script>
 <template>
-  <div class="input-known-ssh-hosts labeled-input">
+  <div
+    class="input-known-ssh-hosts labeled-input"
+    data-testid="input-known-ssh-hosts"
+  >
     <label>{{ t('secret.ssh.knownHosts') }}</label>
-    <div class="hosts-input">
+    <div
+      class="hosts-input"
+      data-testid="input-known-ssh-hosts_summary"
+    >
       {{ summary }}
     </div>
     <template v-if="!isViewMode">
       <button
         ref="button"
+        data-testid="input-known-ssh-hosts_open-dialog"
         class="show-dialog-btn btn"
         @click="openDialog"
       >

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

@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import SSHKnownHosts from '@shell/components/form/SSHKnownHosts/index.vue';
+
+describe('component: SSHKnownHosts', () => {
+  it.each([
+    ['0 entities', '', 0],
+    ['0 entities (multiple empty lines)', '\n  \n  \n', 0],
+    ['1 entity', 'line1\n', 1],
+    ['1 entity (multiple empty lines)', 'line1\n\n\n', 1],
+    ['2 entities', 'line1\nline2\n', 2],
+    ['2 entities (multiple empty lines)', 'line1\n  \n  line2\n \n', 2],
+  ])('mode view: summary should be: %p', (_, value, entities) => {
+    const wrapper = mount(SSHKnownHosts, {
+      props: {
+        mode: _VIEW,
+        value,
+      }
+    });
+
+    const knownSshHostsSummary = wrapper.find('[data-testid="input-known-ssh-hosts_summary"]');
+    const knownSshHostsOpenDialog = wrapper.findAll('[data-testid="input-known-ssh-hosts_open-dialog"]');
+
+    expect(wrapper.vm.entries).toBe(entities);
+    expect(knownSshHostsSummary.element).toBeDefined();
+    expect(knownSshHostsOpenDialog).toHaveLength(0);
+  });
+
+  it('mode edit: should display summary and edit button', () => {
+    const wrapper = mount(SSHKnownHosts, {
+      props: {
+        mode:  _EDIT,
+        value: 'line1\nline2\n',
+      }
+    });
+
+    const knownSshHostsSummary = wrapper.find('[data-testid="input-known-ssh-hosts_summary"]');
+    const knownSshHostsOpenDialog = wrapper.find('[data-testid="input-known-ssh-hosts_open-dialog"]');
+
+    expect(knownSshHostsSummary.element).toBeDefined();
+    expect(knownSshHostsOpenDialog.element).toBeDefined();
+  });
+
+  it('mode edit: should open edit dialog', async() => {
+    const wrapper = mount(SSHKnownHosts, {
+      props: {
+        mode:  _EDIT,
+        value: '',
+      }
+    });
+
+    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);
+  });
+});