feat(select-widget): add min/max validation (#3171)

This commit is contained in:
Shawn Erquhart
2020-01-30 17:53:46 -08:00
committed by GitHub
parent 67e5fd2aaf
commit fd9e2c89f2
4 changed files with 148 additions and 3 deletions

View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Map, List, fromJS } from 'immutable';
import { find } from 'lodash';
import { find, isNumber } from 'lodash';
import Select from 'react-select';
import { reactSelectStyles } from 'netlify-cms-ui-default';
@ -55,6 +55,55 @@ export default class SelectControl extends React.Component {
}),
};
isValid = () => {
const { field, value, t } = this.props;
const min = field.get('min');
const max = field.get('max');
if (!field.get('multiple')) {
return { error: false };
}
if ([min, max].every(isNumber)) {
const isValid = value && value.size >= min && value.size <= max;
const messageKey = min === max ? 'rangeCountExact' : 'rangeCount';
if (!isValid) {
return {
error: {
message: t(`editor.editorControlPane.widget.${messageKey}`, {
fieldLabel: field.get('label', field.get('name')),
minValue: min,
maxValue: max,
}),
},
};
}
} else if (isNumber(min)) {
const isValid = value && value.size >= min;
if (!isValid) {
return {
error: {
message: t('editor.editorControlPane.widget.rangeMin', {
fieldLabel: field.get('label', field.get('name')),
minValue: min,
}),
},
};
}
} else if (isNumber(max)) {
const isValid = !value || value.size <= max;
if (!isValid) {
return {
error: {
message: t('editor.editorControlPane.widget.rangeMax', {
fieldLabel: field.get('label', field.get('name')),
maxValue: max,
}),
},
};
}
}
return { error: false };
};
handleChange = selectedOption => {
const { onChange, field } = this.props;
const isMultiple = field.get('multiple', false);

View File

@ -34,7 +34,7 @@ class SelectController extends React.Component {
}
function setup({ field, defaultValue }) {
let renderArgs;
let renderArgs, ref;
const stateChangeSpy = jest.fn();
const setActiveSpy = jest.fn();
const setInactiveSpy = jest.fn();
@ -52,6 +52,8 @@ function setup({ field, defaultValue }) {
classNameWrapper=""
setActiveStyle={setActiveSpy}
setInactiveStyle={setInactiveSpy}
ref={widgetRef => (ref = widgetRef)}
t={jest.fn(msg => msg)}
/>
);
}}
@ -66,6 +68,7 @@ function setup({ field, defaultValue }) {
stateChangeSpy,
setActiveSpy,
setInactiveSpy,
ref,
input,
};
}
@ -207,4 +210,81 @@ describe('Select widget', () => {
expect(getByText('baz')).toBeInTheDocument();
});
});
describe.only('validation', () => {
function validate(setupOpts) {
const { ref } = setup(setupOpts);
const { error } = ref.isValid();
return error?.message;
}
it('should fail with less items than min allows', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 1 }),
};
expect(validate(opts)).toMatchInlineSnapshot(`"editor.editorControlPane.widget.rangeMin"`);
});
it('should fail with more items than max allows', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, max: 1 }),
defaultValue: fromJS([stringOptions[0], stringOptions[1]]),
};
expect(validate(opts)).toMatchInlineSnapshot(`"editor.editorControlPane.widget.rangeMax"`);
});
it('should enforce min when both min and max are set', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 1, max: 2 }),
};
expect(validate(opts)).toMatchInlineSnapshot(`"editor.editorControlPane.widget.rangeCount"`);
});
it('should enforce max when both min and max are set', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 1, max: 2 }),
defaultValue: fromJS([stringOptions[0], stringOptions[1], stringOptions[2]]),
};
expect(validate(opts)).toMatchInlineSnapshot(`"editor.editorControlPane.widget.rangeCount"`);
});
it('should enforce min and max when they are the same value', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 2, max: 2 }),
defaultValue: fromJS([stringOptions[0], stringOptions[1], stringOptions[2]]),
};
expect(validate(opts)).toMatchInlineSnapshot(
`"editor.editorControlPane.widget.rangeCountExact"`,
);
});
it('should pass when min is met', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 1 }),
defaultValue: fromJS([stringOptions[0]]),
};
expect(validate(opts)).toBeUndefined();
});
it('should pass when max is met', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, max: 1 }),
defaultValue: fromJS([stringOptions[0]]),
};
expect(validate(opts)).toBeUndefined();
});
it('should pass when both min and max are met', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 2, max: 3 }),
defaultValue: fromJS([stringOptions[0], stringOptions[1]]),
};
expect(validate(opts)).toBeUndefined();
});
it('should pass when both min and max are met, and are the same value', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 2, max: 2 }),
defaultValue: fromJS([stringOptions[0], stringOptions[1]]),
};
expect(validate(opts)).toBeUndefined();
});
it('should not fail on min/max if multiple is not true', () => {
const opts = {
field: fromJS({ options: stringOptions, min: 2, max: 2 }),
defaultValue: fromJS([stringOptions[0]]),
};
expect(validate(opts)).toBeUndefined();
});
});
});