fix element label in vue array renderer

closes #2157
eclipsesource · Oct 20, 2023 · c27d702 · c27d702
1 parent a6fa3c8
commit c27d702
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 1 deletion.
diff --git a/packages/vue-vanilla/src/util/composition.ts b/packages/vue-vanilla/src/util/composition.ts
@@ -120,7 +120,11 @@ export const useVanillaArrayControl = <I extends { control: any }>(
       input.control.value.data,
       composePaths(`${index}`, childLabelProp)
     );
-    if (labelValue === undefined || labelValue === null || isNaN(labelValue)) {
+    if (
+      labelValue === undefined ||
+      labelValue === null ||
+      Number.isNaN(labelValue)
+    ) {
       return '';
     }
     return `${labelValue}`;

diff --git a/packages/vue-vanilla/tests/unit/array/ArrayListRenderer.spec.ts b/packages/vue-vanilla/tests/unit/array/ArrayListRenderer.spec.ts
@@ -18,6 +18,42 @@ const uischema = {
   },
 };
 
+const schemaWithNameAndRate = {
+  type: 'array',
+  title: 'My Array',
+  maxItems: 3,
+  minItems: 1,
+  items: {
+    type: 'object',
+    properties: {
+      name: {
+        type: 'string',
+      },
+      rate: {
+        type: 'number',
+      },
+    },
+  },
+};
+
+const schemaWithCountAndName = {
+  type: 'array',
+  title: 'My Array',
+  maxItems: 3,
+  minItems: 1,
+  items: {
+    type: 'object',
+    properties: {
+      count: {
+        type: 'number',
+      },
+      name: {
+        type: 'string',
+      },
+    },
+  },
+};
+
 describe('ArrayListRenderer.vue', () => {
   it('renders a fieldset', () => {
     const wrapper = mountJsonForms(['a'], schema, uischema);
@@ -88,4 +124,44 @@ describe('ArrayListRenderer.vue', () => {
       expect(type).to.equal('button');
     }
   });
+
+  it('compute default label', async () => {
+    const wrapper = mountJsonForms(
+      [{ name: 'name1', rate: 5 }],
+      schemaWithNameAndRate,
+      uischema
+    );
+    const labels = wrapper.findAll('.array-list-item-label');
+    const labelText = labels[0].text();
+    expect(labelText).to.equal('name1');
+  });
+
+  it('compute default label with undefined', async () => {
+    const wrapper = mountJsonForms([{}], schemaWithNameAndRate, uischema);
+    const labels = wrapper.findAll('.array-list-item-label');
+    const labelText = labels[0].text();
+    expect(labelText).to.equal('');
+  });
+
+  it('compute default label with number', async () => {
+    const wrapper = mountJsonForms(
+      [{ count: 1, name: 'name1' }],
+      schemaWithCountAndName,
+      uischema
+    );
+    const labels = wrapper.findAll('.array-list-item-label');
+    const labelText = labels[0].text();
+    expect(labelText).to.equal('1');
+  });
+
+  it('compute default label with NaN', async () => {
+    const wrapper = mountJsonForms(
+      [{ count: Number(undefined), name: 'name1' }],
+      schemaWithCountAndName,
+      uischema
+    );
+    const labels = wrapper.findAll('.array-list-item-label');
+    const labelText = labels[0].text();
+    expect(labelText).to.equal('');
+  });
 });