box-ui-elements 23.3.1-beta.1 → 23.4.0-beta.2

package/src/features/metadata-instance-fields/__tests__/EnumMetadataField.test.js

@@ -1,31 +1,76 @@
 import * as React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../../test-utils/testing-library';
 
-import { EnumMetadataFieldBase as EnumMetadataField } from '../EnumMetadataField';
+import EnumMetadataField from '../EnumMetadataField';
 
-describe('features/metadata-instance-editor/fields/EnumMetadataField', () => {
-    const intl = {
-        formatMessage: jest.fn(),
-    };
+describe('EnumMetadataField', () => {
+    const defaultOptions = [
+        { key: 'opt1', displayName: 'Option 1' },
+        { key: 'opt2', displayName: 'Option 2' },
+        { key: 'opt3', displayName: 'Option 3' },
+    ];
 
-    test('should correctly render an enum field', () => {
-        const wrapper = shallow(
+    const getEnumFieldBaseProps = (props = {}) => ({
+        dataKey: 'testKeyEnum',
+        displayName: 'Test Enum Field',
+        onChange: jest.fn(),
+        onRemove: jest.fn(),
+        options: defaultOptions,
+        dataValue: 'opt1',
+        canEdit: true,
+        ...props,
+    });
+
+    test('should display options and reflect selected value', async () => {
+        render(
             <EnumMetadataField
-                dataValue="value"
-                intl={intl}
-                options={[{ key: 'foo' }, { key: 'bar' }, { key: 'baz' }]}
+                {...getEnumFieldBaseProps({
+                    dataValue: 'opt2',
+                    displayName: 'My Test Enum',
+                })}
             />,
         );
-        expect(wrapper).toMatchSnapshot();
+
+        const listbox = screen.getByRole('listbox', { name: 'My Test Enum' });
+        await userEvent.click(listbox);
+
+        expect(listbox).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'opt2', selected: true })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'opt1' })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'opt3' })).toBeInTheDocument();
     });
