Feature/11881 unit input type fix (#11939)

* Add container resource limit tests

Add real case scenario for unit input component

Add input test for container resource limit

Add base unit to unit input test

Add blur test for container resource limit and unit input

Extend input tests to all cases

Add test case with parent passing value and update on emission

Update tests

Update tests to match emitters

* Add emitters for unit input

* Accept ID pairing with data suggestion fix

Co-authored-by: Phillip Rak <rak.phillip@gmail.com>

* Enable tests after fix

---------

Co-authored-by: Phillip Rak <rak.phillip@gmail.com>

shell/components/__tests__/ContainerResourceLimit.test.ts

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils';
+import ContainerResourceLimit from '@shell/components/ContainerResourceLimit.vue';
+
+describe('component: ContainerResourceLimit', () => {
+  it.each([
+    ['limitsCpu', 'cpu-limit', '111m', '111'],
+    ['limitsMemory', 'memory-limit', '111Mi', '111'],
+    ['requestsCpu', 'cpu-reservation', '111m', '111'],
+    ['requestsMemory', 'memory-reservation', '111Mi', '111'],
+    // ['limitsGpu', 'gpu-limit', 1000], // Input does not work atm
+  ])('given value prop key %p as %p should display value %p', (key, id, value, expectation) => {
+    const wrapper = mount(ContainerResourceLimit, { propsData: { value: { [key]: value } } });
+
+    const element = wrapper.find(`[data-testid="${ id }"]`).element as HTMLInputElement;
+
+    expect(element.value).toBe(expectation);
+  });
+
+  describe.each([
+    'cpu-reservation',
+    'memory-reservation',
+    'cpu-limit',
+    'memory-limit',
+  ])('given input %p', (id) => {
+    it.each(['input', 'blur'])('on %p 123 should display input value 123', async(trigger) => {
+      const wrapper = mount(ContainerResourceLimit);
+      const input = wrapper.find(`[data-testid="${ id }"]`);
+
+      await input.setValue('123');
+      await input.trigger(trigger);
+
+      expect((input.element as HTMLInputElement).value).toBe('123');
+    });
+  });
+});

shell/components/form/UnitInput.vue

@@ -6,6 +6,8 @@ import { _EDIT } from '@shell/config/query-params';
 export default {
   components: { LabeledInput },
 
+  emits: ['update:value'],
+
   props: {
     /**
      * Convert output to string

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

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import { UNITS } from '@shell/utils/units';
 import UnitInput from '@shell/components/form/UnitInput.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import { defineComponent } from 'vue';
 
 describe('component: UnitInput', () => {
   it('should renders', () => {
@@ -184,4 +185,71 @@ describe('component: UnitInput', () => {
     expect(wrapper.emitted('update:value')).toBeTruthy();
     expect(wrapper.emitted('update:value')[4][0]).toBe(value);
   });
+
+  describe.each([
+    ['123m', -1, 1000, 'CPUs', true],
+    // ['123Mi', 2, 1024, '', true],
+  ])('given real use case with value %p, exponent %p, increment %p, baseUnit %p, modifier %p', (value, inputExponent, increment, baseUnit, outputModifier) => {
+    it('should display input value 123', () => {
+      const wrapper = mount(UnitInput, {
+        props: {
+          value,
+          inputExponent,
+          increment,
+          outputModifier,
+          baseUnit
+        }
+      });
+
+      const inputElement = wrapper.find('input').element as HTMLInputElement;
+
+      expect(inputElement.value).toBe('123');
+    });
+
+    it.each(['input', 'blur'])('on %p 123 should display input value 123', async(trigger) => {
+      const wrapper = mount(UnitInput, {
+        props: {
+          value: '0',
+          inputExponent,
+          increment,
+          outputModifier,
+          baseUnit
+        }
+      });
+      const input = wrapper.find('input');
+
+      await input.setValue('123');
+      await input.trigger(trigger);
+
+      expect(wrapper.emitted('update:value')).toBeTruthy();
+      expect(input.element.value).toBe('123');
+    });
+
+    it('should keep parent value to 123 on input', async() => {
+      const ParentComponent = defineComponent({
+        components: { UnitInput },
+        template:   `
+          <UnitInput
+            :value="value"
+            :input-exponent="inputExponent"
+            :output-modifier="outputModifier"
+            :base-unit="baseUnit"
+            @update:value="event => value = event.target.value"
+          />
+        `,
+        data() {
+          return {
+            value, inputExponent, outputModifier, baseUnit
+          };
+        }
+      });
+      const wrapper = mount(ParentComponent);
+      const input = wrapper.find('input');
+
+      await input.trigger('update:value');
+      await input.trigger('input');
+
+      expect(input.element.value).toBe('123');
+    });
+  });
 });