fix(helpers): noopTranslate display locale keys in tests

RedHatInsights · Dec 13, 2019 · 26110ca · 26110ca
1 parent 6ee8b89
commit 26110ca
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 79 deletions.
diff --git a/src/common/helpers.js b/src/common/helpers.js
@@ -5,7 +5,7 @@ const noop = Function.prototype;
 
 const noopPromise = Promise.resolve({});
 
-const noopTranslate = (key, value) => (value && `${value}`) || `t('${key}')`;
+const noopTranslate = (key, value) => `t(${key}${(value && `, ${value}`) || ''})`;
 
 const DEV_MODE = process.env.REACT_APP_ENV === 'development';
 

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`I18n Component should attempt to perform a component translate: translated component 1`] = `"<div>hello world</div>"`;
+exports[`I18n Component should attempt to perform a component translate: translated component 1`] = `"<div>t(lorem.ipsum, hello world)</div>"`;
 
 exports[`I18n Component should attempt to perform a string replace: translate 1`] = `
 Object {
-  "localeKey": "t('lorem.ipsum')",
-  "placeholder": "hello world",
+  "localeKey": "t(lorem.ipsum)",
+  "placeholder": "t(lorem.ipsum, hello world)",
 }
 `;
 

diff --git a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap
@@ -6,11 +6,11 @@ exports[`RhelGraphCard Component should render a non-connected component: non-co
 >
   <CardHead>
     <h2>
-      t('curiosity-graph.heading')
+      t(curiosity-graph.heading)
     </h2>
     <CardActions>
       <Select
-        aria-label="t('curiosity-graph.dropdownPlaceholder')"
+        aria-label="t(curiosity-graph.dropdownPlaceholder)"
         ariaLabel="Select option"
         className=""
         id="generatedid-"
@@ -20,24 +20,24 @@ exports[`RhelGraphCard Component should render a non-connected component: non-co
         options={
           Array [
             Object {
-              "title": "t('curiosity-graph.dropdownDaily')",
+              "title": "t(curiosity-graph.dropdownDaily)",
               "value": "daily",
             },
             Object {
-              "title": "t('curiosity-graph.dropdownWeekly')",
+              "title": "t(curiosity-graph.dropdownWeekly)",
               "value": "weekly",
             },
             Object {
-              "title": "t('curiosity-graph.dropdownMonthly')",
+              "title": "t(curiosity-graph.dropdownMonthly)",
               "value": "monthly",
             },
             Object {
-              "title": "t('curiosity-graph.dropdownQuarterly')",
+              "title": "t(curiosity-graph.dropdownQuarterly)",
               "value": "quarterly",
             },
           ]
         }
-        placeholder="t('curiosity-graph.dropdownPlaceholder')"
+        placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
         variant="single"
       />
@@ -61,7 +61,7 @@ exports[`RhelGraphCard Component should render a non-connected component: non-co
               "fill": "#8bc1f7",
               "id": "sockets",
               "isStacked": true,
-              "legendLabel": "[object Object]",
+              "legendLabel": "t(curiosity-graph.productSocketsLabel, [object Object])",
               "stroke": "#06c",
             },
             Object {
@@ -75,7 +75,7 @@ exports[`RhelGraphCard Component should render a non-connected component: non-co
               "fill": "#a2d9d9",
               "id": "hypervisor",
               "isStacked": true,
-              "legendLabel": "[object Object]",
+              "legendLabel": "t(curiosity-graph.productHypervisorLabel, [object Object])",
               "stroke": "#009596",
             },
             Object {
@@ -88,7 +88,7 @@ exports[`RhelGraphCard Component should render a non-connected component: non-co
               "data": Array [],
               "id": "threshold",
               "isThreshold": true,
-              "legendLabel": "t('curiosity-graph.thresholdLabel')",
+              "legendLabel": "t(curiosity-graph.thresholdLabel)",
               "stroke": "#4cb140",
             },
           ]
@@ -145,7 +145,7 @@ Object {
       "fill": "#8bc1f7",
       "id": "sockets",
       "isStacked": true,
-      "legendLabel": "[object Object]",
+      "legendLabel": "t(curiosity-graph.productSocketsLabel, [object Object])",
       "stroke": "#06c",
     },
     Object {
@@ -159,7 +159,7 @@ Object {
       "fill": "#a2d9d9",
       "id": "hypervisor",
       "isStacked": true,
-      "legendLabel": "[object Object]",
+      "legendLabel": "t(curiosity-graph.productHypervisorLabel, [object Object])",
       "stroke": "#009596",
     },
     Object {
@@ -172,7 +172,7 @@ Object {
       "data": undefined,
       "id": "threshold",
       "isThreshold": true,
-      "legendLabel": "t('curiosity-graph.thresholdLabel')",
+      "legendLabel": "t(curiosity-graph.thresholdLabel)",
       "stroke": "#4cb140",
     },
   ],
@@ -197,11 +197,11 @@ exports[`RhelGraphCard Component should render multiple states: fulfilled 1`] =
 >
   <CardHead>
     <h2>
-      t('curiosity-graph.heading')
+      t(curiosity-graph.heading)
     </h2>
     <CardActions>
       <Select
-        aria-label="t('curiosity-graph.dropdownPlaceholder')"
+        aria-label="t(curiosity-graph.dropdownPlaceholder)"
         ariaLabel="Select option"
         className=""
         id="generatedid-"
@@ -211,24 +211,24 @@ exports[`RhelGraphCard Component should render multiple states: fulfilled 1`] =
         options={
           Array [
             Object {
-              "title": "t('curiosity-graph.dropdownDaily')",
+              "title": "t(curiosity-graph.dropdownDaily)",
               "value": "daily",
             },
             Object {
-              "title": "t('curiosity-graph.dropdownWeekly')",
+              "title": "t(curiosity-graph.dropdownWeekly)",
               "value": "weekly",
             },
             Object {
-              "title": "t('curiosity-graph.dropdownMonthly')",
+              "title": "t(curiosity-graph.dropdownMonthly)",
               "value": "monthly",
             },
             Object {
-              "title": "t('curiosity-graph.dropdownQuarterly')",
+              "title": "t(curiosity-graph.dropdownQuarterly)",
               "value": "quarterly",
             },
           ]
         }
-        placeholder="t('curiosity-graph.dropdownPlaceholder')"
+        placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
         variant="single"
       />
@@ -268,7 +268,7 @@ exports[`RhelGraphCard Component should render multiple states: fulfilled 1`] =
               "fill": "#8bc1f7",
               "id": "sockets",
               "isStacked": true,
-              "legendLabel": "[object Object]",
+              "legendLabel": "t(curiosity-graph.productSocketsLabel, [object Object])",
               "stroke": "#06c",
             },
             Object {
@@ -282,7 +282,7 @@ exports[`RhelGraphCard Component should render multiple states: fulfilled 1`] =
               "fill": "#a2d9d9",
               "id": "hypervisor",
               "isStacked": true,
-              "legendLabel": "[object Object]",
+              "legendLabel": "t(curiosity-graph.productHypervisorLabel, [object Object])",
               "stroke": "#009596",
             },
             Object {
@@ -295,7 +295,7 @@ exports[`RhelGraphCard Component should render multiple states: fulfilled 1`] =
               "data": undefined,
               "id": "threshold",
               "isThreshold": true,
-              "legendLabel": "t('curiosity-graph.thresholdLabel')",
+              "legendLabel": "t(curiosity-graph.thresholdLabel)",
               "stroke": "#4cb140",
             },
           ]
@@ -328,11 +328,11 @@ exports[`RhelGraphCard Component should render multiple states: pending 1`] = `
 >
   <CardHead>
     <h2>
-      t('curiosity-graph.heading')
+      t(curiosity-graph.heading)
     </h2>
     <CardActions>
       <Select
-        aria-label="t('curiosity-graph.dropdownPlaceholder')"
+        aria-label="t(curiosity-graph.dropdownPlaceholder)"
         ariaLabel="Select option"
         className=""
         id="generatedid-"
@@ -342,24 +342,24 @@ exports[`RhelGraphCard Component should render multiple states: pending 1`] = `
         options={
           Array [
             Object {
-              "title": "t('curiosity-graph.dropdownDaily')",
+              "title": "t(curiosity-graph.dropdownDaily)",
               "value": "daily",
             },
             Object {
-              "title": "t('curiosity-graph.dropdownWeekly')",
+              "title": "t(curiosity-graph.dropdownWeekly)",
               "value": "weekly",
             },
             Object {
-              "title": "t('curiosity-graph.dropdownMonthly')",
+              "title": "t(curiosity-graph.dropdownMonthly)",
               "value": "monthly",
             },
             Object {
-              "title": "t('curiosity-graph.dropdownQuarterly')",
+              "title": "t(curiosity-graph.dropdownQuarterly)",
               "value": "quarterly",
             },
           ]
         }
-        placeholder="t('curiosity-graph.dropdownPlaceholder')"
+        placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
         variant="single"
       />

diff --git a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCardHelpers.test.js.snap b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCardHelpers.test.js.snap
@@ -20,31 +20,31 @@ Object {
 
 exports[`RhelGraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: granularity data display 1`] = `
 Object {
-  "daily": "t('curiosity-graph.thresholdLabel'): 100
-[object Object]: 50
-[object Object]: 50
-t('curiosity-graph.dateLabel'): June 1",
-  "monthly": "t('curiosity-graph.thresholdLabel'): 100
-[object Object]: 50
-[object Object]: 50
-t('curiosity-graph.dateLabel'): June 2019",
-  "quarterly": "t('curiosity-graph.thresholdLabel'): 100
-[object Object]: 50
-[object Object]: 50
-t('curiosity-graph.dateLabel'): June 2019",
-  "weekly": "t('curiosity-graph.thresholdLabel'): 100
-[object Object]: 50
-[object Object]: 50
-t('curiosity-graph.dateLabel'): June 1",
+  "daily": "t(curiosity-graph.thresholdLabel): 100
+t(curiosity-graph.productSocketsLabel, [object Object]): 50
+t(curiosity-graph.productHypervisorLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 1",
+  "monthly": "t(curiosity-graph.thresholdLabel): 100
+t(curiosity-graph.productSocketsLabel, [object Object]): 50
+t(curiosity-graph.productHypervisorLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 2019",
+  "quarterly": "t(curiosity-graph.thresholdLabel): 100
+t(curiosity-graph.productSocketsLabel, [object Object]): 50
+t(curiosity-graph.productHypervisorLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 2019",
+  "weekly": "t(curiosity-graph.thresholdLabel): 100
+t(curiosity-graph.productSocketsLabel, [object Object]): 50
+t(curiosity-graph.productHypervisorLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 1",
 }
 `;
 
 exports[`RhelGraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: no data granularity data display 1`] = `
 Object {
-  "daily": "t('curiosity-graph.noDataLabel')",
-  "monthly": "t('curiosity-graph.noDataLabel')",
-  "quarterly": "t('curiosity-graph.noDataLabel')",
-  "weekly": "t('curiosity-graph.noDataLabel')",
+  "daily": "t(curiosity-graph.noDataLabel)",
+  "monthly": "t(curiosity-graph.noDataLabel)",
+  "quarterly": "t(curiosity-graph.noDataLabel)",
+  "weekly": "t(curiosity-graph.noDataLabel)",
 }
 `;
 

diff --git a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCardTypes.test.js.snap b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCardTypes.test.js.snap
@@ -9,19 +9,19 @@ Object {
 exports[`RhelGraphCardTypes should return a specific output for getDateMenuOptionsType: getDateMenuOptionsType 1`] = `
 Array [
   Object {
-    "title": "t('curiosity-graph.dropdownDaily')",
+    "title": "t(curiosity-graph.dropdownDaily)",
     "value": "daily",
   },
   Object {
-    "title": "t('curiosity-graph.dropdownWeekly')",
+    "title": "t(curiosity-graph.dropdownWeekly)",
     "value": "weekly",
   },
   Object {
-    "title": "t('curiosity-graph.dropdownMonthly')",
+    "title": "t(curiosity-graph.dropdownMonthly)",
     "value": "monthly",
   },
   Object {
-    "title": "t('curiosity-graph.dropdownQuarterly')",
+    "title": "t(curiosity-graph.dropdownQuarterly)",
     "value": "quarterly",
   },
 ]