fix(blueprint): fix missing props for sort titles

Author: rvsia

packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.js

@@ -143,6 +143,8 @@ const DualListInternal = ({
   LeftMenuItemProps,
   RightMenuProps,
   RightMenuItemProps,
+  leftSortTitle,
+  rightSortTitle,
 }) => {
   const { buttonGroup, wrapper } = useStyles();
 
@@ -159,6 +161,7 @@ const DualListInternal = ({
           ControlGroupProps={LeftControlGroupProps}
           InputGroupProps={LeftInputGroupProps}
           ButtonProps={LeftButtonProps}
+          sortTitle={leftSortTitle}
         />
         <List
           optionClick={handleOptionsClick}
@@ -216,6 +219,7 @@ const DualListInternal = ({
           ControlGroupProps={RightControlGroupProps}
           InputGroupProps={RightInputGroupProps}
           ButtonProps={RightButtonProps}
+          sortTitle={rightSortTitle}
         />
         <List
           optionClick={handleValuesClick}
@@ -279,6 +283,8 @@ DualListInternal.propTypes = {
   LeftMenuItemProps: PropTypes.object,
   RightMenuProps: PropTypes.object,
   RightMenuItemProps: PropTypes.object,
+  leftSortTitle: PropTypes.string,
+  rightSortTitle: PropTypes.string,
 };
 
 DualListInternal.defaultProps = {
@@ -294,6 +300,8 @@ DualListInternal.defaultProps = {
   filterValueTitle: 'Filter selected value',
   filterOptionsText: 'Remove your filter to see all options',
   filterValueText: 'Remove your filter to see all selected',
+  leftSortTitle: 'Sort options',
+  rightSortTitle: 'Sort value',
   options: [],
   allToLeft: true,
   allToRight: true,

packages/blueprint-component-mapper/src/tests/dual-list-select.test.js

@@ -168,13 +168,76 @@ describe('DualListSelect', () => {
     expect(() => screen.getByText('pigeons')).toThrow();
   });
 
-  // ICON BUTTONS ARE TO REACHABLE
-  it.skip('sort options', async () => {
-    render(<FormRenderer {...initialProps} />);
+  it('sort options', async () => {
+    const { container } = render(<FormRenderer {...initialProps} />);
+
+    expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
+      'cats',
+      'cats_1',
+      'cats_2',
+      'pigeons',
+      'zebras',
+      'No selected',
+    ]);
+
+    userEvent.click(screen.getByTitle('Sort options'));
+
+    expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
+      'zebras',
+      'pigeons',
+      'cats_2',
+      'cats_1',
+      'cats',
+      'No selected',
+    ]);
+
+    userEvent.click(screen.getByTitle('Sort options'));
+
+    expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
+      'cats',
+      'cats_1',
+      'cats_2',
+      'pigeons',
+      'zebras',
+      'No selected',
+    ]);
   });
 
-  it.skip('sort value', async () => {
-    render(<FormRenderer {...initialProps} />);
+  it('sort value', async () => {
+    const { container } = render(
+      <FormRenderer {...initialProps} initialValues={{ 'dual-list': schema.fields[0].options.map(({ value }) => value) }} />
+    );
+
+    expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
+      'No available options',
+      'cats',
+      'cats_1',
+      'cats_2',
+      'pigeons',
+      'zebras',
+    ]);
+
+    userEvent.click(screen.getByTitle('Sort value'));
+
+    expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
+      'No available options',
+      'zebras',
+      'pigeons',
+      'cats_2',
+      'cats_1',
+      'cats',
+    ]);
+
+    userEvent.click(screen.getByTitle('Sort value'));
+
+    expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
+      'No available options',
+      'cats',
+      'cats_1',
+      'cats_2',
+      'pigeons',
+      'zebras',
+    ]);
   });
 
   describe('filtered options', () => {

packages/react-renderer-demo/src/doc-components/examples-texts/blueprint/dual-list-select.md

@@ -21,6 +21,8 @@ Dual list select is wrapped in a form group, so it accepts all [form group props
 |filterValueTitle|String|'Filter selected value'|Placeholder for value filter input|
 |filterValueText|String|'Remove your filter to see all selected'|Placeholder for value when there is no filtered value|
 |filterOptionsText|String|'Remove your filter to see all options'|Placeholder for options when there is no filtered option|
+|leftSortTitle|String|'Sort options'|Accessible title for left sort button.|
+|rightSortTitle|String|'Sort value'|Accessible title for right sort button.|
 
 ### Options