Extract and set form values through the DOM—no frameworks required! https://github.com/TheoryOfNekomata/formxtra
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

radio.test.ts 12 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
  1. import { getFormValues, setFormValues } from '../../src';
  2. import * as utils from '../utils'
  3. describe('radio', () => {
  4. describe('basic', () => {
  5. beforeEach(utils.setup(`
  6. <!DOCTYPE html>
  7. <html lang="en-PH">
  8. <head>
  9. <meta charset="UTF-8">
  10. <title>Radio/Basic</title>
  11. </head>
  12. <body>
  13. <form>
  14. <label>
  15. <span>Hello</span>
  16. <input type="radio" name="enabled" />
  17. </label>
  18. <button type="submit">Submit</button>
  19. </form>
  20. </body>
  21. </html>
  22. `))
  23. it('should have no form values', () => {
  24. utils.test({
  25. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  26. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  27. const values = getFormValues(form, { submitter })
  28. const before = utils.makeSearchParams(values)
  29. .toString();
  30. const after = utils.makeSearchParams(search)
  31. .toString();
  32. expect(values['enabled'])
  33. .toBeUndefined();
  34. expect(before)
  35. .toEqual(after);
  36. },
  37. expectedStaticValue: '',
  38. });
  39. });
  40. });
  41. describe('checked', () => {
  42. beforeEach(utils.setup(`
  43. <!DOCTYPE html>
  44. <html lang="en-PH">
  45. <head>
  46. <meta charset="UTF-8">
  47. <title>Radio/Checked</title>
  48. </head>
  49. <body>
  50. <form>
  51. <label>
  52. <span>Hello</span>
  53. <input type="radio" name="enabled" checked />
  54. </label>
  55. <button type="submit">Submit</button>
  56. </form>
  57. </body>
  58. </html>
  59. `))
  60. it('should have single form value on a single field', () => {
  61. utils.test({
  62. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  63. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  64. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  65. .toString();
  66. const after = utils.makeSearchParams(search)
  67. .toString();
  68. expect(before)
  69. .toEqual(after);
  70. },
  71. expectedStaticValue: 'enabled=on',
  72. });
  73. });
  74. });
  75. describe('duplicate', () => {
  76. beforeEach(utils.setup(`
  77. <!DOCTYPE html>
  78. <html lang="en-PH">
  79. <head>
  80. <meta charset="UTF-8">
  81. <title>Radio/Duplicate</title>
  82. </head>
  83. <body>
  84. <form>
  85. <label>
  86. <span>Hello 1</span>
  87. <input type="radio" name="enabled" value="hello 1" checked />
  88. </label>
  89. <label>
  90. <span>Hello 2</span>
  91. <input type="radio" name="enabled" value="hello 2" checked />
  92. </label>
  93. <label>
  94. <span>Hello 3</span>
  95. <input type="radio" name="enabled" value="hello 3" />
  96. </label>
  97. <label>
  98. <span>Hello 4</span>
  99. <input type="radio" name="enabled" value="hello 4" />
  100. </label>
  101. <button type="submit">Submit</button>
  102. </form>
  103. </body>
  104. </html>
  105. `));
  106. it('should get last value as checked', () => {
  107. utils.test({
  108. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  109. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  110. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  111. .toString();
  112. const after = utils.makeSearchParams(search)
  113. .toString();
  114. expect(before)
  115. .toEqual(after);
  116. },
  117. expectedStaticValue: {
  118. enabled: 'hello 2',
  119. },
  120. });
  121. });
  122. it('should set to last value', () => {
  123. utils.test({
  124. onLoaded: (form: HTMLFormElement) => {
  125. setFormValues(form, {
  126. enabled: ['hello 3', 'hello 4'],
  127. })
  128. },
  129. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  130. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  131. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  132. .toString();
  133. const after = utils.makeSearchParams(search)
  134. .toString();
  135. expect(before)
  136. .toEqual(after);
  137. },
  138. expectedStaticValue: {
  139. enabled: 'hello 4',
  140. },
  141. });
  142. });
  143. });
  144. describe('setting values', () => {
  145. beforeEach(utils.setup(`
  146. <!DOCTYPE html>
  147. <html lang="en-PH">
  148. <head>
  149. <meta charset="UTF-8">
  150. <title>Radio/Setting Values</title>
  151. </head>
  152. <body>
  153. <form>
  154. <label>
  155. <span>Hello</span>
  156. <input type="radio" name="enabled" value="default" checked />
  157. <input type="radio" name="enabled" />
  158. <input type="radio" name="enabled" value="true" />
  159. <input type="radio" name="enabled" value="yes" />
  160. <input type="radio" name="enabled" value="1" />
  161. <input type="radio" name="enabled" value="false" />
  162. <input type="radio" name="enabled" value="no" />
  163. <input type="radio" name="enabled" value="off" />
  164. <input type="radio" name="enabled" value="0" />
  165. <input type="radio" name="enabled" value="null" />
  166. </label>
  167. <button type="submit">Submit</button>
  168. </form>
  169. </body>
  170. </html>
  171. `))
  172. it('should uncheck for boolean "true"', () => {
  173. utils.test({
  174. onLoaded: (form: HTMLFormElement) => {
  175. setFormValues(form, { enabled: true, })
  176. },
  177. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  178. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  179. const values = getFormValues(form, { submitter })
  180. expect(values['enabled']).toBeUndefined()
  181. },
  182. expectedStaticValue: '',
  183. });
  184. });
  185. it('should check for string "true"', () => {
  186. utils.test({
  187. onLoaded: (form: HTMLFormElement) => {
  188. setFormValues(form, { enabled: 'true', })
  189. },
  190. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  191. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  192. const values = getFormValues(form, { submitter })
  193. expect(values['enabled']).toBe('true');
  194. },
  195. expectedStaticValue: 'enabled=true',
  196. });
  197. });
  198. it('should check for string "yes"', () => {
  199. utils.test({
  200. onLoaded: (form: HTMLFormElement) => {
  201. setFormValues(form, { enabled: 'yes', })
  202. },
  203. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  204. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  205. const values = getFormValues(form, { submitter })
  206. expect(values['enabled']).toBe('yes');
  207. },
  208. expectedStaticValue: 'enabled=yes',
  209. });
  210. });
  211. it('should check for string "on"', () => {
  212. utils.test({
  213. onLoaded: (form: HTMLFormElement) => {
  214. setFormValues(form, { enabled: 'on', })
  215. },
  216. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  217. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  218. const values = getFormValues(form, { submitter })
  219. expect(values['enabled']).toBe('on');
  220. },
  221. expectedStaticValue: 'enabled=on',
  222. });
  223. });
  224. it('should uncheck for boolean "false"', () => {
  225. utils.test({
  226. onLoaded: (form: HTMLFormElement) => {
  227. setFormValues(form, { enabled: false, })
  228. },
  229. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  230. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  231. const values = getFormValues(form, { submitter })
  232. expect(values['enabled']).toBeUndefined()
  233. },
  234. expectedStaticValue: '',
  235. });
  236. });
  237. it('should check for string "false"', () => {
  238. utils.test({
  239. onLoaded: (form: HTMLFormElement) => {
  240. setFormValues(form, { enabled: 'false', })
  241. },
  242. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  243. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  244. const values = getFormValues(form, { submitter })
  245. expect(values['enabled']).toBe('false');
  246. },
  247. expectedStaticValue: 'enabled=false',
  248. });
  249. });
  250. it('should check for string "no"', () => {
  251. utils.test({
  252. onLoaded: (form: HTMLFormElement) => {
  253. setFormValues(form, { enabled: 'no', })
  254. },
  255. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  256. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  257. const values = getFormValues(form, { submitter })
  258. expect(values['enabled']).toBe('no')
  259. },
  260. expectedStaticValue: 'enabled=no',
  261. });
  262. });
  263. it('should check for string "off"', () => {
  264. utils.test({
  265. onLoaded: (form: HTMLFormElement) => {
  266. setFormValues(form, { enabled: 'off', })
  267. },
  268. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  269. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  270. const values = getFormValues(form, { submitter })
  271. expect(values['enabled']).toBe('off');
  272. },
  273. expectedStaticValue: 'enabled=off',
  274. });
  275. });
  276. it('should uncheck for number "1"', () => {
  277. utils.test({
  278. onLoaded: (form: HTMLFormElement) => {
  279. setFormValues(form, { enabled: 1, })
  280. },
  281. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  282. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  283. const values = getFormValues(form, { submitter })
  284. expect(values['enabled']).toBeUndefined();
  285. },
  286. expectedStaticValue: '',
  287. });
  288. });
  289. it('should check for string "1"', () => {
  290. utils.test({
  291. onLoaded: (form: HTMLFormElement) => {
  292. setFormValues(form, { enabled: '1', })
  293. },
  294. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  295. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  296. const values = getFormValues(form, { submitter })
  297. expect(values['enabled']).toBe('1');
  298. },
  299. expectedStaticValue: 'enabled=1',
  300. });
  301. });
  302. it('should uncheck for number "0"', () => {
  303. utils.test({
  304. onLoaded: (form: HTMLFormElement) => {
  305. setFormValues(form, { enabled: 0, })
  306. },
  307. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  308. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  309. const values = getFormValues(form, { submitter })
  310. expect(values['enabled']).toBeUndefined()
  311. },
  312. expectedStaticValue: '',
  313. });
  314. });
  315. it('should check for string "0"', () => {
  316. utils.test({
  317. onLoaded: (form: HTMLFormElement) => {
  318. setFormValues(form, { enabled: '0', })
  319. },
  320. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  321. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  322. const values = getFormValues(form, { submitter })
  323. expect(values['enabled']).toBe('0')
  324. },
  325. expectedStaticValue: 'enabled=0',
  326. });
  327. });
  328. it('should uncheck for object "null"', () => {
  329. utils.test({
  330. onLoaded: (form: HTMLFormElement) => {
  331. setFormValues(form, { enabled: null, })
  332. },
  333. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  334. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  335. const values = getFormValues(form, { submitter })
  336. expect(values['enabled']).toBeUndefined()
  337. },
  338. expectedStaticValue: '',
  339. });
  340. });
  341. it('should check for string "null"', () => {
  342. utils.test({
  343. onLoaded: (form: HTMLFormElement) => {
  344. setFormValues(form, { enabled: 'null', })
  345. },
  346. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  347. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  348. const values = getFormValues(form, { submitter })
  349. expect(values['enabled']).toBe('null');
  350. },
  351. expectedStaticValue: 'null',
  352. });
  353. });
  354. it('should check for boolean "true"', () => {
  355. utils.test({
  356. onLoaded: (form: HTMLFormElement) => {
  357. setFormValues(form, { enabled: true, })
  358. },
  359. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  360. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  361. const values = getFormValues(form, { submitter })
  362. expect(values['enabled']).toBeUndefined()
  363. },
  364. expectedStaticValue: '',
  365. });
  366. });
  367. it('should check valueless radio for last value on', () => {
  368. utils.test({
  369. onLoaded: (form: HTMLFormElement) => {
  370. setFormValues(form, { enabled: ['foo', 'bar', 'baz', 'on'], })
  371. },
  372. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  373. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  374. const values = getFormValues(form, { submitter })
  375. expect(values['enabled']).toBe('on')
  376. },
  377. expectedStaticValue: 'enabled=on',
  378. });
  379. });
  380. it('should check radio with value for last value', () => {
  381. utils.test({
  382. onLoaded: (form: HTMLFormElement) => {
  383. setFormValues(form, { enabled: ['foo', 'bar', 'baz', 'on', 'default', 'true'], })
  384. },
  385. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  386. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  387. const values = getFormValues(form, { submitter })
  388. expect(values['enabled']).toBe('true')
  389. },
  390. expectedStaticValue: 'enabled=true',
  391. });
  392. });
  393. });
  394. });