diff --git a/cypress/integration/color.test.ts b/cypress/integration/color.test.ts new file mode 100644 index 0000000..25cf2ce --- /dev/null +++ b/cypress/integration/color.test.ts @@ -0,0 +1,266 @@ +import { getFormValues, setFormValues } from '../../src'; +import * as utils from '../utils' + +describe('color', () => { + describe('basic', () => { + beforeEach(utils.setup(` + + + + + Color/Basic + + +
+ + +
+ + + `)) + + 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(` + + + + + Color/Disabled + + +
+ + +
+ + + `)) + + 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(` + + + + + Color/Outside + + +
+ +
+ + + + `)) + + 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(` + + + + + Color/Readonly + + +
+ + +
+ + + `)) + + 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(` + + + + + Color/Programmatic Value Setting + + +
+ + +
+ + + `)); + + 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(` + + + + + Color/Duplicate + + +
+ + + +
+ + + `)); + + 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'], + }, + }); + }); + }); +}) diff --git a/cypress/integration/core.test.ts b/cypress/integration/core.test.ts index 2fe64be..6a9820c 100644 --- a/cypress/integration/core.test.ts +++ b/cypress/integration/core.test.ts @@ -14,7 +14,7 @@ describe('misc', () => { - Misc/Blank + Misc/Core
@@ -185,6 +185,39 @@ describe('misc', () => { }); }); + describe('isindex', () => { + beforeEach(utils.setup(` + + + + + Misc/Isindex + + + + + +
+ + + `)) + + 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', () => { beforeEach(utils.setup(` diff --git a/cypress/integration/email.test.ts b/cypress/integration/email.test.ts new file mode 100644 index 0000000..d1ba916 --- /dev/null +++ b/cypress/integration/email.test.ts @@ -0,0 +1,265 @@ +import { getFormValues, setFormValues } from '../../src'; +import * as utils from '../utils' + +describe('email', () => { + describe('basic', () => { + beforeEach(utils.setup(` + + + + + Email/Basic + + +
+ + +
+ + + `)) + + 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(` + + + + + Email/Disabled + + +
+ + +
+ + + `)) + + 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(` + + + + + Email/Outside + + +
+ +
+ + + + `)) + + 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(` + + + + + Email/Readonly + + +
+ + +
+ + + `)) + + 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(` + + + + + Email/Programmatic Value Setting + + +
+ + +
+ + + `)); + + 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(` + + + + + Email/Duplicate + + +
+ + + +
+ + + `)); + + 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'], + }, + }); + }); + }); +}) diff --git a/cypress/integration/hidden.test.ts b/cypress/integration/hidden.test.ts new file mode 100644 index 0000000..82fdbbc --- /dev/null +++ b/cypress/integration/hidden.test.ts @@ -0,0 +1,282 @@ +import { getFormValues, setFormValues } from '../../src'; +import * as utils from '../utils' + +describe('hidden', () => { + describe('basic', () => { + beforeEach(utils.setup(` + + + + + Hidden/Basic + + +
+ + +
+ + + `)) + + 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(` + + + + + Hidden/Charset + + +
+ + +
+ + + `)) + + 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(` + + + + + Hidden/Disabled + + +
+ + +
+ + + `)) + + 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(` + + + + + Hidden/Outside + + +
+ +
+ + + + `)) + + 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(` + + + + + Hidden/Programmatic Value Setting + + +
+ + +
+ + + `)); + + 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(` + + + + + Hidden/Duplicate + + +
+ + + +
+ + + `)); + + 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'], + }, + }); + }); + }); +}) diff --git a/cypress/integration/password.test.ts b/cypress/integration/password.test.ts new file mode 100644 index 0000000..5eb879d --- /dev/null +++ b/cypress/integration/password.test.ts @@ -0,0 +1,265 @@ +import { getFormValues, setFormValues } from '../../src'; +import * as utils from '../utils' + +describe('password', () => { + describe('basic', () => { + beforeEach(utils.setup(` + + + + + Password/Basic + + +
+ + +
+ + + `)) + + 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(` + + + + + Password/Disabled + + +
+ + +
+ + + `)) + + 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(` + + + + + Password/Outside + + +
+ +
+ + + + `)) + + 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(` + + + + + Password/Readonly + + +
+ + +
+ + + `)) + + 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(` + + + + + Password/Programmatic Value Setting + + +
+ + +
+ + + `)); + + 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(` + + + + + Password/Duplicate + + +
+ + + +
+ + + `)); + + 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'], + }, + }); + }); + }); +}) diff --git a/cypress/integration/search.test.ts b/cypress/integration/search.test.ts new file mode 100644 index 0000000..add621f --- /dev/null +++ b/cypress/integration/search.test.ts @@ -0,0 +1,323 @@ +import { getFormValues, setFormValues } from '../../src'; +import * as utils from '../utils' + +describe('search', () => { + describe('basic', () => { + beforeEach(utils.setup(` + + + + + Search/Basic + + +
+ + +
+ + + `)) + + 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(` + + + + + Search/Dirname + + +
+ + +
+ + + `)) + + 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(` + + + + + Search/Disabled + + +
+ + +
+ + + `)) + + 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(` + + + + + Search/Outside + + +
+ +
+ + + + `)) + + 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(` + + + + + Search/Readonly + + +
+ + +
+ + + `)) + + 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(` + + + + + Search/Programmatic Value Setting + + +
+ + +
+ + + `)); + + 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(` + + + + + Search/Duplicate + + +
+ + + +
+ + + `)); + + 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'], + }, + }); + }); + }); +}) diff --git a/cypress/integration/tel.test.ts b/cypress/integration/tel.test.ts new file mode 100644 index 0000000..b29b91f --- /dev/null +++ b/cypress/integration/tel.test.ts @@ -0,0 +1,265 @@ +import { getFormValues, setFormValues } from '../../src'; +import * as utils from '../utils' + +describe('tel', () => { + describe('basic', () => { + beforeEach(utils.setup(` + + + + + Tel/Basic + + +
+ + +
+ + + `)) + + 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(` + + + + + Tel/Disabled + + +
+ + +
+ + + `)) + + 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(` + + + + + Tel/Outside + + +
+ +
+ + + + `)) + + 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(` + + + + + Tel/Readonly + + +
+ + +
+ + + `)) + + 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(` + + + + + Tel/Programmatic Value Setting + + +
+ + +
+ + + `)); + + 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(` + + + + + Tel/Duplicate + + +
+ + + +
+ + + `)); + + 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'], + }, + }); + }); + }); +}) diff --git a/cypress/integration/text.test.ts b/cypress/integration/text.test.ts index 3d6e21e..bdc5a46 100644 --- a/cypress/integration/text.test.ts +++ b/cypress/integration/text.test.ts @@ -38,7 +38,65 @@ describe('text', () => { }, }); }); - }) + }); + + describe('dirname', () => { + beforeEach(utils.setup(` + + + + + Text/Dirname + + +
+ + +
+ + + `)) + + 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(` diff --git a/cypress/integration/url.test.ts b/cypress/integration/url.test.ts new file mode 100644 index 0000000..21c2c15 --- /dev/null +++ b/cypress/integration/url.test.ts @@ -0,0 +1,265 @@ +import { getFormValues, setFormValues } from '../../src'; +import * as utils from '../utils' + +describe('url', () => { + describe('basic', () => { + beforeEach(utils.setup(` + + + + + URL/Basic + + +
+ + +
+ + + `)) + + 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(` + + + + + URL/Disabled + + +
+ + +
+ + + `)) + + 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(` + + + + + URL/Outside + + +
+ +
+ + + + `)) + + 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(` + + + + + URL/Readonly + + +
+ + +
+ + + `)) + + 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(` + + + + + URL/Programmatic Value Setting + + +
+ + +
+ + + `)); + + 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(` + + + + + URL/Duplicate + + +
+ + + +
+ + + `)); + + 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'], + }, + }); + }); + }); +}) diff --git a/cypress/utils/index.ts b/cypress/utils/index.ts index 7647494..24f726f 100644 --- a/cypress/utils/index.ts +++ b/cypress/utils/index.ts @@ -110,6 +110,13 @@ export const makeSearchParams = (beforeValues: Record | string) const theValue = !Array.isArray(value) ? [value] : value theValue.forEach(v => { let processedLineBreaks = v + if (typeof v === 'object' && v.__proto__.constructor.name === 'TextualValueString') { + beforeSearchParams.append(key, v); + const vStr = v as Record; + beforeSearchParams.append(vStr.dirName, vStr.dir); + return; + } + if (typeof cy !== 'undefined' && typeof v === 'string') { let forceLineBreaks: string; diff --git a/src/index.ts b/src/index.ts index b516334..df82e74 100644 --- a/src/index.ts +++ b/src/index.ts @@ -603,16 +603,6 @@ const setInputDateLikeFieldValue = ( .slice(0, DATE_FORMAT_ISO_MONTH.length); // remove extra 'Z' suffix } }; - -/** - * Options for getting an `` element field value. - */ -type GetInputFieldValueOptions - = GetInputCheckboxFieldValueOptions - & GetInputFileFieldValueOptions - & GetInputNumberFieldValueOptions - & GetInputDateFieldValueOptions - /** * Value of the `type` attribute for `` elements considered as text fields. */ @@ -640,16 +630,50 @@ export type HTMLInputTextualElement = HTMLInputTextElement | HTMLInputSearchElement +/** + * Options for getting a textual `` element field value. + */ +type GetInputTextualFieldValueOptions = { + /** + * Should we include the directionality of the value for + * `` and ``? + */ + 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 `` element for textual data. * @param inputEl - The element. + * @param options - The options. * @returns Value of the input element. */ const getInputTextualFieldValue = ( 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; @@ -674,13 +698,33 @@ export type HTMLInputHiddenElement = HTMLInputElement & { type: typeof INPUT_TYP /** * Gets the value of an `` element for hidden data. * @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 `` + * elements with name equal to `_charset_`? + */ + includeCharset?: true; +} + +/** + * Gets the value of an `` element for hidden data. + * @param inputEl - The element. + * @param options - The options. * @returns Value of the input element. */ const getInputHiddenFieldValue = ( inputEl: HTMLInputHiddenElement, + options = {} as GetInputHiddenFieldValueOptions, ) => { 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 ) { return window.document.characterSet; @@ -689,6 +733,17 @@ const getInputHiddenFieldValue = ( return inputEl.value; }; +/** + * Options for getting an `` element field value. + */ +type GetInputFieldValueOptions + = GetInputCheckboxFieldValueOptions + & GetInputFileFieldValueOptions + & GetInputNumberFieldValueOptions + & GetInputDateFieldValueOptions + & GetInputTextualFieldValueOptions + & GetInputHiddenFieldValueOptions + /** * Sets the value of an `` element. * @param inputEl - The element. @@ -746,6 +801,11 @@ const INPUT_TYPE_COLOR = 'color' as const; */ const INPUT_TYPE_TIME = 'time' as const; +/** + * Value of the `type` attribute for `` elements considered as week pickers. + */ +const INPUT_TYPE_WEEK = 'week' as const; + /** * Gets the value of an `` element. * @param inputEl - The element. @@ -772,15 +832,16 @@ const getInputFieldValue = ( return getInputDateLikeFieldValue(inputEl as HTMLInputDateLikeElement, options); case INPUT_TYPE_TEXT: case INPUT_TYPE_SEARCH: - return getInputTextualFieldValue(inputEl as HTMLInputTextualElement); + return getInputTextualFieldValue(inputEl as HTMLInputTextualElement, options); case INPUT_TYPE_HIDDEN: - return getInputHiddenFieldValue(inputEl as HTMLInputHiddenElement); + return getInputHiddenFieldValue(inputEl as HTMLInputHiddenElement, options); case INPUT_TYPE_EMAIL: case INPUT_TYPE_TEL: case INPUT_TYPE_URL: case INPUT_TYPE_PASSWORD: case INPUT_TYPE_COLOR: case INPUT_TYPE_TIME: + case INPUT_TYPE_WEEK: default: break; } @@ -872,6 +933,7 @@ const setInputFieldValue = ( case INPUT_TYPE_PASSWORD: case INPUT_TYPE_COLOR: case INPUT_TYPE_TIME: + case INPUT_TYPE_WEEK: default: break; }