diff --git a/cypress/integration/checkbox.test.ts b/cypress/integration/checkbox.test.ts index 62042e8..ca291ac 100644 --- a/cypress/integration/checkbox.test.ts +++ b/cypress/integration/checkbox.test.ts @@ -100,7 +100,7 @@ describe('checkbox', () => { - Text/Basic + Checkbox/Duplicate
diff --git a/cypress/integration/date.test.ts b/cypress/integration/date.test.ts new file mode 100644 index 0000000..1cce143 --- /dev/null +++ b/cypress/integration/date.test.ts @@ -0,0 +1,265 @@ +import { getFormValues, setFormValues } from '../../src'; +import * as utils from '../utils' + +describe('date', () => { + describe('basic', () => { + beforeEach(utils.setup(` + + + + + Date/Basic + + + + + +
+ + + `)) + + it('should have single form value', () => { + utils.test({ + action: (cy: any) => cy.get('[type="submit"]'), + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: { + hello: '2003-04-06', + }, + }); + }); + }) + + describe('disabled', () => { + beforeEach(utils.setup(` + + + + + Date/Disabled + + +
+ + +
+ + + `)) + + it('should have blank form value', () => { + utils.test({ + action: (cy: any) => cy.get('[type="submit"]'), + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: {}, + }); + }); + }) + + describe('outside', () => { + beforeEach(utils.setup(` + + + + + Date/Outside + + +
+ +
+ + + + `)) + + it('should have single form value', () => { + utils.test({ + action: (cy: any) => cy.get('[type="submit"]'), + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: { + hello: '2003-04-20', + }, + }); + }); + }); + + describe('readonly', () => { + beforeEach(utils.setup(` + + + + + Text/Readonly + + +
+ + +
+ + + `)) + + it('should have single form value', () => { + utils.test({ + action: (cy: any) => cy.get('[type="submit"]'), + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: { + hello: '2003-11-11', + }, + }); + }); + }); + + describe('programmatic value setting', () => { + beforeEach(utils.setup(` + + + + + Text/Basic + + +
+ + +
+ + + `)); + + it('should have form values set', () => { + utils.test({ + action: (cy: any) => cy.get('[type="submit"]'), + preAction: (form: HTMLFormElement) => { + setFormValues(form, { hello: new Date('2000-01-01'), }) + }, + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: { + hello: '2000-01-01', + }, + }); + }); + }); + + describe('duplicate', () => { + beforeEach(utils.setup(` + + + + + Date/Duplicate + + +
+ + + +
+ + + `)); + + it('should get both values', () => { + utils.test({ + action: (cy: any) => cy.get('[type="submit"]'), + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: { + hello: ['2007-07-07', '2008-08-08'], + }, + }); + }); + + it('should set both values', () => { + utils.test({ + preAction: (form: HTMLFormElement) => { + setFormValues(form, { + hello: ['2006-06-06', '2005-05-05'], + }) + }, + action: (cy: any) => cy.get('[type="submit"]'), + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: { + hello: ['2006-06-06', '2005-05-05'], + }, + }); + }); + }); +}) diff --git a/cypress/integration/datetime-local.test.ts b/cypress/integration/datetime-local.test.ts new file mode 100644 index 0000000..141d6fa --- /dev/null +++ b/cypress/integration/datetime-local.test.ts @@ -0,0 +1,265 @@ +import { getFormValues, setFormValues } from '../../src'; +import * as utils from '../utils' + +describe('date', () => { + describe('basic', () => { + beforeEach(utils.setup(` + + + + + Datetime-Local/Basic + + +
+ + +
+ + + `)) + + it('should have single form value', () => { + utils.test({ + action: (cy: any) => cy.get('[type="submit"]'), + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: { + hello: '2003-04-06T13:37', + }, + }); + }); + }) + + describe('disabled', () => { + beforeEach(utils.setup(` + + + + + Datetime-Local/Disabled + + +
+ + +
+ + + `)) + + it('should have blank form value', () => { + utils.test({ + action: (cy: any) => cy.get('[type="submit"]'), + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: {}, + }); + }); + }) + + describe('outside', () => { + beforeEach(utils.setup(` + + + + + Datetime-Local/Outside + + +
+ +
+ + + + `)) + + it('should have single form value', () => { + utils.test({ + action: (cy: any) => cy.get('[type="submit"]'), + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: { + hello: '2003-04-20T13:37', + }, + }); + }); + }); + + describe('readonly', () => { + beforeEach(utils.setup(` + + + + + Text/Readonly + + +
+ + +
+ + + `)) + + it('should have single form value', () => { + utils.test({ + action: (cy: any) => cy.get('[type="submit"]'), + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: { + hello: '2003-11-11T13:37', + }, + }); + }); + }); + + describe('programmatic value setting', () => { + beforeEach(utils.setup(` + + + + + Text/Basic + + +
+ + +
+ + + `)); + + it('should have form values set', () => { + utils.test({ + action: (cy: any) => cy.get('[type="submit"]'), + preAction: (form: HTMLFormElement) => { + setFormValues(form, { hello: new Date('2000-01-01T13:37'), }) + }, + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: { + hello: '2000-01-01T13:37', + }, + }); + }); + }); + + describe('duplicate', () => { + beforeEach(utils.setup(` + + + + + Datetime-Local/Duplicate + + +
+ + + +
+ + + `)); + + it('should get both values', () => { + utils.test({ + action: (cy: any) => cy.get('[type="submit"]'), + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: { + hello: ['2007-07-07T13:37', '2008-08-08T13:37'], + }, + }); + }); + + it('should set both values', () => { + utils.test({ + preAction: (form: HTMLFormElement) => { + setFormValues(form, { + hello: ['2006-06-06T13:37', '2005-05-05T13:37'], + }) + }, + action: (cy: any) => cy.get('[type="submit"]'), + test: (form: HTMLFormElement, submitter: any, search: any) => { + const before = utils.makeSearchParams(getFormValues(form, { submitter })) + .toString(); + const after = utils.makeSearchParams(search) + .toString(); + expect(before) + .toEqual(after); + }, + expectedStaticValue: { + hello: ['2006-06-06T13:37', '2005-05-05T13:37'], + }, + }); + }); + }); +}) diff --git a/cypress/integration/text.test.ts b/cypress/integration/text.test.ts index df1a626..4403567 100644 --- a/cypress/integration/text.test.ts +++ b/cypress/integration/text.test.ts @@ -164,7 +164,7 @@ describe('text', () => { - Text/Basic + Text/Programmatic Value Setting
@@ -205,7 +205,7 @@ describe('text', () => { - Text/Basic + Text/Textarea @@ -289,7 +289,7 @@ describe('text', () => { - Text/Basic + Text/Duplicate diff --git a/src/index.ts b/src/index.ts index 03ce272..0e64ac2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -483,14 +483,22 @@ const DATE_FORMAT_ISO = 'yyyy-MM-DD' as const; * Sets the value of an `` element. * @param inputEl - The element. * @param value - Value of the input element. + * @param nthOfName - What order is this field in with respect to fields of the same name? + * @param totalOfName - How many fields with the same name are in the form? */ const setInputDateLikeFieldValue = ( inputEl: HTMLInputDateLikeElement, value: unknown, + nthOfName: number, + totalOfName: number, ) => { + const valueArray = Array.isArray(value) ? value : [value]; + if (inputEl.type.toLowerCase() === INPUT_TYPE_DATE) { // eslint-disable-next-line no-param-reassign - inputEl.value = new Date(value as ConstructorParameters[0]) + inputEl.value = new Date( + valueArray[totalOfName > 1 ? nthOfName : 0] as ConstructorParameters[0], + ) .toISOString() .slice(0, DATE_FORMAT_ISO.length); return; @@ -498,7 +506,9 @@ const setInputDateLikeFieldValue = ( if (inputEl.type.toLowerCase() === INPUT_TYPE_DATETIME_LOCAL) { // eslint-disable-next-line no-param-reassign - inputEl.value = new Date(value as ConstructorParameters[0]) + inputEl.value = new Date( + valueArray[totalOfName > 1 ? nthOfName : 0] as ConstructorParameters[0], + ) .toISOString() .slice(0, -1); // remove extra 'Z' suffix } @@ -574,7 +584,12 @@ const setInputFieldValue = ( return; case INPUT_TYPE_DATE: case INPUT_TYPE_DATETIME_LOCAL: - setInputDateLikeFieldValue(inputEl as HTMLInputDateLikeElement, value); + setInputDateLikeFieldValue( + inputEl as HTMLInputDateLikeElement, + value, + nthOfName, + totalOfName, + ); return; default: break;