fix(card-editor): show ids in data series

carbon-design-system · Nov 6, 2020 · b94dd2d · b94dd2d
1 parent 9258b57
commit b94dd2d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.jsx
@@ -225,7 +225,7 @@ const DataSeriesFormItem = ({
           id={`${cardConfig.id}_dataSourceIds`}
           label={mergedI18n.selectDataItems}
           direction="bottom"
-          itemToString={(item) => item.text}
+          itemToString={(item) => item.id}
           initialSelectedItems={initialSelectedItems}
           items={formatDataItemsForDropdown(validDataItems)}
           light

diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.test.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.test.jsx
@@ -2,7 +2,10 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import DataSeriesFormItem, { formatSeries } from './DataSeriesFormItem';
+import DataSeriesFormItem, {
+  formatSeries,
+  formatDataItemsForDropdown,
+} from './DataSeriesFormItem';
 
 const cardConfig = {
   id: 'Timeseries',
@@ -78,6 +81,14 @@ describe('DataSeriesFormItem', () => {
       ]);
     });
   });
+  describe('formatDataItemsForDropdown', () => {
+    it('should correctly format the items for the dropdown', () => {
+      expect(formatDataItemsForDropdown(dataItems)).toEqual([
+        { id: 'temperature', text: 'Temperature' },
+        { id: 'pressure', text: 'Pressure' },
+      ]);
+    });
+  });
   describe('dataItems', () => {
     it('should prioritize getValidDataItems', () => {
       render(
@@ -118,7 +129,7 @@ describe('DataSeriesFormItem', () => {
       expect(dataItemsDropdown).toBeInTheDocument();
       fireEvent.click(dataItemsDropdown);
       // click on a data item
-      const pressureDataItem = await screen.findAllByText('Pressure');
+      const pressureDataItem = await screen.findAllByText('pressure');
       expect(pressureDataItem[0]).toBeInTheDocument();
       fireEvent.click(pressureDataItem[0]);
       // assert that onChange was called