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

Update tests, fix multiple value setting 

Make tests more comprehensive.
master
TheoryOfNekomata 1 year ago
parent
4c69db6c02
commit
2089f146ef
13 changed files with 1688 additions and 136 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      cypress/integration/date.test.ts
  2. +2
    -2
      cypress/integration/datetime-local.test.ts
  3. +21
    -1
      cypress/integration/file.test.ts
  4. +178
    -1
      cypress/integration/misc.test.ts
  5. +265
    -0
      cypress/integration/month.test.ts
  6. +265
    -0
      cypress/integration/number.test.ts
  7. +265
    -0
      cypress/integration/range.test.ts
  8. +1
    -85
      cypress/integration/text.test.ts
  9. +349
    -0
      cypress/integration/textarea.test.ts
  10. +265
    -0
      cypress/integration/week.test.ts
  11. +1
    -1
      cypress/utils/index.ts
  12. +1
    -1
      package.json
  13. +73
    -43
      src/index.ts

+ 2
- 2
cypress/integration/date.test.ts View File

@@ -123,7 +123,7 @@ describe('date', () => {
<html lang="en-PH"> <html lang="en-PH">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Text/Readonly</title>
<title>Date/Readonly</title>
</head> </head>
<body> <body>
<form> <form>
@@ -164,7 +164,7 @@ describe('date', () => {
<html lang="en-PH"> <html lang="en-PH">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Text/Basic</title>
<title>Date/Programmatic Value Setting</title>
</head> </head>
<body> <body>
<form> <form>


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

@@ -123,7 +123,7 @@ describe('date', () => {
<html lang="en-PH"> <html lang="en-PH">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Text/Readonly</title>
<title>Datetime-Local/Readonly</title>
</head> </head>
<body> <body>
<form> <form>
@@ -164,7 +164,7 @@ describe('date', () => {
<html lang="en-PH"> <html lang="en-PH">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Text/Basic</title>
<title>Datetime-Local/Programmatic Value Setting</title>
</head> </head>
<body> <body>
<form> <form>


+ 21
- 1
cypress/integration/file.test.ts View File

@@ -1,4 +1,4 @@
import { getFormValues } from '../../src'
import { getFormValues, setFormValues } from '../../src';
import * as utils from '../utils' import * as utils from '../utils'


describe('file', () => { describe('file', () => {
@@ -83,6 +83,26 @@ describe('file', () => {
}, },
}); });
}) })

it('should do nothing when attempting to set the value of the file', () => {
utils.test({
preAction: (form: HTMLFormElement) => {
setFormValues(form, { hello: 'data.json' });
},
action: (cy: any) => cy.get('[type="submit"]'),
test: (form: HTMLFormElement, submitter: any) => {
const formValues = getFormValues(
form,
{
submitter,
getFileObjects: true
}
)
expect(formValues.hello).toBeDefined()
},
expectedStaticValue: {},
});
});
}) })


