From c27d702b3f4570998c6373c1d917c389ddc1132b Mon Sep 17 00:00:00 2001
From: Lukas Boll <lukas-bool@web.de>
Date: Fri, 13 Oct 2023 15:00:28 +0200
Subject: [PATCH] fix element label in vue array renderer

closes #2157
---
 packages/vue-vanilla/src/util/composition.ts  |  6 +-
 .../unit/array/ArrayListRenderer.spec.ts      | 76 +++++++++++++++++++
 2 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/packages/vue-vanilla/src/util/composition.ts b/packages/vue-vanilla/src/util/composition.ts
index 009e1d932..89bc88e6d 100644
--- 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
index fcd973751..e2fcd4794 100644
--- 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('');
+  });
 });