fix(select,toolbarFields): ent-3879 apply test attributes

src/components/form/__tests__/__snapshots__/select.test.js.snap

@@ -504,6 +504,28 @@ exports[`Select Component should allow being disabled with missing options: opti
 />
 `;
 
+exports[`Select Component should allow data- props: data- attributes 1`] = `
+Object {
+  "ariaLabel": "Select option",
+  "className": "",
+  "data-dolor-sit": "dolor sit",
+  "data-lorem": "ipsum",
+  "direction": "down",
+  "id": "generatedid-",
+  "isDisabled": false,
+  "isToggleText": true,
+  "maxHeight": null,
+  "name": null,
+  "onSelect": [Function],
+  "options": Array [],
+  "placeholder": "Select option",
+  "position": "left",
+  "selectedOptions": null,
+  "toggleIcon": null,
+  "variant": "single",
+}
+`;
+
 exports[`Select Component should allow plain objects as values, and be able to select options based on values within the object: select when option values are objects 1`] = `
 <div
   class="pf-c-select curiosity-select  "
@@ -798,7 +820,7 @@ exports[`Select Component should render a checkbox select: checkbox select 1`] =
 </div>
 `;
 
-exports[`Select Component should render a expanded select: expanded 1`] = `
+exports[`Select Component should render an expanded select: expanded 1`] = `
 <Select
   ariaLabel="Select option"
   className=""

src/components/form/__tests__/select.test.js

@@ -102,7 +102,7 @@ describe('Select Component', () => {
     component.instance().onSelect({}, 'world');
   });
 
-  it('should render a expanded select', () => {
+  it('should render an expanded select', () => {
     const props = {
       id: 'test',
       options: ['lorem', 'ipsum', 'hello', 'world']
@@ -163,4 +163,14 @@ describe('Select Component', () => {
 
     expect(component).toMatchSnapshot('options, but disabled');
   });
+
+  it('should allow data- props', () => {
+    const props = {
+      'data-lorem': 'ipsum',
+      'data-dolor-sit': 'dolor sit'
+    };
+
+    const component = mount(<Select {...props} />);
+    expect(component.props()).toMatchSnapshot('data- attributes');
+  });
 });

src/components/form/select.js

@@ -37,6 +37,8 @@ const SelectPosition = DropdownPosition;
 class Select extends React.Component {
   state = { isExpanded: false, options: null, selected: null };
 
+  selectField = React.createRef();
+
   componentDidMount() {
     const { options } = this.state;
 
@@ -135,13 +137,16 @@ class Select extends React.Component {
     });
   };
 
+  // FixMe: attributes filtered on PF select component. allow data- attributes
   /**
    * Format options into a consumable array of objects format.
    */
   formatOptions() {
+    const { current: domElement = {} } = this.selectField;
     const { options, selectedOptions, variant } = this.props;
+    const dataAttributes = Object.entries(this.props).filter(([key]) => /^data-/i.test(key));
     const updatedOptions = _isPlainObject(options)
-      ? Object.keys(options).map(key => ({ ...options[key], title: key, value: options[key] }))
+      ? Object.entries(options).map(([key, value]) => ({ ...value, title: key, value }))
       : _cloneDeep(options);
 
     const activateOptions =
@@ -197,6 +202,10 @@ class Select extends React.Component {
       updateSelected = updatedOptions.filter(opt => opt.selected === true).map(opt => opt.title);
     }
 
+    if (domElement?.parentRef?.current) {
+      dataAttributes.forEach(([key, value]) => domElement?.parentRef?.current.setAttribute(key, value));
+    }
+
     this.setState({
       options: updatedOptions,
       selected: updateSelected
@@ -257,6 +266,7 @@ class Select extends React.Component {
         isOpen={isExpanded}
         toggleIcon={toggleIcon}
         placeholderText={placeholder}
+        ref={this.selectField}
         {...pfSelectOptions}
       >
         {(options &&

src/components/toolbar/__tests__/__snapshots__/toolbarFieldDisplayName.test.js.snap

@@ -59,6 +59,7 @@ exports[`ToolbarFieldDisplayName Component should render a non-connected compone
   <TextInput
     aria-label="t(curiosity-toolbar.placeholder, {\\"context\\":\\"displayName\\"})"
     className="curiosity-input__display-name"
+    data-test="toolbarFieldDisplayName"
     iconVariant="search"
     id={null}
     isDisabled={false}

src/components/toolbar/__tests__/__snapshots__/toolbarFieldGranularity.test.js.snap

@@ -58,6 +58,7 @@ exports[`ToolbarFieldGranularity Component should render a non-connected compone
   aria-label="t(curiosity-toolbar.placeholder, {\\"context\\":\\"granularity\\"})"
   ariaLabel="Select option"
   className=""
+  data-test="toolbarFieldGranularity"
   direction="down"
   id="generatedid-"
   isDisabled={false}

src/components/toolbar/__tests__/__snapshots__/toolbarFieldRangedMonthly.test.js.snap

@@ -118,6 +118,7 @@ exports[`ToolbarFieldGranularity Component should handle selecting an option dir
   aria-label="t(curiosity-toolbar.placeholder, {\\"context\\":\\"granularity\\"})"
   ariaLabel="Select option"
   className=""
+  data-test="toolbarFieldRangeGranularity"
   direction="down"
   id="generatedid-"
   isDisabled={false}
@@ -278,6 +279,7 @@ exports[`ToolbarFieldGranularity Component should render a non-connected compone
   aria-label="t(curiosity-toolbar.placeholder, {\\"context\\":\\"granularity\\"})"
   ariaLabel="Select option"
   className=""
+  data-test="toolbarFieldRangeGranularity"
   direction="down"
   id="generatedid-"
   isDisabled={false}

src/components/toolbar/__tests__/__snapshots__/toolbarFieldUom.test.js.snap

@@ -38,6 +38,7 @@ exports[`ToolbarFieldUom Component should render a non-connected component: non-
   aria-label="t(curiosity-toolbar.placeholder, {\\"context\\":\\"uom\\"})"
   ariaLabel="Select option"
   className=""
+  data-test="toolbarFieldUom"
   direction="down"
   id="generatedid-"
   isDisabled={false}

src/components/toolbar/toolbarFieldDisplayName.js

@@ -107,6 +107,7 @@ const ToolbarFieldDisplayName = ({ t, value, viewId }) => {
         onKeyUp={onKeyUp}
         value={currentValue}
         placeholder={t('curiosity-toolbar.placeholder', { context: 'displayName' })}
+        data-test={ToolbarFieldDisplayName.defaultProps.viewId}
       />
     </InputGroup>
   );

src/components/toolbar/toolbarFieldGranularity.js

@@ -75,6 +75,7 @@ const ToolbarFieldGranularity = ({ options, t, value, viewId }) => {
       options={updatedOptions}
       selectedOptions={updatedValue}
       placeholder={t('curiosity-toolbar.placeholder', { context: 'granularity' })}
+      data-test={ToolbarFieldGranularity.defaultProps.viewId}
     />
   );
 };

src/components/toolbar/toolbarFieldRangedMonthly.js

@@ -75,6 +75,7 @@ const ToolbarFieldRangedMonthly = ({ options, t, value, viewId }) => {
       placeholder={t('curiosity-toolbar.placeholder', { context: 'granularity' })}
       position={SelectPosition.right}
       maxHeight={250}
+      data-test={ToolbarFieldRangedMonthly.defaultProps.viewId}
     />
   );
 };

src/components/toolbar/toolbarFieldUom.js

@@ -59,6 +59,7 @@ const ToolbarFieldUom = ({ options, t, value, viewId }) => {
       options={updatedOptions}
       selectedOptions={updatedValue}
       placeholder={t('curiosity-toolbar.placeholder', { context: 'uom' })}
+      data-test={ToolbarFieldUom.defaultProps.viewId}
     />
   );
 };