Automation: Allow user to change the volume name when creating a workload (#8867)

* Add storage tests

* Correct comment

shell/edit/workload/storage/__tests__/Storage.test.ts

@@ -2,20 +2,99 @@ import { mount } from '@vue/test-utils';
 import Storage from '@shell/edit//workload/storage/index.vue';
 
 describe('component: Storage', () => {
-  // TODO: Complete test after integrating #5631
+  describe.each([
+    'awsElasticBlockStore',
+    'azureDisk',
+    'azureFile',
+    'configMap',
+    // 'createPVC',
+    'csi',
+    'emptyDir',
+    'gcePersistentDisk',
+    'gcePersistentDisk',
+    'hostPath',
+    'secret',
+    'vsphereVolume'
+  ])('given volume type %p', (volumeType) => {
+    it('should display the volume name as first input of the form array', () => {
+      const name = 'whatever';
+      const wrapper = mount(Storage, {
+        propsData: {
+          savePvcHookName: '',
+          value:           {
+            volumes: [{
+              _type:        volumeType,
+              [volumeType]: {},
+              name
+            }]
+          },
+        },
+        mocks: {
+          t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
+          $store: {
+            getters: {
+              'i18n/t':      jest.fn(),
+              'i18n/exists': jest.fn()
+            }
+          }
+        },
+      });
+
+      const input = wrapper.find('input').element as HTMLInputElement;
+
+      expect(input.value).toStrictEqual(name);
+    });
+
+    it('should edit the volume name', () => {
+      const name = 'whatever';
+      const newName = 'new whatever';
+      const wrapper = mount(Storage, {
+        propsData: {
+          savePvcHookName: '',
+          value:           {
+            volumes: [{
+              _type:        volumeType,
+              [volumeType]: {},
+              name
+            }]
+          },
+        },
+        mocks: {
+          t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
+          $store: {
+            getters: {
+              'i18n/t':      jest.fn(),
+              'i18n/exists': jest.fn()
+            }
+          }
+        },
+      });
+
+      wrapper.find('input').setValue(newName);
+
+      expect(wrapper.vm.value.volumes[0].name).toStrictEqual(newName);
+    });
+  });
+
+  // TODO: find how to interact with the tooltip selection outside of the component
   // eslint-disable-next-line jest/no-disabled-tests
   it.skip('should allow to add a new volume', async() => {
     const wrapper = mount(Storage, {
       propsData: { savePvcHookName: '' },
       mocks:     {
-        t:      (text: string) => text, // Fixes another issue with another i18n logic not from the getters
+        t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
         $store: { getters: { 'i18n/t': jest.fn() } }
       },
     });
 
-    await wrapper.find('#add-volume').trigger('click');
-    const title = wrapper.find('h3');
+    await wrapper.find('#select-volume').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
 
-    expect(title.isVisible).toBe(true);
+    expect(wrapper.vm.value.volumes[0]).toStrictEqual({
+      _type:                'awsElasticBlockStore',
+      awsElasticBlockStore: {},
+      name:                 ''
+    });
   });
 });