|
- import { getFormValues, setFormValues } from '../../src';
- import * as utils from '../utils'
-
- describe('color', () => {
- describe('basic', () => {
- beforeEach(utils.setup(`
- <!DOCTYPE html>
- <html lang="en-PH">
- <head>
- <meta charset="UTF-8">
- <title>Color/Basic</title>
- </head>
- <body>
- <form>
- <label>
- <span>Hello</span>
- <input type="color" name="hello" value="#c0ffee" />
- </label>
- <button type="submit">Submit</button>
- </form>
- </body>
- </html>
- `))
-
- it('should have single form value', () => {
- utils.test({
- querySubmitter: (cy: any) => cy.get('[type="submit"]'),
- onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
- const before = utils.makeSearchParams(getFormValues(form, { submitter }))
- .toString();
- const after = utils.makeSearchParams(search)
- .toString();
- expect(before)
- .toEqual(after);
- },
- expectedStaticValue: {
- hello: '#c0ffee',
- },
- });
- });
- });
-
- describe('disabled', () => {
- beforeEach(utils.setup(`
- <!DOCTYPE html>
- <html lang="en-PH">
- <head>
- <meta charset="UTF-8">
- <title>Color/Disabled</title>
- </head>
- <body>
- <form>
- <label>
- <span>Hello</span>
- <input
- type="color" name="hello" value="#c0ffee"
- disabled
- />
- </label>
- <button type="submit">Submit</button>
- </form>
- </body>
- </html>
- `))
-
- it('should have blank form value', () => {
- utils.test({
- querySubmitter: (cy: any) => cy.get('[type="submit"]'),
- onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
- const before = utils.makeSearchParams(getFormValues(form, { submitter }))
- .toString();
- const after = utils.makeSearchParams(search)
- .toString();
- expect(before)
- .toEqual(after);
- },
- expectedStaticValue: {},
- });
- });
- })
-
- describe('outside', () => {
- beforeEach(utils.setup(`
- <!DOCTYPE html>
- <html lang="en-PH">
- <head>
- <meta charset="UTF-8">
- <title>Color/Outside</title>
- </head>
- <body>
- <form id="form">
- <button type="submit">Submit</button>
- </form>
- <label>
- <span>Hello</span>
- <input type="color" name="hello" value="#c0ffee" form="form" />
- </label>
- </body>
- </html>
- `))
-
- it('should have single form value', () => {
- utils.test({
- querySubmitter: (cy: any) => cy.get('[type="submit"]'),
- onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
- const before = utils.makeSearchParams(getFormValues(form, { submitter }))
- .toString();
- const after = utils.makeSearchParams(search)
- .toString();
- expect(before)
- .toEqual(after);
- },
- expectedStaticValue: {
- hello: '#c0ffee',
- },
- });
- });
- });
-
- describe('readonly', () => {
- beforeEach(utils.setup(`
- <!DOCTYPE html>
- <html lang="en-PH">
- <head>
- <meta charset="UTF-8">
- <title>Color/Readonly</title>
- </head>
- <body>
- <form>
- <label>
- <span>Hello</span>
- <input
- type="color" name="hello" value="#c0ffee"
- readonly
- />
- </label>
- <button type="submit">Submit</button>
- </form>
- </body>
- </html>
- `))
-
- it('should have single form value', () => {
- utils.test({
- querySubmitter: (cy: any) => cy.get('[type="submit"]'),
- onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
- const before = utils.makeSearchParams(getFormValues(form, { submitter }))
- .toString();
- const after = utils.makeSearchParams(search)
- .toString();
- expect(before)
- .toEqual(after);
- },
- expectedStaticValue: {
- hello: '#c0ffee',
- },
- });
- });
- });
-
- describe('programmatic value setting', () => {
- beforeEach(utils.setup(`
- <!DOCTYPE html>
- <html lang="en-PH">
- <head>
- <meta charset="UTF-8">
- <title>Color/Programmatic Value Setting</title>
- </head>
- <body>
- <form>
- <label>
- <span>Hello</span>
- <input type="color" name="hello" />
- </label>
- <button type="submit">Submit</button>
- </form>
- </body>
- </html>
- `));
-
- it('should have form values set', () => {
- utils.test({
- querySubmitter: (cy: any) => cy.get('[type="submit"]'),
- onLoaded: (form: HTMLFormElement) => {
- setFormValues(form, { hello: '#c0ffee', })
- },
- onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
- const before = utils.makeSearchParams(getFormValues(form, { submitter }))
- .toString();
- const after = utils.makeSearchParams(search)
- .toString();
- expect(before)
- .toEqual(after);
- },
- expectedStaticValue: {
- hello: '#c0ffee',
- },
- });
- });
- });
-
- describe('duplicate', () => {
- beforeEach(utils.setup(`
- <!DOCTYPE html>
- <html lang="en-PH">
- <head>
- <meta charset="UTF-8">
- <title>Color/Duplicate</title>
- </head>
- <body>
- <form>
- <label>
- <span>Hello 1</span>
- <input id="hello1" type="color" value="#c0ffee" name="hello"/>
- </label>
- <label>
- <span>Hello 2</span>
- <input id="hello2" type="color" value="#696969" name="hello"/>
- </label>
- <button type="submit">Submit</button>
- </form>
- </body>
- </html>
- `));
-
- it('should get both values', () => {
- utils.test({
- querySubmitter: (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'],
- })
- },
- querySubmitter: (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'],
- },
- });
- });
- });
- })
|