@evoke-platform/ui-components 1.10.0-testing.8 → 1.10.0

package/dist/published/components/core/Autocomplete/Autocomplete.js

@@ -1,5 +1,6 @@
 import { ExpandMore, InfoRounded } from '@mui/icons-material';
 import { InputLabel, Autocomplete as MUIAutocomplete } from '@mui/material';
+import { omit } from 'lodash';
 import React from 'react';
 import UIThemeProvider from '../../../theme';
 import FieldError from '../FieldError';
@@ -37,6 +38,7 @@ const Autocomplete = (props) => {
             return props.instructionText;
         }
     };
+    const muiAutocompleteProps = omit(props, 'sortBy', 'error', 'errorMessage', 'labelPlacement', 'instructionText');
     if (!!props.label && props.labelPlacement === 'outside-top') {
         return (React.createElement(UIThemeProvider, null,
             React.createElement(InputLabel, { htmlFor: props.id ?? '', sx: { display: 'flex', paddingBottom: '0px', fontSize: '14px' } },
@@ -50,7 +52,7 @@ const Autocomplete = (props) => {
                             color: (theme) => theme.palette.text.secondary,
                         } })))),
             renderInstructionText(),
-            React.createElement(MUIAutocomplete, { ...props, sx: {
+            React.createElement(MUIAutocomplete, { ...muiAutocompleteProps, sx: {
                     '& fieldset': { borderRadius: '8px', borderColor: props.error ? 'red' : undefined },
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: props.readOnly ? 'none' : 'auto',
@@ -67,7 +69,7 @@ const Autocomplete = (props) => {
     }
     else {
         return (React.createElement(UIThemeProvider, null,
-            React.createElement(MUIAutocomplete, { ...props, sx: {
+            React.createElement(MUIAutocomplete, { ...muiAutocompleteProps, sx: {
                     '& fieldset': { borderRadius: '8px', borderColor: props.error ? 'red' : undefined },
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: props.readOnly ? 'none' : 'auto',

package/dist/published/components/core/Autocomplete/Autocomplete.test.js

@@ -1,11 +1,120 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { it } from 'vitest';
 import TextField from '../TextField';
 import Autocomplete from './Autocomplete';
-const renderInput = (params) => React.createElement(TextField, { ...params });
+const renderInputFactory = (label) => (params) => React.createElement(TextField, { ...params, label: label });
 const options = [];
-it('renders with label outside outline', () => {
-    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", renderInput: renderInput, options: options }));
+it('should render with label outside outline', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", renderInput: renderInputFactory(), options: options }));
     screen.getByRole('combobox', { name: 'Title' });
 });
+it('should render label outside outline with asterisk when required', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", renderInput: renderInputFactory(), options: options, required: true }));
+    screen.getByRole('combobox', { name: 'Title *' });
+});
+it('should render instruction text when provided when there is an outside-top label', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", instructionText: "This is an instruction", renderInput: renderInputFactory(), options: options }));
+    screen.getByText('This is an instruction');
+});
+it('should not render instruction text when there is not an outside-top label', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", instructionText: "This is an instruction", renderInput: renderInputFactory(), options: options }));
+    const instructionText = screen.queryByText('This is an instruction');
+    expect(instructionText).not.toBeInTheDocument();
+});
+it('should render a tooltip if one is provided and there is an outside-top label', async () => {
+    const user = userEvent.setup();
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", tooltip: "This is a tooltip", renderInput: renderInputFactory(), options: options }));
+    expect(screen.queryByText('This is a tooltip')).not.toBeInTheDocument();
+    await user.hover(screen.getByLabelText('This is a tooltip'));
+    await screen.findByText('This is a tooltip');
+});
+it('should sort options in ascending order if sortBy is ASC', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = [
+        { label: 'Banana', value: 1 },
+        { label: 'Apple', value: 2 },
+        { label: 'Cherry', value: 3 },
+    ];
+    render(React.createElement(Autocomplete, { id: "testinput", sortBy: "ASC", renderInput: renderInputFactory('Fruits'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruits' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Apple', 'Banana', 'Cherry']);
+});
+it('should sort options in descending order if sortBy is DESC', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = [
+        { label: 'Banana', value: 1 },
+        { label: 'Apple', value: 2 },
+        { label: 'Cherry', value: 3 },
+    ];
+    render(React.createElement(Autocomplete, { id: "testinput", sortBy: "DESC", renderInput: renderInputFactory('Fruits'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruits' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Cherry', 'Banana', 'Apple']);
+});
+it('should not sort options if sortBy is NONE', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = [
+        { label: 'Banana', value: 1 },
+        { label: 'Apple', value: 2 },
+        { label: 'Cherry', value: 3 },
+    ];
+    render(React.createElement(Autocomplete, { id: "testinput", sortBy: "NONE", renderInput: renderInputFactory('Fruits'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruits' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Banana', 'Apple', 'Cherry']);
+});
+it('should sort options in ascending order by default', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = [
+        { label: 'Banana', value: 1 },
+        { label: 'Apple', value: 2 },
+        { label: 'Cherry', value: 3 },
+    ];
+    render(React.createElement(Autocomplete, { id: "testinput", renderInput: renderInputFactory('Fruits'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruits' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Apple', 'Banana', 'Cherry']);
+});
+it('should sort string options', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = ['Banana', 'Apple', 'Cherry'];
+    render(React.createElement(Autocomplete, { id: "testinput", sortBy: "ASC", renderInput: renderInputFactory('Fruit Options'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruit Options' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Apple', 'Banana', 'Cherry']);
+});
+it('should render an error when error prop is true', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", error: true, errorMessage: "This is an error", labelPlacement: "outside-top", renderInput: renderInputFactory(), options: options }));
+    screen.getByText('This is an error');
+});
+it('should show popupIcon when not disabled', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", disabled: false, renderInput: renderInputFactory(), options: options }));
+    screen.getByTestId('ExpandMoreIcon');
+});
+it('should hide popupIcon when disabled', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", disabled: true, renderInput: renderInputFactory(), options: options }));
+    const popupIcon = screen.queryByTestId('ExpandMoreIcon');
+    expect(popupIcon).not.toBeInTheDocument();
+});
+it('should hide popupIcon when readOnly', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", readOnly: true, renderInput: renderInputFactory(), options: options }));
+    const popupIcon = screen.queryByTestId('ExpandMoreIcon');
+    expect(popupIcon).not.toBeInTheDocument();
+});
+it('should show custom popupIcon when provided', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", popupIcon: React.createElement("span", { "data-testid": "custom-icon" }, "^"), renderInput: renderInputFactory(), options: options }));
+    screen.getByTestId('custom-icon');
+});

package/dist/published/components/core/TextField/TextField.js

@@ -36,7 +36,7 @@ const TextField = (props) => {
                     ...props.sx,
                 } }),
         error && React.createElement(FieldError, { required: required, label: errorMessage }))) : (React.createElement(React.Fragment, null,
-        React.createElement(MUITextField, { inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly, 'data-testid': 'label-inside' }, ...props, sx: readOnly
+        React.createElement(MUITextField, { inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly, 'data-testid': 'label-inside' }, ...muiProps, sx: readOnly
                 ? { ...readOnlyStyles, ...props.sx }
                 : { '& fieldset': { borderRadius: '8px' }, ...props.sx } }),
         error && React.createElement(FieldError, { required: required, label: errorMessage })))));

package/dist/published/components/core/TextField/TextField.test.js

@@ -1,9 +1,7 @@
-import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { expect, it } from 'vitest';
 import TextField from './index';
-expect.extend(matchers);
 it('render TextField and check for data-testid === label-outside when labelPlacement === outside-top && variant === outlined', () => {
     render(React.createElement(TextField, { id: "testinput", labelPlacement: "outside-top", variant: "outlined", label: "Title" }));
     const textField = screen.getByRole('textbox', { name: 'Title' });

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js

@@ -248,7 +248,7 @@ const customDelete = (props) => {
             '&:hover': { backgroundColor: 'transparent', boxShadow: 'none' },
             color: '#212B36',
             fontWeight: '400',
-        } }, "Delete group")) : (React.createElement(IconButton, { onClick: handleOnClick, size: "small" },
+        } }, "Delete group")) : (React.createElement(IconButton, { onClick: handleOnClick, size: "small", "aria-label": "Delete rule" },
         React.createElement(TrashCan, { sx: { ':hover': { color: '#637381' } } })))) : (React.createElement(React.Fragment, null));
 };
 export const valueEditor = (props) => {
@@ -400,9 +400,31 @@ const CriteriaBuilder = (props) => {
     const fields = useMemo(() => {
         return properties
             .filter(({ type }) => type !== 'collection')
-            .map((property) => {
+            .flatMap((property) => {
+            if (property.type === 'object') {
+                const result = [
+                    {
+                        name: `${property.id}.id`,
+                        label: `${property.name} ID`,
+                        inputType: property.type,
+                    },
+                    {
+                        name: `${property.id}.name`,
+                        label: `${property.name} Name`,
+                        inputType: property.type,
+                    },
+                ];
+                if (!property.objectId) {
+                    result.push({
+                        name: `${property.id}.objectId`,
+                        label: `${property.name} Object ID`,
+                        inputType: property.type,
+                    });
+                }
+                return result;
+            }
             return {
-                name: property.type === 'object' ? `${property.id}.id` : property.id,
+                name: property.id,
                 label: property.name,
                 inputType: property.type,
                 ...(property.enum && {

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.test.d.ts

@@ -0,0 +1 @@
+export {};