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.
 
 
 

169 lines
5.1 KiB

  1. import getFormValues 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. (cy: any) => cy.get('[type="submit"]'),
  22. (form: HTMLFormElement, submitter: any, search: any) => {
  23. const before = utils.makeSearchParams(getFormValues(form, {submitter})).toString();
  24. const after = utils.makeSearchParams(search).toString();
  25. expect(before).toEqual(after);
  26. },
  27. {}
  28. );
  29. });
  30. })
  31. describe('everything', () => {
  32. beforeEach(utils.setup(`
  33. <!DOCTYPE html>
  34. <html lang="en-PH">
  35. <head>
  36. <meta charset="UTF-8">
  37. <title>Misc/Everything</title>
  38. </head>
  39. <body>
  40. <article>
  41. <h2></h2>
  42. <form>
  43. <div>
  44. <input type="text" placeholder="First Name" name="first_name" />
  45. </div>
  46. <div>
  47. <input type="text" placeholder="Middle Name" name="middle_name" />
  48. </div>
  49. <div>
  50. <input type="text" placeholder="Last Name" name="last_name" />
  51. </div>
  52. <fieldset>
  53. <legend>Gender</legend>
  54. <div>
  55. <label>
  56. <input type="radio" name="gender" value="m" />
  57. Male
  58. </label>
  59. <label>
  60. <input type="radio" name="gender" value="f" />
  61. Female
  62. </label>
  63. </div>
  64. </fieldset>
  65. <div>
  66. <select name="civil_status">
  67. <option value="">Select Civil Status</option>
  68. <option value="single">Single</option>
  69. <option value="married">Married</option>
  70. <option value="divorced">Divorced</option>
  71. <option value="separated">Separated</option>
  72. </select>
  73. </div>
  74. <div>
  75. <label>
  76. <input type="checkbox" name="new_registration" />
  77. New Registration
  78. </label>
  79. </div>
  80. <div>
  81. <label>
  82. <input type="checkbox" value="filipino" name="nationality" />
  83. Filipino
  84. </label>
  85. </div>
  86. <fieldset>
  87. <legend>
  88. Default Dependents
  89. </legend>
  90. <div>
  91. <label>
  92. <input type="radio" value="James" name="dependent" />
  93. James
  94. </label>
  95. <label>
  96. <input type="radio" value="Jun" name="dependent" />
  97. Jun
  98. </label>
  99. </div>
  100. </fieldset>
  101. <div>
  102. <button type="button" class="dependents">
  103. Add Dependents
  104. </button>
  105. </div>
  106. <div>
  107. <textarea name="notes" placeholder="Notes"></textarea>
  108. </div>
  109. <div>
  110. <button name="submit" value="Hello" type="submit">Hello</button>
  111. <button name="submit" value="Hi" type="submit">Hi</button>
  112. </div>
  113. </form>
  114. </article>
  115. <script>
  116. Array.from(document.getElementsByClassName('dependents')).forEach(d => {
  117. d.addEventListener('click', e => {
  118. const container = document.createElement('div')
  119. const input = document.createElement('input')
  120. input.name = 'dependent'
  121. input.type = 'text'
  122. input.placeholder = 'Dependent'
  123. container.classList.add('additional-dependent')
  124. container.appendChild(input)
  125. e.target.parentElement.parentElement.insertBefore(container, e.target.parentElement)
  126. })
  127. })
  128. </script>
  129. </body>
  130. </html>
  131. `))
  132. it('should have correct form values', () => {
  133. utils.test(
  134. (cy) => {
  135. cy.get('[name="first_name"]').type('John')
  136. cy.get('[name="middle_name"]').type('Marcelo')
  137. cy.get('[name="last_name"]').type('Dela Cruz')
  138. cy.get('[name="gender"][value="m"]').check()
  139. cy.get('[name="civil_status"]').select('Married')
  140. cy.get('[name="new_registration"]').check()
  141. cy.get('[name="nationality"][value="filipino"]').check()
  142. cy.get('[name="dependent"][value="Jun"]').check()
  143. // Note: JSDOM is static for now
  144. cy.get('button.dependents').click()
  145. cy.get('.additional-dependent [name="dependent"][type="text"]').last().type('Juana')
  146. cy.get('button.dependents').click()
  147. cy.get('.additional-dependent [name="dependent"][type="text"]').last().type('Jane')
  148. cy.get('button.dependents').click()
  149. cy.get('.additional-dependent [name="dependent"][type="text"]').last().type('Josh')
  150. cy.get('[name="notes"]').type('Test content\n\nNew line\n\nAnother line')
  151. return cy.get('[name="submit"][value="Hi"]')
  152. },
  153. (form: HTMLFormElement, submitter: any, search: any) => {
  154. const before = utils.makeSearchParams(getFormValues(form, {submitter})).toString();
  155. const after = utils.makeSearchParams(search).toString();
  156. expect(before).toEqual(after);
  157. },
  158. 'first_name=John&middle_name=Marcelo&last_name=Dela+Cruz&gender=m&civil_status=married&new_registration=on&nationality=filipino&dependent=Jun&notes=Test+content%0D%0A%0D%0ANew+line%0D%0A%0D%0AAnother+line&submit=Hi',
  159. );
  160. });
  161. })
  162. })