Extract and set form values through the DOM—no frameworks required! https://github.com/TheoryOfNekomata/formxtra
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

187 lines
4.8 KiB

  1. import { getFormValues, setFormValues } from '../../src';
  2. import * as utils from '../utils'
  3. describe('file', () => {
  4. describe('single', () => {
  5. beforeEach(utils.setup(`
  6. <!DOCTYPE html>
  7. <html lang="en-PH">
  8. <head>
  9. <meta charset="UTF-8">
  10. <title>File/Single</title>
  11. </head>
  12. <body>
  13. <form>
  14. <label>
  15. <span>Hello</span>
  16. <input type="file" name="hello" />
  17. </label>
  18. <button type="submit">Submit</button>
  19. </form>
  20. </body>
  21. </html>
  22. `))
  23. it('should have no form values when no file is selected', () => {
  24. utils.test({
  25. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  26. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  27. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  28. .toString();
  29. const after = utils.makeSearchParams(search)
  30. .toString();
  31. expect(before)
  32. .toEqual(after);
  33. },
  34. expectedStaticValue: {
  35. hello: ''
  36. },
  37. });
  38. })
  39. it('should have single form value when a file is selected', () => {
  40. utils.test({
  41. onBeforeSubmit: (cy) => {
  42. cy
  43. .get('[name="hello"]')
  44. .attachFile('uploads/data.json')
  45. },
  46. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  47. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  48. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  49. .toString();
  50. const after = utils.makeSearchParams(search)
  51. .toString();
  52. expect(before)
  53. .toEqual(after);
  54. },
  55. expectedStaticValue: {
  56. hello: 'data.json',
  57. },
  58. });
  59. })
  60. it('should retrieve the file list upon setting appropriate option', () => {
  61. utils.test({
  62. onBeforeSubmit: (cy: any) => {
  63. cy
  64. .get('[name="hello"]')
  65. .attachFile('uploads/data.json')
  66. },
  67. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  68. onSubmitted: (form: HTMLFormElement, submitter: any) => {
  69. const formValues = getFormValues(form,
  70. {
  71. submitter,
  72. getFileObjects: true
  73. }
  74. )
  75. expect(formValues.hello[0].name)
  76. .toBe('data.json')
  77. },
  78. });
  79. })
  80. it('should do nothing when attempting to set the value of the file', () => {
  81. utils.test({
  82. onLoaded: (form: HTMLFormElement) => {
  83. setFormValues(form, { hello: 'data.json' });
  84. },
  85. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  86. onSubmitted: (form: HTMLFormElement, submitter: any) => {
  87. const formValues = getFormValues(
  88. form,
  89. {
  90. submitter,
  91. getFileObjects: true
  92. }
  93. )
  94. expect(formValues.hello).toBeDefined()
  95. },
  96. expectedStaticValue: {},
  97. });
  98. });
  99. })
  100. describe('multiple', () => {
  101. beforeEach(utils.setup(`
  102. <!DOCTYPE html>
  103. <html lang="en-PH">
  104. <head>
  105. <meta charset="UTF-8">
  106. <title>File/Multiple</title>
  107. </head>
  108. <body>
  109. <form>
  110. <label>
  111. <span>Hello</span>
  112. <input type="file" name="hello" multiple />
  113. </label>
  114. <button type="submit">Submit</button>
  115. </form>
  116. </body>
  117. </html>
  118. `))
  119. it('should have no form values when no file is selected', () => {
  120. utils.test({
  121. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  122. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  123. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  124. .toString();
  125. const after = utils.makeSearchParams(search)
  126. .toString();
  127. expect(before)
  128. .toEqual(after);
  129. },
  130. expectedStaticValue: {
  131. hello: '',
  132. },
  133. });
  134. })
  135. it('should have single form value when a file is selected', () => {
  136. utils.test({
  137. onBeforeSubmit: (cy: any) => {
  138. cy
  139. .get('[name="hello"]')
  140. .attachFile(['uploads/data.json', 'uploads/data2.json'])
  141. },
  142. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  143. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  144. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  145. .toString();
  146. const after = utils.makeSearchParams(search)
  147. .toString();
  148. expect(before)
  149. .toEqual(after);
  150. },
  151. expectedStaticValue: 'hello=data.json&hello=data2.json',
  152. });
  153. })
  154. it('should retrieve the file list upon setting appropriate option', () => {
  155. utils.test({
  156. onBeforeSubmit: (cy: any) => {
  157. cy
  158. .get('[name="hello"]')
  159. .attachFile(['uploads/data.json', 'uploads/data2.json'])
  160. },
  161. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  162. onSubmitted: (form: HTMLFormElement, submitter: any) => {
  163. const formValues = getFormValues(form,
  164. {
  165. submitter,
  166. getFileObjects: true
  167. }
  168. )
  169. expect(formValues.hello[0].name)
  170. .toBe('data.json')
  171. expect(formValues.hello[1].name)
  172. .toBe('data2.json')
  173. },
  174. });
  175. })
  176. })
  177. })