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.

select.test.ts 7.7 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. import { getFormValues, setFormValues } from '../../src';
  2. import * as utils from '../utils'
  3. describe('select', () => {
  4. describe('multiple', () => {
  5. beforeEach(utils.setup(`
  6. <!DOCTYPE html>
  7. <html lang="en-PH">
  8. <head>
  9. <meta charset="UTF-8">
  10. <title>Select/Multiple</title>
  11. </head>
  12. <body>
  13. <form>
  14. <label>
  15. <span>Hello</span>
  16. <select name="hello" multiple>
  17. <option>Foo</option>
  18. <option selected>Bar</option>
  19. <option>Baz</option>
  20. <option selected>Quux</option>
  21. </select>
  22. </label>
  23. <button type="submit">Submit</button>
  24. </form>
  25. </body>
  26. </html>
  27. `))
  28. it('should have multiple form values on a single field', () => {
  29. utils.test({
  30. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  31. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  32. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  33. .toString();
  34. const after = utils.makeSearchParams(search)
  35. .toString();
  36. expect(before)
  37. .toEqual(after);
  38. },
  39. expectedStaticValue: 'hello=Bar&hello=Quux'
  40. });
  41. });
  42. it('should set values correctly', () => {
  43. utils.test({
  44. onLoaded: (form: HTMLFormElement) => {
  45. setFormValues(form, { hello: ['Foo', 'Baz'] });
  46. },
  47. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  48. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  49. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  50. .toString();
  51. const after = utils.makeSearchParams(search)
  52. .toString();
  53. expect(before)
  54. .toEqual(after);
  55. },
  56. expectedStaticValue: 'hello=Foo&hello=Baz'
  57. });
  58. });
  59. })
  60. describe('multiple duplicate', () => {
  61. beforeEach(utils.setup(`
  62. <!DOCTYPE html>
  63. <html lang="en-PH">
  64. <head>
  65. <meta charset="UTF-8">
  66. <title>Select/Multiple Duplicate</title>
  67. </head>
  68. <body>
  69. <form>
  70. <label>
  71. <span>Hello</span>
  72. <select name="hello" multiple>
  73. <option>Foo</option>
  74. <option selected>Bar</option>
  75. <option>Baz</option>
  76. <option selected>Quux</option>
  77. </select>
  78. <select name="hello" multiple>
  79. <option>Chocolate</option>
  80. <option selected>Mango</option>
  81. <option>Vanilla</option>
  82. <option selected>Ube</option>
  83. </select>
  84. </label>
  85. <button type="submit">Submit</button>
  86. </form>
  87. </body>
  88. </html>
  89. `))
  90. it('should have multiple form values on a single field', () => {
  91. utils.test({
  92. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  93. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  94. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  95. .toString();
  96. const after = utils.makeSearchParams(search)
  97. .toString();
  98. expect(before)
  99. .toEqual(after);
  100. },
  101. expectedStaticValue: 'hello=Bar&hello=Quux&hello=Mango&hello=Ube'
  102. });
  103. });
  104. it('should set multiple form values across all selects', () => {
  105. utils.test({
  106. onLoaded: (form: HTMLFormElement) => {
  107. setFormValues(form, { hello: ['Foo', 'Baz', 'Chocolate', 'Vanilla'] })
  108. },
  109. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  110. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  111. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  112. .toString();
  113. const after = utils.makeSearchParams(search)
  114. .toString();
  115. expect(before)
  116. .toEqual(after);
  117. },
  118. expectedStaticValue: 'hello=Foo&hello=Baz&hello=Chocolate&hello=Vanilla'
  119. });
  120. });
  121. it('should set multiple form values on each corresponding select element', () => {
  122. utils.test({
  123. onLoaded: (form: HTMLFormElement) => {
  124. setFormValues(form, { hello: [['Foo', 'Baz', 'Chocolate'], ['Vanilla']] })
  125. },
  126. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  127. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  128. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  129. .toString();
  130. const after = utils.makeSearchParams(search)
  131. .toString();
  132. expect(before)
  133. .toEqual(after);
  134. },
  135. expectedStaticValue: 'hello=Foo&hello=Baz&hello=Vanilla'
  136. });
  137. });
  138. })
  139. describe('single', () => {
  140. beforeEach(utils.setup(`
  141. <!DOCTYPE html>
  142. <html lang="en-PH">
  143. <head>
  144. <meta charset="UTF-8">
  145. <title>Select/Single</title>
  146. </head>
  147. <body>
  148. <form>
  149. <label>
  150. <span>Hello</span>
  151. <select name="hello">
  152. <option>Foo</option>
  153. <option>Bar</option>
  154. <option selected>Baz</option>
  155. </select>
  156. </label>
  157. <button type="submit">Submit</button>
  158. </form>
  159. </body>
  160. </html>
  161. `))
  162. it('should have single form value on a single field', () => {
  163. utils.test({
  164. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  165. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  166. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  167. .toString();
  168. const after = utils.makeSearchParams(search)
  169. .toString();
  170. expect(before)
  171. .toEqual(after);
  172. },
  173. expectedStaticValue: {
  174. hello: 'Baz',
  175. }
  176. });
  177. });
  178. })
  179. describe('single duplicate', () => {
  180. beforeEach(utils.setup(`
  181. <!DOCTYPE html>
  182. <html lang="en-PH">
  183. <head>
  184. <meta charset="UTF-8">
  185. <title>Select/Single Duplicate</title>
  186. </head>
  187. <body>
  188. <form>
  189. <label>
  190. <span>Hello</span>
  191. <select name="hello">
  192. <option>Foo</option>
  193. <option selected>Bar</option>
  194. <option>Baz</option>
  195. <option>Quux</option>
  196. </select>
  197. <select name="hello">
  198. <option>Chocolate</option>
  199. <option>Mango</option>
  200. <option>Vanilla</option>
  201. <option selected>Ube</option>
  202. <option>Foo</option>
  203. </select>
  204. </label>
  205. <button type="submit">Submit</button>
  206. </form>
  207. </body>
  208. </html>
  209. `))
  210. it('should have multiple form values on a single field', () => {
  211. utils.test({
  212. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  213. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  214. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  215. .toString();
  216. const after = utils.makeSearchParams(search)
  217. .toString();
  218. expect(before)
  219. .toEqual(after);
  220. },
  221. expectedStaticValue: 'hello=Bar&hello=Ube'
  222. });
  223. });
  224. it('should set multiple form values across all selects', () => {
  225. utils.test({
  226. onLoaded: (form: HTMLFormElement) => {
  227. setFormValues(form, { hello: ['Foo', 'Chocolate'] })
  228. },
  229. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  230. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  231. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  232. .toString();
  233. const after = utils.makeSearchParams(search)
  234. .toString();
  235. expect(before)
  236. .toEqual(after);
  237. },
  238. expectedStaticValue: 'hello=Foo&hello=Chocolate'
  239. });
  240. });
  241. it('should set multiple form values on each corresponding select element', () => {
  242. utils.test({
  243. onLoaded: (form: HTMLFormElement) => {
  244. setFormValues(form, { hello: ['Foo', 'Ube'] })
  245. },
  246. actionBeforeSubmit: (cy: any) => cy.get('[type="submit"]'),
  247. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  248. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  249. .toString();
  250. const after = utils.makeSearchParams(search)
  251. .toString();
  252. expect(before)
  253. .toEqual(after);
  254. },
  255. expectedStaticValue: 'hello=Foo&hello=Ube'
  256. });
  257. });
  258. })
  259. })