TheoryOfNekomata
/
formxtra
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Add date tests, duplicates 

Include tests for duplicate values, as well as comprehensive date tests.
master
TheoryOfNekomata 1 year ago
parent
1ae8e04f57
commit
972a65271e
5 changed files with 552 additions and 7 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      cypress/integration/checkbox.test.ts
  2. +265
    -0
      cypress/integration/date.test.ts
  3. +265
    -0
      cypress/integration/datetime-local.test.ts
  4. +3
    -3
      cypress/integration/text.test.ts
  5. +18
    -3
      src/index.ts

+ 1
- 1
cypress/integration/checkbox.test.ts View File

@@ -100,7 +100,7 @@ describe('checkbox', () => {
<html lang="en-PH"> <html lang="en-PH">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Text/Basic</title>
<title>Checkbox/Duplicate</title>
</head> </head>
<body> <body>
<form> <form>


+ 265
- 0
cypress/integration/date.test.ts View File

@@ -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'],
},
});
});
});
})

+ 265
- 0
cypress/integration/datetime-local.test.ts View File

@@ -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'],
},
});
});
});
})

+ 3
- 3
cypress/integration/text.test.ts View File

@@ -164,7 +164,7 @@ describe('text', () => {
<html lang="en-PH"> <html lang="en-PH">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Text/Basic</title>
<title>Text/Programmatic Value Setting</title>
</head> </head>
<body> <body>
<form> <form>
@@ -205,7 +205,7 @@ describe('text', () => {
<html lang="en-PH"> <html lang="en-PH">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Text/Basic</title>
<title>Text/Textarea</title>
</head> </head>
<body> <body>
<form> <form>
@@ -289,7 +289,7 @@ describe('text', () => {
<html lang="en-PH"> <html lang="en-PH">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Text/Basic</title>
<title>Text/Duplicate</title>
</head> </head>
<body> <body>
<form> <form>


+ 18
- 3
src/index.ts View File

@@ -483,14 +483,22 @@ const DATE_FORMAT_ISO = 'yyyy-MM-DD' as const;
* Sets the value of an `<input type="date">` element. * Sets the value of an `<input type="date">` element.
* @param inputEl - The element. * @param inputEl - The element.
* @param value - Value of the input 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 = ( const setInputDateLikeFieldValue = (
inputEl: HTMLInputDateLikeElement, inputEl: HTMLInputDateLikeElement,
value: unknown, value: unknown,
nthOfName: number,
totalOfName: number,
) => { ) => {
const valueArray = Array.isArray(value) ? value : [value];

if (inputEl.type.toLowerCase() === INPUT_TYPE_DATE) { if (inputEl.type.toLowerCase() === INPUT_TYPE_DATE) {
// eslint-disable-next-line no-param-reassign // 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() .toISOString()
.slice(0, DATE_FORMAT_ISO.length); .slice(0, DATE_FORMAT_ISO.length);
return; return;
@@ -498,7 +506,9 @@ const setInputDateLikeFieldValue = (


if (inputEl.type.toLowerCase() === INPUT_TYPE_DATETIME_LOCAL) { if (inputEl.type.toLowerCase() === INPUT_TYPE_DATETIME_LOCAL) {
// eslint-disable-next-line no-param-reassign // 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() .toISOString()
.slice(0, -1); // remove extra 'Z' suffix .slice(0, -1); // remove extra 'Z' suffix
} }
@@ -574,7 +584,12 @@ const setInputFieldValue = (
return; return;
case INPUT_TYPE_DATE: case INPUT_TYPE_DATE:
case INPUT_TYPE_DATETIME_LOCAL: case INPUT_TYPE_DATETIME_LOCAL:
setInputDateLikeFieldValue(inputEl as HTMLInputDateLikeElement, value);
setInputDateLikeFieldValue(
inputEl as HTMLInputDateLikeElement,
value,
nthOfName,
totalOfName,
);
return; return;
default: default:
break; break;


Write Preview
Loading…
Cancel
Save