-    test('should correctly render an enum field with description', () => {
-        const wrapper = shallow(
+
+    test('should display description when provided', () => {
+        const descriptionText = 'This is a test description.';
+        render(
             <EnumMetadataField
-                dataValue="value"
-                description="description"
-                intl={intl}
-                options={[{ key: 'foo' }, { key: 'bar' }, { key: 'baz' }]}
+                {...getEnumFieldBaseProps({
+                    displayName: 'My Enum With Desc',
+                    description: descriptionText,
+                })}
             />,
         );
-        expect(wrapper).toMatchSnapshot();
+
+        const listbox = screen.getByRole('listbox', { name: 'My Enum With Desc This is a test description.' });
+        expect(listbox).toBeInTheDocument();
+        expect(screen.getByText(descriptionText)).toBeInTheDocument();
+    });
+
+    test('should render as disabled when isDisabled is true', () => {
+        render(<EnumMetadataField {...getEnumFieldBaseProps({ isDisabled: true })} />);
+        expect(screen.getByRole('listbox', { name: 'Test Enum Field' })).toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is false', () => {
+        render(<EnumMetadataField {...getEnumFieldBaseProps({ isDisabled: false })} />);
+        expect(screen.getByRole('listbox', { name: 'Test Enum Field' })).not.toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is not provided', () => {
+        const props = getEnumFieldBaseProps();
+        delete props.isDisabled;
+        render(<EnumMetadataField {...props} />);
+        expect(screen.getByRole('listbox', { name: 'Test Enum Field' })).not.toBeDisabled();
     });
 });

package/src/features/metadata-instance-fields/__tests__/FloatMetadataField.test.js

@@ -1,10 +1,74 @@
 import * as React from 'react';
+import { render, screen } from '../../../test-utils/testing-library';
 
 import FloatMetadataField from '../FloatMetadataField';
 
-describe('features/metadata-instance-editor/fields/FloatMetadataField', () => {
-    test('should correctly render a float field', () => {
-        const wrapper = shallow(<FloatMetadataField dataValue="value" />);
-        expect(wrapper).toMatchSnapshot();
+describe('FloatMetadataField', () => {
+    const getFloatFieldBaseProps = (props = {}) => ({
+        dataKey: 'testKeyFloat',
+        displayName: 'Test Float Field',
+        onChange: jest.fn(),
+        onRemove: jest.fn(),
+        type: 'float',
+        dataValue: 123.45,
+        canEdit: true,
+        ...props,
+    });
+
+    test('should correctly render a float field with its value', () => {
+        render(
+            <FloatMetadataField
+                {...getFloatFieldBaseProps({
+                    dataValue: 987.65,
+                    displayName: 'My Test Float',
+                })}
+            />,
+        );
+        const floatInput = screen.getByRole('textbox', { name: 'My Test Float' });
+        expect(floatInput).toBeInTheDocument();
+        expect(floatInput).toHaveValue('987.65');
+    });
+
+    test('should display description when provided', () => {
+        const descriptionText = 'This is a float field description.';
+        render(
+            <FloatMetadataField
+                {...getFloatFieldBaseProps({
+                    displayName: 'My Float With Desc',
+                    description: descriptionText,
+                })}
+            />,
+        );
+        const floatInput = screen.getByRole('textbox', {
+            name: 'My Float With Desc This is a float field description.',
+        });
+        expect(floatInput).toBeInTheDocument();
+        expect(screen.getByText(descriptionText)).toBeInTheDocument();
+    });
+
+    test('should render as disabled when isDisabled is true', () => {
+        const descriptionText = 'A description for the float field.';
+        render(<FloatMetadataField {...getFloatFieldBaseProps({ isDisabled: true, description: descriptionText })} />);
+        expect(
+            screen.getByRole('textbox', { name: 'Test Float Field A description for the float field.' }),
+        ).toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is false', () => {
+        const descriptionText = 'A description for the float field.';
+        render(<FloatMetadataField {...getFloatFieldBaseProps({ isDisabled: false, description: descriptionText })} />);
+        expect(
+            screen.getByRole('textbox', { name: 'Test Float Field A description for the float field.' }),
+        ).not.toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is not provided', () => {
+        const props = getFloatFieldBaseProps();
+        props.description = 'A description for the float field.';
+        delete props.isDisabled;
+        render(<FloatMetadataField {...props} />);
+        expect(
+            screen.getByRole('textbox', { name: 'Test Float Field A description for the float field.' }),
+        ).not.toBeDisabled();
     });
 });

package/src/features/metadata-instance-fields/__tests__/IntegerMetadataField.test.js

@@ -1,10 +1,96 @@
 import * as React from 'react';
+import { render, screen } from '../../../test-utils/testing-library';
 
 import IntegerMetadataField from '../IntegerMetadataField';
 
-describe('features/metadata-instance-editor/fields/IntegerMetadataField', () => {
-    test('should correctly render an integer field', () => {
-        const wrapper = shallow(<IntegerMetadataField dataValue="value" />);
-        expect(wrapper).toMatchSnapshot();
+describe('IntegerMetadataField', () => {
+    const getIntegerFieldBaseProps = (props = {}) => ({
+        dataKey: 'testKeyInteger',
+        displayName: 'Test Integer Field',
+        onChange: jest.fn(),
+        onRemove: jest.fn(),
+        type: 'integer',
+        dataValue: 123,
+        canEdit: true,
+        ...props,
+    });
+
+    test('should correctly render an integer field with its value', () => {
+        render(
+            <IntegerMetadataField
+                {...getIntegerFieldBaseProps({
+                    dataValue: 456,
+                    displayName: 'My Test Integer',
+                })}
+            />,
+        );
+        const integerInput = screen.getByRole('textbox', { name: 'My Test Integer' });
+        expect(integerInput).toBeInTheDocument();
+        expect(integerInput).toHaveValue('456');
+    });
+
+    test('should display description when provided', () => {
+        const descriptionText = 'This is an integer field description.';
+        render(
+            <IntegerMetadataField
+                {...getIntegerFieldBaseProps({
+                    displayName: 'My Integer With Desc',
+                    description: descriptionText,
+                })}
+            />,
+        );
+        const integerInput = screen.getByRole('textbox', {
+            name: 'My Integer With Desc This is an integer field description.',
+        });
+        expect(integerInput).toBeInTheDocument();
+        expect(screen.getByText(descriptionText)).toBeInTheDocument();
+    });
+
+    test('should render as disabled when isDisabled is true', () => {
+        const descriptionText = 'An integer field description for disabled test.';
+        render(
+            <IntegerMetadataField
+                {...getIntegerFieldBaseProps({
+                    isDisabled: true,
+                    description: descriptionText,
+                    displayName: 'Disabled Integer Field',
+                })}
+            />,
+        );
+        expect(
+            screen.getByRole('textbox', {
+                name: 'Disabled Integer Field An integer field description for disabled test.',
+            }),
+        ).toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is false', () => {
+        const descriptionText = 'An integer field description for enabled test.';
+        render(
+            <IntegerMetadataField
+                {...getIntegerFieldBaseProps({
+                    isDisabled: false,
+                    description: descriptionText,
+                    displayName: 'Enabled Integer Field',
+                })}
+            />,
+        );
+        expect(
+            screen.getByRole('textbox', {
+                name: 'Enabled Integer Field An integer field description for enabled test.',
+            }),
+        ).not.toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is not provided', () => {
+        const props = getIntegerFieldBaseProps({
+            description: 'An integer field for default enabled test.',
+            displayName: 'Default Enabled Integer',
+        });
+        delete props.isDisabled;
+        render(<IntegerMetadataField {...props} />);
+        expect(
+            screen.getByRole('textbox', { name: 'Default Enabled Integer An integer field for default enabled test.' }),
+        ).not.toBeDisabled();
     });
 });

package/src/features/metadata-instance-fields/__tests__/MultiSelectMetadataField.test.js

@@ -1,15 +1,103 @@
 import * as React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../../test-utils/testing-library';
 
 import MultiSelectMetadataField from '../MultiSelectMetadataField';
 
-describe('features/metadata-instance-editor/fields/MultiSelectMetadataField', () => {
-    test('should correctly render', () => {
-        const wrapper = shallow(<MultiSelectMetadataField dataValue={['value']} />);
-        expect(wrapper).toMatchSnapshot();
+describe('MultiSelectMetadataField', () => {
+    const defaultOptions = [
+        { key: 'opt1', displayName: 'Option 1' },
+        { key: 'opt2', displayName: 'Option 2' },
+        { key: 'opt3', displayName: 'Option 3' },
+        { key: 'opt4', displayName: 'Option 4' },
+    ];
+
+    const getMultiSelectFieldBaseProps = (props = {}) => ({
+        dataKey: 'testKeyMultiSelect',
+        displayName: 'Test MultiSelect Field',
+        onChange: jest.fn(),
+        onRemove: jest.fn(),
+        options: defaultOptions,
+        dataValue: ['opt1', 'opt3'],
+        canEdit: true,
+        ...props,
+    });
+
+    test('should display options and reflect selected values', async () => {
+        render(
+            <MultiSelectMetadataField
+                {...getMultiSelectFieldBaseProps({
+                    dataValue: ['opt2', 'opt4'],
+                    displayName: 'My Test MultiSelect',
+                })}
+            />,
+        );
+
+        const listbox = screen.getByRole('listbox', { name: 'My Test MultiSelect' });
+        expect(listbox).toBeInTheDocument();
+        await userEvent.click(listbox);
+
+        expect(screen.getByRole('option', { name: 'opt2', selected: true })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'opt4', selected: true })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'opt1', selected: false })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'opt3', selected: false })).toBeInTheDocument();
+    });
+
+    test('should display description when provided', () => {
+        const descriptionText = 'This is a multi-select field description.';
+        render(
+            <MultiSelectMetadataField
+                {...getMultiSelectFieldBaseProps({
+                    displayName: 'My MultiSelect With Desc',
+                    description: descriptionText,
+                })}
+            />,
+        );
+        const listbox = screen.getByRole('listbox', {
+            name: 'My MultiSelect With Desc This is a multi-select field description.',
+        });
+        expect(listbox).toBeInTheDocument();
+        expect(screen.getByText(descriptionText)).toBeInTheDocument();
+    });
+
+    test('should render as disabled when isDisabled is true', () => {
+        const descriptionText = 'A description for the multi-select field.';
+        render(
+            <MultiSelectMetadataField
+                {...getMultiSelectFieldBaseProps({
+                    isDisabled: true,
+                    description: descriptionText,
+                })}
+            />,
+        );
+        expect(
+            screen.getByRole('listbox', { name: 'Test MultiSelect Field A description for the multi-select field.' }),
+        ).toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is false', () => {
+        const descriptionText = 'A description for the multi-select field.';
+        render(
+            <MultiSelectMetadataField
+                {...getMultiSelectFieldBaseProps({
+                    isDisabled: false,
+                    description: descriptionText,
+                })}
+            />,
+        );
+        expect(
+            screen.getByRole('listbox', { name: 'Test MultiSelect Field A description for the multi-select field.' }),
+        ).not.toBeDisabled();
     });
 
-    test('should correctly render with description', () => {
-        const wrapper = shallow(<MultiSelectMetadataField dataValue={['value']} description="description" />);
-        expect(wrapper).toMatchSnapshot();
+    test('should render as enabled when isDisabled is not provided', () => {
+        const props = getMultiSelectFieldBaseProps({
+            description: 'A description for the multi-select field.',
+        });
+        delete props.isDisabled;
+        render(<MultiSelectMetadataField {...props} />);
+        expect(
+            screen.getByRole('listbox', { name: 'Test MultiSelect Field A description for the multi-select field.' }),
+        ).not.toBeDisabled();
     });
 });

package/src/features/metadata-instance-fields/__tests__/TextMetadataField.test.js

@@ -1,24 +1,117 @@
 import * as React from 'react';
+import { render, screen } from '../../../test-utils/testing-library';
 
-import { TextMetadataFieldBase as TextMetadataField } from '../TextMetadataField';
+import TextMetadataField from '../TextMetadataField';
 
-describe('features/metadata-instance-editor/fields/TextMetadataField', () => {
-    const intl = {
-        formatMessage: jest.fn(),
-    };
+describe('TextMetadataField', () => {
+    const getTextFieldBaseProps = (props = {}) => ({
+        dataKey: 'testKeyText',
+        displayName: 'Test Text Field',
+        onChange: jest.fn(),
+        onRemove: jest.fn(),
+        type: 'text',
+        dataValue: 'initial text value',
+        canEdit: true,
+        ...props,
+    });
+
+    test('should correctly render a text field with its value', () => {
+        render(
+            <TextMetadataField
+                {...getTextFieldBaseProps({
+                    dataValue: 'specific text',
+                    displayName: 'My Test Text',
+                })}
+            />,
+        );
+        const textInput = screen.getByRole('textbox', { name: 'My Test Text' });
+        expect(textInput).toBeInTheDocument();
+        expect(textInput).toHaveValue('specific text');
+    });
+
+    test('should correctly render a number field with its numeric value', () => {
+        render(
+            <TextMetadataField
+                {...getTextFieldBaseProps({
+                    dataValue: 12345,
+                    displayName: 'My Test Number',
+                    type: 'number',
+                })}
+            />,
+        );
+        const numberInput = screen.getByRole('spinbutton', { name: 'My Test Number' });
+        expect(numberInput).toBeInTheDocument();
+        expect(numberInput).toHaveValue(12345);
+    });
+
+    test('should correctly render zero in a number field', () => {
+        render(
+            <TextMetadataField
+                {...getTextFieldBaseProps({
+                    dataValue: 0,
+                    displayName: 'My Zero Number',
+                    type: 'number',
+                })}
+            />,
+        );
+        const zeroInput = screen.getByRole('spinbutton', { name: 'My Zero Number' });
+        expect(zeroInput).toBeInTheDocument();
+        expect(zeroInput).toHaveValue(0);
+    });
+
+    test('should display description when provided', () => {
+        const descriptionText = 'This is a text field description.';
+        render(
+            <TextMetadataField
+                {...getTextFieldBaseProps({
+                    displayName: 'My Text With Desc',
+                    description: descriptionText,
+                })}
+            />,
+        );
+        const textInput = screen.getByRole('textbox', { name: 'My Text With Desc This is a text field description.' });
+        expect(textInput).toBeInTheDocument();
+        expect(screen.getByText(descriptionText)).toBeInTheDocument();
+    });
 
-    test('should correctly render a text field', () => {
-        const wrapper = shallow(<TextMetadataField dataValue="value" intl={intl} />);
-        expect(wrapper).toMatchSnapshot();
+    test('should render as disabled when isDisabled is true', () => {
+        const descriptionText = 'A description for the text field.';
+        render(
+            <TextMetadataField
+                {...getTextFieldBaseProps({
+                    isDisabled: true,
+                    description: descriptionText,
+                })}
+            />,
+        );
+        expect(
+            screen.getByRole('textbox', { name: 'Test Text Field A description for the text field.' }),
+        ).toBeDisabled();
     });
 
-    test('should correctly render a number field', () => {
-        const wrapper = shallow(<TextMetadataField dataValue="value" intl={intl} type="number" />);
-        expect(wrapper).toMatchSnapshot();
+    test('should render as enabled when isDisabled is false', () => {
+        const descriptionText = 'A description for the text field.';
+        render(
+            <TextMetadataField
+                {...getTextFieldBaseProps({
+                    isDisabled: false,
+                    description: descriptionText,
+                })}
+            />,
+        );
+        expect(
+            screen.getByRole('textbox', { name: 'Test Text Field A description for the text field.' }),
+        ).not.toBeDisabled();
     });
 
-    test('should correctly render a zero in a number field', () => {
-        const wrapper = shallow(<TextMetadataField dataValue={0} intl={intl} type="number" />);
-        expect(wrapper).toMatchSnapshot();
+    test('should render as enabled when isDisabled is not provided', () => {
+        const props = getTextFieldBaseProps({
+            description: 'A description for the text field.',
+        });
+        delete props.isDisabled;
+        render(<TextMetadataField {...props} />);
+        expect(
+            screen.getByRole('textbox', { name: 'Test Text Field A description for the text field.' }),
+        ).not.toBeDisabled();
     });
 });

package/src/features/metadata-instance-fields/__tests__/__snapshots__/DateMetadataField.test.js.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`features/metadata-instance-editor/fields/DateMetadataField should correctly render a date field 1`] = `
-<DatePicker
-  className="bdl-DateMetadataField"
-  dateFormat="utcISOString"
-  displayFormat={
-    {
-      "day": "numeric",
-      "month": "long",
-      "year": "numeric",
-    }
-  }
-  hideOptionalLabel={true}
-  onChange={[Function]}
-  value={2018-06-13T07:00:00.000Z}
-/>
-`;

package/src/features/metadata-instance-fields/__tests__/__snapshots__/EnumMetadataField.test.js.snap

@@ -1,84 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`features/metadata-instance-editor/fields/EnumMetadataField should correctly render an enum field 1`] = `
-<div
-  className="bdl-EnumMetadataField"
->
-  <Label>
-    <SingleSelectField
-      isEscapedWithReference={true}
-      isScrollable={true}
-      onChange={[Function]}
-      options={
-        [
-          {
-            "displayText": undefined,
-            "isSelectable": false,
-            "value": undefined,
-          },
-          {
-            "displayText": "foo",
-            "isSelectable": true,
-            "value": "foo",
-          },
-          {
-            "displayText": "bar",
-            "isSelectable": true,
-            "value": "bar",
-          },
-          {
-            "displayText": "baz",
-            "isSelectable": true,
-            "value": "baz",
-          },
-        ]
-      }
-      selectedValue="value"
-    />
-  </Label>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/EnumMetadataField should correctly render an enum field with description 1`] = `
-<div
-  className="bdl-EnumMetadataField"
->
-  <Label>
-    <i
-      className="bdl-EnumMetadataField-desc"
-    >
-      description
-    </i>
-    <SingleSelectField
-      isEscapedWithReference={true}
-      isScrollable={true}
-      onChange={[Function]}
-      options={
-        [
-          {
-            "displayText": undefined,
-            "isSelectable": false,
-            "value": undefined,
-          },
-          {
-            "displayText": "foo",
-            "isSelectable": true,
-            "value": "foo",
-          },
-          {
-            "displayText": "bar",
-            "isSelectable": true,
-            "value": "bar",
-          },
-          {
-            "displayText": "baz",
-            "isSelectable": true,
-            "value": "baz",
-          },
-        ]
-      }
-      selectedValue="value"
-    />
-  </Label>
-</div>
-`;

package/src/features/metadata-instance-fields/__tests__/__snapshots__/FloatMetadataField.test.js.snap

@@ -1,8 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`features/metadata-instance-editor/fields/FloatMetadataField should correctly render a float field 1`] = `
-<TextMetadataField
-  dataValue="value"
-  onChange={[Function]}
-/>
-`;

package/src/features/metadata-instance-fields/__tests__/__snapshots__/IntegerMetadataField.test.js.snap

@@ -1,8 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`features/metadata-instance-editor/fields/IntegerMetadataField should correctly render an integer field 1`] = `
-<TextMetadataField
-  dataValue="value"
-  onChange={[Function]}
-/>
-`;