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

Cover all input types 

Include all input types for testing.
master
TheoryOfNekomata 1 year ago
parent
cb5872e28f
commit
26ec3a2f9c
11 changed files with 2108 additions and 17 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +266
    -0
      cypress/integration/color.test.ts
  2. +34
    -1
      cypress/integration/core.test.ts
  3. +265
    -0
      cypress/integration/email.test.ts
  4. +282
    -0
      cypress/integration/hidden.test.ts
  5. +265
    -0
      cypress/integration/password.test.ts
  6. +323
    -0
      cypress/integration/search.test.ts
  7. +265
    -0
      cypress/integration/tel.test.ts
  8. +59
    -1
      cypress/integration/text.test.ts
  9. +265
    -0
      cypress/integration/url.test.ts
  10. +7
    -0
      cypress/utils/index.ts
  11. +77
    -15
      src/index.ts

+ 266
- 0
cypress/integration/color.test.ts View File

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

describe('color', () => {
describe('basic', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Color/Basic</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="color" name="hello" value="#c0ffee" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: '#c0ffee',
},
});
});
});

describe('disabled', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Color/Disabled</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="color" name="hello" value="#c0ffee"
disabled
/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have blank form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Color/Outside</title>
</head>
<body>
<form id="form">
<button type="submit">Submit</button>
</form>
<label>
<span>Hello</span>
<input type="color" name="hello" value="#c0ffee" form="form" />
</label>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: '#c0ffee',
},
});
});
});

describe('readonly', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Color/Readonly</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="color" name="hello" value="#c0ffee"
readonly
/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: '#c0ffee',
},
});
});
});

describe('programmatic value setting', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Color/Programmatic Value Setting</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="color" name="hello" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should have form values set', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, { hello: '#c0ffee', })
},
onSubmitted: (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: '#c0ffee',
},
});
});
});

describe('duplicate', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Color/Duplicate</title>
</head>
<body>
<form>
<label>
<span>Hello 1</span>
<input id="hello1" type="color" value="#c0ffee" name="hello"/>
</label>
<label>
<span>Hello 2</span>
<input id="hello2" type="color" value="#696969" name="hello"/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should get both values', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: ['#c0ffee', '#696969'],
},
});
});

it('should set both values', () => {
utils.test({
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, {
// JSDOM does not support 3-digit hex colors
hello: ['#333333', '#aaccee'],
})
},
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: ['#333333', '#aaccee'],
},
});
});
});
})

+ 34
- 1
cypress/integration/core.test.ts View File

@@ -14,7 +14,7 @@ describe('misc', () => {
<html lang="en-PH"> <html lang="en-PH">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Misc/Blank</title>
<title>Misc/Core</title>
</head> </head>
<body> <body>
<form> <form>
@@ -185,6 +185,39 @@ describe('misc', () => {
}); });
}); });


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

it('should have blank form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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('utilities', () => { describe('utilities', () => {
beforeEach(utils.setup(` beforeEach(utils.setup(`
<!DOCTYPE html> <!DOCTYPE html>


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

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

describe('email', () => {
describe('basic', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Email/Basic</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="email" name="hello" value="email@example.com" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: 'email@example.com',
},
});
});
});

describe('disabled', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Email/Disabled</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="email" name="hello" value="email@example.com"
disabled
/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have blank form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Email/Outside</title>
</head>
<body>
<form id="form">
<button type="submit">Submit</button>
</form>
<label>
<span>Hello</span>
<input type="email" name="hello" value="email@example.com" form="form" />
</label>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: 'email@example.com',
},
});
});
});

describe('readonly', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Email/Readonly</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="email" name="hello" value="email@example.com"
readonly
/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: 'email@example.com',
},
});
});
});

describe('programmatic value setting', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Email/Programmatic Value Setting</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="email" name="hello" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should have form values set', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, { hello: 'email@example.com', })
},
onSubmitted: (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: 'email@example.com',
},
});
});
});

