feat: clean up code

rshen91 · rshen91 · commit 75df86be5274 · 2021-04-13T11:14:25.000-06:00
diff --git a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx
@@ -171,6 +171,7 @@ class XYChartComponent extends React.Component<XYChartProps> {
 
     const chartSeriesTypes =
       seriesTypes.size > 1 ? `Mixed chart: ${[...seriesTypes].join(' and ')} chart` : `${[...seriesTypes]} chart`;
+    const chartIdDescription = `${chartId}--description`;
     return (
       <figure>
         <canvas
@@ -184,11 +185,11 @@ class XYChartComponent extends React.Component<XYChartProps> {
           }}
           // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
           role="presentation"
-          {...(description ? { 'aria-describedby': `${chartId}--${chartSeriesTypes.length}` } : {})}
+          {...(description ? { 'aria-describedby': chartIdDescription } : {})}
         >
           {(description || useDefaultSummary) && (
             <div className="echScreenReaderOnly">
-              {description && <p id={`${chartId}--${chartSeriesTypes.length}`}>{description}</p>}
+              {description && <p id={chartIdDescription}>{description}</p>}
               {useDefaultSummary && (
                 <dl>
                   <dt>Chart type</dt>
@@ -262,11 +263,12 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
   }
 
   const { geometries, geometriesIndex } = computeSeriesGeometriesSelector(state);
+  const { debug, description, useDefaultSummary } = getSettingsSpecSelector(state);
 
   return {
     initialized: true,
     isChartEmpty: isChartEmptySelector(state),
-    debug: getSettingsSpecSelector(state).debug,
+    debug,
     geometries,
     geometriesIndex,
     theme: getChartThemeSelector(state),
@@ -283,8 +285,8 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
     annotationSpecs: getAnnotationSpecsSelector(state),
     panelGeoms: computePanelsSelectors(state),
     seriesTypes: getSeriesTypes(state),
-    description: getSettingsSpecSelector(state).description,
-    useDefaultSummary: getSettingsSpecSelector(state).useDefaultSummary,
+    description,
+    useDefaultSummary,
     chartId: getChartIdSelector(state),
   };
 };
diff --git a/src/chart_types/xy_chart/state/chart_state.a11y.test.ts b/src/chart_types/xy_chart/state/chart_state.a11y.test.ts
@@ -36,17 +36,16 @@ describe('custom description for screen readers', () => {
             { x: 2, y: 5 },
           ],
         }),
+        MockGlobalSpec.settings(),
       ],
       store,
     );
-    MockStore.addSpecs([MockGlobalSpec.settings()], store);
   });
   it('should test defaults', () => {
     const state = store.getState();
-    const descriptionValue = getSettingsSpecSelector(state).description;
-    const defaultGeneratedSeriesTypes = getSettingsSpecSelector(state).useDefaultSummary;
-    expect(descriptionValue).toBeUndefined();
-    expect(defaultGeneratedSeriesTypes).toBeTrue();
+    const { description, useDefaultSummary } = getSettingsSpecSelector(state);
+    expect(description).toBeUndefined();
+    expect(useDefaultSummary).toBeTrue();
   });
   it('should allow user to set a custom description for chart', () => {
     MockStore.addSpecs(
@@ -58,8 +57,8 @@ describe('custom description for screen readers', () => {
       store,
     );
     const state = store.getState();
-    const descriptionValue = getSettingsSpecSelector(state).description;
-    expect(descriptionValue).toBe('This is sample Kibana data');
+    const { description } = getSettingsSpecSelector(state);
+    expect(description).toBe('This is sample Kibana data');
   });
   it('should be able to disable generated descriptions', () => {
     MockStore.addSpecs(
@@ -71,7 +70,7 @@ describe('custom description for screen readers', () => {
       store,
     );
     const state = store.getState();
-    const disableGeneratedSeriesTypes = getSettingsSpecSelector(state).useDefaultSummary;
-    expect(disableGeneratedSeriesTypes).toBe(false);
+    const { useDefaultSummary } = getSettingsSpecSelector(state);
+    expect(useDefaultSummary).toBe(false);
   });
 });
