box-ui-elements 23.4.0-beta.1 → 23.4.0-beta.3

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]}
-/>
-`;

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

@@ -1,58 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`features/metadata-instance-editor/fields/MultiSelectMetadataField should correctly render 1`] = `
-<div
-  className="bdl-MultiSelectMetadataField"
->
-  <Label>
-    <MultiSelectField
-      isEscapedWithReference={true}
-      isScrollable={true}
-      onChange={[Function]}
-      options={[]}
-      placeholder={
-        <FormattedMessage
-          defaultMessage="Select Values"
-          id="boxui.metadataInstanceFields.fieldMultiSelectValue"
-        />
-      }
-      selectedValues={
-        [
-          "value",
-        ]
-      }
-    />
-  </Label>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/MultiSelectMetadataField should correctly render with description 1`] = `
-<div
-  className="bdl-MultiSelectMetadataField"
->
-  <Label>
-    <i
-      className="bdl-MultiSelectMetadataField-desc"
-    >
-      description
-    </i>
-    <MultiSelectField
-      isEscapedWithReference={true}
-      isScrollable={true}
-      onChange={[Function]}
-      options={[]}
-      placeholder={
-        <FormattedMessage
-          defaultMessage="Select Values"
-          id="boxui.metadataInstanceFields.fieldMultiSelectValue"
-        />
-      }
-      selectedValues={
-        [
-          "value",
-        ]
-      }
-    />
-  </Label>
-</div>
-`;

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

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`features/metadata-instance-editor/fields/TextMetadataField should correctly render a number field 1`] = `
-<TextInput
-  className="bdl-TextMetadataField"
-  hideOptionalLabel={true}
-  onChange={[Function]}
-  type="number"
-  value="value"
-/>
-`;
-
-exports[`features/metadata-instance-editor/fields/TextMetadataField should correctly render a text field 1`] = `
-<TextInput
-  className="bdl-TextMetadataField"
-  hideOptionalLabel={true}
-  onChange={[Function]}
-  type="text"
-  value="value"
-/>
-`;
-
-exports[`features/metadata-instance-editor/fields/TextMetadataField should correctly render a zero in a number field 1`] = `
-<TextInput
-  className="bdl-TextMetadataField"
-  hideOptionalLabel={true}
-  onChange={[Function]}
-  type="number"
-  value={0}
-/>
-`;