describe('duplicate', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Email/Duplicate</title>
</head>
<body>
<form>
<label>
<span>Hello 1</span>
<input id="hello1" type="email" name="hello" value="email@example.com"/>
</label>
<label>
<span>Hello 2</span>
<input id="hello2" type="email" name="hello" value="peppy@example.com"/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should get both values', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: ['email@example.com', 'peppy@example.com'],
},
});
});

it('should set both values', () => {
utils.test({
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, {
hello: ['poppy@example.com', 'pumpkin@example.com'],
})
},
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: ['poppy@example.com', 'pumpkin@example.com'],
},
});
});
});
})

+ 282
- 0
cypress/integration/hidden.test.ts View File

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

describe('hidden', () => {
describe('basic', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Hidden/Basic</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="hidden" name="hello" value="Hi" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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('charset', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Hidden/Charset</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="hidden" name="_charset_" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have extra value for character set', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
const before = utils.makeSearchParams(getFormValues(form, { submitter, includeCharset: true, }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
_charset_: 'UTF-8',
},
});
});

it('should not be able to set extra value for character set', () => {
utils.test({
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, { _charset_: 'Shift-JIS' });
},
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
const before = utils.makeSearchParams(getFormValues(form, { submitter, includeCharset: true, }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
_charset_: 'UTF-8',
},
});
});
});

describe('disabled', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Hidden/Disabled</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="hidden" name="hello" value="Hi"
disabled
/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have blank form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Hidden/Outside</title>
</head>
<body>
<form id="form">
<button type="submit">Submit</button>
</form>
<label>
<span>Hello</span>
<input type="hidden" name="hello" value="Hi" form="form" />
</label>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Hidden/Programmatic Value Setting</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="hidden" name="hello" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should have form values set', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, { hello: 'Hi', })
},
onSubmitted: (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('duplicate', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Hidden/Duplicate</title>
</head>
<body>
<form>
<label>
<span>Hello 1</span>
<input id="hello1" type="hidden" value="value" name="hello"/>
</label>
<label>
<span>Hello 2</span>
<input id="hello2" type="hidden" value="another value" name="hello"/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should get both values', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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({
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, {
hello: ['new value 1', 'another value 2'],
})
},
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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/password.test.ts View File

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

describe('password', () => {
describe('basic', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Password/Basic</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="password" name="hello" value="Hi" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Password/Disabled</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="password" name="hello" value="Hi"
disabled
/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have blank form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Password/Outside</title>
</head>
<body>
<form id="form">
<button type="submit">Submit</button>
</form>
<label>
<span>Hello</span>
<input type="password" name="hello" value="Hi" form="form" />
</label>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Password/Readonly</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="password" name="hello" value="Hi"
readonly
/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Password/Programmatic Value Setting</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="password" name="hello" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should have form values set', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, { hello: 'Hi', })
},
onSubmitted: (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('duplicate', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Password/Duplicate</title>
</head>
<body>
<form>
<label>
<span>Hello 1</span>
<input id="hello1" type="password" value="value" name="hello"/>
</label>
<label>
<span>Hello 2</span>
<input id="hello2" type="password" value="another value" name="hello"/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should get both values', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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({
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, {
hello: ['new value 1', 'another value 2'],
})
},
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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'],
},
});
});
});
})

+ 323
- 0
cypress/integration/search.test.ts View File

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

describe('search', () => {
describe('basic', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Search/Basic</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="search" name="hello" value="Hi" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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('dirname', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Search/Dirname</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="search" name="hello" value="Hi" dirname="hello.dir" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have extra value for directionality', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
const before = utils.makeSearchParams(getFormValues(form, { submitter, includeDirectionality: true, }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: 'Hi',
'hello.dir': 'ltr',
},
});
});

it('should support other directionality', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
document.getElementsByTagName('input')[0].style.direction = 'rtl';
const before = utils.makeSearchParams(getFormValues(form, { submitter, includeDirectionality: true, }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: 'Hi',
'hello.dir': 'rtl',
},
});
});
});

