diff --git a/CHANGELOG_v6.md b/CHANGELOG_v6.md index 5fbe89705c..844368cd37 100644 --- a/CHANGELOG_v6.md +++ b/CHANGELOG_v6.md @@ -25,6 +25,7 @@ should change the heading of the (upcoming) version to include a major version b - BREAKING CHANGE: Removed support for version 4 of `antd` - Updated `ArrayFieldItemTemplate` to replace `Button.Group` with `Space.Compact` since `Button.Group` is deprecated in `antd` version 5 - Upgraded to `@ant-design/icon@5` +- BREAKING CHANGE: Removed the addition of `Bootstrap 3` classes from the `SchemaField` and added `rjsf-` prefix to marker classes, thereby changing theme `FieldTemplate` className prop output and associated snapshots ## @rjsf/chakra-ui @@ -33,6 +34,7 @@ should change the heading of the (upcoming) version to include a major version b - BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes - Implemented the `GridTemplate` component, adding it to the `templates` for the theme +- BREAKING CHANGE: Removed the addition of `Bootstrap 3` classes from the `SchemaField` and added `rjsf-` prefix to marker classes, thereby changing theme `FieldTemplate` className prop output and associated snapshots ## @rjsf/core @@ -43,6 +45,9 @@ should change the heading of the (upcoming) version to include a major version b - Implemented the `GridTemplate` component, adding it to the `templates` for the theme - Implemented the new `LayoutGridField`, `LayoutMultiSchemaField` and `LayoutHeaderField` fields, adding them to the `fields` list - BREAKING CHANGE: Removed support for the deprecated `schema.enumNames` and `uiSchema.classNames` as well as the deprecated `acceptcharset` prop on `Form` +- BREAKING CHANGE: Moved the addition of `Bootstrap 3` classes from the `SchemaField` to the `WrapIfAdditionalTemplate`, thereby affecting all the other themes, fixing [#2280](https://github.com/rjsf-team/react-jsonschema-form/issues/2280) +- BREAKING CHANGE: Added `rjsf-` prefix onto the following marker classes used in the fields and templates: + - `field`, `field-`, `field-error`, `field-hidden`, `field-array`, `field-array-of-`, `field-array-fixed-items`, `array-item`, `config-error`, `array-item-add`, `array-item-copy`, `array-item-move-down`, `array-item-move-up`, `array-item-remove`, `object-property-expand` ## @rjsf/daisyui @@ -57,6 +62,11 @@ should change the heading of the (upcoming) version to include a major version b - BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes - Implemented the `GridTemplate` component, adding it to the `templates` for the theme +- BREAKING CHANGE: Removed the addition of `Bootstrap 3` classes from the `SchemaField` and added `rjsf-` prefix to marker classes, thereby changing theme `FieldTemplate` className prop output and associated snapshots + +## @rjsf/material-ui + +- BREAKING CHANGE: Deleted this theme in favor of `mui` ## @rjsf/mui @@ -64,12 +74,14 @@ should change the heading of the (upcoming) version to include a major version b - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes - Updated the theme to use `Grid2` instead of the deprecated `Grid` - Implemented the `GridTemplate` component, adding it to the `templates` for the theme +- BREAKING CHANGE: Removed the addition of `Bootstrap 3` classes from the `SchemaField` and added `rjsf-` prefix to marker classes, thereby changing theme `FieldTemplate` className prop output and associated snapshots ## @rjsf/semantic-ui - BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes - Implemented the `GridTemplate` component, adding it to the `templates` for the theme +- BREAKING CHANGE: Removed the addition of `Bootstrap 3` classes from the `SchemaField` and added `rjsf-` prefix to marker classes, thereby changing theme `FieldTemplate` className prop output and associated snapshots ## @rjsf/shadcn @@ -98,6 +110,7 @@ should change the heading of the (upcoming) version to include a major version b - BREAKING CHANGE: Removed the deprecated `getMatchingOption()` and `mergeValidationData()` from the library export and the `SchemaUtilsType` interface - BREAKING CHANGE: Removed the deprecated `toErrorList()` function from the `ValidatorType` interface - BREAKING CHANGE: Removed the deprecated `RJSF_ADDITONAL_PROPERTIES_FLAG` constant +- Updated the `WrapIfAdditionalTemplateProps` to include `hideError` and `rawErrors` in support of moving `Bootstrap 3` marker classes out of `SchemaField` ## @rjsf/validator-ajv6 diff --git a/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx b/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx index 11d75c9952..31fdf7edc4 100644 --- a/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx +++ b/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx @@ -35,7 +35,7 @@ export default function ArrayFieldItemTemplate< const { rowGutter = 24, toolbarAlign = 'top' } = registry.formContext; return ( - + {children} {hasToolbar && ( diff --git a/packages/antd/src/templates/ArrayFieldTemplate/index.tsx b/packages/antd/src/templates/ArrayFieldTemplate/index.tsx index 1ca96c6800..dbd672316b 100644 --- a/packages/antd/src/templates/ArrayFieldTemplate/index.tsx +++ b/packages/antd/src/templates/ArrayFieldTemplate/index.tsx @@ -111,7 +111,7 @@ export default function ArrayFieldTemplate< (idSchema, 'add')} - className='array-item-add' + className='rjsf-array-item-add' disabled={disabled || readonly} onClick={onAddClick} uiSchema={uiSchema} diff --git a/packages/antd/src/templates/FieldTemplate/index.tsx b/packages/antd/src/templates/FieldTemplate/index.tsx index 91805ca820..93445070b7 100644 --- a/packages/antd/src/templates/FieldTemplate/index.tsx +++ b/packages/antd/src/templates/FieldTemplate/index.tsx @@ -62,7 +62,7 @@ export default function FieldTemplate< ); if (hidden) { - return
{children}
; + return
{children}
; } // check to see if there is rawDescription(string) before using description(ReactNode) diff --git a/packages/antd/src/templates/ObjectFieldTemplate/index.tsx b/packages/antd/src/templates/ObjectFieldTemplate/index.tsx index b9561ac081..8dfba72b1d 100644 --- a/packages/antd/src/templates/ObjectFieldTemplate/index.tsx +++ b/packages/antd/src/templates/ObjectFieldTemplate/index.tsx @@ -155,7 +155,7 @@ export default function ObjectFieldTemplate< (idSchema, 'add')} - className='object-property-expand' + className='rjsf-object-property-expand' disabled={disabled || readonly} onClick={onAddClick(schema)} uiSchema={uiSchema} diff --git a/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx b/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx index 19f6ab59cb..1f84b00f8f 100644 --- a/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx +++ b/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx @@ -110,7 +110,7 @@ export default function WrapIfAdditionalTemplate< (id, 'remove')} - className='array-item-remove' + className='rjsf-object-property-remove' disabled={disabled || readonly} onClick={onDropPropertyClick(label)} uiSchema={buttonUiOptions} diff --git a/packages/antd/test/__snapshots__/Array.test.tsx.snap b/packages/antd/test/__snapshots__/Array.test.tsx.snap index db553e6e20..34f2c1e9e7 100644 --- a/packages/antd/test/__snapshots__/Array.test.tsx.snap +++ b/packages/antd/test/__snapshots__/Array.test.tsx.snap @@ -7,7 +7,7 @@ exports[`array fields array 1`] = ` onSubmit={[Function]} >
)} {element.buttonsProps.hasCopy && ( - )} {element.buttonsProps.hasRemove && ( - )} @@ -48,7 +48,7 @@ const ExposedArrayKeyTemplate = function (props) { ))} {props.canAdd && ( -
+
@@ -63,13 +63,13 @@ const CustomOnAddClickTemplate = function (props) {
{props.items && props.items.map((element) => ( -
+
{element.children}
))} {props.canAdd && ( -
+
@@ -213,8 +213,8 @@ describe('ArrayField', () => { it('should warn on missing items descriptor', () => { const { node } = createFormComponent({ schema: { type: 'array' } }); - expect(node.querySelector('.field-array > .unsupported-field').textContent).to.contain( - 'Missing items definition' + expect(node.querySelector('.rjsf-field-array > .unsupported-field').textContent).to.contain( + 'Missing items definition', ); }); @@ -249,7 +249,7 @@ describe('ArrayField', () => { schema, formData: { foo: null }, }); - expect(node.querySelectorAll('.field-string')).to.have.length.of(0); + expect(node.querySelectorAll('.rjsf-field-string')).to.have.length.of(0); }); }); @@ -269,14 +269,14 @@ describe('ArrayField', () => { schema, formData: { foo: null }, }); - expect(node.querySelectorAll('.field-string')).to.have.length.of(0); + expect(node.querySelectorAll('.rjsf-field-string')).to.have.length.of(0); }); it('should contain a field in the list when nested array formData is a single item', () => { const { node } = createFormComponent({ schema, formData: { foo: ['test'] }, }); - expect(node.querySelectorAll('.field-string')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field-string')).to.have.length.of(1); }); }); @@ -408,13 +408,13 @@ describe('ArrayField', () => { it('should contain no field in the list by default', () => { const { node } = createFormComponent({ schema }); - expect(node.querySelectorAll('.field-string')).to.have.length.of(0); + expect(node.querySelectorAll('.rjsf-field-string')).to.have.length.of(0); }); it('should have an add button', () => { const { node } = createFormComponent({ schema }); - expect(node.querySelector('.array-item-add button')).not.eql(null); + expect(node.querySelector('.rjsf-array-item-add button')).not.eql(null); }); it('should not have an add button if addable is false', () => { @@ -423,17 +423,17 @@ describe('ArrayField', () => { uiSchema: { 'ui:options': { addable: false } }, }); - expect(node.querySelector('.array-item-add button')).to.be.null; + expect(node.querySelector('.rjsf-array-item-add button')).to.be.null; }); it('should add a new field when clicking the add button', () => { const { node } = createFormComponent({ schema }); act(() => { - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); }); - expect(node.querySelectorAll('.field-string')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field-string')).to.have.length.of(1); }); it('should assign new keys/ids when clicking the add button', () => { @@ -443,10 +443,10 @@ describe('ArrayField', () => { }); act(() => { - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); }); - expect(node.querySelector('.array-item').hasAttribute(ArrayKeyDataAttr)).to.be.true; + expect(node.querySelector('.rjsf-array-item').hasAttribute(ArrayKeyDataAttr)).to.be.true; }); it('should add a field when clicking add button even if event is not passed to onAddClick', () => { @@ -456,10 +456,10 @@ describe('ArrayField', () => { }); act(() => { - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); }); - expect(node.querySelector('.array-item')).not.to.be.null; + expect(node.querySelector('.rjsf-array-item')).not.to.be.null; }); it('should not provide an add button if length equals maxItems', () => { @@ -468,7 +468,7 @@ describe('ArrayField', () => { formData: ['foo', 'bar'], }); - expect(node.querySelector('.array-item-add button')).to.be.null; + expect(node.querySelector('.rjsf-array-item-add button')).to.be.null; }); it('should provide an add button if length is lesser than maxItems', () => { @@ -477,7 +477,7 @@ describe('ArrayField', () => { formData: ['foo'], }); - expect(node.querySelector('.array-item-add button')).not.eql(null); + expect(node.querySelector('.rjsf-array-item-add button')).not.eql(null); }); it('should retain existing row keys/ids when adding new row', () => { @@ -487,15 +487,15 @@ describe('ArrayField', () => { templates: { ArrayFieldTemplate: ExposedArrayKeyTemplate }, }); - const startRows = node.querySelectorAll('.array-item'); + const startRows = node.querySelectorAll('.rjsf-array-item'); const startRow1_key = startRows[0].getAttribute(ArrayKeyDataAttr); const startRow2_key = startRows[1] ? startRows[1].getAttribute(ArrayKeyDataAttr) : undefined; act(() => { - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); }); - const endRows = node.querySelectorAll('.array-item'); + const endRows = node.querySelectorAll('.rjsf-array-item'); const endRow1_key = endRows[0].getAttribute(ArrayKeyDataAttr); const endRow2_key = endRows[1].getAttribute(ArrayKeyDataAttr); @@ -513,7 +513,7 @@ describe('ArrayField', () => { const addBeforeButton = ( + , ); } return ( -
+
{props.children} {buttons}
@@ -778,7 +778,7 @@ describe('ArrayField', () => { templates: { ArrayFieldTemplate: moveAnywhereArrayFieldTemplate }, }); - const startRows = node.querySelectorAll('.array-item'); + const startRows = node.querySelectorAll('.rjsf-array-item'); const startRow1_key = startRows[0].getAttribute(ArrayKeyDataAttr); const startRow2_key = startRows[1].getAttribute(ArrayKeyDataAttr); const startRow3_key = startRows[2].getAttribute(ArrayKeyDataAttr); @@ -788,12 +788,12 @@ describe('ArrayField', () => { fireEvent.click(button); }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); expect(inputs[0].value).eql('bar'); expect(inputs[1].value).eql('baz'); expect(inputs[2].value).eql('foo'); - const endRows = node.querySelectorAll('.array-item'); + const endRows = node.querySelectorAll('.rjsf-array-item'); const endRow1_key = endRows[0].getAttribute(ArrayKeyDataAttr); const endRow2_key = endRows[1].getAttribute(ArrayKeyDataAttr); const endRow3_key = endRows[2].getAttribute(ArrayKeyDataAttr); @@ -812,8 +812,8 @@ describe('ArrayField', () => { schema, formData: ['foo', 'bar'], }); - const moveUpBtns = node.querySelectorAll('.array-item-move-up'); - const moveDownBtns = node.querySelectorAll('.array-item-move-down'); + const moveUpBtns = node.querySelectorAll('.rjsf-array-item-move-up'); + const moveDownBtns = node.querySelectorAll('.rjsf-array-item-move-down'); expect(moveUpBtns[0].disabled).eql(true); expect(moveDownBtns[0].disabled).eql(false); @@ -827,8 +827,8 @@ describe('ArrayField', () => { formData: ['foo', 'bar'], uiSchema: { 'ui:globalOptions': { orderable: false } }, }); - const moveUpBtns = node.querySelector('.array-item-move-up'); - const moveDownBtns = node.querySelector('.array-item-move-down'); + const moveUpBtns = node.querySelector('.rjsf-array-item-move-up'); + const moveDownBtns = node.querySelector('.rjsf-array-item-move-down'); expect(moveUpBtns).to.be.null; expect(moveDownBtns).to.be.null; @@ -840,8 +840,8 @@ describe('ArrayField', () => { formData: ['foo', 'bar'], uiSchema: { 'ui:options': { orderable: false } }, }); - const moveUpBtns = node.querySelector('.array-item-move-up'); - const moveDownBtns = node.querySelector('.array-item-move-down'); + const moveUpBtns = node.querySelector('.rjsf-array-item-move-up'); + const moveDownBtns = node.querySelector('.rjsf-array-item-move-down'); expect(moveUpBtns).to.be.null; expect(moveDownBtns).to.be.null; @@ -853,8 +853,8 @@ describe('ArrayField', () => { formData: ['foo', 'bar'], uiSchema: { 'ui:orderable': false }, }); - const moveUpBtns = node.querySelector('.array-item-move-up'); - const moveDownBtns = node.querySelector('.array-item-move-down'); + const moveUpBtns = node.querySelector('.rjsf-array-item-move-up'); + const moveDownBtns = node.querySelector('.rjsf-array-item-move-down'); expect(moveUpBtns).to.be.null; expect(moveDownBtns).to.be.null; @@ -865,13 +865,13 @@ describe('ArrayField', () => { schema, formData: ['foo', 'bar'], }); - const dropBtns = node.querySelectorAll('.array-item-remove'); + const dropBtns = node.querySelectorAll('.rjsf-array-item-remove'); act(() => { fireEvent.click(dropBtns[0]); }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); expect(inputs).to.have.length.of(1); expect(inputs[0].value).eql('bar'); }); @@ -881,13 +881,13 @@ describe('ArrayField', () => { schema, formData: ['foo', 'bar', 'baz'], }); - const deleteBtns = node.querySelectorAll('.array-item-remove'); + const deleteBtns = node.querySelectorAll('.rjsf-array-item-remove'); act(() => { fireEvent.click(deleteBtns[0]); }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'fuzz' } }); @@ -905,15 +905,15 @@ describe('ArrayField', () => { templates: { ArrayFieldTemplate: ExposedArrayKeyTemplate }, }); - const startRows = node.querySelectorAll('.array-item'); + const startRows = node.querySelectorAll('.rjsf-array-item'); const startRow2_key = startRows[1].getAttribute(ArrayKeyDataAttr); - const dropBtns = node.querySelectorAll('.array-item-remove'); + const dropBtns = node.querySelectorAll('.rjsf-array-item-remove'); act(() => { fireEvent.click(dropBtns[0]); }); - const endRows = node.querySelectorAll('.array-item'); + const endRows = node.querySelectorAll('.rjsf-array-item'); const endRow1_key = endRows[0].getAttribute(ArrayKeyDataAttr); expect(startRow2_key).to.equal(endRow1_key); @@ -926,7 +926,7 @@ describe('ArrayField', () => { formData: ['foo', 'bar'], uiSchema: { 'ui:globalOptions': { removable: false } }, }); - const dropBtn = node.querySelector('.array-item-remove'); + const dropBtn = node.querySelector('.rjsf-array-item-remove'); expect(dropBtn).to.be.null; }); @@ -937,7 +937,7 @@ describe('ArrayField', () => { formData: ['foo', 'bar'], uiSchema: { 'ui:options': { removable: false } }, }); - const dropBtn = node.querySelector('.array-item-remove'); + const dropBtn = node.querySelector('.rjsf-array-item-remove'); expect(dropBtn).to.be.null; }); @@ -948,7 +948,7 @@ describe('ArrayField', () => { formData: ['foo', 'bar'], uiSchema: { 'ui:removable': false }, }); - const dropBtn = node.querySelector('.array-item-remove'); + const dropBtn = node.querySelector('.rjsf-array-item-remove'); expect(dropBtn).to.be.null; }); @@ -967,13 +967,13 @@ describe('ArrayField', () => { act(() => { fireEvent.submit(node); }); - } catch (e) { + } catch { // Silencing error thrown as failure is expected here } expect(node.querySelectorAll('.has-error .error-detail')).to.have.length.of(1); - const dropBtns = node.querySelectorAll('.array-item-remove'); + const dropBtns = node.querySelectorAll('.rjsf-array-item-remove'); act(() => { fireEvent.click(dropBtns[0]); @@ -987,7 +987,7 @@ describe('ArrayField', () => { schema, formData: ['foo', 'bar'], }); - const dropBtn = node.querySelector('.array-item-copy'); + const dropBtn = node.querySelector('.rjsf-array-item-copy'); expect(dropBtn).to.be.null; }); @@ -998,7 +998,7 @@ describe('ArrayField', () => { formData: ['foo', 'bar'], uiSchema: { 'ui:globalOptions': { copyable: true } }, }); - const dropBtn = node.querySelector('.array-item-copy'); + const dropBtn = node.querySelector('.rjsf-array-item-copy'); expect(dropBtn).not.to.be.null; }); @@ -1009,7 +1009,7 @@ describe('ArrayField', () => { formData: ['foo', 'bar'], uiSchema: { 'ui:options': { copyable: true } }, }); - const dropBtn = node.querySelector('.array-item-copy'); + const dropBtn = node.querySelector('.rjsf-array-item-copy'); expect(dropBtn).not.to.be.null; }); @@ -1020,7 +1020,7 @@ describe('ArrayField', () => { formData: ['foo', 'bar'], uiSchema: { 'ui:copyable': true }, }); - const dropBtn = node.querySelector('.array-item-copy'); + const dropBtn = node.querySelector('.rjsf-array-item-copy'); expect(dropBtn).not.to.be.null; }); @@ -1031,13 +1031,13 @@ describe('ArrayField', () => { formData: ['foo', 'bar'], uiSchema: { 'ui:copyable': true }, }); - const copyBtns = node.querySelectorAll('.array-item-copy'); + const copyBtns = node.querySelectorAll('.rjsf-array-item-copy'); act(() => { fireEvent.click(copyBtns[0]); }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); expect(inputs).to.have.length.of(3); expect(inputs[0].value).eql('foo'); expect(inputs[1].value).eql('foo'); @@ -1078,7 +1078,7 @@ describe('ArrayField', () => { ], formData: [1, null, 3], }, - 'root_1' + 'root_1', ); submitForm(node); @@ -1349,13 +1349,13 @@ describe('ArrayField', () => { it('should render a select widget with a label', () => { const { node } = createFormComponent({ schema }); - expect(node.querySelector('.field label').textContent).eql('My field'); + expect(node.querySelector('.rjsf-field label').textContent).eql('My field'); }); it('should render a select widget with multiple attribute', () => { const { node } = createFormComponent({ schema }); - expect(node.querySelector('.field select').getAttribute('multiple')).not.to.be.null; + expect(node.querySelector('.rjsf-field select').getAttribute('multiple')).not.to.be.null; }); it('should render options', () => { @@ -1368,7 +1368,7 @@ describe('ArrayField', () => { const { node, onChange } = createFormComponent({ schema }); act(() => { - Simulate.change(node.querySelector('.field select'), { + Simulate.change(node.querySelector('.rjsf-field select'), { target: { options: [ { selected: true, value: 0 }, // use index @@ -1384,7 +1384,7 @@ describe('ArrayField', () => { { formData: ['foo', 'bar'], }, - 'root' + 'root', ); }); @@ -1392,7 +1392,7 @@ describe('ArrayField', () => { const onBlur = sandbox.spy(); const { node } = createFormComponent({ schema, onBlur }); - const select = node.querySelector('.field select'); + const select = node.querySelector('.rjsf-field select'); Simulate.blur(select, { target: { options: [ @@ -1410,7 +1410,7 @@ describe('ArrayField', () => { const onFocus = sandbox.spy(); const { node } = createFormComponent({ schema, onFocus }); - const select = node.querySelector('.field select'); + const select = node.querySelector('.rjsf-field select'); Simulate.focus(select, { target: { options: [ @@ -1430,7 +1430,7 @@ describe('ArrayField', () => { formData: ['foo', 'bar'], }); - const options = node.querySelectorAll('.field select option'); + const options = node.querySelectorAll('.rjsf-field select option'); expect(options).to.have.length.of(3); expect(options[0].selected).eql(true); // foo expect(options[1].selected).eql(true); // bar @@ -1520,7 +1520,7 @@ describe('ArrayField', () => { { formData: ['foo', 'fuzz'], }, - 'root' + 'root', ); }); @@ -1543,7 +1543,7 @@ describe('ArrayField', () => { { formData: ['foo', 'fuzz'], }, - 'root' + 'root', ); labels = [].map.call(node.querySelectorAll('[type=checkbox]'), (node) => node.checked); expect(labels).eql([true, false, true]); @@ -1649,13 +1649,13 @@ describe('ArrayField', () => { it('should render a select widget with a label', () => { const { node } = createFormComponent({ schema }); - expect(node.querySelector('.field label').textContent).eql('My field'); + expect(node.querySelector('.rjsf-field label').textContent).eql('My field'); }); it('should render a file widget with multiple attribute', () => { const { node } = createFormComponent({ schema }); - expect(node.querySelector('.field [type=file]').getAttribute('multiple')).not.to.be.null; + expect(node.querySelector('.rjsf-field [type=file]').getAttribute('multiple')).not.to.be.null; }); it('should handle a two change events that results in two items in the list', async () => { @@ -1670,7 +1670,7 @@ describe('ArrayField', () => { const { node, onChange } = createFormComponent({ schema }); act(() => { - fireEvent.change(node.querySelector('.field input[type=file]'), { + fireEvent.change(node.querySelector('.rjsf-field input[type=file]'), { target: { files: [{ name: 'file1.txt', size: 1, type: 'type' }], }, @@ -1686,11 +1686,11 @@ describe('ArrayField', () => { { formData: ['data:text/plain;name=file1.txt;base64,x='], }, - 'root' + 'root', ); act(() => { - fireEvent.change(node.querySelector('.field input[type=file]'), { + fireEvent.change(node.querySelector('.rjsf-field input[type=file]'), { target: { files: [{ name: 'file2.txt', size: 2, type: 'type' }], }, @@ -1706,7 +1706,7 @@ describe('ArrayField', () => { { formData: ['data:text/plain;name=file1.txt;base64,x=', 'data:text/plain;name=file2.txt;base64,x='], }, - 'root' + 'root', ); }); @@ -1722,7 +1722,7 @@ describe('ArrayField', () => { const { node, onChange } = createFormComponent({ schema }); act(() => { - fireEvent.change(node.querySelector('.field input[type=file]'), { + fireEvent.change(node.querySelector('.rjsf-field input[type=file]'), { target: { files: [ { name: 'file1.txt', size: 1, type: 'type' }, @@ -1741,7 +1741,7 @@ describe('ArrayField', () => { { formData: ['data:text/plain;name=file1.txt;base64,x=', 'data:text/plain;name=file2.txt;base64,x='], }, - 'root' + 'root', ); }); @@ -1845,7 +1845,7 @@ describe('ArrayField', () => { expect(node.querySelectorAll('fieldset fieldset')).to.be.empty; act(() => { - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); }); expect(node.querySelectorAll('fieldset fieldset')).to.have.length.of(1); @@ -1940,16 +1940,16 @@ describe('ArrayField', () => { it('should render field widgets', () => { const { node } = createFormComponent({ schema }); - const strInput = node.querySelector('fieldset .field-string input[type=text]'); - const numInput = node.querySelector('fieldset .field-number input[type=number]'); + const strInput = node.querySelector('fieldset .rjsf-field-string input[type=text]'); + const numInput = node.querySelector('fieldset .rjsf-field-number input[type=number]'); expect(strInput.id).eql('root_0'); expect(numInput.id).eql('root_1'); }); it('should mark non-null item widgets as required', () => { const { node } = createFormComponent({ schema }); - const strInput = node.querySelector('fieldset .field-string input[type=text]'); - const numInput = node.querySelector('fieldset .field-number input[type=number]'); + const strInput = node.querySelector('fieldset .rjsf-field-string input[type=text]'); + const numInput = node.querySelector('fieldset .rjsf-field-number input[type=number]'); expect(strInput.required).eql(true); expect(numInput.required).eql(true); }); @@ -1959,16 +1959,16 @@ describe('ArrayField', () => { schema, formData: ['foo', 42], }); - const strInput = node.querySelector('fieldset .field-string input[type=text]'); - const numInput = node.querySelector('fieldset .field-number input[type=number]'); + const strInput = node.querySelector('fieldset .rjsf-field-string input[type=text]'); + const numInput = node.querySelector('fieldset .rjsf-field-number input[type=number]'); expect(strInput.value).eql('foo'); expect(numInput.value).eql('42'); }); it('should handle change events', () => { const { node, onChange } = createFormComponent({ schema }); - const strInput = node.querySelector('fieldset .field-string input[type=text]'); - const numInput = node.querySelector('fieldset .field-number input[type=number]'); + const strInput = node.querySelector('fieldset .rjsf-field-string input[type=text]'); + const numInput = node.querySelector('fieldset .rjsf-field-number input[type=number]'); act(() => { fireEvent.change(strInput, { target: { value: 'bar' } }); @@ -1983,7 +1983,7 @@ describe('ArrayField', () => { { formData: ['bar', 101], }, - 'root' + 'root', ); }); @@ -1992,7 +1992,7 @@ describe('ArrayField', () => { schema: schemaAdditional, formData: [1, 2, 'bar'], }); - const addInput = node.querySelector('fieldset .field-string input[type=text]'); + const addInput = node.querySelector('fieldset .rjsf-field-string input[type=text]'); expect(addInput.id).eql('root_2'); expect(addInput.value).eql('bar'); }); @@ -2007,18 +2007,18 @@ describe('ArrayField', () => { }, formData: [1, 2, 'bar'], }); - const label = node.querySelector('fieldset .field-string label.control-label'); + const label = node.querySelector('fieldset .rjsf-field-string label.control-label'); expect(label.textContent).eql('Custom title*'); }); it('should have an add button if additionalItems is an object', () => { const { node } = createFormComponent({ schema: schemaAdditional }); - expect(node.querySelector('.array-item-add button')).not.to.be.null; + expect(node.querySelector('.rjsf-array-item-add button')).not.to.be.null; }); it('should not have an add button if additionalItems is not set', () => { const { node } = createFormComponent({ schema }); - expect(node.querySelector('.array-item-add button')).to.be.null; + expect(node.querySelector('.rjsf-array-item-add button')).to.be.null; }); it('should not have an add button if global addable is false', () => { @@ -2026,7 +2026,7 @@ describe('ArrayField', () => { schema, uiSchema: { 'ui:globalOptions': { addable: false } }, }); - expect(node.querySelector('.array-item-add button')).to.be.null; + expect(node.querySelector('.rjsf-array-item-add button')).to.be.null; }); it('should not have an add button if addable is false', () => { @@ -2034,7 +2034,7 @@ describe('ArrayField', () => { schema, uiSchema: { 'ui:options': { addable: false } }, }); - expect(node.querySelector('.array-item-add button')).to.be.null; + expect(node.querySelector('.rjsf-array-item-add button')).to.be.null; }); it('[fixed-noadditional] should not provide an add button regardless maxItems', () => { @@ -2042,7 +2042,7 @@ describe('ArrayField', () => { schema: { maxItems: 3, ...schema }, }); - expect(node.querySelector('.array-item-add button')).to.be.null; + expect(node.querySelector('.rjsf-array-item-add button')).to.be.null; }); it('[fixed] should not provide an add button if length equals maxItems', () => { @@ -2050,7 +2050,7 @@ describe('ArrayField', () => { schema: { maxItems: 2, ...schemaAdditional }, }); - expect(node.querySelector('.array-item-add button')).to.be.null; + expect(node.querySelector('.rjsf-array-item-add button')).to.be.null; }); it('[fixed] should provide an add button if length is lesser than maxItems', () => { @@ -2058,7 +2058,7 @@ describe('ArrayField', () => { schema: { maxItems: 3, ...schemaAdditional }, }); - expect(node.querySelector('.array-item-add button')).not.to.be.null; + expect(node.querySelector('.rjsf-array-item-add button')).not.to.be.null; }); it('[fixed] should not provide an add button if addable is expliclty false regardless maxItems value', () => { @@ -2071,7 +2071,7 @@ describe('ArrayField', () => { }, }); - expect(node.querySelector('.array-item-add button')).to.be.null; + expect(node.querySelector('.rjsf-array-item-add button')).to.be.null; }); it('[fixed] should ignore addable value if maxItems constraint is not satisfied', () => { @@ -2084,7 +2084,7 @@ describe('ArrayField', () => { }, }); - expect(node.querySelector('.array-item-add button')).to.be.null; + expect(node.querySelector('.rjsf-array-item-add button')).to.be.null; }); it('[fixed] should pass uiSchema to fixed array', () => { @@ -2141,20 +2141,20 @@ describe('ArrayField', () => { templates: { ArrayFieldTemplate: ExposedArrayKeyTemplate }, }); - const addBtn = node.querySelector('.array-item-add button'); + const addBtn = node.querySelector('.rjsf-array-item-add button'); act(() => { fireEvent.click(addBtn); }); - expect(node.querySelectorAll('.field-string')).to.have.length.of(2); + expect(node.querySelectorAll('.rjsf-field-string')).to.have.length.of(2); sinon.assert.calledWithMatch( onChange.lastCall, { formData: [1, 2, 'foo', undefined], }, - 'root' + 'root', ); }); @@ -2165,19 +2165,19 @@ describe('ArrayField', () => { templates: { ArrayFieldTemplate: ExposedArrayKeyTemplate }, }); - const startRows = node.querySelectorAll('.array-item'); + const startRows = node.querySelectorAll('.rjsf-array-item'); const startRow1_key = startRows[0].getAttribute(ArrayKeyDataAttr); const startRow2_key = startRows[1].getAttribute(ArrayKeyDataAttr); const startRow3_key = startRows[2].getAttribute(ArrayKeyDataAttr); const startRow4_key = startRows[3] ? startRows[3].getAttribute(ArrayKeyDataAttr) : undefined; - const addBtn = node.querySelector('.array-item-add button'); + const addBtn = node.querySelector('.rjsf-array-item-add button'); act(() => { fireEvent.click(addBtn); }); - const endRows = node.querySelectorAll('.array-item'); + const endRows = node.querySelectorAll('.rjsf-array-item'); const endRow1_key = endRows[0].getAttribute(ArrayKeyDataAttr); const endRow2_key = endRows[1].getAttribute(ArrayKeyDataAttr); const endRow3_key = endRows[2].getAttribute(ArrayKeyDataAttr); @@ -2202,13 +2202,13 @@ describe('ArrayField', () => { templates: { ArrayFieldTemplate: ExposedArrayKeyTemplate }, }); - const addBtn = node.querySelector('.array-item-add button'); + const addBtn = node.querySelector('.rjsf-array-item-add button'); act(() => { fireEvent.click(addBtn); }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'bar' } }); @@ -2223,7 +2223,7 @@ describe('ArrayField', () => { { formData: [1, 2, 'bar', 'baz'], }, - 'root' + 'root', ); }); @@ -2234,20 +2234,20 @@ describe('ArrayField', () => { templates: { ArrayFieldTemplate: ExposedArrayKeyTemplate }, }); - const addBtn = node.querySelector('.array-item-add button'); + const addBtn = node.querySelector('.rjsf-array-item-add button'); act(() => { fireEvent.click(addBtn); }); - let dropBtns = node.querySelectorAll('.array-item-remove'); + let dropBtns = node.querySelectorAll('.rjsf-array-item-remove'); act(() => { fireEvent.click(dropBtns[0]); }); - expect(node.querySelectorAll('.field-string')).to.have.length.of(1); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + expect(node.querySelectorAll('.rjsf-field-string')).to.have.length.of(1); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'baz' } }); }); @@ -2257,21 +2257,21 @@ describe('ArrayField', () => { { formData: [1, 2, 'baz'], }, - 'root' + 'root', ); - dropBtns = node.querySelectorAll('.array-item-remove'); + dropBtns = node.querySelectorAll('.rjsf-array-item-remove'); act(() => { fireEvent.click(dropBtns[0]); }); - expect(node.querySelectorAll('.field-string')).to.be.empty; + expect(node.querySelectorAll('.rjsf-field-string')).to.be.empty; sinon.assert.calledWithMatch( onChange.lastCall, { formData: [1, 2], }, - 'root' + 'root', ); }); }); @@ -2292,7 +2292,7 @@ describe('ArrayField', () => { const { node, onChange } = createFormComponent({ schema }); act(() => { - Simulate.change(node.querySelector('.field select'), { + Simulate.change(node.querySelector('.rjsf-field select'), { target: { options: [ { selected: true, value: '0' }, // use index @@ -2308,7 +2308,7 @@ describe('ArrayField', () => { { formData: [1, 2], }, - 'root' + 'root', ); }); }); @@ -2611,7 +2611,7 @@ describe('ArrayField', () => { }); act(() => { - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); }); expect(node.querySelector('#title-Array-1')).to.not.be.null; @@ -2637,7 +2637,7 @@ describe('ArrayField', () => { }); act(() => { - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); }); expect(node.querySelector('#title-Boolean')).to.not.be.null; @@ -2663,11 +2663,11 @@ describe('ArrayField', () => { }); act(() => { - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); }); expect(node.querySelector('label[for="root_0"]').textContent).to.contain('Array-1'); - } + }, ); it.each(widgetTestData)( @@ -2692,14 +2692,14 @@ describe('ArrayField', () => { }); act(() => { - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); }); const widgetLabelTextContent = node.querySelector('label[for="root_0"]').textContent; expect(widgetLabelTextContent).not.to.contain('Array-1'); expect(widgetLabelTextContent).to.contain('Item Title'); - } + }, ); }); @@ -2794,11 +2794,11 @@ describe('ArrayField', () => { }); act(() => { - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); }); expect(node.querySelector('legend#root_0__title').textContent).to.contain('Array-1'); - } + }, ); it.each(fieldTestDataWithLegend)( @@ -2818,14 +2818,14 @@ describe('ArrayField', () => { }); act(() => { - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); }); const legendTextContent = node.querySelector('legend#root_0__title').textContent; expect(legendTextContent).to.contain('Item Field Title'); expect(legendTextContent).not.to.contain('Array-1'); - } + }, ); it.each(fieldTestDataWithLabel)( @@ -2842,11 +2842,11 @@ describe('ArrayField', () => { }); act(() => { - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); }); expect(node.querySelector('label[for="root_0"]').textContent).to.contain('Array-1'); - } + }, ); it.each(fieldTestDataWithLabel)( @@ -2866,14 +2866,14 @@ describe('ArrayField', () => { }); act(() => { - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); }); const labelTextContent = node.querySelector('label[for="root_0"]').textContent; expect(labelTextContent).to.contain('Item Field Title'); expect(labelTextContent).to.not.contain('Array-1'); - } + }, ); }); }); @@ -2949,7 +2949,7 @@ describe('ArrayField', () => { fireEvent.submit(node); }); - const inputs = node.querySelectorAll('.form-group.field-error input[type=text]'); + const inputs = node.querySelectorAll('.form-group.rjsf-field-error input[type=text]'); expect(inputs[0].id).eql('root_foo_0_bar'); expect(inputs[1].id).eql('root_foo_1_bar'); }); @@ -2967,7 +2967,7 @@ describe('ArrayField', () => { }); fireEvent.submit(node); - const inputsNoError = node.querySelectorAll('.form-group.field-error input[type=text]'); + const inputsNoError = node.querySelectorAll('.form-group.rjsf-field-error input[type=text]'); expect(inputsNoError).to.have.length.of(0); }); }); @@ -3300,7 +3300,7 @@ describe('ArrayField', () => { }, }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'test' } }); }); @@ -3325,7 +3325,7 @@ describe('ArrayField', () => { }, }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'Appie' } }); }); @@ -3348,7 +3348,7 @@ describe('ArrayField', () => { }, }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'hello' } }); }); @@ -3373,7 +3373,7 @@ describe('ArrayField', () => { }, }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'test' } }); }); diff --git a/packages/core/test/ArrayFieldTemplate.test.jsx b/packages/core/test/ArrayFieldTemplate.test.jsx index 46e5501afd..82854aff5f 100644 --- a/packages/core/test/ArrayFieldTemplate.test.jsx +++ b/packages/core/test/ArrayFieldTemplate.test.jsx @@ -59,7 +59,7 @@ describe('ArrayFieldTemplate', () => { templates: { ArrayFieldTemplate }, }); - expect(node.querySelectorAll('.field-array .field-content div')).to.have.length.of(3); + expect(node.querySelectorAll('.rjsf-field-array .field-content div')).to.have.length.of(3); }); }); describe('with template configured in ui:ArrayFieldTemplate', () => { @@ -72,7 +72,7 @@ describe('ArrayFieldTemplate', () => { }, }); - expect(node.querySelectorAll('.field-array .field-content div')).to.have.length.of(3); + expect(node.querySelectorAll('.rjsf-field-array .field-content div')).to.have.length.of(3); }); }); describe('with template configured globally being overriden in ui:ArrayFieldTemplate', () => { @@ -87,7 +87,7 @@ describe('ArrayFieldTemplate', () => { templates: { ArrayFieldTemplate: () =>
}, }); - expect(node.querySelectorAll('.field-array .field-content div')).to.have.length.of(3); + expect(node.querySelectorAll('.rjsf-field-array .field-content div')).to.have.length.of(3); }); }); }); @@ -164,7 +164,7 @@ describe('ArrayFieldTemplate', () => { }); it('should render text input for each array item', () => { - expect(node.querySelectorAll('.custom-array-item .field input[type=text]')).to.have.length.of( + expect(node.querySelectorAll('.custom-array-item .rjsf-field input[type=text]')).to.have.length.of( formData.length, ); }); @@ -248,7 +248,7 @@ describe('ArrayFieldTemplate', () => { }); it('should render text input for each array item', () => { - expect(node.querySelectorAll('.custom-array-item .field input[type=text]')).to.have.length.of( + expect(node.querySelectorAll('.custom-array-item .rjsf-field input[type=text]')).to.have.length.of( formData.length, ); }); @@ -283,7 +283,7 @@ describe('ArrayFieldTemplate', () => { formData, templates: { ArrayFieldTemplate }, }); - expect(node.querySelectorAll('.field-array .field-content div')).to.have.length.of(3); + expect(node.querySelectorAll('.rjsf-field-array .field-content div')).to.have.length.of(3); }); }); @@ -312,7 +312,7 @@ describe('ArrayFieldTemplate', () => { {items.map((item, i) => ( value: {formData[i]} ))} -
); }; @@ -321,7 +321,7 @@ describe('ArrayFieldTemplate', () => { formData, templates: { ArrayFieldTemplate }, }); - Simulate.click(node.querySelector('.array-item-add')); + Simulate.click(node.querySelector('.rjsf-array-item-add')); }); }); }); diff --git a/packages/core/test/BooleanField.test.jsx b/packages/core/test/BooleanField.test.jsx index 29ca488c1b..515094ebec 100644 --- a/packages/core/test/BooleanField.test.jsx +++ b/packages/core/test/BooleanField.test.jsx @@ -25,7 +25,7 @@ describe('BooleanField', () => { }, }); - expect(node.querySelectorAll('.field input[type=checkbox]')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field input[type=checkbox]')).to.have.length.of(1); }); it('should render a boolean field with the expected id', () => { @@ -35,7 +35,7 @@ describe('BooleanField', () => { }, }); - expect(node.querySelector('.field input[type=checkbox]').id).eql('root'); + expect(node.querySelector('.rjsf-field input[type=checkbox]').id).eql('root'); }); it('should render a boolean field with a label', () => { @@ -46,7 +46,7 @@ describe('BooleanField', () => { }, }); - expect(node.querySelector('.field label span').textContent).eql('foo'); + expect(node.querySelector('.rjsf-field label span').textContent).eql('foo'); }); describe('HTML5 required attribute', () => { @@ -167,7 +167,7 @@ describe('BooleanField', () => { }, }); - expect(node.querySelectorAll('.field label')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field label')).to.have.length.of(1); }); it('should render a description', () => { @@ -233,7 +233,7 @@ describe('BooleanField', () => { }, }); - expect(node.querySelector('.field input').checked).eql(true); + expect(node.querySelector('.rjsf-field input').checked).eql(true); }); it('formData should default to undefined', () => { @@ -264,7 +264,7 @@ describe('BooleanField', () => { const focusSpys = [sinon.spy(), sinon.spy()]; const inputs = node.querySelectorAll('input[id^=root_bool]'); expect(inputs.length).eql(2); - let errorInputs = node.querySelectorAll('.form-group.field-error input[id^=root_bool]'); + let errorInputs = node.querySelectorAll('.form-group.rjsf-field-error input[id^=root_bool]'); expect(errorInputs).to.have.length.of(0); // Since programmatically triggering focus does not call onFocus, change the focus method to a spy inputs[0].focus = focusSpys[0]; @@ -275,7 +275,7 @@ describe('BooleanField', () => { }); sinon.assert.calledOnce(focusSpys[0]); sinon.assert.notCalled(focusSpys[1]); - errorInputs = node.querySelectorAll('.form-group.field-error input[id^=root_bool]'); + errorInputs = node.querySelectorAll('.form-group.rjsf-field-error input[id^=root_bool]'); expect(errorInputs).to.have.length.of(2); }); @@ -296,7 +296,7 @@ describe('BooleanField', () => { const focusSpys = [sinon.spy(), sinon.spy()]; const inputs = node.querySelectorAll('input[id^=root_bool]'); expect(inputs.length).eql(2); - let errorInputs = node.querySelectorAll('.form-group.field-error input[id^=root_bool]'); + let errorInputs = node.querySelectorAll('.form-group.rjsf-field-error input[id^=root_bool]'); expect(errorInputs).to.have.length.of(0); // Since programmatically triggering focus does not call onFocus, change the focus method to a spy inputs[0].focus = focusSpys[0]; @@ -307,7 +307,7 @@ describe('BooleanField', () => { }); sinon.assert.calledOnce(focusSpys[0]); sinon.assert.notCalled(focusSpys[1]); - errorInputs = node.querySelectorAll('.form-group.field-error input[id^=root_bool]'); + errorInputs = node.querySelectorAll('.form-group.rjsf-field-error input[id^=root_bool]'); expect(errorInputs).to.have.length.of(0); }); @@ -334,7 +334,7 @@ describe('BooleanField', () => { formData: true, }); - expect(node.querySelector('.field input').checked).eql(true); + expect(node.querySelector('.rjsf-field input').checked).eql(true); }); it('should render radio widgets with the expected id', () => { @@ -521,7 +521,7 @@ describe('BooleanField', () => { uiSchema: { 'ui:widget': 'select', 'ui:enumNames': ['Si!', 'No!'] }, }); - const labels = [].map.call(node.querySelectorAll('.field option'), (label) => label.textContent); + const labels = [].map.call(node.querySelectorAll('.rjsf-field option'), (label) => label.textContent); expect(labels).eql(['', 'Si!', 'No!']); }); @@ -694,7 +694,7 @@ describe('BooleanField', () => { }, }); - expect(node.querySelectorAll('.field select')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field select')).to.have.length.of(1); }); it('should infer the value from an enum on change', () => { @@ -706,8 +706,8 @@ describe('BooleanField', () => { onChange: spy, }); - expect(node.querySelectorAll('.field select')).to.have.length.of(1); - const $select = node.querySelector('.field select'); + expect(node.querySelectorAll('.rjsf-field select')).to.have.length.of(1); + const $select = node.querySelector('.rjsf-field select'); expect($select.value).eql(''); act(() => { @@ -728,7 +728,7 @@ describe('BooleanField', () => { }, }); - expect(node.querySelector('.field label').textContent).eql('foo'); + expect(node.querySelector('.rjsf-field label').textContent).eql('foo'); }); it('should assign a default value', () => { diff --git a/packages/core/test/Form.test.jsx b/packages/core/test/Form.test.jsx index ab323c5424..8acc855649 100644 --- a/packages/core/test/Form.test.jsx +++ b/packages/core/test/Form.test.jsx @@ -378,7 +378,7 @@ describeRepeated('Form common', (createFormComponent) => { it('should use the provided template for labels', () => { expect(node.querySelector('.my-template > label').textContent).eql('root object'); - expect(node.querySelector('.my-template .field-string > label').textContent).eql('foo*'); + expect(node.querySelector('.my-template .rjsf-field-string > label').textContent).eql('foo*'); }); it('should pass description as the provided React element', () => { @@ -674,7 +674,7 @@ describeRepeated('Form common', (createFormComponent) => { const { node } = createFormComponent({ schema }); - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); expect(node.querySelector('input[type=text]').value).eql('hello'); }); @@ -741,7 +741,7 @@ describeRepeated('Form common', (createFormComponent) => { expect(node.querySelector('#root_children_0_name')).to.not.exist; - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); expect(node.querySelector('#root_children_0_name')).to.exist; }); @@ -897,7 +897,7 @@ describeRepeated('Form common', (createFormComponent) => { it('should propagate deeply nested defaults to submit handler', () => { const { node, onSubmit } = createFormComponent({ schema }); - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); fireEvent.submit(node); sinon.assert.calledWithMatch(onSubmit.lastCall, { @@ -1772,7 +1772,7 @@ describeRepeated('Form common', (createFormComponent) => { }; const { node, onChange } = createFormComponent({ ref: React.createRef(), schema }); - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); fireEvent.change(node.querySelector('input[type=text]'), { target: { value: 'yo' }, @@ -1797,7 +1797,7 @@ describeRepeated('Form common', (createFormComponent) => { }; const { node, onChange } = createFormComponent({ ref: React.createRef(), schema }); - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); fireEvent.change(node.querySelector('input[type=text]'), { target: { value: 'yo' }, @@ -1850,7 +1850,7 @@ describeRepeated('Form common', (createFormComponent) => { const checkbox = node.querySelector('[type=checkbox]'); fireEvent.click(checkbox); - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); fireEvent.change(node.querySelector('input[type=text]'), { target: { value: 'yo' }, @@ -1899,7 +1899,7 @@ describeRepeated('Form common', (createFormComponent) => { target: { value: 'short' }, }); - expect(node.querySelectorAll('.field-error')).to.have.length.of(0); + expect(node.querySelectorAll('.rjsf-field-error')).to.have.length.of(0); }); it("should clean contextualized errors up when they're fixed", () => { @@ -1926,7 +1926,7 @@ describeRepeated('Form common', (createFormComponent) => { }); fireEvent.submit(node); - expect(node.querySelectorAll('.field-error')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field-error')).to.have.length.of(1); // Fix the second field fireEvent.change(node.querySelectorAll('input[type=text]')[1], { @@ -1937,7 +1937,7 @@ describeRepeated('Form common', (createFormComponent) => { // No error remaining, shouldn't throw. fireEvent.submit(node); - expect(node.querySelectorAll('.field-error')).to.have.length.of(0); + expect(node.querySelectorAll('.rjsf-field-error')).to.have.length.of(0); }); }); @@ -1973,8 +1973,8 @@ describeRepeated('Form common', (createFormComponent) => { target: { value: 'short' }, }); - expect(node.querySelectorAll('.field-error')).to.have.length.of(1); - expect(node.querySelector('.field-string .error-detail').textContent).eql( + expect(node.querySelectorAll('.rjsf-field-error')).to.have.length.of(1); + expect(node.querySelector('.rjsf-field-string .error-detail').textContent).eql( 'must NOT have fewer than 8 characters', ); }); @@ -2217,8 +2217,8 @@ describeRepeated('Form common', (createFormComponent) => { it('should denote the error in the field', () => { const { node } = createFormComponent(formProps); - expect(node.querySelectorAll('.field-error')).to.have.length.of(1); - expect(node.querySelector('.field-string .error-detail').textContent).eql( + expect(node.querySelectorAll('.rjsf-field-error')).to.have.length.of(1); + expect(node.querySelector('.rjsf-field-string .error-detail').textContent).eql( 'must NOT have fewer than 8 characters', ); }); @@ -2261,7 +2261,7 @@ describeRepeated('Form common', (createFormComponent) => { it('should denote the error in the field', () => { const { node } = createFormComponent(formProps); - const liNodes = node.querySelectorAll('.field-string .error-detail li'); + const liNodes = node.querySelectorAll('.rjsf-field-string .error-detail li'); const errors = [].map.call(liNodes, (li) => li.textContent); expect(errors).eql(['must NOT have fewer than 8 characters', 'must match pattern "d+"']); @@ -2312,9 +2312,9 @@ describeRepeated('Form common', (createFormComponent) => { it('should denote the error in the field', () => { const { node } = createFormComponent(formProps); - const errorDetail = node.querySelector('.field-object .field-string .error-detail'); + const errorDetail = node.querySelector('.rjsf-field-object .rjsf-field-string .error-detail'); - expect(node.querySelectorAll('.field-error')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field-error')).to.have.length.of(1); expect(errorDetail.textContent).eql('must NOT have fewer than 8 characters'); }); }); @@ -2352,21 +2352,21 @@ describeRepeated('Form common', (createFormComponent) => { it('should denote the error in the item field in error', () => { const { node } = createFormComponent(formProps); - const fieldNodes = node.querySelectorAll('.field-string'); + const fieldNodes = node.querySelectorAll('.rjsf-field-string'); - const liNodes = fieldNodes[1].querySelectorAll('.field-string .error-detail li'); + const liNodes = fieldNodes[1].querySelectorAll('.rjsf-field-string .error-detail li'); const errors = [].map.call(liNodes, (li) => li.textContent); - expect(fieldNodes[1].classList.contains('field-error')).eql(true); + expect(fieldNodes[1].classList.contains('rjsf-field-error')).eql(true); expect(errors).eql(['must NOT have fewer than 4 characters']); }); it('should not denote errors on non impacted fields', () => { const { node } = createFormComponent(formProps); - const fieldNodes = node.querySelectorAll('.field-string'); + const fieldNodes = node.querySelectorAll('.rjsf-field-string'); - expect(fieldNodes[0].classList.contains('field-error')).eql(false); - expect(fieldNodes[2].classList.contains('field-error')).eql(false); + expect(fieldNodes[0].classList.contains('rjsf-field-error')).eql(false); + expect(fieldNodes[2].classList.contains('rjsf-field-error')).eql(false); }); }); @@ -2422,7 +2422,7 @@ describeRepeated('Form common', (createFormComponent) => { }, }); - const liNodes = node.querySelectorAll('.field-string .error-detail li'); + const liNodes = node.querySelectorAll('.rjsf-field-string .error-detail li'); const errors = [].map.call(liNodes, (li) => li.textContent); expect(errors).eql(['must NOT have fewer than 4 characters']); @@ -2490,7 +2490,7 @@ describeRepeated('Form common', (createFormComponent) => { it('should denote the error in the nested item field in error', () => { const { node } = createFormComponent(formProps); - const fields = node.querySelectorAll('.field-string'); + const fields = node.querySelectorAll('.rjsf-field-string'); const errors = [].map.call(fields, (field) => { const li = field.querySelector('.error-detail li'); return li && li.textContent; @@ -2543,12 +2543,12 @@ describeRepeated('Form common', (createFormComponent) => { it('should denote the error in the array nested item', () => { const { node } = createFormComponent(formProps); - const fieldNodes = node.querySelectorAll('.field-string'); + const fieldNodes = node.querySelectorAll('.rjsf-field-string'); - const liNodes = fieldNodes[1].querySelectorAll('.field-string .error-detail li'); + const liNodes = fieldNodes[1].querySelectorAll('.rjsf-field-string .error-detail li'); const errors = [].map.call(liNodes, (li) => li.textContent); - expect(fieldNodes[1].classList.contains('field-error')).eql(true); + expect(fieldNodes[1].classList.contains('rjsf-field-error')).eql(true); expect(errors).eql(['must NOT have fewer than 4 characters']); }); }); @@ -4363,7 +4363,7 @@ describe('Form omitExtraData and liveOmit', () => { it("doesn't cause a race condition", () => { const { node } = createComponent(Container, { ...props }); - fireEvent.click(node.querySelector('.array-item-add button')); + fireEvent.click(node.querySelector('.rjsf-array-item-add button')); expect(node.querySelector('#root_0')).to.exist; expect(node.querySelector('#root_1').getAttribute('value')).to.eq('test'); diff --git a/packages/core/test/NullField.test.jsx b/packages/core/test/NullField.test.jsx index db2dea0f38..d4eb92ea3b 100644 --- a/packages/core/test/NullField.test.jsx +++ b/packages/core/test/NullField.test.jsx @@ -21,7 +21,7 @@ describe('NullField', () => { }, }); - expect(node.querySelectorAll('.field')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field')).to.have.length.of(1); }); it('should render a null field with a label', () => { @@ -32,7 +32,7 @@ describe('NullField', () => { }, }); - expect(node.querySelector('.field label').textContent).eql('foo'); + expect(node.querySelector('.rjsf-field label').textContent).eql('foo'); }); it('should assign a default value', () => { diff --git a/packages/core/test/NumberField.test.jsx b/packages/core/test/NumberField.test.jsx index 891e190947..f3b28a7c20 100644 --- a/packages/core/test/NumberField.test.jsx +++ b/packages/core/test/NumberField.test.jsx @@ -102,7 +102,7 @@ describe('NumberField', () => { uiSchema, }); - expect(node.querySelector('.field label').textContent).eql('foo'); + expect(node.querySelector('.rjsf-field label').textContent).eql('foo'); }); it('should render a string field with a description', () => { @@ -139,7 +139,7 @@ describe('NumberField', () => { uiSchema, }); - expect(node.querySelector('.field input').value).eql('2'); + expect(node.querySelector('.rjsf-field input').value).eql('2'); }); it('should handle a change event', () => { @@ -161,7 +161,7 @@ describe('NumberField', () => { { formData: 2, }, - 'root' + 'root', ); }); @@ -210,7 +210,7 @@ describe('NumberField', () => { formData: 2, }); - expect(node.querySelector('.field input').value).eql('2'); + expect(node.querySelector('.rjsf-field input').value).eql('2'); }); describe('when inputting a number that ends with a dot and/or zero it should normalize it, without changing the input value', () => { @@ -280,7 +280,7 @@ describe('NumberField', () => { { formData: test.output, }, - 'root' + 'root', ); // "2." is not really a valid number in a input field of type number // so we need to use getAttribute("value") instead since .value outputs the empty string @@ -311,7 +311,7 @@ describe('NumberField', () => { { formData: 0, }, - 'root' + 'root', ); expect($input.value).eql('.00'); }); @@ -402,7 +402,7 @@ describe('NumberField', () => { // "2." is not really a valid number in a input field of type number // so we need to use getAttribute("value") instead since .value outputs the empty string setTimeout(() => { - expect(node.querySelector('.field input').getAttribute('value')).eql('2.'); + expect(node.querySelector('.rjsf-field input').getAttribute('value')).eql('2.'); }); act(() => { @@ -410,21 +410,21 @@ describe('NumberField', () => { target: { value: '2.0' }, }); }); - expect(node.querySelector('.field input').value).eql('2.0'); + expect(node.querySelector('.rjsf-field input').value).eql('2.0'); act(() => { fireEvent.change(node.querySelector('input'), { target: { value: '2.00' }, }); }); - expect(node.querySelector('.field input').value).eql('2.00'); + expect(node.querySelector('.rjsf-field input').value).eql('2.00'); act(() => { fireEvent.change(node.querySelector('input'), { target: { value: '2.000' }, }); }); - expect(node.querySelector('.field input').value).eql('2.000'); + expect(node.querySelector('.rjsf-field input').value).eql('2.000'); }); it('should allow a zero to be input', () => { @@ -440,7 +440,7 @@ describe('NumberField', () => { target: { value: '0' }, }); }); - expect(node.querySelector('.field input').value).eql('0'); + expect(node.querySelector('.rjsf-field input').value).eql('0'); }); it('should render customized StringField', () => { @@ -470,7 +470,7 @@ describe('NumberField', () => { }, }); - expect(node.querySelectorAll('.field select')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field select')).to.have.length.of(1); }); it('should infer the value from an enum on change', () => { @@ -482,12 +482,12 @@ describe('NumberField', () => { onChange: spy, }); - expect(node.querySelectorAll('.field select')).to.have.length.of(1); - const $select = node.querySelector('.field select'); + expect(node.querySelectorAll('.rjsf-field select')).to.have.length.of(1); + const $select = node.querySelector('.rjsf-field select'); expect($select.value).eql(''); act(() => { - fireEvent.change(node.querySelector('.field select'), { + fireEvent.change(node.querySelector('.rjsf-field select'), { target: { value: 0 }, // use index }); }); @@ -505,7 +505,7 @@ describe('NumberField', () => { }, }); - expect(node.querySelector('.field label').textContent).eql('foo'); + expect(node.querySelector('.rjsf-field label').textContent).eql('foo'); }); it('should assign a default value', () => { diff --git a/packages/core/test/ObjectField.test.jsx b/packages/core/test/ObjectField.test.jsx index 5bc7ec8a5d..83d76e4541 100644 --- a/packages/core/test/ObjectField.test.jsx +++ b/packages/core/test/ObjectField.test.jsx @@ -109,26 +109,26 @@ describe('ObjectField', () => { it('should render a default property label', () => { const { node } = createFormComponent({ schema }); - expect(node.querySelector('.field-boolean label').textContent).eql('bar'); + expect(node.querySelector('.rjsf-field-boolean label').textContent).eql('bar'); }); it('should render a string property', () => { const { node } = createFormComponent({ schema }); - expect(node.querySelectorAll('.field input[type=text]')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field input[type=text]')).to.have.length.of(1); }); it('should render a boolean property', () => { const { node } = createFormComponent({ schema }); - expect(node.querySelectorAll('.field input[type=checkbox]')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field input[type=checkbox]')).to.have.length.of(1); }); it('should handle a default object value', () => { const { node } = createFormComponent({ schema }); - expect(node.querySelector('.field input[type=text]').value).eql('hey'); - expect(node.querySelector('.field input[type=checkbox]').checked).eql(true); + expect(node.querySelector('.rjsf-field input[type=text]').value).eql('hey'); + expect(node.querySelector('.rjsf-field input[type=checkbox]').checked).eql(true); }); it('should handle required values', () => { @@ -136,7 +136,7 @@ describe('ObjectField', () => { // Required field is expect(node.querySelector('input[type=text]').getAttribute('required')).eql(''); - expect(node.querySelector('.field-string label').textContent).eql('Foo*'); + expect(node.querySelector('.rjsf-field-string label').textContent).eql('Foo*'); }); it('should fill fields with form data', () => { @@ -148,8 +148,8 @@ describe('ObjectField', () => { }, }); - expect(node.querySelector('.field input[type=text]').value).eql('hey'); - expect(node.querySelector('.field input[type=checkbox]').checked).eql(true); + expect(node.querySelector('.rjsf-field input[type=text]').value).eql('hey'); + expect(node.querySelector('.rjsf-field input[type=checkbox]').checked).eql(true); }); it('should handle object fields change events', () => { @@ -164,7 +164,7 @@ describe('ObjectField', () => { { formData: { foo: 'changed' }, }, - 'root_foo' + 'root_foo', ); }); @@ -273,7 +273,7 @@ describe('ObjectField', () => { errorSchema: {}, errors: [], }, - 'root_checkbox' + 'root_checkbox', ); }); @@ -347,7 +347,7 @@ describe('ObjectField', () => { }, }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'hello' } }); }); @@ -366,7 +366,7 @@ describe('ObjectField', () => { }, }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'test' } }); }); @@ -383,7 +383,7 @@ describe('ObjectField', () => { }, }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'hello' } }); }); @@ -402,7 +402,7 @@ describe('ObjectField', () => { }, }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'test' } }); }); @@ -430,7 +430,7 @@ describe('ObjectField', () => { 'ui:order': ['baz', 'qux', 'bar', 'foo'], }, }); - const labels = [].map.call(node.querySelectorAll('.field > label'), (l) => l.textContent); + const labels = [].map.call(node.querySelectorAll('.rjsf-field > label'), (l) => l.textContent); expect(labels).eql(['baz', 'qux', 'bar', 'foo']); }); @@ -442,7 +442,7 @@ describe('ObjectField', () => { 'ui:order': ['baz', '*', 'foo'], }, }); - const labels = [].map.call(node.querySelectorAll('.field > label'), (l) => l.textContent); + const labels = [].map.call(node.querySelectorAll('.rjsf-field > label'), (l) => l.textContent); expect(labels).eql(['baz', 'bar', 'qux', 'foo']); }); @@ -455,7 +455,7 @@ describe('ObjectField', () => { }, }); - const labels = [].map.call(node.querySelectorAll('.field > label'), (l) => l.textContent); + const labels = [].map.call(node.querySelectorAll('.rjsf-field > label'), (l) => l.textContent); expect(labels).eql(['baz', 'qux', 'bar', 'foo']); }); @@ -468,7 +468,7 @@ describe('ObjectField', () => { }, }); - expect(node.querySelector('.config-error').textContent).to.match(/does not contain properties 'foo', 'qux'/); + expect(node.querySelector('.rjsf-config-error').textContent).to.match(/does not contain properties 'foo', 'qux'/); }); it('should throw when more than one wildcard is present', () => { @@ -479,7 +479,7 @@ describe('ObjectField', () => { }, }); - expect(node.querySelector('.config-error').textContent).to.match(/contains more than one wildcard/); + expect(node.querySelector('.rjsf-config-error').textContent).to.match(/contains more than one wildcard/); }); it('should order referenced schema definitions', () => { @@ -500,7 +500,7 @@ describe('ObjectField', () => { 'ui:order': ['bar', 'foo'], }, }); - const labels = [].map.call(node.querySelectorAll('.field > label'), (l) => l.textContent); + const labels = [].map.call(node.querySelectorAll('.rjsf-field > label'), (l) => l.textContent); expect(labels).eql(['bar', 'foo']); }); @@ -530,7 +530,7 @@ describe('ObjectField', () => { }, }, }); - const labels = [].map.call(node.querySelectorAll('.field > label'), (l) => l.textContent); + const labels = [].map.call(node.querySelectorAll('.rjsf-field > label'), (l) => l.textContent); expect(labels).eql(['bar', 'foo']); }); @@ -612,7 +612,7 @@ describe('ObjectField', () => { formData: { first: 1 }, }); - expect(node.querySelectorAll('.field-string')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field-string')).to.have.length.of(1); }); it('uiSchema title should not affect additionalProperties', () => { @@ -730,7 +730,7 @@ describe('ObjectField', () => { }, }); - expect(node.querySelectorAll('.field-string')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field-string')).to.have.length.of(1); }); it('should render a label for the additional property key', () => { @@ -803,7 +803,7 @@ describe('ObjectField', () => { { formData: { newFirst: 1, first: undefined }, }, - 'root' + 'root', ); }); @@ -829,7 +829,7 @@ describe('ObjectField', () => { { formData: { 'Renamed custom title': 1 }, }, - 'root' + 'root', ); const keyInput = node.querySelector('#root_Renamed\\ custom\\ title-key'); @@ -876,7 +876,7 @@ describe('ObjectField', () => { { formData: { first: 1, newSecond: 2, third: 3 }, }, - 'root' + 'root', ); expect(Object.keys(onChange.lastCall.args[0].formData)).eql(['first', 'newSecond', 'third']); @@ -902,7 +902,7 @@ describe('ObjectField', () => { { formData: { second: 2, 'second-1': 1 }, }, - 'root' + 'root', ); }); @@ -929,7 +929,7 @@ describe('ObjectField', () => { { formData: { second: 2, second_1: 1 }, }, - 'root' + 'root', ); }); @@ -958,7 +958,7 @@ describe('ObjectField', () => { { formData: { second: 2, second_1: 1 }, }, - 'root' + 'root', ); }); @@ -1015,7 +1015,7 @@ describe('ObjectField', () => { it('should have an expand button', () => { const { node } = createFormComponent({ schema }); - expect(node.querySelector('.object-property-expand button')).not.eql(null); + expect(node.querySelector('.rjsf-object-property-expand button')).not.eql(null); }); it('should not have an expand button if expandable is false', () => { @@ -1024,13 +1024,13 @@ describe('ObjectField', () => { uiSchema: { 'ui:options': { expandable: false } }, }); - expect(node.querySelector('.object-property-expand button')).to.be.null; + expect(node.querySelector('.rjsf-object-property-expand button')).to.be.null; }); it('should add a new property when clicking the expand button', () => { const { node, onChange } = createFormComponent({ schema }); - fireEvent.click(node.querySelector('.object-property-expand button')); + fireEvent.click(node.querySelector('.rjsf-object-property-expand button')); sinon.assert.calledWithMatch(onChange.lastCall, { formData: { @@ -1045,7 +1045,7 @@ describe('ObjectField', () => { formData: { newKey: 1 }, }); - fireEvent.click(node.querySelector('.object-property-expand button')); + fireEvent.click(node.querySelector('.rjsf-object-property-expand button')); sinon.assert.calledWithMatch(onChange.lastCall, { formData: { 'newKey-1': 'New Value', @@ -1069,7 +1069,7 @@ describe('ObjectField', () => { formData: {}, }); - fireEvent.click(node.querySelector('.object-property-expand button')); + fireEvent.click(node.querySelector('.rjsf-object-property-expand button')); sinon.assert.calledWithMatch(onChange.lastCall, { formData: { @@ -1089,7 +1089,7 @@ describe('ObjectField', () => { formData: {}, }); - fireEvent.click(node.querySelector('.object-property-expand button')); + fireEvent.click(node.querySelector('.rjsf-object-property-expand button')); sinon.assert.calledWithMatch(onChange.lastCall, { formData: { @@ -1111,7 +1111,7 @@ describe('ObjectField', () => { formData: {}, }); - fireEvent.click(node.querySelector('.object-property-expand button')); + fireEvent.click(node.querySelector('.rjsf-object-property-expand button')); sinon.assert.calledWithMatch(onChange.lastCall, { formData: { @@ -1133,7 +1133,7 @@ describe('ObjectField', () => { formData: {}, }); - fireEvent.click(node.querySelector('.object-property-expand button')); + fireEvent.click(node.querySelector('.rjsf-object-property-expand button')); sinon.assert.calledWithMatch(onChange.lastCall, { formData: { @@ -1148,7 +1148,7 @@ describe('ObjectField', () => { formData: { first: 1 }, }); - expect(node.querySelector('.object-property-expand button')).to.be.null; + expect(node.querySelector('.rjsf-object-property-expand button')).to.be.null; }); it('should provide an expand button if length is less than maxProperties', () => { @@ -1157,7 +1157,7 @@ describe('ObjectField', () => { formData: { first: 1 }, }); - expect(node.querySelector('.object-property-expand button')).not.eql(null); + expect(node.querySelector('.rjsf-object-property-expand button')).not.eql(null); }); it('should not provide an expand button if expandable is expliclty false regardless of maxProperties value', () => { @@ -1171,7 +1171,7 @@ describe('ObjectField', () => { }, }); - expect(node.querySelector('.object-property-expand button')).to.be.null; + expect(node.querySelector('.rjsf-object-property-expand button')).to.be.null; }); it('should ignore expandable value if maxProperties constraint is not satisfied', () => { @@ -1185,7 +1185,7 @@ describe('ObjectField', () => { }, }); - expect(node.querySelector('.object-property-expand button')).to.be.null; + expect(node.querySelector('.rjsf-object-property-expand button')).to.be.null; }); it('should not have delete button if expand button has not been clicked', () => { @@ -1201,7 +1201,7 @@ describe('ObjectField', () => { expect(node.querySelector('.form-group > .form-additional > .form-additional + .col-xs-2 .btn-danger')).eql(null); - fireEvent.click(node.querySelector('.object-property-expand button')); + fireEvent.click(node.querySelector('.rjsf-object-property-expand button')); expect(node.querySelector('.form-group > .row > .form-additional + .col-xs-2 > .btn-danger')).to.not.be.null; }); diff --git a/packages/core/test/SchemaField.test.jsx b/packages/core/test/SchemaField.test.jsx index 1a82d3f247..3311fe783d 100644 --- a/packages/core/test/SchemaField.test.jsx +++ b/packages/core/test/SchemaField.test.jsx @@ -130,7 +130,7 @@ describe('SchemaField', () => { fields, }); - expect(node.querySelectorAll('#custom > .field input[type=text]')).to.have.length.of(1); + expect(node.querySelectorAll('#custom > .rjsf-field input[type=text]')).to.have.length.of(1); }); }); diff --git a/packages/core/test/StringField.test.jsx b/packages/core/test/StringField.test.jsx index 3449ab1278..d8afc57140 100644 --- a/packages/core/test/StringField.test.jsx +++ b/packages/core/test/StringField.test.jsx @@ -59,7 +59,7 @@ describe('StringField', () => { }, }); - expect(node.querySelectorAll('.field input[type=text]')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field input[type=text]')).to.have.length.of(1); }); it('should render a string field with a label', () => { @@ -70,7 +70,7 @@ describe('StringField', () => { }, }); - expect(node.querySelector('.field label').textContent).eql('foo'); + expect(node.querySelector('.rjsf-field label').textContent).eql('foo'); }); it('should render a string field with a description', () => { @@ -92,8 +92,8 @@ describe('StringField', () => { }, }); - expect(node.querySelector('.field input').value).eql('plop'); - expect(node.querySelectorAll('.field datalist > option')).to.have.length.of(0); + expect(node.querySelector('.rjsf-field input').value).eql('plop'); + expect(node.querySelectorAll('.rjsf-field datalist > option')).to.have.length.of(0); }); it('should render a string field with examples', () => { @@ -104,9 +104,9 @@ describe('StringField', () => { }, }); - expect(node.querySelectorAll('.field datalist > option')).to.have.length.of(3); - const datalistId = node.querySelector('.field datalist').id; - expect(node.querySelector('.field input').getAttribute('list')).eql(datalistId); + expect(node.querySelectorAll('.rjsf-field datalist > option')).to.have.length.of(3); + const datalistId = node.querySelector('.rjsf-field datalist').id; + expect(node.querySelector('.rjsf-field input').getAttribute('list')).eql(datalistId); }); it('should render a string with examples that includes the default value', () => { @@ -117,9 +117,9 @@ describe('StringField', () => { examples: ['Chrome', 'Vivaldi'], }, }); - expect(node.querySelectorAll('.field datalist > option')).to.have.length.of(3); - const datalistId = node.querySelector('.field datalist').id; - expect(node.querySelector('.field input').getAttribute('list')).eql(datalistId); + expect(node.querySelectorAll('.rjsf-field datalist > option')).to.have.length.of(3); + const datalistId = node.querySelector('.rjsf-field datalist').id; + expect(node.querySelector('.rjsf-field input').getAttribute('list')).eql(datalistId); }); it('should render a string with examples that overlaps with the default value', () => { @@ -130,9 +130,9 @@ describe('StringField', () => { examples: ['Firefox', 'Chrome', 'Vivaldi'], }, }); - expect(node.querySelectorAll('.field datalist > option')).to.have.length.of(3); - const datalistId = node.querySelector('.field datalist').id; - expect(node.querySelector('.field input').getAttribute('list')).eql(datalistId); + expect(node.querySelectorAll('.rjsf-field datalist > option')).to.have.length.of(3); + const datalistId = node.querySelector('.rjsf-field datalist').id; + expect(node.querySelector('.rjsf-field input').getAttribute('list')).eql(datalistId); }); it('should default submit value to undefined', () => { @@ -165,7 +165,7 @@ describe('StringField', () => { { formData: 'yo', }, - 'root' + 'root', ); }); @@ -230,7 +230,7 @@ describe('StringField', () => { { formData: 'default', }, - 'root' + 'root', ); }); @@ -251,7 +251,7 @@ describe('StringField', () => { { formData: undefined, }, - 'root' + 'root', ); }); @@ -263,7 +263,7 @@ describe('StringField', () => { formData: 'plip', }); - expect(node.querySelector('.field input').value).eql('plip'); + expect(node.querySelector('.rjsf-field input').value).eql('plip'); }); it('should render the widget with the expected id', () => { @@ -324,7 +324,7 @@ describe('StringField', () => { }, }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'hello' } }); }); @@ -343,7 +343,7 @@ describe('StringField', () => { }, }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'test' } }); }); @@ -360,7 +360,7 @@ describe('StringField', () => { }, }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'hello' } }); }); @@ -379,7 +379,7 @@ describe('StringField', () => { }, }); - const inputs = node.querySelectorAll('.field-string input[type=text]'); + const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]'); act(() => { fireEvent.change(inputs[0], { target: { value: 'test' } }); }); @@ -398,7 +398,7 @@ describe('StringField', () => { }, }); - expect(node.querySelectorAll('.field select')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field select')).to.have.length.of(1); }); it('should render a string field for an enum without a type', () => { @@ -408,7 +408,7 @@ describe('StringField', () => { }, }); - expect(node.querySelectorAll('.field select')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field select')).to.have.length.of(1); }); it('should render a string field with a label', () => { @@ -420,7 +420,7 @@ describe('StringField', () => { }, }); - expect(node.querySelector('.field label').textContent).eql('foo'); + expect(node.querySelector('.rjsf-field label').textContent).eql('foo'); }); it('should render empty option', () => { @@ -431,7 +431,7 @@ describe('StringField', () => { }, }); - expect(node.querySelectorAll('.field option')[0].value).eql(''); + expect(node.querySelectorAll('.rjsf-field option')[0].value).eql(''); }); it('should render empty option with placeholder text', () => { @@ -447,7 +447,7 @@ describe('StringField', () => { }, }); - expect(node.querySelectorAll('.field option')[0].textContent).eql('Test'); + expect(node.querySelectorAll('.rjsf-field option')[0].textContent).eql('Test'); }); it('should assign a default value', () => { @@ -483,7 +483,7 @@ describe('StringField', () => { { formData: 'foo', }, - 'root' + 'root', ); }); @@ -506,7 +506,7 @@ describe('StringField', () => { { formData: undefined, }, - 'root' + 'root', ); }); @@ -667,7 +667,7 @@ describe('StringField', () => { { formData: undefined, }, - 'root' + 'root', ); }); @@ -692,7 +692,7 @@ describe('StringField', () => { { formData: 'default', }, - 'root' + 'root', ); }); @@ -719,7 +719,7 @@ describe('StringField', () => { }, }); - expect(node.querySelectorAll('.field [type=datetime-local]')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field [type=datetime-local]')).to.have.length.of(1); }); it('should assign a default value', () => { @@ -790,7 +790,7 @@ describe('StringField', () => { }, liveValidate: true, }); - let inputs = node.querySelectorAll('.form-group.field-error input[type=datetime-local]'); + let inputs = node.querySelectorAll('.form-group.rjsf-field-error input[type=datetime-local]'); expect(inputs).to.have.length.of(0); act(() => { Simulate.change(node.querySelector('[type=datetime-local]'), { @@ -810,7 +810,7 @@ describe('StringField', () => { }, ], }); - inputs = node.querySelectorAll('.form-group.field-error input[type=datetime-local]'); + inputs = node.querySelectorAll('.form-group.rjsf-field-error input[type=datetime-local]'); expect(inputs).to.have.length.of(1); }); it('should reject an invalid entered datetime and hides error', () => { @@ -824,7 +824,7 @@ describe('StringField', () => { }, liveValidate: true, }); - let inputs = node.querySelectorAll('.form-group.field-error input[type=datetime-local]'); + let inputs = node.querySelectorAll('.form-group.rjsf-field-error input[type=datetime-local]'); expect(inputs).to.have.length.of(0); act(() => { @@ -845,7 +845,7 @@ describe('StringField', () => { }, ], }); - inputs = node.querySelectorAll('.form-group.field-error input[type=datetime-local]'); + inputs = node.querySelectorAll('.form-group.rjsf-field-error input[type=datetime-local]'); expect(inputs).to.have.length.of(0); }); @@ -890,7 +890,7 @@ describe('StringField', () => { uiSchema, }); - expect(node.querySelectorAll('.field [type=date]')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field [type=date]')).to.have.length.of(1); }); it('should assign a default value', () => { @@ -1052,7 +1052,7 @@ describe('StringField', () => { }, }); - expect(node.querySelectorAll('.field [type=time]')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field [type=time]')).to.have.length.of(1); }); it('should assign a default value', () => { @@ -1186,7 +1186,7 @@ describe('StringField', () => { uiSchema, }); - expect(node.querySelectorAll('.field select')).to.have.length.of(6); + expect(node.querySelectorAll('.rjsf-field select')).to.have.length.of(6); }); it('should render a string field with a main label', () => { @@ -1199,7 +1199,7 @@ describe('StringField', () => { uiSchema, }); - expect(node.querySelector('.field label').textContent).eql('foo'); + expect(node.querySelector('.rjsf-field label').textContent).eql('foo'); }); it('should assign a default value', () => { @@ -1531,7 +1531,7 @@ describe('StringField', () => { uiSchema, }); - expect(node.querySelectorAll('.field select')).to.have.length.of(3); + expect(node.querySelectorAll('.rjsf-field select')).to.have.length.of(3); }); it('should render a string field with a main label', () => { @@ -1544,7 +1544,7 @@ describe('StringField', () => { uiSchema, }); - expect(node.querySelector('.field label').textContent).eql('foo'); + expect(node.querySelector('.rjsf-field label').textContent).eql('foo'); }); it('should assign a default value', () => { @@ -1836,7 +1836,7 @@ describe('StringField', () => { }, }); - expect(node.querySelectorAll('.field [type=email]')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field [type=email]')).to.have.length.of(1); }); it('should render a string field with a label', () => { @@ -1848,7 +1848,7 @@ describe('StringField', () => { }, }); - expect(node.querySelector('.field label').textContent).eql('foo'); + expect(node.querySelector('.rjsf-field label').textContent).eql('foo'); }); it('should render a select field with a description', () => { @@ -1976,7 +1976,7 @@ describe('StringField', () => { }, }); - expect(node.querySelectorAll('.field [type=url]')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field [type=url]')).to.have.length.of(1); }); it('should render a string field with a label', () => { @@ -1988,7 +1988,7 @@ describe('StringField', () => { }, }); - expect(node.querySelector('.field label').textContent).eql('foo'); + expect(node.querySelector('.rjsf-field label').textContent).eql('foo'); }); it('should render a select field with a placeholder', () => { @@ -2120,7 +2120,7 @@ describe('StringField', () => { uiSchema, }); - expect(node.querySelectorAll('.field [type=color]')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field [type=color]')).to.have.length.of(1); }); it('should assign a default value', () => { @@ -2239,7 +2239,7 @@ describe('StringField', () => { }, }); - expect(node.querySelectorAll('.field [type=file]')).to.have.length.of(1); + expect(node.querySelectorAll('.rjsf-field [type=file]')).to.have.length.of(1); }); it('should assign a default value', () => { diff --git a/packages/core/test/__snapshots__/ArraySnap.test.tsx.snap b/packages/core/test/__snapshots__/ArraySnap.test.tsx.snap index 9bab6c942f..818035196e 100644 --- a/packages/core/test/__snapshots__/ArraySnap.test.tsx.snap +++ b/packages/core/test/__snapshots__/ArraySnap.test.tsx.snap @@ -7,10 +7,10 @@ exports[`array fields array 1`] = ` onSubmit={[Function]} >