select_element.rs 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. use wasm_bindgen::prelude::*;
  2. use wasm_bindgen_test::*;
  3. use web_sys::HtmlSelectElement;
  4. #[wasm_bindgen(module = "/tests/wasm/element.js")]
  5. extern "C" {
  6. fn new_select_with_food_opts() -> HtmlSelectElement;
  7. }
  8. #[wasm_bindgen_test]
  9. fn test_select_element() {
  10. // Creates a select with four options. Options are ["tomato", "potato", "orange", "apple"], where
  11. // the string is the .value and .text of each option.
  12. let select = new_select_with_food_opts();
  13. select.set_autofocus(true);
  14. assert_eq!(
  15. select.autofocus(),
  16. true,
  17. "Select element should have a true autofocus property."
  18. );
  19. select.set_autofocus(false);
  20. assert_eq!(
  21. select.autofocus(),
  22. false,
  23. "Select element should have a false autofocus property."
  24. );
  25. // TODO: This test currently fails on Firefox, but not Chrome. In Firefox, even though we select.set_autocomplete(), select.autocomplete() yields an empty String.
  26. // select.set_autocomplete("tomato");
  27. // assert_eq!(select.autocomplete(), "tomato", "Select element should have a 'tomato' autocomplete property.");
  28. select.set_disabled(true);
  29. assert_eq!(
  30. select.disabled(),
  31. true,
  32. "Select element should be disabled."
  33. );
  34. select.set_disabled(false);
  35. assert_eq!(
  36. select.disabled(),
  37. false,
  38. "Select element should not be disabled."
  39. );
  40. assert!(
  41. select.form().is_none(),
  42. "Select should not be associated with a form."
  43. );
  44. select.set_multiple(false);
  45. assert_eq!(
  46. select.multiple(),
  47. false,
  48. "Select element should have a false multiple property."
  49. );
  50. select.set_multiple(true);
  51. assert_eq!(
  52. select.multiple(),
  53. true,
  54. "Select element should have a true multiple property."
  55. );
  56. select.set_name("potato");
  57. assert_eq!(
  58. select.name(),
  59. "potato",
  60. "Select element should have a name property of 'potato'."
  61. );
  62. select.set_required(true);
  63. assert_eq!(
  64. select.required(),
  65. true,
  66. "Select element should be required."
  67. );
  68. select.set_required(false);
  69. assert_eq!(
  70. select.required(),
  71. false,
  72. "Select element should not be required."
  73. );
  74. select.set_size(432);
  75. assert_eq!(
  76. select.size(),
  77. 432,
  78. "Select element should have a size property of 432."
  79. );
  80. // Default type seems to be "select-multiple" for the browsers I tested, but there's no guarantee
  81. // on this, so let's just make sure we get back something here.
  82. assert!(
  83. select.type_().len() > 0,
  84. "Select element should have some type."
  85. );
  86. assert!(
  87. select.options().length() == 4,
  88. "Select element should have four options."
  89. );
  90. select.set_length(12);
  91. assert_eq!(
  92. select.length(),
  93. 12,
  94. "Select element should have a length of 12."
  95. );
  96. // Reset the length to four, as that's how many options we actually have.
  97. select.set_length(4);
  98. assert!(
  99. select
  100. .named_item("this should definitely find nothing")
  101. .is_none(),
  102. "Shouldn't be able to find a named item with the given string."
  103. );
  104. assert!(
  105. select.selected_options().length() == 1,
  106. "One option should be selected by default, just by way of having items."
  107. );
  108. select.set_selected_index(2);
  109. assert_eq!(
  110. select.selected_index(),
  111. 2,
  112. "Select element should have a selected index of 2."
  113. );
  114. // Quote from docs: The value property sets or returns the value of the selected option in a drop-down list.
  115. select.set_value("tomato"); // Select the "tomato" option
  116. assert_eq!(
  117. select.value(),
  118. "tomato",
  119. "Select element should have no selected value."
  120. );
  121. // This might be browser dependent, potentially rendering this test useless? Worked fine in Chrome and Firefox for now.
  122. assert_eq!(
  123. select.will_validate(),
  124. true,
  125. "Select element should not validate by default."
  126. );
  127. assert!(
  128. select.validation_message().is_ok(),
  129. "Select element should retrieve a validation message."
  130. );
  131. assert!(
  132. select.validity().valid(),
  133. "Our basic select should be valid."
  134. );
  135. assert!(
  136. select.check_validity(),
  137. "Our basic select should check out as valid."
  138. );
  139. assert!(
  140. select.report_validity(),
  141. "Our basic select should report valid."
  142. );
  143. select.set_custom_validity("Some custom validity error.");
  144. assert!(
  145. select.labels().length() == 0,
  146. "There should be no labels associated with our select element."
  147. );
  148. // TODO: This test won't work until this bug is fixed: https://www.w3.org/Bugs/Public/show_bug.cgi?id=20720. Sometime in the future, either remove this test or uncomment after bug is fixed.
  149. // assert!(select.named_item("tomato").is_some(), "Should be able to find the 'tomato' option before removing it.");
  150. // select.remove(0);
  151. // assert!(select.named_item("tomato").is_none(), "Shouldn't be able to find the 'tomato' option after removing it.")
  152. // TODO: As a result, we are missing a test for the remove() method.
  153. }