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.
 
 
 

122 line
2.9 KiB

  1. import { getFormValues } from '../../src'
  2. import * as utils from '../utils'
  3. describe('submitter', () => {
  4. describe('button', () => {
  5. beforeEach(utils.setup(`
  6. <!DOCTYPE html>
  7. <html lang="en-PH">
  8. <head>
  9. <meta charset="UTF-8">
  10. <title>Submitter/Button</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 name="action" value="Foo" type="submit">Foo</button>
  19. <button name="action" value="Bar" type="submit">Bar</button>
  20. </form>
  21. </body>
  22. </html>
  23. `))
  24. it('should have double form values', () => {
  25. utils.test({
  26. querySubmitter: (cy: any) => cy.get('[name="action"][value="Foo"]'),
  27. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  28. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  29. .toString();
  30. const after = utils.makeSearchParams(search)
  31. .toString();
  32. expect(before)
  33. .toEqual(after);
  34. },
  35. expectedStaticValue: {
  36. hello: 'Hi',
  37. action: 'Foo',
  38. },
  39. });
  40. });
  41. })
  42. describe('input', () => {
  43. beforeEach(utils.setup(`
  44. <!DOCTYPE html>
  45. <html lang="en-PH">
  46. <head>
  47. <meta charset="UTF-8">
  48. <title>Submitter/Input</title>
  49. </head>
  50. <body>
  51. <form>
  52. <label>
  53. <span>Hello</span>
  54. <input type="text" name="hello" value="Hi" />
  55. </label>
  56. <input name="action" value="Foo" type="submit" />
  57. <input name="action" value="Bar" type="submit" />
  58. </form>
  59. </body>
  60. </html>
  61. `))
  62. it('should have double form values', () => {
  63. utils.test({
  64. querySubmitter: (cy: any) => cy.get('[name="action"][value="Bar"]'),
  65. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  66. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  67. .toString();
  68. const after = utils.makeSearchParams(search)
  69. .toString();
  70. expect(before)
  71. .toEqual(after);
  72. },
  73. expectedStaticValue: {
  74. hello: 'Hi',
  75. action: 'Bar',
  76. },
  77. });
  78. });
  79. })
  80. describe('outside', () => {
  81. beforeEach(utils.setup(`
  82. <!DOCTYPE html>
  83. <html lang="en-PH">
  84. <head>
  85. <meta charset="UTF-8">
  86. <title>Submitter/Outside</title>
  87. </head>
  88. <body>
  89. <form id="form"></form>
  90. <label>
  91. <span>Hello</span>
  92. <input type="text" name="hello" value="Hi" form="form" />
  93. </label>
  94. <button type="submit" form="form">Submit</button>
  95. </body>
  96. </html>
  97. `))
  98. it('should have single form value', () => {
  99. utils.test({
  100. querySubmitter: (cy: any) => cy.get('[type="submit"]'),
  101. onSubmitted: (form: HTMLFormElement, submitter: any, search: any) => {
  102. const before = utils.makeSearchParams(getFormValues(form, { submitter }))
  103. .toString();
  104. const after = utils.makeSearchParams(search)
  105. .toString();
  106. expect(before)
  107. .toEqual(after);
  108. },
  109. expectedStaticValue: {
  110. hello: 'Hi',
  111. },
  112. });
  113. });
  114. })
  115. })