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.
 
 
 

394 lines
11 KiB

  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/Blank</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('utilities', () => {
  168. beforeEach(utils.setup(`
  169. <!DOCTYPE html>
  170. <html lang="en-PH">
  171. <head>
  172. <meta charset="UTF-8">
  173. <title>Misc/Utilities</title>
  174. </head>
  175. <body>
  176. <form>
  177. <input id="input" type="text" name="foobar" />
  178. <input id="notField" type="text" />
  179. <input id="disabled" disabled type="text" name="disabled" />
  180. <meter id="meter" min="1" max="10" value="5" />
  181. <button type="submit">Submit</button>
  182. </form>
  183. </body>
  184. </html>
  185. `));
  186. it('should check for valid field elements value', () => {
  187. utils.test({
  188. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  189. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  190. const meter = document.getElementById('meter');
  191. expect(getValue(meter)).toBe(5);
  192. },
  193. });
  194. });
  195. it('should check for invalid field elements value', () => {
  196. utils.test({
  197. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  198. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  199. expect(getValue(document.body)).toBe(null);
  200. },
  201. });
  202. });
  203. it('should check for elements as included fields', () => {
  204. utils.test({
  205. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  206. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  207. const input = document.getElementById('input');
  208. expect(isElementValueIncludedInFormSubmit(input)).toBe(true);
  209. },
  210. });
  211. });
  212. it('should check for elements as excluded fields', () => {
  213. utils.test({
  214. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  215. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  216. const notField = document.getElementById('notField');
  217. expect(isElementValueIncludedInFormSubmit(notField)).toBe(false);
  218. const disabled = document.getElementById('disabled');
  219. expect(isElementValueIncludedInFormSubmit(disabled)).toBe(false);
  220. const meter = document.getElementById('meter');
  221. expect(isElementValueIncludedInFormSubmit(meter)).toBe(false);
  222. },
  223. });
  224. });
  225. it('should check for elements as valid for fields', () => {
  226. utils.test({
  227. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  228. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  229. const input = document.getElementById('input');
  230. expect(isFieldElement(input)).toBe(true);
  231. const disabled = document.getElementById('disabled');
  232. expect(isFieldElement(disabled)).toBe(true);
  233. },
  234. });
  235. });
  236. it('should check for elements as invalid for fields', () => {
  237. utils.test({
  238. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  239. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  240. const meter = document.getElementById('meter');
  241. expect(isFieldElement(meter)).toBe(false);
  242. const notField = document.getElementById('notField');
  243. expect(isFieldElement(notField)).toBe(false);
  244. },
  245. });
  246. });
  247. });
  248. describe('setting values', () => {
  249. beforeEach(utils.setup(`
  250. <!DOCTYPE html>
  251. <html lang="en-PH">
  252. <head>
  253. <meta charset="UTF-8">
  254. <title>Misc/Blank</title>
  255. </head>
  256. <body>
  257. <form>
  258. <input type="text" name="foobar" />
  259. <button type="submit">Submit</button>
  260. </form>
  261. </body>
  262. </html>
  263. `))
  264. it('should parse string values for setFormValues', () => {
  265. utils.test({
  266. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  267. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  268. let isThrown = false;
  269. try {
  270. setFormValues(form, 'foobar=baz');
  271. } catch (e) {
  272. isThrown = true;
  273. }
  274. expect(isThrown).toBe(false);
  275. expect(getFormValues(form)).toEqual({ foobar: 'baz', });
  276. },
  277. })
  278. });
  279. it('should parse entries values for setFormValues', () => {
  280. utils.test({
  281. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  282. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  283. let isThrown = false;
  284. try {
  285. setFormValues(form, [['foobar', 'baz']]);
  286. } catch (e) {
  287. isThrown = true;
  288. }
  289. expect(isThrown).toBe(false);
  290. expect(getFormValues(form)).toEqual({ foobar: 'baz', });
  291. },
  292. })
  293. });
  294. it('should parse URLSearchParams values for setFormValues', () => {
  295. utils.test({
  296. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  297. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  298. let isThrown = false;
  299. try {
  300. setFormValues(form, new URLSearchParams('foobar=baz'));
  301. } catch (e) {
  302. isThrown = true;
  303. }
  304. expect(isThrown).toBe(false);
  305. expect(getFormValues(form)).toEqual({ foobar: 'baz', });
  306. },
  307. })
  308. });
  309. it('should parse object values for setFormValues', () => {
  310. utils.test({
  311. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  312. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  313. let isThrown = false;
  314. try {
  315. setFormValues(form, { foobar: 'baz', });
  316. } catch (e) {
  317. isThrown = true;
  318. }
  319. expect(isThrown).toBe(false);
  320. expect(getFormValues(form)).toEqual({ foobar: 'baz', });
  321. },
  322. })
  323. });
  324. });
  325. describe('duplicates', () => {
  326. beforeEach(utils.setup(`
  327. <!DOCTYPE html>
  328. <html lang="en-PH">
  329. <head>
  330. <meta charset="UTF-8">
  331. <title>Misc/Blank</title>
  332. </head>
  333. <body>
  334. <form>
  335. <input type="text" name="foobar" />
  336. <input type="text" name="foobar" />
  337. <input type="text" name="foobar" />
  338. <button type="submit">Submit</button>
  339. </form>
  340. </body>
  341. </html>
  342. `));
  343. it('should parse duplicates correctly', () => {
  344. utils.test({
  345. onLoaded: (form: HTMLFormElement) => {
  346. setFormValues(form, { foobar: ['foo', 'bar', 'baz']})
  347. },
  348. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  349. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  350. expect(getFormValues(form)).toEqual({ foobar: ['foo', 'bar', 'baz'], });
  351. },
  352. })
  353. });
  354. });
  355. });