Extract and set form values through the DOM—no frameworks required! https://github.com/TheoryOfNekomata/formxtra
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 

324 рядки
7.8 KiB

  1. import { getFormValues, setFormValues } from '../../src';
  2. import * as utils from '../utils'
  3. describe('text', () => {
  4. describe('basic', () => {
  5. beforeEach(utils.setup(`
  6. <!DOCTYPE html>
  7. <html lang="en-PH">
  8. <head>
  9. <meta charset="UTF-8">
  10. <title>Text/Basic</title>
  11. </head>
  12. <body>
  13. <form>
  14. <label>
  15. <span>Hello</span>
  16. <input type="text" name="hello" value="Hi" />
  17. </label>
  18. <button type="submit">Submit</button>
  19. </form>
  20. </body>
  21. </html>
  22. `))
  23. it('should have single form value', () => {
  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: 'Hi',
  36. },
  37. });
  38. });
  39. });
  40. describe('dirname', () => {
  41. beforeEach(utils.setup(`
  42. <!DOCTYPE html>
  43. <html lang="en-PH">
  44. <head>
  45. <meta charset="UTF-8">
  46. <title>Text/Dirname</title>
  47. </head>
  48. <body>
  49. <form>
  50. <label>
  51. <span>Hello</span>
  52. <input type="text" name="hello" value="Hi" dirname="hello.dir" />
  53. </label>
  54. <button type="submit">Submit</button>
  55. </form>
  56. </body>
  57. </html>
  58. `))
  59. it('should have extra value for directionality', () => {
  60. utils.test({
  61. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  62. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  63. const before = utils.makeSearchParams(getFormValues(form, { submitter, includeDirectionality: true, }))
  64. .toString();
  65. const after = utils.makeSearchParams(search)
  66. .toString();
  67. expect(before)
  68. .toEqual(after);
  69. },
  70. expectedStaticValue: {
  71. hello: 'Hi',
  72. 'hello.dir': 'ltr',
  73. },
  74. });
  75. });
  76. it('should support other directionality', () => {
  77. utils.test({
  78. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  79. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  80. document.getElementsByTagName('input')[0].style.direction = 'rtl';
  81. const before = utils.makeSearchParams(getFormValues(form, { submitter, includeDirectionality: true, }))
  82. .toString();
  83. const after = utils.makeSearchParams(search)
  84. .toString();
  85. expect(before)
  86. .toEqual(after);
  87. },
  88. expectedStaticValue: {
  89. hello: 'Hi',
  90. 'hello.dir': 'rtl',
  91. },
  92. });
  93. });
  94. });
  95. describe('disabled', () => {
  96. beforeEach(utils.setup(`
  97. <!DOCTYPE html>
  98. <html lang="en-PH">
  99. <head>
  100. <meta charset="UTF-8">
  101. <title>Text/Disabled</title>
  102. </head>
  103. <body>
  104. <form>
  105. <label>
  106. <span>Hello</span>
  107. <input
  108. type="text" name="hello" value="Hi"
  109. disabled
  110. />
  111. </label>
  112. <button type="submit">Submit</button>
  113. </form>
  114. </body>
  115. </html>
  116. `))
  117. it('should have blank form value', () => {
  118. utils.test({
  119. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  120. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  121. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  122. .toString();
  123. const after = utils.makeSearchParams(search)
  124. .toString();
  125. expect(before)
  126. .toEqual(after);
  127. },
  128. expectedStaticValue: {},
  129. });
  130. });
  131. })
  132. describe('outside', () => {
  133. beforeEach(utils.setup(`
  134. <!DOCTYPE html>
  135. <html lang="en-PH">
  136. <head>
  137. <meta charset="UTF-8">
  138. <title>Text/Outside</title>
  139. </head>
  140. <body>
  141. <form id="form">
  142. <button type="submit">Submit</button>
  143. </form>
  144. <label>
  145. <span>Hello</span>
  146. <input type="text" name="hello" value="Hi" form="form" />
  147. </label>
  148. </body>
  149. </html>
  150. `))
  151. it('should have single form value', () => {
  152. utils.test({
  153. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  154. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  155. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  156. .toString();
  157. const after = utils.makeSearchParams(search)
  158. .toString();
  159. expect(before)
  160. .toEqual(after);
  161. },
  162. expectedStaticValue: {
  163. hello: 'Hi',
  164. },
  165. });
  166. });
  167. });
  168. describe('readonly', () => {
  169. beforeEach(utils.setup(`
  170. <!DOCTYPE html>
  171. <html lang="en-PH">
  172. <head>
  173. <meta charset="UTF-8">
  174. <title>Text/Readonly</title>
  175. </head>
  176. <body>
  177. <form>
  178. <label>
  179. <span>Hello</span>
  180. <input
  181. type="text" name="hello" value="Hi"
  182. readonly
  183. />
  184. </label>
  185. <button type="submit">Submit</button>
  186. </form>
  187. </body>
  188. </html>
  189. `))
  190. it('should have single form value', () => {
  191. utils.test({
  192. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  193. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  194. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  195. .toString();
  196. const after = utils.makeSearchParams(search)
  197. .toString();
  198. expect(before)
  199. .toEqual(after);
  200. },
  201. expectedStaticValue: {
  202. hello: 'Hi',
  203. },
  204. });
  205. });
  206. });
  207. describe('programmatic value setting', () => {
  208. beforeEach(utils.setup(`
  209. <!DOCTYPE html>
  210. <html lang="en-PH">
  211. <head>
  212. <meta charset="UTF-8">
  213. <title>Text/Programmatic Value Setting</title>
  214. </head>
  215. <body>
  216. <form>
  217. <label>
  218. <span>Hello</span>
  219. <input type="text" name="hello" />
  220. </label>
  221. <button type="submit">Submit</button>
  222. </form>
  223. </body>
  224. </html>
  225. `));
  226. it('should have form values set', () => {
  227. utils.test({
  228. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  229. onLoaded: (form: HTMLFormElement) => {
  230. setFormValues(form, { hello: 'Hi', })
  231. },
  232. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  233. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  234. .toString();
  235. const after = utils.makeSearchParams(search)
  236. .toString();
  237. expect(before)
  238. .toEqual(after);
  239. },
  240. expectedStaticValue: {
  241. hello: 'Hi',
  242. },
  243. });
  244. });
  245. });
  246. describe('duplicate', () => {
  247. beforeEach(utils.setup(`
  248. <!DOCTYPE html>
  249. <html lang="en-PH">
  250. <head>
  251. <meta charset="UTF-8">
  252. <title>Text/Duplicate</title>
  253. </head>
  254. <body>
  255. <form>
  256. <label>
  257. <span>Hello 1</span>
  258. <input id="hello1" type="text" value="value" name="hello"/>
  259. </label>
  260. <label>
  261. <span>Hello 2</span>
  262. <input id="hello2" type="text" value="another value" name="hello"/>
  263. </label>
  264. <button type="submit">Submit</button>
  265. </form>
  266. </body>
  267. </html>
  268. `));
  269. it('should get both values', () => {
  270. utils.test({
  271. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  272. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  273. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  274. .toString();
  275. const after = utils.makeSearchParams(search)
  276. .toString();
  277. expect(before)
  278. .toEqual(after);
  279. },
  280. expectedStaticValue: {
  281. hello: ['value', 'another value'],
  282. },
  283. });
  284. });
  285. it('should set both values', () => {
  286. utils.test({
  287. onLoaded: (form: HTMLFormElement) => {
  288. setFormValues(form, {
  289. hello: ['new value 1', 'another value 2'],
  290. })
  291. },
  292. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  293. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  294. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  295. .toString();
  296. const after = utils.makeSearchParams(search)
  297. .toString();
  298. expect(before)
  299. .toEqual(after);
  300. },
  301. expectedStaticValue: {
  302. hello: ['new value 1', 'another value 2'],
  303. },
  304. });
  305. });
  306. });
  307. })