describe('multiple', () => { describe('multiple', () => {


+ 178
- 1
cypress/integration/misc.test.ts View File

@@ -1,7 +1,184 @@
import { getFormValues, setFormValues } from '../../src';
import getFormValuesDeprecated, { getFormValues, setFormValues } from '../../src';
import * as utils from '../utils' import * as utils from '../utils'


describe('misc', () => { describe('misc', () => {
describe('core', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Misc/Blank</title>
</head>
<body>
<form>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should call console.warn for deprecated default import usage', () => {
utils.test({
action: (cy: any) => cy.get('[type="submit"]'),
test: (form: HTMLFormElement, submitter: any, search: any) => {
let consoleWarnCalled = false
const defaultConsoleWarn = console.warn
console.warn = (...args: unknown[]) => {
consoleWarnCalled = true
};
getFormValuesDeprecated(form, { submitter });
expect(consoleWarnCalled).toBe(true);
console.warn = defaultConsoleWarn;
},
});
});

it('should throw an error when providing invalid argument type as form to getFormValues', () => {
utils.test({
action: (cy: any) => cy.get('[type="submit"]'),
test: (form: HTMLFormElement, submitter: any, search: any) => {
let isThrown = false;
try {
getFormValues(0 as unknown as HTMLFormElement, {});
} catch {
isThrown = true;
}

expect(isThrown).toBe(true);
},
});
});

it('should throw an error when providing null as form to getFormValues', () => {
utils.test({
action: (cy: any) => cy.get('[type="submit"]'),
test: (form: HTMLFormElement, submitter: any, search: any) => {
let isThrown = false;
try {
getFormValues(null as unknown as HTMLFormElement, {});
} catch {
isThrown = true;
}

expect(isThrown).toBe(true);
},
});
});

it('should throw an error when providing a different element type as form to getFormValues', () => {
utils.test({
action: (cy: any) => cy.get('[type="submit"]'),
test: (form: HTMLFormElement, submitter: any, search: any) => {
let isThrown = false;
try {
getFormValues(document.body as unknown as HTMLFormElement, {});
} catch {
isThrown = true;
}

expect(isThrown).toBe(true);
},
});
});

it('should throw an error when providing invalid argument type as form to setFormValues', () => {
utils.test({
action: (cy: any) => cy.get('[type="submit"]'),
test: (form: HTMLFormElement, submitter: any, search: any) => {
let isThrown = false;
try {
setFormValues(0 as unknown as HTMLFormElement, {});
} catch {
isThrown = true;
}

expect(isThrown).toBe(true);
},
});
});

it('should throw an error when providing null as form to setFormValues', () => {
utils.test({
action: (cy: any) => cy.get('[type="submit"]'),
test: (form: HTMLFormElement, submitter: any, search: any) => {
let isThrown = false;
try {
setFormValues(null as unknown as HTMLFormElement, {});
} catch {
isThrown = true;
}

expect(isThrown).toBe(true);
},
});
});

it('should throw an error when providing a different element type as form to setFormValues', () => {
utils.test({
action: (cy: any) => cy.get('[type="submit"]'),
test: (form: HTMLFormElement, submitter: any, search: any) => {
let isThrown = false;
try {
setFormValues(document.body as unknown as HTMLFormElement, {});
} catch {
isThrown = true;
}

expect(isThrown).toBe(true);
},
});
});

it('should throw an error when providing invalid argument type as values to setFormValues', () => {
utils.test({
action: (cy: any) => cy.get('[type="submit"]'),
test: (form: HTMLFormElement, submitter: any, search: any) => {
let isThrown = false;
try {
setFormValues(form, 0);
} catch {
isThrown = true;
}

expect(isThrown).toBe(true);
},
});
});

it('should not throw an error when providing null as form to setFormValues', () => {
utils.test({
action: (cy: any) => cy.get('[type="submit"]'),
test: (form: HTMLFormElement, submitter: any, search: any) => {
let isThrown = false;
try {
setFormValues(form, null);
} catch (e) {
isThrown = true;
}

expect(isThrown).toBe(false);
},
});
});

it('should throw an error when providing undefined as form to setFormValues', () => {
utils.test({
action: (cy: any) => cy.get('[type="submit"]'),
test: (form: HTMLFormElement, submitter: any, search: any) => {
let isThrown = false;
try {
setFormValues(form, undefined);
} catch (e) {
isThrown = true;
}

expect(isThrown).toBe(true);
},
});
});
})

describe('blank', () => { describe('blank', () => {
beforeEach(utils.setup(` beforeEach(utils.setup(`
<!DOCTYPE html> <!DOCTYPE html>


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

@@ -0,0 +1,265 @@
import { getFormValues, setFormValues } from '../../src';
import * as utils from '../utils'

describe('month', () => {
describe('basic', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Month/Basic</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="month" name="hello" value="2003-05" />
</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-05',
},
});
});
})

describe('disabled', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Month/Disabled</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="month" name="hello" value="2003-05"
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>Month/Outside</title>
</head>
<body>
<form id="form">
<button type="submit">Submit</button>
</form>
<label>
<span>Hello</span>
<input type="month" name="hello" value="2003-05" 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-05',
},
});
});
});

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-05"
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-05',
},
});
});
});

describe('programmatic value setting', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Month/Programmatic Value Setting</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="month" 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: '2003-05', })
},
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-05',
},
});
});
});

describe('duplicate', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Month/Duplicate</title>
</head>
<body>
<form>
<label>
<span>Hello 1</span>
<input id="hello1" type="month" name="hello" value="2003-05"/>
</label>
<label>
<span>Hello 2</span>
<input id="hello2" type="month" name="hello" value="2003-06"/>
</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: ['2003-05', '2003-06'],
},
});
});

it('should set both values', () => {
utils.test({
preAction: (form: HTMLFormElement) => {
setFormValues(form, {
hello: ['2003-04', '2003-02'],
})
},
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', '2003-02'],
},
});
});
});
})

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

