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.
 
 
 

288 lines
8.5 KiB

  1. import { getFormValues, setFormValues } from '../../src';
  2. import * as utils from '../utils'
  3. describe('misc', () => {
  4. describe('blank', () => {
  5. beforeEach(utils.setup(`
  6. <!DOCTYPE html>
  7. <html lang="en-PH">
  8. <head>
  9. <meta charset="UTF-8">
  10. <title>Misc/Blank</title>
  11. </head>
  12. <body>
  13. <form>
  14. <button type="submit">Submit</button>
  15. </form>
  16. </body>
  17. </html>
  18. `))
  19. it('should have blank form value', () => {
  20. utils.test({
  21. action: (cy: any) => cy.get('[type="submit"]'),
  22. test: (form: HTMLFormElement, submitter: any, search: any) => {
  23. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  24. .toString();
  25. const after = utils.makeSearchParams(search)
  26. .toString();
  27. expect(before)
  28. .toEqual(after);
  29. },
  30. expectedStaticValue: {},
  31. });
  32. });
  33. })
  34. describe('everything', () => {
  35. beforeEach(utils.setup(`
  36. <!DOCTYPE html>
  37. <html lang="en-PH">
  38. <head>
  39. <meta charset="UTF-8">
  40. <title>Misc/Everything</title>
  41. </head>
  42. <body>
  43. <article>
  44. <h2></h2>
  45. <form>
  46. <fieldset>
  47. <legend>Name</legend>
  48. <div>
  49. <input type="text" placeholder="First Name" name="first_name" />
  50. </div>
  51. <div>
  52. <input type="text" placeholder="Middle Name" name="middle_name" />
  53. </div>
  54. <div>
  55. <input type="text" placeholder="Last Name" name="last_name" />
  56. </div>
  57. </fieldset>
  58. <fieldset>
  59. <legend>Gender</legend>
  60. <div>
  61. <label>
  62. <input type="radio" name="gender" value="m" />
  63. Male
  64. </label>
  65. <label>
  66. <input type="radio" name="gender" value="f" />
  67. Female
  68. </label>
  69. </div>
  70. </fieldset>
  71. <fieldset>
  72. <legend>Birthday</legend>
  73. <div>
  74. <input type="date" placeholder="Birthday" name="birthday" />
  75. </div>
  76. </fieldset>
  77. <fieldset>
  78. <legend>Civil Status</legend>
  79. <div>
  80. <select name="civil_status">
  81. <option value="">Select Civil Status</option>
  82. <option value="single">Single</option>
  83. <option value="married">Married</option>
  84. <option value="divorced">Divorced</option>
  85. <option value="separated">Separated</option>
  86. </select>
  87. </div>
  88. </fieldset>
  89. <fieldset>
  90. <legend>New Registration</legend>
  91. <div>
  92. <label>
  93. <input type="checkbox" name="new_registration" />
  94. New Registration
  95. </label>
  96. </div>
  97. </fieldset>
  98. <fieldset>
  99. <legend>Last Appointment Date</legend>
  100. <div>
  101. <input type="datetime-local" placeholder="Last Appointment Date" name="last_appointment_datetime" />
  102. </div>
  103. </fieldset>
  104. <fieldset>
  105. <legend>New Appointment Week</legend>
  106. <div>
  107. <input type="week" placeholder="New Appointment Week" name="new_appointment_week" />
  108. </div>
  109. </fieldset>
  110. <fieldset>
  111. <legend>Start Month</legend>
  112. <div>
  113. <input type="month" placeholder="Start Month" name="start_month" />
  114. </div>
  115. </fieldset>
  116. <div>
  117. <label>
  118. <input type="checkbox" value="filipino" name="nationality" />
  119. Filipino
  120. </label>
  121. </div>
  122. <div>
  123. <input type="number" placeholder="Gross Salary" name="gross" />
  124. </div>
  125. <fieldset>
  126. <legend>
  127. Default Dependents
  128. </legend>
  129. <div>
  130. <label>
  131. <input type="radio" value="James" name="dependent" />
  132. James
  133. </label>
  134. <label>
  135. <input type="radio" value="Jun" name="dependent" />
  136. Jun
  137. </label>
  138. </div>
  139. </fieldset>
  140. <div>
  141. <button type="button" class="dependents">
  142. Add Dependents
  143. </button>
  144. </div>
  145. <div>
  146. <textarea name="notes" placeholder="Notes"></textarea>
  147. </div>
  148. <fieldset>
  149. <legend>
  150. Quality of Service
  151. </legend>
  152. <input type="range" min="0" max="10" step="0.5" placeholder="Quality of Service" name="qos" />
  153. </fieldset>
  154. <div>
  155. <button name="submit" value="Hello" type="submit">Hello</button>
  156. <button name="submit" value="Hi" type="submit">Hi</button>
  157. </div>
  158. </form>
  159. </article>
  160. <script>
  161. Array.from(document.getElementsByClassName('dependents')).forEach(d => {
  162. d.addEventListener('click', e => {
  163. const container = document.createElement('div')
  164. const input = document.createElement('input')
  165. input.name = 'dependent'
  166. input.type = 'text'
  167. input.placeholder = 'Dependent'
  168. container.classList.add('additional-dependent')
  169. container.appendChild(input)
  170. e.target.parentElement.parentElement.insertBefore(container, e.target.parentElement)
  171. })
  172. })
  173. </script>
  174. </body>
  175. </html>
  176. `))
  177. it('should have correct form values', () => {
  178. utils.test({
  179. action: (cy) => {
  180. cy.get('[name="first_name"]')
  181. .type('John')
  182. cy.get('[name="middle_name"]')
  183. .type('Marcelo')
  184. cy.get('[name="last_name"]')
  185. .type('Dela Cruz')
  186. cy.get('[name="gender"][value="m"]')
  187. .check()
  188. cy.get('[name="birthday"]')
  189. .type('1989-06-04')
  190. cy.get('[name="civil_status"]')
  191. .select('Married')
  192. cy.get('[name="new_registration"]')
  193. .check()
  194. cy.get('[name="last_appointment_datetime"]')
  195. .type('2001-09-11T06:09')
  196. cy.get('[name="new_appointment_week"]')
  197. .type('2001-W51')
  198. cy.get('[name="start_month"]')
  199. .type('2002-03')
  200. cy.get('[name="nationality"][value="filipino"]')
  201. .check()
  202. cy.get('[name="gross"]')
  203. .type('131072')
  204. cy.get('[name="dependent"][value="Jun"]')
  205. .check()
  206. cy.get('button.dependents')
  207. .click()
  208. cy.get('.additional-dependent [name="dependent"][type="text"]')
  209. .last()
  210. .type('Juana')
  211. cy.get('button.dependents')
  212. .click()
  213. cy.get('.additional-dependent [name="dependent"][type="text"]')
  214. .last()
  215. .type('Jane')
  216. cy.get('button.dependents')
  217. .click()
  218. cy.get('.additional-dependent [name="dependent"][type="text"]')
  219. .last()
  220. .type('Josh')
  221. cy.get('[name="qos"]')
  222. .invoke('val', 9.5)
  223. .trigger('change')
  224. cy.get('[name="notes"]')
  225. .type('Test content\n\nNew line\n\nAnother line')
  226. return cy.get('[name="submit"][value="Hi"]')
  227. },
  228. test: (form: HTMLFormElement, submitter: any, search: any) => {
  229. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  230. .toString();
  231. const after = utils.makeSearchParams(search)
  232. .toString();
  233. expect(before)
  234. .toEqual(after);
  235. },
  236. expectedStaticValue: 'first_name=John&middle_name=Marcelo&last_name=Dela+Cruz&gender=m&birthday=1989-06-04&civil_status=married&new_registration=on&last_appointment_datetime=2001-09-11T06%3A09&new_appointment_week=2001-W51&start_month=2002-03&nationality=filipino&gross=131072&dependent=Jun&notes=Test+content%0D%0A%0D%0ANew+line%0D%0A%0D%0AAnother+line&qos=9.5&submit=Hi',
  237. });
  238. });
  239. it('should have filled form values', () => {
  240. utils.test({
  241. action: (cy) => cy.wait(3000).get('[name="submit"][value="Hi"]'),
  242. test: (form: HTMLFormElement, submitter: any, search: any) => {
  243. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  244. .toString();
  245. const after = utils.makeSearchParams(search)
  246. .toString();
  247. expect(before)
  248. .toEqual(after);
  249. },
  250. preAction: (form: HTMLFormElement) => {
  251. setFormValues(form, {
  252. first_name: 'John',
  253. middle_name: 'Marcelo',
  254. last_name: 'Dela Cruz',
  255. gender: 'm',
  256. birthday: new Date('1989-06-04'),
  257. civil_status: 'married',
  258. new_registration: 'on',
  259. last_appointment_datetime: new Date('2001-09-11T06:09:00'),
  260. new_appointment_week: '2001-W51',
  261. start_month: '2002-03',
  262. nationality: 'filipino',
  263. gross: 131072,
  264. dependent: 'Jun',
  265. notes: `Test content
  266. New line
  267. Another line`,
  268. qos: 9.5,
  269. });
  270. },
  271. expectedStaticValue: 'first_name=John&middle_name=Marcelo&last_name=Dela+Cruz&gender=m&birthday=1989-06-04&civil_status=married&new_registration=on&last_appointment_datetime=2001-09-11T06%3A09&new_appointment_week=2001-W51&start_month=2002-03&nationality=filipino&gross=131072&dependent=Jun&notes=Test+content%0D%0A%0D%0ANew+line%0D%0A%0D%0AAnother+line&qos=9.5&submit=Hi',
  272. });
  273. });
  274. });
  275. // TODO implement tests for multiple values
  276. });