Include tests for duplicate values, as well as comprehensive date tests.master
@@ -100,7 +100,7 @@ describe('checkbox', () => { | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Text/Basic</title> | |||
<title>Checkbox/Duplicate</title> | |||
</head> | |||
<body> | |||
<form> | |||
@@ -0,0 +1,265 @@ | |||
import { getFormValues, setFormValues } from '../../src'; | |||
import * as utils from '../utils' | |||
describe('date', () => { | |||
describe('basic', () => { | |||
beforeEach(utils.setup(` | |||
<!DOCTYPE html> | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Date/Basic</title> | |||
</head> | |||
<body> | |||
<form> | |||
<label> | |||
<span>Hello</span> | |||
<input type="date" name="hello" value="2003-04-06" /> | |||
</label> | |||
<button type="submit">Submit</button> | |||
</form> | |||
</body> | |||
</html> | |||
`)) | |||
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(` | |||
<!DOCTYPE html> | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Date/Disabled</title> | |||
</head> | |||
<body> | |||
<form> | |||
<label> | |||
<span>Hello</span> | |||
<input | |||
type="date" name="hello" value="2003-06-09" | |||
disabled | |||
/> | |||
</label> | |||
<button type="submit">Submit</button> | |||
</form> | |||
</body> | |||
</html> | |||
`)) | |||
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(` | |||
<!DOCTYPE html> | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Date/Outside</title> | |||
</head> | |||
<body> | |||
<form id="form"> | |||
<button type="submit">Submit</button> | |||
</form> | |||
<label> | |||
<span>Hello</span> | |||
<input type="date" name="hello" value="2003-04-20" form="form" /> | |||
</label> | |||
</body> | |||
</html> | |||
`)) | |||
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(` | |||
<!DOCTYPE html> | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Text/Readonly</title> | |||
</head> | |||
<body> | |||
<form> | |||
<label> | |||
<span>Hello</span> | |||
<input | |||
type="text" name="hello" value="2003-11-11" | |||
readonly | |||
/> | |||
</label> | |||
<button type="submit">Submit</button> | |||
</form> | |||
</body> | |||
</html> | |||
`)) | |||
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(` | |||
<!DOCTYPE html> | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Text/Basic</title> | |||
</head> | |||
<body> | |||
<form> | |||
<label> | |||
<span>Hello</span> | |||
<input type="date" name="hello" /> | |||
</label> | |||
<button type="submit">Submit</button> | |||
</form> | |||
</body> | |||
</html> | |||
`)); | |||
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(` | |||
<!DOCTYPE html> | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Date/Duplicate</title> | |||
</head> | |||
<body> | |||
<form> | |||
<label> | |||
<span>Hello 1</span> | |||
<input id="hello1" type="date" name="hello" value="2007-07-07"/> | |||
</label> | |||
<label> | |||
<span>Hello 2</span> | |||
<input id="hello2" type="date" name="hello" value="2008-08-08"/> | |||
</label> | |||
<button type="submit">Submit</button> | |||
</form> | |||
</body> | |||
</html> | |||
`)); | |||
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'], | |||
}, | |||
}); | |||
}); | |||
}); | |||
}) |
@@ -0,0 +1,265 @@ | |||
import { getFormValues, setFormValues } from '../../src'; | |||
import * as utils from '../utils' | |||
describe('date', () => { | |||
describe('basic', () => { | |||
beforeEach(utils.setup(` | |||
<!DOCTYPE html> | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Datetime-Local/Basic</title> | |||
</head> | |||
<body> | |||
<form> | |||
<label> | |||
<span>Hello</span> | |||
<input type="datetime-local" name="hello" value="2003-04-06T13:37" /> | |||
</label> | |||
<button type="submit">Submit</button> | |||
</form> | |||
</body> | |||
</html> | |||
`)) | |||
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(` | |||
<!DOCTYPE html> | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Datetime-Local/Disabled</title> | |||
</head> | |||
<body> | |||
<form> | |||
<label> | |||
<span>Hello</span> | |||
<input | |||
type="datetime-local" name="hello" value="2003-06-09T13:37" | |||
disabled | |||
/> | |||
</label> | |||
<button type="submit">Submit</button> | |||
</form> | |||
</body> | |||
</html> | |||
`)) | |||
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(` | |||
<!DOCTYPE html> | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Datetime-Local/Outside</title> | |||
</head> | |||
<body> | |||
<form id="form"> | |||
<button type="submit">Submit</button> | |||
</form> | |||
<label> | |||
<span>Hello</span> | |||
<input type="datetime-local" name="hello" value="2003-04-20T13:37" form="form" /> | |||
</label> | |||
</body> | |||
</html> | |||
`)) | |||
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(` | |||
<!DOCTYPE html> | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Text/Readonly</title> | |||
</head> | |||
<body> | |||
<form> | |||
<label> | |||
<span>Hello</span> | |||
<input | |||
type="text" name="hello" value="2003-11-11T13:37" | |||
readonly | |||
/> | |||
</label> | |||
<button type="submit">Submit</button> | |||
</form> | |||
</body> | |||
</html> | |||
`)) | |||
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(` | |||
<!DOCTYPE html> | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Text/Basic</title> | |||
</head> | |||
<body> | |||
<form> | |||
<label> | |||
<span>Hello</span> | |||
<input type="datetime-local" name="hello" /> | |||
</label> | |||
<button type="submit">Submit</button> | |||
</form> | |||
</body> | |||
</html> | |||
`)); | |||
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(` | |||
<!DOCTYPE html> | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Datetime-Local/Duplicate</title> | |||
</head> | |||
<body> | |||
<form> | |||
<label> | |||
<span>Hello 1</span> | |||
<input id="hello1" type="datetime-local" name="hello" value="2007-07-07T13:37"/> | |||
</label> | |||
<label> | |||
<span>Hello 2</span> | |||
<input id="hello2" type="datetime-local" name="hello" value="2008-08-08T13:37"/> | |||
</label> | |||
<button type="submit">Submit</button> | |||
</form> | |||
</body> | |||
</html> | |||
`)); | |||
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'], | |||
}, | |||
}); | |||
}); | |||
}); | |||
}) |
@@ -164,7 +164,7 @@ describe('text', () => { | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Text/Basic</title> | |||
<title>Text/Programmatic Value Setting</title> | |||
</head> | |||
<body> | |||
<form> | |||
@@ -205,7 +205,7 @@ describe('text', () => { | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Text/Basic</title> | |||
<title>Text/Textarea</title> | |||
</head> | |||
<body> | |||
<form> | |||
@@ -289,7 +289,7 @@ describe('text', () => { | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Text/Basic</title> | |||
<title>Text/Duplicate</title> | |||
</head> | |||
<body> | |||
<form> | |||
@@ -483,14 +483,22 @@ const DATE_FORMAT_ISO = 'yyyy-MM-DD' as const; | |||
* Sets the value of an `<input type="date">` 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<typeof Date>[0]) | |||
inputEl.value = new Date( | |||
valueArray[totalOfName > 1 ? nthOfName : 0] as ConstructorParameters<typeof Date>[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<typeof Date>[0]) | |||
inputEl.value = new Date( | |||
valueArray[totalOfName > 1 ? nthOfName : 0] as ConstructorParameters<typeof Date>[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; | |||