@@ -0,0 +1,265 @@
import { getFormValues, setFormValues } from '../../src';
import * as utils from '../utils'

describe('number', () => {
describe('basic', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Number/Basic</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="number" name="hello" min="0" max="10" value="5" />
</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, forceNumberValues: true, }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: '5',
},
});
});
})

describe('disabled', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Number/Disabled</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="number" name="hello" min="0" max="10" value="5"
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>Number/Outside</title>
</head>
<body>
<form id="form">
<button type="submit">Submit</button>
</form>
<label>
<span>Hello</span>
<input type="number" name="hello" min="0" max="10" value="5" 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: '5',
},
});
});
});

describe('readonly', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Number/Readonly</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="number" name="hello" min="0" max="10" value="5"
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: '5',
},
});
});
});

describe('programmatic value setting', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Number/Programmatic Value Setting</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="number" 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: 5, })
},
test: (form: HTMLFormElement, submitter: any, search: any) => {
const before = utils.makeSearchParams(getFormValues(form, { submitter, forceNumberValues: true, }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: '5',
},
});
});
});

describe('duplicate', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Number/Duplicate</title>
</head>
<body>
<form>
<label>
<span>Hello 1</span>
<input id="hello1" type="number" name="hello" min="0" max="10" value="5" />
</label>
<label>
<span>Hello 2</span>
<input id="hello2" type="number" name="hello" min="0" max="10" value="7" />
</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, forceNumberValues: true, }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: ['5', '7'],
},
});
});

it('should set both values', () => {
utils.test({
preAction: (form: HTMLFormElement) => {
setFormValues(form, {
hello: [4, 2],
})
},
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: ['4', '2'],
},
});
});
});
})

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

@@ -0,0 +1,265 @@
import { getFormValues, setFormValues } from '../../src';
import * as utils from '../utils'

describe('range', () => {
describe('basic', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Range/Basic</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="range" name="hello" min="0" max="10" value="5" />
</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, forceNumberValues: true, }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: '5',
},
});
});
})

describe('disabled', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Range/Disabled</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="range" name="hello" min="0" max="10" value="5"
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>Range/Outside</title>
</head>
<body>
<form id="form">
<button type="submit">Submit</button>
</form>
<label>
<span>Hello</span>
<input type="range" name="hello" min="0" max="10" value="5" 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: '5',
},
});
});
});

describe('readonly', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Range/Readonly</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="range" name="hello" min="0" max="10" value="5"
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: '5',
},
});
});
});

describe('programmatic value setting', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Range/Programmatic Value Setting</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="range" 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: 5, })
},
test: (form: HTMLFormElement, submitter: any, search: any) => {
const before = utils.makeSearchParams(getFormValues(form, { submitter, forceNumberValues: true, }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: '5',
},
});
});
});

describe('duplicate', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Range/Duplicate</title>
</head>
<body>
<form>
<label>
<span>Hello 1</span>
<input id="hello1" type="range" name="hello" min="0" max="10" value="5" />
</label>
<label>
<span>Hello 2</span>
<input id="hello2" type="range" name="hello" min="0" max="10" value="7" />
</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, forceNumberValues: true, }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: ['5', '7'],
},
});
});

it('should set both values', () => {
utils.test({
preAction: (form: HTMLFormElement) => {
setFormValues(form, {
hello: [4, 2],
})
},
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: ['4', '2'],
},
});
});
});
})

+ 1
- 85
cypress/integration/text.test.ts View File

@@ -1,4 +1,4 @@
import { getFormValues, LineEnding, setFormValues } from '../../src';
import { getFormValues, setFormValues } from '../../src';
import * as utils from '../utils' import * as utils from '../utils'


describe('text', () => { describe('text', () => {
@@ -199,90 +199,6 @@ describe('text', () => {
}); });
}); });