describe('disabled', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Search/Disabled</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="search" name="hello" value="Hi"
disabled
/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have blank form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Search/Outside</title>
</head>
<body>
<form id="form">
<button type="submit">Submit</button>
</form>
<label>
<span>Hello</span>
<input type="search" name="hello" value="Hi" form="form" />
</label>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Search/Readonly</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="search" name="hello" value="Hi"
readonly
/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Search/Programmatic Value Setting</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="search" name="hello" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should have form values set', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, { hello: 'Hi', })
},
onSubmitted: (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('duplicate', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Search/Duplicate</title>
</head>
<body>
<form>
<label>
<span>Hello 1</span>
<input id="hello1" type="search" value="value" name="hello"/>
</label>
<label>
<span>Hello 2</span>
<input id="hello2" type="search" value="another value" name="hello"/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should get both values', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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({
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, {
hello: ['new value 1', 'another value 2'],
})
},
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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/tel.test.ts View File

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

describe('tel', () => {
describe('basic', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Tel/Basic</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="tel" name="hello" value="Hi" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Tel/Disabled</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="tel" name="hello" value="Hi"
disabled
/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have blank form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Tel/Outside</title>
</head>
<body>
<form id="form">
<button type="submit">Submit</button>
</form>
<label>
<span>Hello</span>
<input type="tel" name="hello" value="Hi" form="form" />
</label>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Tel/Readonly</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="tel" name="hello" value="Hi"
readonly
/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>Tel/Programmatic Value Setting</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="tel" name="hello" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should have form values set', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, { hello: 'Hi', })
},
onSubmitted: (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('duplicate', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>Tel/Duplicate</title>
</head>
<body>
<form>
<label>
<span>Hello 1</span>
<input id="hello1" type="tel" value="value" name="hello"/>
</label>
<label>
<span>Hello 2</span>
<input id="hello2" type="tel" value="another value" name="hello"/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should get both values', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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({
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, {
hello: ['new value 1', 'another value 2'],
})
},
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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'],
},
});
});
});
})

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

@@ -38,7 +38,65 @@ describe('text', () => {
}, },
}); });
}); });
})
});

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

it('should have extra value for directionality', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
const before = utils.makeSearchParams(getFormValues(form, { submitter, includeDirectionality: true, }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: 'Hi',
'hello.dir': 'ltr',
},
});
});

it('should support other directionality', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
document.getElementsByTagName('input')[0].style.direction = 'rtl';
const before = utils.makeSearchParams(getFormValues(form, { submitter, includeDirectionality: true, }))
.toString();
const after = utils.makeSearchParams(search)
.toString();
expect(before)
.toEqual(after);
},
expectedStaticValue: {
hello: 'Hi',
'hello.dir': 'rtl',
},
});
});
});


describe('disabled', () => { describe('disabled', () => {
beforeEach(utils.setup(` beforeEach(utils.setup(`


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

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

describe('url', () => {
describe('basic', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>URL/Basic</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="url" name="hello" value="https://www.example.com" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: 'https://www.example.com',
},
});
});
});

describe('disabled', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>URL/Disabled</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="url" name="hello" value="https://www.example.com"
disabled
/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have blank form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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>URL/Outside</title>
</head>
<body>
<form id="form">
<button type="submit">Submit</button>
</form>
<label>
<span>Hello</span>
<input type="url" name="hello" value="https://www.example.com" form="form" />
</label>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: 'https://www.example.com',
},
});
});
});

