Make tests more comprehensive.master
@@ -123,7 +123,7 @@ describe('date', () => { | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Text/Readonly</title> | |||
<title>Date/Readonly</title> | |||
</head> | |||
<body> | |||
<form> | |||
@@ -164,7 +164,7 @@ describe('date', () => { | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Text/Basic</title> | |||
<title>Date/Programmatic Value Setting</title> | |||
</head> | |||
<body> | |||
<form> | |||
@@ -123,7 +123,7 @@ describe('date', () => { | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Text/Readonly</title> | |||
<title>Datetime-Local/Readonly</title> | |||
</head> | |||
<body> | |||
<form> | |||
@@ -164,7 +164,7 @@ describe('date', () => { | |||
<html lang="en-PH"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Text/Basic</title> | |||
<title>Datetime-Local/Programmatic Value Setting</title> | |||
</head> | |||
<body> | |||
<form> | |||
@@ -1,4 +1,4 @@ | |||
import { getFormValues } from '../../src' | |||
import { getFormValues, setFormValues } from '../../src'; | |||
import * as utils from '../utils' | |||
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', () => { | |||
@@ -1,7 +1,184 @@ | |||
import { getFormValues, setFormValues } from '../../src'; | |||
import getFormValuesDeprecated, { getFormValues, setFormValues } from '../../src'; | |||
import * as utils from '../utils' | |||
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', () => { | |||
beforeEach(utils.setup(` | |||
<!DOCTYPE html> | |||
@@ -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'], | |||
}, | |||
}); | |||
}); | |||
}); | |||
}) |
@@ -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'], | |||
}, | |||
}); | |||
}); | |||
}); | |||
}) |
@@ -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,4 +1,4 @@ | |||
import { getFormValues, LineEnding, setFormValues } from '../../src'; | |||
import { getFormValues, setFormValues } from '../../src'; | |||
import * as utils from '../utils' | |||
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', () => { | |||
beforeEach(utils.setup(` | |||
<!DOCTYPE html> | |||
@@ -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'], | |||
}, | |||
}); | |||
}); | |||
}); | |||
}) |
@@ -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'], | |||
}, | |||
}); | |||
}); | |||
}); | |||
}) |
@@ -106,7 +106,7 @@ export const makeSearchParams = (beforeValues: Record<string, unknown> | string) | |||
const theValue = !Array.isArray(value) ? [value] : value | |||
theValue.forEach(v => { | |||
let processedLineBreaks = v | |||
if (typeof cy !== 'undefined') { | |||
if (typeof cy !== 'undefined' && typeof v === 'string') { | |||
let forceLineBreaks: string; | |||
// TODO make this foolproof | |||
@@ -60,7 +60,7 @@ | |||
"dev": "pridepack dev", | |||
"test:jsdom": "vitest", | |||
"test:cypress": "cypress run", | |||
"test:cpanel": "cypress open" | |||
"cypress:cpanel": "cypress open" | |||
}, | |||
"private": false, | |||
"description": "Extract and set form values through the DOM.", | |||
@@ -16,11 +16,6 @@ export enum LineEnding { | |||
CRLF = '\r\n', | |||
} | |||
/** | |||
* Type for a placeholder object value. | |||
*/ | |||
type PlaceholderObject = Record<string, unknown> | |||
/** | |||
* Tag name for the `<input>` element. | |||
*/ | |||
@@ -96,36 +91,36 @@ const getTextAreaFieldValue = ( | |||
* Sets the value of a `<textarea>` element. | |||
* @param textareaEl - The 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 = ( | |||
textareaEl: HTMLTextAreaElement, | |||
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 | |||
textareaEl.value = value as string; | |||
}; | |||
/** | |||
* Options for getting a `<select>` element field value. | |||
*/ | |||
type GetSelectValueOptions = PlaceholderObject | |||
/** | |||
* Gets the value of a `<select>` element. | |||
* @param selectEl - The element. | |||
* @param options - The options. | |||
* @returns Value of the select element. | |||
*/ | |||
const getSelectFieldValue = ( | |||
selectEl: HTMLSelectElement, | |||
options = {} as GetSelectValueOptions, | |||
) => { | |||
if (selectEl.multiple) { | |||
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; | |||
}; | |||
@@ -163,27 +158,15 @@ const INPUT_TYPE_RADIO = 'radio' as const; | |||
*/ | |||
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. | |||
* @param inputEl - The element. | |||
* @param options - The options. | |||
* @returns Value of the input element. | |||
*/ | |||
const getInputRadioFieldValue = ( | |||
inputEl: HTMLInputRadioElement, | |||
options = {} as GetInputRadioFieldValueOptions, | |||
) => { | |||
const getInputRadioFieldValue = (inputEl: HTMLInputRadioElement) => { | |||
if (inputEl.checked) { | |||
return inputEl.value; | |||
} | |||
if (typeof options !== 'object' || options === null) { | |||
throw new TypeError('Invalid options for getInputRadioFieldValue().'); | |||
} | |||
return null; | |||
}; | |||
@@ -411,13 +394,18 @@ const getInputNumericFieldValue = ( | |||
* Sets the value of an `<input type="number">` element. | |||
* @param inputEl - The element. | |||
* @param value - Value of the input element. | |||
* @param nthOfName - What order is this field in with respect to fields of the same name? | |||
* @param totalOfName - How many fields with the same name are in the form? | |||
*/ | |||
const setInputNumericFieldValue = ( | |||
inputEl: HTMLInputNumericElement, | |||
value: unknown, | |||
nthOfName: number, | |||
totalOfName: number, | |||
) => { | |||
const valueArray = Array.isArray(value) ? value : [value]; | |||
// 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 | |||
= GetInputCheckboxFieldValueOptions | |||
& GetInputFileFieldValueOptions | |||
& GetInputRadioFieldValueOptions | |||
& GetInputNumberFieldValueOptions | |||
& 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. | |||
* @param inputEl - The element. | |||
@@ -538,7 +555,7 @@ const getInputFieldValue = ( | |||
case INPUT_TYPE_CHECKBOX: | |||
return getInputCheckboxFieldValue(inputEl as HTMLInputCheckboxElement, options); | |||
case INPUT_TYPE_RADIO: | |||
return getInputRadioFieldValue(inputEl as HTMLInputRadioElement, options); | |||
return getInputRadioFieldValue(inputEl as HTMLInputRadioElement); | |||
case INPUT_TYPE_FILE: | |||
return getInputFileFieldValue(inputEl as HTMLInputFileElement, options); | |||
case INPUT_TYPE_NUMBER: | |||
@@ -547,10 +564,18 @@ const getInputFieldValue = ( | |||
case INPUT_TYPE_DATE: | |||
case INPUT_TYPE_DATETIME_LOCAL: | |||
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: | |||
break; | |||
} | |||
return inputEl.value; | |||
// force return `null` for custom elements supporting setting values. | |||
return inputEl.value ?? null; | |||
}; | |||
/** | |||
@@ -580,7 +605,12 @@ const setInputFieldValue = ( | |||
return; | |||
case INPUT_TYPE_NUMBER: | |||
case INPUT_TYPE_RANGE: | |||
setInputNumericFieldValue(inputEl as HTMLInputNumericElement, value); | |||
setInputNumericFieldValue( | |||
inputEl as HTMLInputNumericElement, | |||
value, | |||
nthOfName, | |||
totalOfName, | |||
); | |||
return; | |||
case INPUT_TYPE_DATE: | |||
case INPUT_TYPE_DATETIME_LOCAL: | |||
@@ -591,6 +621,12 @@ const setInputFieldValue = ( | |||
totalOfName, | |||
); | |||
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: | |||
break; | |||
} | |||
@@ -610,7 +646,6 @@ const setInputFieldValue = ( | |||
*/ | |||
type GetFieldValueOptions | |||
= GetTextAreaValueOptions | |||
& GetSelectValueOptions | |||
& GetInputFieldValueOptions | |||
/** | |||
@@ -630,15 +665,13 @@ export const getFieldValue = (el: HTMLElement, options = {} as GetFieldValueOpti | |||
case TAG_NAME_TEXTAREA: | |||
return getTextAreaFieldValue(el as HTMLTextAreaElement, options); | |||
case TAG_NAME_SELECT: | |||
return getSelectFieldValue(el as HTMLSelectElement, options); | |||
return getSelectFieldValue(el as HTMLSelectElement); | |||
case TAG_NAME_INPUT: | |||
return getInputFieldValue(el as HTMLInputElement, options); | |||
default: | |||
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) { | |||
case TAG_NAME_TEXTAREA: | |||
setTextAreaFieldValue(el as HTMLTextAreaElement, value); | |||
setTextAreaFieldValue(el as HTMLTextAreaElement, value, nthOfName, totalOfName); | |||
return; | |||
case TAG_NAME_SELECT: | |||
setSelectFieldValue(el as HTMLSelectElement, value); | |||
return; | |||
case TAG_NAME_INPUT: | |||
setInputFieldValue(el as HTMLInputElement, value, nthOfName, totalOfName); | |||
return; | |||
default: | |||
break; | |||
} | |||
const fieldEl = el as HTMLElement & { value?: unknown }; | |||
fieldEl.value = value; | |||
setInputFieldValue(el as HTMLInputElement, value, nthOfName, totalOfName); | |||
}; | |||
/** | |||