describe('textarea', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Text/Textarea</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<textarea name="hello"></textarea>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should read LF line breaks', () => {
utils.test({
action: (cy: any) => {
cy.get('[name="hello"]')
.type('Hi\nHello', { parseSpecialCharSequences: false })
return cy.get('[type="submit"]')
},
test: (form: HTMLFormElement, submitter: any, search: any) => {
const before = utils.makeSearchParams(getFormValues(form, { submitter, lineEndings: LineEnding.LF }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: 'Hi\nHello',
},
});
});

it('should read CR line breaks', () => {
utils.test({
action: (cy: any) => {
cy.get('[name="hello"]')
.type('Hi\rHello', { parseSpecialCharSequences: false })
return cy.get('[type="submit"]')
},
test: (form: HTMLFormElement, submitter: any, search: any) => {
const before = utils.makeSearchParams(getFormValues(form, { submitter, lineEndings: LineEnding.CR }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: 'Hi\rHello',
},
});
});

it('should read CRLF line breaks', () => {
utils.test({
action: (cy: any) => {
cy.get('[name="hello"]')
.type('Hi\r\nHello', { parseSpecialCharSequences: false })
return cy.get('[type="submit"]')
},
test: (form: HTMLFormElement, submitter: any, search: any) => {
const before = utils.makeSearchParams(getFormValues(form, { submitter, lineEndings: LineEnding.CRLF }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: 'Hi\r\nHello',
},
});
});
});

describe('duplicate', () => { describe('duplicate', () => {
beforeEach(utils.setup(` beforeEach(utils.setup(`
<!DOCTYPE html> <!DOCTYPE html>


+ 349
- 0
cypress/integration/textarea.test.ts View File

@@ -0,0 +1,349 @@
import { getFormValues, LineEnding, setFormValues } from '../../src';
import * as utils from '../utils'

describe('textarea', () => {
describe('basic', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Textarea/Basic</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<textarea name="hello">Hi</textarea>
</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: 'Hi',
},
});
});
})

describe('disabled', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Textarea/Disabled</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<textarea
name="hello"
disabled
>Hi</textarea>
</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>Textarea/Outside</title>
</head>
<body>
<form id="form">
<button type="submit">Submit</button>
</form>
<label>
<span>Hello</span>
<textarea name="hello" form="form">Hi</textarea>
</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: 'Hi',
},
});
});
});

describe('readonly', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Textarea/Readonly</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<textarea
name="hello"
readonly
>Hi</textarea>
</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: 'Hi',
},
});
});
});

describe('programmatic value setting', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Textarea/Programmatic Value Setting</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<textarea name="hello"></textarea>
</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: 'Hi', })
},
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: 'Hi',
},
});
});
});

describe('lines', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Textarea/Lines</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<textarea name="hello"></textarea>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should read LF line breaks', () => {
utils.test({
action: (cy: any) => {
cy.get('[name="hello"]')
.type('Hi\nHello', { parseSpecialCharSequences: false })
return cy.get('[type="submit"]')
},
test: (form: HTMLFormElement, submitter: any, search: any) => {
const before = utils.makeSearchParams(getFormValues(form, { submitter, lineEndings: LineEnding.LF }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: 'Hi\nHello',
},
});
});

it('should read CR line breaks', () => {
utils.test({
action: (cy: any) => {
cy.get('[name="hello"]')
.type('Hi\rHello', { parseSpecialCharSequences: false })
return cy.get('[type="submit"]')
},
test: (form: HTMLFormElement, submitter: any, search: any) => {
const before = utils.makeSearchParams(getFormValues(form, { submitter, lineEndings: LineEnding.CR }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: 'Hi\rHello',
},
});
});

it('should read CRLF line breaks', () => {
utils.test({
action: (cy: any) => {
cy.get('[name="hello"]')
.type('Hi\r\nHello', { parseSpecialCharSequences: false })
return cy.get('[type="submit"]')
},
test: (form: HTMLFormElement, submitter: any, search: any) => {
const before = utils.makeSearchParams(getFormValues(form, { submitter, lineEndings: LineEnding.CRLF }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: 'Hi\r\nHello',
},
});
});
});

describe('duplicate', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Textarea/Duplicate</title>
</head>
<body>
<form>
<label>
<span>Hello 1</span>
<textarea id="hello1" name="hello">value</textarea>
</label>
<label>
<span>Hello 2</span>
<textarea id="hello2" name="hello">another value</textarea>
</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: ['value', 'another value'],
},
});
});

it('should set both values', () => {
utils.test({
preAction: (form: HTMLFormElement) => {
setFormValues(form, {
hello: ['new value 1', 'another value 2'],
})
},
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: ['new value 1', 'another value 2'],
},
});
});
});
})

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

@@ -0,0 +1,265 @@
import { getFormValues, setFormValues } from '../../src';
import * as utils from '../utils'

describe('week', () => {
describe('basic', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Week/Basic</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="week" name="hello" value="2003-W25" />
</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-W25',
},
});
});
})

