fix(frontend): fixes start casing issue with breadcrumb labels (#748)

use css instead of lodash for capilatization of messages
SAP · Feb 27, 2023 · a9d26b0 · a9d26b0
1 parent bb289bf
commit a9d26b0
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/packages/frontend/src/components/Breadcrumbs.vue b/packages/frontend/src/components/Breadcrumbs.vue
@@ -77,6 +77,7 @@ $line-height: 1.42rem; // Approximation of line height (`lh` not available)
     }
     .answer span:first-child {
       font-weight: 700;
+      text-transform: capitalize;
     }
   }
   .more {

diff --git a/packages/frontend/src/utils/answerUtils.js b/packages/frontend/src/utils/answerUtils.js
@@ -64,7 +64,7 @@ export default {
               typeof bcSetting === "string"
                 ? bcSetting
                 : question._message // `_message` is the normalised version of `message` (String | Function) used by the Form.vue so we re-use rather than re-processing
-                ? _startCase(question._message)
+                ? question._message
                 : _startCase(question.name),
             value: getTextForAnswer(question, answer),
           });

diff --git a/packages/frontend/test/utils/answersUtils.spec.js b/packages/frontend/test/utils/answersUtils.spec.js
@@ -7,35 +7,35 @@ describe("Tests for answerUtils", () => {
     expect(breadcrumbs).toMatchInlineSnapshot(`
       Array [
         Object {
-          "label": "Normalised Message List With String Values",
+          "label": "Normalised message list with string values",
           "value": "Norlmalised List choice 2",
         },
         Object {
-          "label": "Normalised Message For List Of Strings",
+          "label": "Normalised message for list of strings",
           "value": "Normalised List choice 3",
         },
         Object {
-          "label": "Normalised Message For List Of Numbers",
+          "label": "Normalised message for list of numbers",
           "value": 3,
         },
         Object {
-          "label": "Normalised Msg For Choices With Object Values",
+          "label": "Normalised msg for choices with object values",
           "value": "Normalised Choice with object value 1",
         },
         Object {
           "label": "Capilatized Name As Label",
           "value": "Some text",
         },
         Object {
-          "label": "Normalised Input Message",
+          "label": "Normalised input message",
           "value": "A text answer",
         },
         Object {
-          "label": "File Path",
+          "label": "File path",
           "value": "/some/file/path",
         },
         Object {
-          "label": "Normalised Confirm Message",
+          "label": "Normalised confirm message",
           "value": "Yes",
         },
         Object {
@@ -51,17 +51,21 @@ describe("Tests for answerUtils", () => {
           "value": "Chimay Trappist Ales,Paulaner Salvator Doppel Bock,Weihenstephaner Korbinian",
         },
         Object {
-          "label": "Empty String Choice Value Test",
+          "label": "Empty string choice value test",
           "value": "None",
         },
         Object {
-          "label": "Empty String Choice Test",
+          "label": "Empty string choice test",
           "value": "",
         },
         Object {
           "label": "",
           "value": "Some answers",
         },
+        Object {
+          "label": "Label with numbers123 and brackets (in brackets)",
+          "value": "Some answers",
+        },
       ]
     `);
   });

diff --git a/packages/frontend/test/utils/testdata/questions1.js b/packages/frontend/test/utils/testdata/questions1.js
@@ -378,4 +378,20 @@ export default [
     answer: "Some answers",
     shouldShow: true,
   },
+  {
+    type: "input",
+    name: "testStartCasing",
+    message: "",
+    guiOptions: {
+      breadcrumb: true,
+    },
+    askAnswered: false,
+    _message: "Label with numbers123 and brackets (in brackets)",
+    isValid: true,
+    validationMessage: "",
+    isMandatory: true,
+    isDirty: false,
+    answer: "Some answers",
+    shouldShow: true,
+  },
 ];