Extract and set form values through the DOM—no frameworks required! https://github.com/TheoryOfNekomata/formxtra
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

core.test.ts 12 KiB

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