diff --git a/src/libs/enums/control-element-type.enum.js b/src/libs/enums/control-element-type.enum.js index 450479d..3df5ffc 100644 --- a/src/libs/enums/control-element-type.enum.js +++ b/src/libs/enums/control-element-type.enum.js @@ -5,11 +5,12 @@ const ControlElementType = /** @type {const} */ ({ URL: 'url', TEL: 'tel', COLOR: 'color', - RADIO: 'radio', HIDDEN: 'hidden', EMAIL: 'email', + RADIO: 'radio', + NUMBER: 'number', RANGE: 'range', diff --git a/src/libs/helpers/check-is-one-of/check-is-one-of.helper.js b/src/libs/helpers/check-is-one-of/check-is-one-of.helper.js new file mode 100644 index 0000000..ec27946 --- /dev/null +++ b/src/libs/helpers/check-is-one-of/check-is-one-of.helper.js @@ -0,0 +1,11 @@ +/** + * @template {unknown} T + * @param {unknown} value + * @param {...T} validValues + * @returns {value is validValues[number]} + */ +const checkIsOnOf = (value, ...validValues) => { + return /** @type {unknown[]} */ (validValues).includes(value); +}; + +export { checkIsOnOf }; diff --git a/src/libs/helpers/helpers.js b/src/libs/helpers/helpers.js new file mode 100644 index 0000000..4477c01 --- /dev/null +++ b/src/libs/helpers/helpers.js @@ -0,0 +1 @@ +export { checkIsOnOf } from './check-is-one-of/check-is-one-of.helper.js'; diff --git a/src/packages/get-form-control-payload/get-form-control-payload.js b/src/packages/get-form-control-payload/get-form-control-payload.js index a87974a..17d2196 100644 --- a/src/packages/get-form-control-payload/get-form-control-payload.js +++ b/src/packages/get-form-control-payload/get-form-control-payload.js @@ -10,7 +10,8 @@ import { getFileControlElementValue, getMultiselectControlElementValue, getNumericControlElementValue, -} from './helpers/helpers.js'; + getRadioControlElementValue, +} from './libs/helpers/helpers.js'; /** @typedef {import('../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ @@ -36,7 +37,6 @@ const getFormControlPayload = (controlElement) => { case ControlElementType.URL: case ControlElementType.TEL: case ControlElementType.COLOR: - case ControlElementType.RADIO: case ControlElementType.HIDDEN: case ControlElementType.TEXTAREA: case ControlElementType.SELECT_ONE: @@ -59,6 +59,13 @@ const getFormControlPayload = (controlElement) => { ) ); } + case ControlElementType.RADIO: { + return /** @type {T} */ ( + getRadioControlElementValue( + /** @type {HTMLInputElement} */ (controlElement), + ) + ); + } case ControlElementType.NUMBER: case ControlElementType.RANGE: { return /** @type {T} */ ( @@ -120,5 +127,5 @@ const getFormControlPayload = (controlElement) => { }); }; -export { getFormControlElementsPayload } from './helpers/helpers.js'; +export { getFormControlElementsPayload } from './libs/helpers/helpers.js'; export { getFormControlPayload }; diff --git a/src/packages/get-form-control-payload/helpers/check-has-value-as-array/check-has-value-as-array.helper.js b/src/packages/get-form-control-payload/libs/helpers/check-has-value-as-array/check-has-value-as-array.helper.js similarity index 75% rename from src/packages/get-form-control-payload/helpers/check-has-value-as-array/check-has-value-as-array.helper.js rename to src/packages/get-form-control-payload/libs/helpers/check-has-value-as-array/check-has-value-as-array.helper.js index 00f2d3e..0af4576 100644 --- a/src/packages/get-form-control-payload/helpers/check-has-value-as-array/check-has-value-as-array.helper.js +++ b/src/packages/get-form-control-payload/libs/helpers/check-has-value-as-array/check-has-value-as-array.helper.js @@ -1,9 +1,9 @@ import { VALUE_AS_ARRAY_CUSTOM_CONTROL_ELEMENT_TYPES, VALUE_AS_ARRAY_IDENTIFIER, -} from '../../../../libs/constants/constants.js'; +} from '../../../../../libs/constants/constants.js'; -/** @typedef {import('../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ +/** @typedef {import('../../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ /** * @param {HTMLFormOperationalControlElement} element diff --git a/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js b/src/packages/get-form-control-payload/libs/helpers/check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js similarity index 81% rename from src/packages/get-form-control-payload/helpers/check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js rename to src/packages/get-form-control-payload/libs/helpers/check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js index bcdd7fc..dfd955c 100644 --- a/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js +++ b/src/packages/get-form-control-payload/libs/helpers/check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js @@ -1,4 +1,4 @@ -/** @typedef {import('../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ +/** @typedef {import('../../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ /** * @param {HTMLFormOperationalControlElement} currentElement diff --git a/src/packages/get-form-control-payload/helpers/get-checkbox-control-element-value/get-checkbox-control-element-value.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-checkbox-control-element-value/get-checkbox-control-element-value.helper.js similarity index 80% rename from src/packages/get-form-control-payload/helpers/get-checkbox-control-element-value/get-checkbox-control-element-value.helper.js rename to src/packages/get-form-control-payload/libs/helpers/get-checkbox-control-element-value/get-checkbox-control-element-value.helper.js index 6754c89..3efbe4e 100644 --- a/src/packages/get-form-control-payload/helpers/get-checkbox-control-element-value/get-checkbox-control-element-value.helper.js +++ b/src/packages/get-form-control-payload/libs/helpers/get-checkbox-control-element-value/get-checkbox-control-element-value.helper.js @@ -1,4 +1,4 @@ -import { VALUE_AS_ARRAY_IDENTIFIER } from '../../../../libs/constants/constants.js'; +import { VALUE_AS_ARRAY_IDENTIFIER } from '../../../../../libs/constants/constants.js'; /** * @param {HTMLInputElement} element diff --git a/src/packages/get-form-control-payload/helpers/get-control-element-value/get-control-element-value.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-control-element-value/get-control-element-value.helper.js similarity index 80% rename from src/packages/get-form-control-payload/helpers/get-control-element-value/get-control-element-value.helper.js rename to src/packages/get-form-control-payload/libs/helpers/get-control-element-value/get-control-element-value.helper.js index 4574978..4066905 100644 --- a/src/packages/get-form-control-payload/helpers/get-control-element-value/get-control-element-value.helper.js +++ b/src/packages/get-form-control-payload/libs/helpers/get-control-element-value/get-control-element-value.helper.js @@ -2,7 +2,8 @@ * @param {HTMLInputElement * | HTMLOutputElement * | HTMLTextAreaElement - * | HTMLSelectElement} element + * | HTMLSelectElement + * | RadioNodeList} element * @returns {string} */ const getControlElementValue = (element) => { diff --git a/src/packages/get-form-control-payload/helpers/get-datatime-local-control-element-value/get-datatime-local-control-element-value.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-datatime-local-control-element-value/get-datatime-local-control-element-value.helper.js similarity index 100% rename from src/packages/get-form-control-payload/helpers/get-datatime-local-control-element-value/get-datatime-local-control-element-value.helper.js rename to src/packages/get-form-control-payload/libs/helpers/get-datatime-local-control-element-value/get-datatime-local-control-element-value.helper.js diff --git a/src/packages/get-form-control-payload/helpers/get-date-control-element-value/get-date-value-control-element.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-date-control-element-value/get-date-value-control-element.helper.js similarity index 100% rename from src/packages/get-form-control-payload/helpers/get-date-control-element-value/get-date-value-control-element.helper.js rename to src/packages/get-form-control-payload/libs/helpers/get-date-control-element-value/get-date-value-control-element.helper.js diff --git a/src/packages/get-form-control-payload/helpers/get-email-control-element-value/get-email-control-element-value.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-email-control-element-value/get-email-control-element-value.helper.js similarity index 90% rename from src/packages/get-form-control-payload/helpers/get-email-control-element-value/get-email-control-element-value.helper.js rename to src/packages/get-form-control-payload/libs/helpers/get-email-control-element-value/get-email-control-element-value.helper.js index 193a586..cb539e1 100644 --- a/src/packages/get-form-control-payload/helpers/get-email-control-element-value/get-email-control-element-value.helper.js +++ b/src/packages/get-form-control-payload/libs/helpers/get-email-control-element-value/get-email-control-element-value.helper.js @@ -1,6 +1,6 @@ import { getControlElementValue } from '../get-control-element-value/get-control-element-value.helper.js'; -const EMAIL_SEPARATOR = ','; +const EMAIL_SEPARATOR = /** @type {const} */ (','); /** * @param {HTMLInputElement} element diff --git a/src/packages/get-form-control-payload/helpers/get-fieldset-control-element-value/get-fieldset-control-element-value.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-fieldset-control-element-value/get-fieldset-control-element-value.helper.js similarity index 62% rename from src/packages/get-form-control-payload/helpers/get-fieldset-control-element-value/get-fieldset-control-element-value.helper.js rename to src/packages/get-form-control-payload/libs/helpers/get-fieldset-control-element-value/get-fieldset-control-element-value.helper.js index c74e5b9..e0ac648 100644 --- a/src/packages/get-form-control-payload/helpers/get-fieldset-control-element-value/get-fieldset-control-element-value.helper.js +++ b/src/packages/get-form-control-payload/libs/helpers/get-fieldset-control-element-value/get-fieldset-control-element-value.helper.js @@ -1,8 +1,7 @@ -import { VALUE_AS_ARRAY_IDENTIFIER } from '../../../../libs/constants/constants.js'; +import { VALUE_AS_ARRAY_IDENTIFIER } from '../../../../../libs/constants/constants.js'; import { getFormControlElementsPayload } from '../get-form-control-elements-payload/get-form-control-elements-payload.js'; -/** @typedef {import('../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ -/** @typedef {import('../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ +/** @typedef {import('../../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ /** * @template {Record} T @@ -16,10 +15,9 @@ const getFieldsetControlElementValue = ( getFormControlElementPayloadCallback, element, ) => { - const elements = [.../** @type {HTMLFieldSetElement} */ (element).elements]; const fieldsetValue = getFormControlElementsPayload( getFormControlElementPayloadCallback, - .../** @type {HTMLFormControlElement[]} */ (elements), + element.elements, ); const hasArrayValue = element.name.endsWith(VALUE_AS_ARRAY_IDENTIFIER); diff --git a/src/packages/get-form-control-payload/helpers/get-file-control-element-value/get-file-control-element-value.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-file-control-element-value/get-file-control-element-value.helper.js similarity index 100% rename from src/packages/get-form-control-payload/helpers/get-file-control-element-value/get-file-control-element-value.helper.js rename to src/packages/get-form-control-payload/libs/helpers/get-file-control-element-value/get-file-control-element-value.helper.js diff --git a/src/packages/get-form-control-payload/helpers/get-form-control-elements-payload/get-form-control-elements-payload.js b/src/packages/get-form-control-payload/libs/helpers/get-form-control-elements-payload/get-form-control-elements-payload.js similarity index 62% rename from src/packages/get-form-control-payload/helpers/get-form-control-elements-payload/get-form-control-elements-payload.js rename to src/packages/get-form-control-payload/libs/helpers/get-form-control-elements-payload/get-form-control-elements-payload.js index d8d4d8e..6be435a 100644 --- a/src/packages/get-form-control-payload/helpers/get-form-control-elements-payload/get-form-control-elements-payload.js +++ b/src/packages/get-form-control-payload/libs/helpers/get-form-control-elements-payload/get-form-control-elements-payload.js @@ -1,23 +1,30 @@ +import { ControlElementType } from '../../../../../libs/enums/enums.js'; +import { checkIsOnOf } from '../../../../../libs/helpers/helpers.js'; import { checkHasValueAsArray } from '../check-has-value-as-array/check-has-value-as-array.helper.js'; import { checkIsReferToAnotherElement } from '../check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js'; +import { getControlElementValue } from '../get-control-element-value/get-control-element-value.helper.js'; import { getOperationalControlElements } from '../get-operational-control-elements/get-operational-control-elements.helper.js'; import { normalizeValueAsArrayControlElementName } from '../normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js'; -/** @typedef {import('../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ -/** @typedef {import('../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ +/** @typedef {import('../../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ +/** @typedef {import('../../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ /** * @template {Record} T * @param {( * element: HTMLFormOperationalControlElement, * ) => T} getFormControlElementPayloadCallback - * @param {...HTMLFormControlElement} controlElements + * @param {HTMLFormControlsCollection} elements * @returns {T} */ const getFormControlElementsPayload = ( getFormControlElementPayloadCallback, - ...controlElements + elements, ) => { + const controlElements = /** @type {HTMLFormControlElement[]} */ ([ + ...elements, + ]); + const operationalControlElements = getOperationalControlElements(controlElements); @@ -33,6 +40,34 @@ const getFormControlElementsPayload = ( continue; } + const isRadioNodeList = checkIsOnOf( + operationalControlElement.type, + ControlElementType.RADIO, + ); + + if (isRadioNodeList) { + const hasValue = Boolean( + elementsValues[operationalControlElement.name], + ); + + if (!hasValue) { + const key = /** @type {keyof T} */ ( + operationalControlElement.name + ); + const value = /** @type {T[keyof T]} */ ( + getControlElementValue( + /** @type {RadioNodeList} */ ( + elements.namedItem(operationalControlElement.name) + ), + ) + ); + + elementsValues[key] = value; + } + + continue; + } + const hasValueAsArray = checkHasValueAsArray(operationalControlElement); if (hasValueAsArray) { diff --git a/src/packages/get-form-control-payload/helpers/get-multiselect-control-type-value/get-multiselect-control-type-value.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-multiselect-control-type-value/get-multiselect-control-type-value.helper.js similarity index 100% rename from src/packages/get-form-control-payload/helpers/get-multiselect-control-type-value/get-multiselect-control-type-value.helper.js rename to src/packages/get-form-control-payload/libs/helpers/get-multiselect-control-type-value/get-multiselect-control-type-value.helper.js diff --git a/src/packages/get-form-control-payload/helpers/get-numeric-control-element-value/get-numeric-control-element-value.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-numeric-control-element-value/get-numeric-control-element-value.helper.js similarity index 100% rename from src/packages/get-form-control-payload/helpers/get-numeric-control-element-value/get-numeric-control-element-value.helper.js rename to src/packages/get-form-control-payload/libs/helpers/get-numeric-control-element-value/get-numeric-control-element-value.helper.js diff --git a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/get-operational-control-elements.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/get-operational-control-elements.helper.js similarity index 70% rename from src/packages/get-form-control-payload/helpers/get-operational-control-elements/get-operational-control-elements.helper.js rename to src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/get-operational-control-elements.helper.js index 5bca0e3..07e671f 100644 --- a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/get-operational-control-elements.helper.js +++ b/src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/get-operational-control-elements.helper.js @@ -4,14 +4,14 @@ import { checkIsAllowedControlElementType, } from './helpers/helpers.js'; -/** @typedef {import('../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ -/** @typedef {import('../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ +/** @typedef {import('../../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ +/** @typedef {import('../../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ -const OPERATIONAL_CONTROL_ELEMENT_CHECKERS = [ +const OPERATIONAL_CONTROL_ELEMENT_CHECKERS = /** @type {const} */ ([ checkHasControlElementName, checkIsAllowedControlElement, checkIsAllowedControlElementType, -]; +]); /** * @param {HTMLFormControlElement[]} elements diff --git a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-has-control-element-name/check-has-control-element-name.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/helpers/check-has-control-element-name/check-has-control-element-name.helper.js similarity index 63% rename from src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-has-control-element-name/check-has-control-element-name.helper.js rename to src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/helpers/check-has-control-element-name/check-has-control-element-name.helper.js index a9284a7..28e55e4 100644 --- a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-has-control-element-name/check-has-control-element-name.helper.js +++ b/src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/helpers/check-has-control-element-name/check-has-control-element-name.helper.js @@ -1,4 +1,4 @@ -/** @typedef {import('../../../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ +/** @typedef {import('../../../../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ /** * @param {HTMLFormControlElement} element diff --git a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.js similarity index 72% rename from src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.js rename to src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.js index ce6539c..b8519e4 100644 --- a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.js +++ b/src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.js @@ -1,6 +1,6 @@ -import { BANNED_CONTROL_ELEMENT_TYPES } from '../../../../../../libs/constants/constants.js'; +import { BANNED_CONTROL_ELEMENT_TYPES } from '../../../../../../../libs/constants/constants.js'; -/** @typedef {import('../../../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ +/** @typedef {import('../../../../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ /** * @param {HTMLFormControlElement} element diff --git a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element/check-is-allowed-control-element.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element/check-is-allowed-control-element.helper.js similarity index 74% rename from src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element/check-is-allowed-control-element.helper.js rename to src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element/check-is-allowed-control-element.helper.js index aea4cea..93d1cae 100644 --- a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element/check-is-allowed-control-element.helper.js +++ b/src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element/check-is-allowed-control-element.helper.js @@ -1,6 +1,6 @@ -import { bannedElementNameToElementInstance } from '../../../../../../libs/maps/maps.js'; +import { bannedElementNameToElementInstance } from '../../../../../../../libs/maps/maps.js'; -/** @typedef {import('../../../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ +/** @typedef {import('../../../../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ /** * @param {HTMLFormControlElement} element diff --git a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/helpers.js b/src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/helpers/helpers.js similarity index 100% rename from src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/helpers.js rename to src/packages/get-form-control-payload/libs/helpers/get-operational-control-elements/helpers/helpers.js diff --git a/src/packages/get-form-control-payload/libs/helpers/get-radio-control-element-value/get-radio-control-element-value.helper.js b/src/packages/get-form-control-payload/libs/helpers/get-radio-control-element-value/get-radio-control-element-value.helper.js new file mode 100644 index 0000000..48cab51 --- /dev/null +++ b/src/packages/get-form-control-payload/libs/helpers/get-radio-control-element-value/get-radio-control-element-value.helper.js @@ -0,0 +1,13 @@ +const UNCHECKED_RADIO_CONTROL_ELEMENT_VALUE = /** @type {const} */ (''); + +/** + * @param {HTMLInputElement} element + * @returns {string} + */ +const getRadioControlElementValue = (element) => { + return element.checked + ? element.value + : UNCHECKED_RADIO_CONTROL_ELEMENT_VALUE; +}; + +export { getRadioControlElementValue }; diff --git a/src/packages/get-form-control-payload/helpers/helpers.js b/src/packages/get-form-control-payload/libs/helpers/helpers.js similarity index 91% rename from src/packages/get-form-control-payload/helpers/helpers.js rename to src/packages/get-form-control-payload/libs/helpers/helpers.js index 562babe..a8b8cff 100644 --- a/src/packages/get-form-control-payload/helpers/helpers.js +++ b/src/packages/get-form-control-payload/libs/helpers/helpers.js @@ -8,3 +8,4 @@ export { getFileControlElementValue } from './get-file-control-element-value/get export { getFormControlElementsPayload } from './get-form-control-elements-payload/get-form-control-elements-payload.js'; export { getMultiselectControlElementValue } from './get-multiselect-control-type-value/get-multiselect-control-type-value.helper.js'; export { getNumericControlElementValue } from './get-numeric-control-element-value/get-numeric-control-element-value.helper.js'; +export { getRadioControlElementValue } from './get-radio-control-element-value/get-radio-control-element-value.helper.js'; diff --git a/src/packages/get-form-control-payload/helpers/normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js b/src/packages/get-form-control-payload/libs/helpers/normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js similarity index 54% rename from src/packages/get-form-control-payload/helpers/normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js rename to src/packages/get-form-control-payload/libs/helpers/normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js index 168c807..6b2a3e2 100644 --- a/src/packages/get-form-control-payload/helpers/normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js +++ b/src/packages/get-form-control-payload/libs/helpers/normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js @@ -1,6 +1,6 @@ -import { VALUE_AS_ARRAY_IDENTIFIER } from '../../../../libs/constants/constants.js'; +import { VALUE_AS_ARRAY_IDENTIFIER } from '../../../../../libs/constants/constants.js'; -/** @typedef {import('../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ +/** @typedef {import('../../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ /** * @param {HTMLFormOperationalControlElement} element diff --git a/src/packages/get-form-payload/get-form-payload.js b/src/packages/get-form-payload/get-form-payload.js index 0d3fc0a..f772787 100644 --- a/src/packages/get-form-payload/get-form-payload.js +++ b/src/packages/get-form-payload/get-form-payload.js @@ -3,19 +3,16 @@ import { getFormControlPayload, } from '../get-form-control-payload/get-form-control-payload.js'; -/** @typedef {import('../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ - /** * @template {Record} T * @param {HTMLFormElement} formElement * @returns {T} */ const getFormPayload = (formElement) => { - const elements = /** @type {HTMLFormControlElement[]} */ ([ - ...formElement.elements, - ]); - - return getFormControlElementsPayload(getFormControlPayload, ...elements); + return getFormControlElementsPayload( + getFormControlPayload, + formElement.elements, + ); }; export { getFormPayload }; diff --git a/tests/get-form-control-payload.test.js b/tests/get-form-control-payload.test.js index d163af7..4b60b24 100644 --- a/tests/get-form-control-payload.test.js +++ b/tests/get-form-control-payload.test.js @@ -14,22 +14,19 @@ describe('getFormControlPayload should work correctly', () => { describe('should work with HTMLInputElement correctly', () => { test('should get value from string inputs correctly', () => { - const inputs = /** @type {const} */ ([ + const inputs = [ [ControlElementType.TEXT, 'Name'], [ControlElementType.PASSWORD, 'top-secret'], [ControlElementType.SEARCH, 'apples'], [ControlElementType.URL, 'form-payload.com'], [ControlElementType.TEL, '10000000000'], [ControlElementType.COLOR, '#999999'], - [ControlElementType.RADIO, 'color-1'], [ControlElementType.HIDDEN, 'metrics'], - ]); + ]; for (const [type, value] of inputs) { document.body.innerHTML = /* HTML */ ` -
- -
+ `; const controlElement = /** @type {HTMLInputElement} */ ( @@ -46,17 +43,112 @@ describe('getFormControlPayload should work correctly', () => { } }); + describe('should get value from email inputs correctly', () => { + test('should get value from singular email input correctly', () => { + const email = 'test@mail.com'; + + document.body.innerHTML = /* HTML */ ` + + `; + + const controlElement = /** @type {HTMLInputElement} */ ( + document.querySelector('input') + ); + + const controlElementValue = + getFormControlPayload(controlElement); + + equal(typeof controlElementValue, 'string'); + + equal(controlElementValue, email); + }); + + test('should get value from multiple email input correctly', () => { + const emails = [ + 'example@mail.com', + 'example@mail.ua', + 'example@mail.org', + 'example@mail.co', + ]; + + document.body.innerHTML = /* HTML */ ` + + `; + + const controlElement = /** @type {HTMLInputElement} */ ( + document.querySelector('input') + ); + + const controlElementValue = + getFormControlPayload(controlElement); + + equal(Array.isArray(controlElementValue), true); + + equal( + /** @type {string[]} */ (controlElementValue).length, + emails.length, + ); + + equal( + /** @type {string[]} */ (controlElementValue).every( + (email) => { + return email.trim().length === email.length; + }, + ), + true, + ); + + deepEqual(controlElementValue, emails); + }); + }); + + test('should get value from radio inputs correctly', () => { + const inputs = [ + [ControlElementType.RADIO, 'banana', true], + [ControlElementType.RADIO, 'orange', false], + [ControlElementType.RADIO, 'apple', true], + ]; + + for (const [type, value, isChecked] of inputs) { + document.body.innerHTML = /* HTML */ ` + + `; + + const controlElement = /** @type {HTMLInputElement} */ ( + document.querySelector('input') + ); + + const controlElementValue = + getFormControlPayload(controlElement); + + equal(typeof controlElementValue, 'string'); + + equal(controlElementValue, isChecked ? value : ''); + + document.body.innerHTML = ''; + } + }); + test('should get value from number inputs correctly', () => { - const inputs = /** @type {const} */ ([ + const inputs = [ [ControlElementType.NUMBER, 18], [ControlElementType.RANGE, 69], - ]); + ]; for (const [type, value] of inputs) { document.body.innerHTML = /* HTML */ ` -
- -
+ `; const controlElement = /** @type {HTMLInputElement} */ ( @@ -75,20 +167,15 @@ describe('getFormControlPayload should work correctly', () => { }); describe('should get value from boolean inputs correctly', () => { - test('should get value from regular boolean input correctly', () => { - const inputs = /** @type {const} */ ([ + test('should get value from singular boolean input correctly', () => { + const inputs = [ [ControlElementType.CHECKBOX, true], [ControlElementType.CHECKBOX, false], - ]); + ]; for (const [type, isChecked] of inputs) { document.body.innerHTML = /* HTML */ ` -
- -
+ `; const controlElement = /** @type {HTMLInputElement} */ ( @@ -106,23 +193,21 @@ describe('getFormControlPayload should work correctly', () => { } }); - test('should get single value from boolean input with collection identifier correctly', () => { - const inputs = /** @type {const} */ ([ + test('should get value from boolean inputs with collection identifier correctly', () => { + const inputs = [ [ControlElementType.CHECKBOX, 'banana', true], [ControlElementType.CHECKBOX, 'apple', false], - [ControlElementType.CHECKBOX, 'apple', true], - ]); + [ControlElementType.CHECKBOX, 'orange', true], + ]; for (const [type, value, isChecked] of inputs) { document.body.innerHTML = /* HTML */ ` -
- -
+ `; const controlElement = /** @type {HTMLInputElement} */ ( @@ -142,19 +227,17 @@ describe('getFormControlPayload should work correctly', () => { }); test('should get value from date inputs correctly', () => { - const inputs = /** @type {const} */ ([ + const inputs = [ [ControlElementType.DATE, '1998-08-03'], [ControlElementType.TIME, '13:30'], [ControlElementType.MONTH, '2001-06'], [ControlElementType.WEEK, '2017-W01'], [ControlElementType.DATETIME_LOCAL, '2018-06-12T19:30'], - ]); + ]; for (const [type, value] of inputs) { document.body.innerHTML = /* HTML */ ` -
- -
+ `; const controlElement = /** @type {HTMLInputElement} */ ( @@ -170,84 +253,12 @@ describe('getFormControlPayload should work correctly', () => { } }); - describe('should get value from email inputs correctly', () => { - test('should get value from singular email input correctly', () => { - const email = 'test@mail.com'; - - document.body.innerHTML = /* HTML */ ` -
- -
- `; - - const controlElement = /** @type {HTMLInputElement} */ ( - document.querySelector('input') - ); - - const controlElementValue = - getFormControlPayload(controlElement); - - equal(typeof controlElementValue, 'string'); - - equal(controlElementValue, email); - }); - - test('should get value from multiple email input correctly', () => { - const emails = [ - 'example@mail.com', - 'example@mail.ua', - 'example@mail.org', - 'example@mail.co', - ]; - - document.body.innerHTML = /* HTML */ ` -
- -
- `; - - const controlElement = /** @type {HTMLInputElement} */ ( - document.querySelector('input') - ); - - const controlElementValue = - getFormControlPayload(controlElement); - - equal(Array.isArray(controlElementValue), true); - - equal( - /** @type {string[]} */ (controlElementValue).length, - emails.length, - ); - - equal( - /** @type {string[]} */ (controlElementValue).every( - (email) => { - return email.trim().length === email.length; - }, - ), - true, - ); - - deepEqual(controlElementValue, emails); - }); - }); - describe('should get value from file inputs correctly', () => { test('should get value from singular file input correctly', async () => { const file = [new File(['test-file'], 'test-file')]; document.body.innerHTML = /* HTML */ ` -
- -
+ `; const controlElement = /** @type {HTMLInputElement} */ ( @@ -277,9 +288,7 @@ describe('getFormControlPayload should work correctly', () => { ]; document.body.innerHTML = /* HTML */ ` -
- -
+ `; const controlElement = /** @type {HTMLInputElement} */ ( @@ -318,9 +327,7 @@ describe('getFormControlPayload should work correctly', () => { const TEXTAREA_VALUE = 'Hello, World!'; document.body.innerHTML = /* HTML */ ` -
- -
+ `; const controlElement = /** @type {HTMLTextAreaElement} */ ( @@ -348,11 +355,10 @@ describe('getFormControlPayload should work correctly', () => { const selectedValue = Color.RED; document.body.innerHTML = /* HTML */ ` -
- + ${options + .map( + (option) => /** HTML */ ` `, - ) - .join('')} - -
+ ) + .join('')} + `; const controlElement = /** @type {HTMLSelectElement} */ ( @@ -381,11 +386,10 @@ describe('getFormControlPayload should work correctly', () => { const selectedValues = [Color.BLUE, Color.RED]; document.body.innerHTML = /* HTML */ ` -
- + ${options + .map( + (option) => /** HTML */ ` `, - ) - .join(',')} - -
+ ) + .join(',')} + `; const controlElement = /** @type {HTMLSelectElement} */ ( @@ -421,9 +424,7 @@ describe('getFormControlPayload should work correctly', () => { const OUTPUT_VALUE = 'Hello, World!'; document.body.innerHTML = /* HTML */ ` -
- ${OUTPUT_VALUE} -
+ ${OUTPUT_VALUE} `; const controlElement = /** @type {HTMLOutputElement} */ ( @@ -545,7 +546,7 @@ describe('getFormControlPayload should work correctly', () => { deepEqual(getFormControlPayload(controlElement), formPayload); }); - test('should get value from multiple HTMLFieldSetElement correctly', () => { + test('should get value from HTMLFieldSetElement with collection identifier correctly', () => { const FormPayloadKey = /** @type {const} */ ({ SHOP_NAME: 'name', }); diff --git a/tests/get-form-payload.test.js b/tests/get-form-payload.test.js index 55ff643..224fd8c 100644 --- a/tests/get-form-payload.test.js +++ b/tests/get-form-payload.test.js @@ -63,6 +63,46 @@ describe('getFormPayload should work correctly', () => { deepEqual(getFormPayload(formElement), {}); }); + test('should get value from form with multiple radio inputs correctly', () => { + const Fruit = /** @type {const} */ ({ + APPLE: 'apple', + BANANA: 'banana', + ORANGE: 'orange', + }); + + const RadioInputName = /** @type {const} */ ({ + NAME: 'fruit', + SELECTED_VALUE: Fruit.BANANA, + }); + + document.body.innerHTML = /* HTML */ ` +
+ ${Object.values(Fruit) + .map( + (fruit) => /* HTML */ ` + + `, + ) + .join('')} +
+ `; + + const formElement = /** @type {HTMLFormElement} */ ( + document.querySelector('form') + ); + + deepEqual(getFormPayload(formElement), { + [RadioInputName.NAME]: RadioInputName.SELECTED_VALUE, + }); + }); + describe('should get multiple value from control elements with collection identifier correctly', () => { test('should get multiple value from boolean inputs with collection identifier correctly', () => { const Fruit = { @@ -206,43 +246,4 @@ describe('getFormPayload should work correctly', () => { deepEqual(getFormPayload(formElement), formPayload); }); - - describe('should get multiple value from control elements with collection identifier correctly', () => { - test('should get multiple value from boolean inputs with collection identifier correctly', () => { - const Fruit = { - APPLE: 'apple', - BANANA: 'banana', - ORANGE: 'orange', - }; - - const formPayload = { - fruits: [Fruit.BANANA, Fruit.ORANGE], - }; - - document.body.innerHTML = /* HTML */ ` -
- ${Object.values(Fruit) - .map( - (fruit) => /* HTML */ ` - - `, - ) - .join('')} -
- `; - - const formElement = /** @type {HTMLFormElement} */ ( - document.querySelector('form') - ); - - deepEqual(getFormPayload(formElement), formPayload); - }); - }); });