✅ Reshaping tests for new implementation

Author: dej611

x-pack/plugins/lens/public/metric_visualization/expression.test.tsx

@@ -32,11 +32,21 @@ function sampleArgs() {
     accessor: 'a',
     layerId: 'l1',
     title: 'My fanci metric chart',
+    description: 'Fancy chart description',
     metricTitle: 'My fanci metric chart',
     mode: 'full',
   };
 
-  return { data, args };
+  const noAttributesArgs: MetricConfig = {
+    accessor: 'a',
+    layerId: 'l1',
+    title: '',
+    description: '',
+    metricTitle: 'My fanci metric chart',
+    mode: 'full',
+  };
+
+  return { data, args, noAttributesArgs };
 }
 
 describe('metric_expression', () => {
@@ -54,14 +64,15 @@ describe('metric_expression', () => {
   });
 
   describe('MetricChart component', () => {
-    test('it renders the title and value', () => {
+    test('it renders the all attributes when passed (title, description, metricTitle, value)', () => {
       const { data, args } = sampleArgs();
 
       expect(
         shallow(<MetricChart data={data} args={args} formatFactory={(x) => x as IFieldFormat} />)
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          reportDescription="Fancy chart description"
           reportTitle="My fanci metric chart"
         >
           <AutoScale>
@@ -91,21 +102,66 @@ describe('metric_expression', () => {
       `);
     });
 
-    test('it does not render title in reduced mode', () => {
-      const { data, args } = sampleArgs();
+    test('it renders only chart content when title and description are empty strings', () => {
+      const { data, noAttributesArgs } = sampleArgs();
 
       expect(
         shallow(
           <MetricChart
             data={data}
-            args={{ ...args, mode: 'reduced' }}
+            args={noAttributesArgs}
             formatFactory={(x) => x as IFieldFormat}
           />
         )
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
-          reportTitle="My fanci metric chart"
+          reportDescription=""
+          reportTitle=""
+        >
+          <AutoScale>
+            <div
+              data-test-subj="lns_metric_value"
+              style={
+                Object {
+                  "fontSize": "60pt",
+                  "fontWeight": 600,
+                }
+              }
+            >
+              10110
+            </div>
+            <div
+              data-test-subj="lns_metric_title"
+              style={
+                Object {
+                  "fontSize": "24pt",
+                }
+              }
+            >
+              My fanci metric chart
+            </div>
+          </AutoScale>
+        </VisualizationContainer>
+      `);
+    });
+
+    test('it does not render metricTitle in reduced mode', () => {
+      const { data, noAttributesArgs } = sampleArgs();
+
+      expect(
+        shallow(
+          <MetricChart
+            data={data}
+            args={{ ...noAttributesArgs, mode: 'reduced' }}
+            formatFactory={(x) => x as IFieldFormat}
+          />
+        )
+      ).toMatchInlineSnapshot(`
+        <VisualizationContainer
+          className="lnsMetricExpression__container"
+          reportDescription=""
+          reportTitle=""
         >
           <AutoScale>
             <div