describe('readonly', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>URL/Readonly</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input
type="url" name="hello" value="https://www.example.com"
readonly
/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`))

it('should have single form value', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: 'https://www.example.com',
},
});
});
});

describe('programmatic value setting', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>URL/Programmatic Value Setting</title>
</head>
<body>
<form>
<label>
<span>Hello</span>
<input type="url" name="hello" />
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should have form values set', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, { hello: 'https://www.example.com', })
},
onSubmitted: (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: 'https://www.example.com',
},
});
});
});

describe('duplicate', () => {
beforeEach(utils.setup(`
<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>URL/Duplicate</title>
</head>
<body>
<form>
<label>
<span>Hello 1</span>
<input id="hello1" type="url" value="https://www.example.com" name="hello"/>
</label>
<label>
<span>Hello 2</span>
<input id="hello2" type="url" value="https://acme.example.com" name="hello"/>
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
`));

it('should get both values', () => {
utils.test({
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: ['https://www.example.com', 'https://acme.example.com'],
},
});
});

it('should set both values', () => {
utils.test({
onLoaded: (form: HTMLFormElement) => {
setFormValues(form, {
hello: ['https://foo.example.com', 'https://bar.example.com/context'],
})
},
actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
onSubmitted: (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: ['https://foo.example.com', 'https://bar.example.com/context'],
},
});
});
});
})

+ 7
- 0
cypress/utils/index.ts View File

@@ -110,6 +110,13 @@ 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 v === 'object' && v.__proto__.constructor.name === 'TextualValueString') {
beforeSearchParams.append(key, v);
const vStr = v as Record<string, string>;
beforeSearchParams.append(vStr.dirName, vStr.dir);
return;
}

if (typeof cy !== 'undefined' && typeof v === 'string') { if (typeof cy !== 'undefined' && typeof v === 'string') {
let forceLineBreaks: string; let forceLineBreaks: string;




+ 77
- 15
src/index.ts View File

@@ -603,16 +603,6 @@ const setInputDateLikeFieldValue = (
.slice(0, DATE_FORMAT_ISO_MONTH.length); // remove extra 'Z' suffix .slice(0, DATE_FORMAT_ISO_MONTH.length); // remove extra 'Z' suffix
} }
}; };

/**
* Options for getting an `<input>` element field value.
*/
type GetInputFieldValueOptions
= GetInputCheckboxFieldValueOptions
& GetInputFileFieldValueOptions
& GetInputNumberFieldValueOptions
& GetInputDateFieldValueOptions

/** /**
* Value of the `type` attribute for `<input>` elements considered as text fields. * Value of the `type` attribute for `<input>` elements considered as text fields.
*/ */
@@ -640,16 +630,50 @@ export type HTMLInputTextualElement
= HTMLInputTextElement = HTMLInputTextElement
| HTMLInputSearchElement | HTMLInputSearchElement


/**
* Options for getting a textual `<input>` element field value.
*/
type GetInputTextualFieldValueOptions = {
/**
* Should we include the directionality of the value for
* `<input type="search">` and `<input type="text">`?
*/
includeDirectionality?: true;
}

class TextualValueString extends String {
readonly dirName: string;

readonly dir: string;

constructor(value: unknown, dirName: string, dir: string) {
super(value);
this.dirName = dirName;
this.dir = dir;
}
}

/** /**
* Gets the value of an `<input>` element for textual data. * Gets the value of an `<input>` element for textual data.
* @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 getInputTextualFieldValue = ( const getInputTextualFieldValue = (
inputEl: HTMLInputTextualElement, inputEl: HTMLInputTextualElement,
options = {} as GetInputTextualFieldValueOptions,
) => { ) => {
if (inputEl.dirName) {
return [inputEl.value, { [inputEl.dirName]: window.getComputedStyle(inputEl).direction }];
if (
options.includeDirectionality
&& typeof window !== 'undefined'
&& typeof window.getComputedStyle === 'function'
&& typeof (inputEl.dirName as unknown) === 'string'
) {
return new TextualValueString(
inputEl.value,
inputEl.dirName,
window.getComputedStyle(inputEl).direction || 'ltr',
);
} }


return inputEl.value; return inputEl.value;
@@ -674,13 +698,33 @@ export type HTMLInputHiddenElement = HTMLInputElement & { type: typeof INPUT_TYP
/** /**
* Gets the value of an `<input>` element for hidden data. * Gets the value of an `<input>` element for hidden data.
* @param inputEl - The element. * @param inputEl - The element.
* @param options - The options.
* @returns Value of the input element.
*/
type GetInputHiddenFieldValueOptions = {
/**
* Should we fill in the character set for the `<input type="hidden">`
* elements with name equal to `_charset_`?
*/
includeCharset?: true;
}

/**
* Gets the value of an `<input>` element for hidden data.
* @param inputEl - The element.
* @param options - The options.
* @returns Value of the input element. * @returns Value of the input element.
*/ */
const getInputHiddenFieldValue = ( const getInputHiddenFieldValue = (
inputEl: HTMLInputHiddenElement, inputEl: HTMLInputHiddenElement,
options = {} as GetInputHiddenFieldValueOptions,
) => { ) => {
if ( if (
inputEl.name === NAME_ATTRIBUTE_VALUE_CHARSET
options.includeCharset
&& typeof window !== 'undefined'
&& typeof window.document !== 'undefined'
&& typeof (window.document.characterSet as unknown) === 'string'
&& inputEl.name === NAME_ATTRIBUTE_VALUE_CHARSET
&& inputEl.getAttribute(ATTRIBUTE_VALUE) === null && inputEl.getAttribute(ATTRIBUTE_VALUE) === null
) { ) {
return window.document.characterSet; return window.document.characterSet;
@@ -689,6 +733,17 @@ const getInputHiddenFieldValue = (
return inputEl.value; return inputEl.value;
}; };


/**
* Options for getting an `<input>` element field value.
*/
type GetInputFieldValueOptions
= GetInputCheckboxFieldValueOptions
& GetInputFileFieldValueOptions
& GetInputNumberFieldValueOptions
& GetInputDateFieldValueOptions
& GetInputTextualFieldValueOptions
& GetInputHiddenFieldValueOptions

/** /**
* Sets the value of an `<input type="hidden">` element. * Sets the value of an `<input type="hidden">` element.
* @param inputEl - The element. * @param inputEl - The element.
@@ -746,6 +801,11 @@ const INPUT_TYPE_COLOR = 'color' as const;
*/ */
const INPUT_TYPE_TIME = 'time' as const; const INPUT_TYPE_TIME = 'time' as const;


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

/** /**
* Gets the value of an `<input>` element. * Gets the value of an `<input>` element.
* @param inputEl - The element. * @param inputEl - The element.
@@ -772,15 +832,16 @@ const getInputFieldValue = (
return getInputDateLikeFieldValue(inputEl as HTMLInputDateLikeElement, options); return getInputDateLikeFieldValue(inputEl as HTMLInputDateLikeElement, options);
case INPUT_TYPE_TEXT: case INPUT_TYPE_TEXT:
case INPUT_TYPE_SEARCH: case INPUT_TYPE_SEARCH:
return getInputTextualFieldValue(inputEl as HTMLInputTextualElement);
return getInputTextualFieldValue(inputEl as HTMLInputTextualElement, options);
case INPUT_TYPE_HIDDEN: case INPUT_TYPE_HIDDEN:
return getInputHiddenFieldValue(inputEl as HTMLInputHiddenElement);
return getInputHiddenFieldValue(inputEl as HTMLInputHiddenElement, options);
case INPUT_TYPE_EMAIL: case INPUT_TYPE_EMAIL:
case INPUT_TYPE_TEL: case INPUT_TYPE_TEL:
case INPUT_TYPE_URL: case INPUT_TYPE_URL:
case INPUT_TYPE_PASSWORD: case INPUT_TYPE_PASSWORD:
case INPUT_TYPE_COLOR: case INPUT_TYPE_COLOR:
case INPUT_TYPE_TIME: case INPUT_TYPE_TIME:
case INPUT_TYPE_WEEK:
default: default:
break; break;
} }
@@ -872,6 +933,7 @@ const setInputFieldValue = (
case INPUT_TYPE_PASSWORD: case INPUT_TYPE_PASSWORD:
case INPUT_TYPE_COLOR: case INPUT_TYPE_COLOR:
case INPUT_TYPE_TIME: case INPUT_TYPE_TIME:
case INPUT_TYPE_WEEK:
default: default:
break; break;
} }


Write Preview
Loading…
Cancel
Save