describe('disabled', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Week/Disabled</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="week" name="hello" value="2003-W25"
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>Week/Outside</title>
</head>
<body>
<form id="form">
<button type="submit">Submit</button>
</form>
<label>
<span>Hello</span>
<input type="week" name="hello" value="2003-W25" 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-W25',
},
});
});
});

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-W25"
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-W25',
},
});
});
});

describe('programmatic value setting', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Week/Programmatic Value Setting</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="week" 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: '2003-W25', })
},
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-W25',
},
});
});
});

describe('duplicate', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Week/Duplicate</title>
</head>
<body>
<form>
<label>
<span>Hello 1</span>
<input id="hello1" type="week" name="hello" value="2003-W25"/>
</label>
<label>
<span>Hello 2</span>
<input id="hello2" type="week" name="hello" value="2003-W30"/>
</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: ['2003-W25', '2003-W30'],
},
});
});

it('should set both values', () => {
utils.test({
preAction: (form: HTMLFormElement) => {
setFormValues(form, {
hello: ['2003-W40', '2003-W50'],
})
},
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-W40', '2003-W50'],
},
});
});
});
})

+ 1
- 1
cypress/utils/index.ts View File

@@ -106,7 +106,7 @@ export const makeSearchParams = (beforeValues: Record<string, unknown> | string)
const theValue = !Array.isArray(value) ? [value] : value const theValue = !Array.isArray(value) ? [value] : value
theValue.forEach(v => { theValue.forEach(v => {
let processedLineBreaks = v let processedLineBreaks = v
if (typeof cy !== 'undefined') {
if (typeof cy !== 'undefined' && typeof v === 'string') {
let forceLineBreaks: string; let forceLineBreaks: string;


// TODO make this foolproof // TODO make this foolproof


+ 1
- 1
package.json View File

@@ -60,7 +60,7 @@
"dev": "pridepack dev", "dev": "pridepack dev",
"test:jsdom": "vitest", "test:jsdom": "vitest",
"test:cypress": "cypress run", "test:cypress": "cypress run",
"test:cpanel": "cypress open"
"cypress:cpanel": "cypress open"
}, },
"private": false, "private": false,
"description": "Extract and set form values through the DOM.", "description": "Extract and set form values through the DOM.",


+ 73
- 43
src/index.ts View File

@@ -16,11 +16,6 @@ export enum LineEnding {
CRLF = '\r\n', CRLF = '\r\n',
} }


/**
* Type for a placeholder object value.
*/
type PlaceholderObject = Record<string, unknown>

/** /**
* Tag name for the `<input>` element. * Tag name for the `<input>` element.
*/ */
@@ -96,36 +91,36 @@ const getTextAreaFieldValue = (
* Sets the value of a `<textarea>` element. * Sets the value of a `<textarea>` element.
* @param textareaEl - The element. * @param textareaEl - The element.
* @param value - Value of the textarea element. * @param value - Value of the textarea 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 setTextAreaFieldValue = ( const setTextAreaFieldValue = (
textareaEl: HTMLTextAreaElement, textareaEl: HTMLTextAreaElement,
value: unknown, value: unknown,
nthOfName: number,
totalOfName: number,
) => { ) => {
if (Array.isArray(value) && totalOfName > 1) {
// eslint-disable-next-line no-param-reassign
textareaEl.value = value[nthOfName];
return;
}

// eslint-disable-next-line no-param-reassign // eslint-disable-next-line no-param-reassign
textareaEl.value = value as string; textareaEl.value = value as string;
}; };


/**
* Options for getting a `<select>` element field value.
*/
type GetSelectValueOptions = PlaceholderObject

/** /**
* Gets the value of a `<select>` element. * Gets the value of a `<select>` element.
* @param selectEl - The element. * @param selectEl - The element.
* @param options - The options.
* @returns Value of the select element. * @returns Value of the select element.
*/ */
const getSelectFieldValue = ( const getSelectFieldValue = (
selectEl: HTMLSelectElement, selectEl: HTMLSelectElement,
options = {} as GetSelectValueOptions,
) => { ) => {
if (selectEl.multiple) { if (selectEl.multiple) {
return Array.from(selectEl.options).filter((o) => o.selected).map((o) => o.value); return Array.from(selectEl.options).filter((o) => o.selected).map((o) => o.value);
} }
if (typeof options !== 'object' || options === null) {
throw new TypeError('Invalid options for getSelectFieldValue().');
}
return selectEl.value; return selectEl.value;
}; };


@@ -163,27 +158,15 @@ const INPUT_TYPE_RADIO = 'radio' as const;
*/ */
export type HTMLInputRadioElement = HTMLInputElement & { type: typeof INPUT_TYPE_RADIO } export type HTMLInputRadioElement = HTMLInputElement & { type: typeof INPUT_TYPE_RADIO }


/**
* Options for getting an `<input type="radio">` element field value.
*/
type GetInputRadioFieldValueOptions = PlaceholderObject

/** /**
* Gets the value of an `<input type="radio">` element. * Gets the value of an `<input type="radio">` element.
* @param inputEl - The element. * @param inputEl - The element.
* @param options - The options.
* @returns Value of the input element. * @returns Value of the input element.
*/ */
const getInputRadioFieldValue = (
inputEl: HTMLInputRadioElement,
options = {} as GetInputRadioFieldValueOptions,
) => {
const getInputRadioFieldValue = (inputEl: HTMLInputRadioElement) => {
if (inputEl.checked) { if (inputEl.checked) {
return inputEl.value; return inputEl.value;
} }
if (typeof options !== 'object' || options === null) {
throw new TypeError('Invalid options for getInputRadioFieldValue().');
}
return null; return null;
}; };


@@ -411,13 +394,18 @@ const getInputNumericFieldValue = (
* Sets the value of an `<input type="number">` element. * Sets the value of an `<input type="number">` 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 setInputNumericFieldValue = ( const setInputNumericFieldValue = (
inputEl: HTMLInputNumericElement, inputEl: HTMLInputNumericElement,
value: unknown, value: unknown,
nthOfName: number,
totalOfName: number,
) => { ) => {
const valueArray = Array.isArray(value) ? value : [value];
// eslint-disable-next-line no-param-reassign // eslint-disable-next-line no-param-reassign
inputEl.valueAsNumber = Number(value);
inputEl.valueAsNumber = Number(valueArray[totalOfName > 1 ? nthOfName : 0]);
}; };


/** /**
@@ -520,10 +508,39 @@ const setInputDateLikeFieldValue = (
type GetInputFieldValueOptions type GetInputFieldValueOptions
= GetInputCheckboxFieldValueOptions = GetInputCheckboxFieldValueOptions
& GetInputFileFieldValueOptions & GetInputFileFieldValueOptions
& GetInputRadioFieldValueOptions
& GetInputNumberFieldValueOptions & GetInputNumberFieldValueOptions
& GetInputDateFieldValueOptions & GetInputDateFieldValueOptions


/**
* Value of the `type` attribute for `<input>` elements considered as text fields.
*/
const INPUT_TYPE_TEXT = 'text' as const;

/**
* Value of the `type` attribute for `<input>` elements considered as email fields.
*/
const INPUT_TYPE_EMAIL = 'email' as const;

/**
* Value of the `type` attribute for `<input>` elements considered as telephone fields.
*/
const INPUT_TYPE_TEL = 'tel' as const;

/**
* Value of the `type` attribute for `<input>` elements considered as password fields.
*/
const INPUT_TYPE_PASSWORD = 'password' as const;

/**
* Value of the `type` attribute for `<input>` elements considered as hidden fields.
*/
const INPUT_TYPE_HIDDEN = 'hidden' as const;

/**
* Value of the `type` attribute for `<input>` elements considered as color pickers.
*/
const INPUT_TYPE_COLOR = 'color' as const;

/** /**
* Gets the value of an `<input>` element. * Gets the value of an `<input>` element.
* @param inputEl - The element. * @param inputEl - The element.
@@ -538,7 +555,7 @@ const getInputFieldValue = (
case INPUT_TYPE_CHECKBOX: case INPUT_TYPE_CHECKBOX:
return getInputCheckboxFieldValue(inputEl as HTMLInputCheckboxElement, options); return getInputCheckboxFieldValue(inputEl as HTMLInputCheckboxElement, options);
case INPUT_TYPE_RADIO: case INPUT_TYPE_RADIO:
return getInputRadioFieldValue(inputEl as HTMLInputRadioElement, options);
return getInputRadioFieldValue(inputEl as HTMLInputRadioElement);
case INPUT_TYPE_FILE: case INPUT_TYPE_FILE:
return getInputFileFieldValue(inputEl as HTMLInputFileElement, options); return getInputFileFieldValue(inputEl as HTMLInputFileElement, options);
case INPUT_TYPE_NUMBER: case INPUT_TYPE_NUMBER:
@@ -547,10 +564,18 @@ const getInputFieldValue = (
case INPUT_TYPE_DATE: case INPUT_TYPE_DATE:
case INPUT_TYPE_DATETIME_LOCAL: case INPUT_TYPE_DATETIME_LOCAL:
return getInputDateLikeFieldValue(inputEl as HTMLInputDateLikeElement, options); return getInputDateLikeFieldValue(inputEl as HTMLInputDateLikeElement, options);
case INPUT_TYPE_TEXT:
case INPUT_TYPE_EMAIL:
case INPUT_TYPE_TEL:
case INPUT_TYPE_PASSWORD:
case INPUT_TYPE_HIDDEN:
case INPUT_TYPE_COLOR:
default: default:
break; break;
} }
return inputEl.value;

// force return `null` for custom elements supporting setting values.
return inputEl.value ?? null;
}; };


/** /**
@@ -580,7 +605,12 @@ const setInputFieldValue = (
return; return;
case INPUT_TYPE_NUMBER: case INPUT_TYPE_NUMBER:
case INPUT_TYPE_RANGE: case INPUT_TYPE_RANGE:
setInputNumericFieldValue(inputEl as HTMLInputNumericElement, value);
setInputNumericFieldValue(
inputEl as HTMLInputNumericElement,
value,
nthOfName,
totalOfName,
);
return; return;
case INPUT_TYPE_DATE: case INPUT_TYPE_DATE:
case INPUT_TYPE_DATETIME_LOCAL: case INPUT_TYPE_DATETIME_LOCAL:
@@ -591,6 +621,12 @@ const setInputFieldValue = (
totalOfName, totalOfName,
); );
return; return;
case INPUT_TYPE_TEXT:
case INPUT_TYPE_EMAIL:
case INPUT_TYPE_TEL:
case INPUT_TYPE_PASSWORD:
case INPUT_TYPE_HIDDEN:
case INPUT_TYPE_COLOR:
default: default:
break; break;
} }
@@ -610,7 +646,6 @@ const setInputFieldValue = (
*/ */
type GetFieldValueOptions type GetFieldValueOptions
= GetTextAreaValueOptions = GetTextAreaValueOptions
& GetSelectValueOptions
& GetInputFieldValueOptions & GetInputFieldValueOptions


/** /**
@@ -630,15 +665,13 @@ export const getFieldValue = (el: HTMLElement, options = {} as GetFieldValueOpti
case TAG_NAME_TEXTAREA: case TAG_NAME_TEXTAREA:
return getTextAreaFieldValue(el as HTMLTextAreaElement, options); return getTextAreaFieldValue(el as HTMLTextAreaElement, options);
case TAG_NAME_SELECT: case TAG_NAME_SELECT:
return getSelectFieldValue(el as HTMLSelectElement, options);
return getSelectFieldValue(el as HTMLSelectElement);
case TAG_NAME_INPUT: case TAG_NAME_INPUT:
return getInputFieldValue(el as HTMLInputElement, options);
default: default:
break; break;
} }


const fieldEl = el as HTMLElement & { value?: unknown };
return fieldEl.value || null;
return getInputFieldValue(el as HTMLInputElement, options);
}; };


/** /**
@@ -656,20 +689,17 @@ const setFieldValue = (
) => { ) => {
switch (el.tagName) { switch (el.tagName) {
case TAG_NAME_TEXTAREA: case TAG_NAME_TEXTAREA:
setTextAreaFieldValue(el as HTMLTextAreaElement, value);
setTextAreaFieldValue(el as HTMLTextAreaElement, value, nthOfName, totalOfName);
return; return;
case TAG_NAME_SELECT: case TAG_NAME_SELECT:
setSelectFieldValue(el as HTMLSelectElement, value); setSelectFieldValue(el as HTMLSelectElement, value);
return; return;
case TAG_NAME_INPUT: case TAG_NAME_INPUT:
setInputFieldValue(el as HTMLInputElement, value, nthOfName, totalOfName);
return;
default: default:
break; break;
} }


const fieldEl = el as HTMLElement & { value?: unknown };
fieldEl.value = value;
setInputFieldValue(el as HTMLInputElement, value, nthOfName, totalOfName);
}; };


/** /**


Write Preview
Loading…
Cancel
Save