treeSelect.spec.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. describe('treeSelect', () => {
  2. it('searchPosition is trigger', () => {
  3. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--search-position&args=&viewMode=story');
  4. // test trigger focus
  5. cy.get('input').eq(0).click();
  6. cy.get('.semi-tree-select-focus').should('exist');
  7. // test trigger blur
  8. cy.get('body').click('right');
  9. cy.get('.semi-tree-select-focus').should('not.exist');
  10. });
  11. it('load data', () => {
  12. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--load-data&args=&viewMode=story');
  13. cy.get('.semi-tree-select-selection').click();
  14. cy.wait(200);
  15. cy.get('.semi-tree-option-list .semi-icon-tree_triangle_down').eq(0).click();
  16. cy.wait(1000);
  17. // assert data had load success
  18. cy.get('.semi-tree-option-list').contains('Child Node');
  19. });
  20. it('clear and close', () => {
  21. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--check-relation-demo&args=&viewMode=story');
  22. cy.viewport(1000, 1000);
  23. // test remove tag
  24. cy.get('.semi-tag-close').eq(3).click();
  25. cy.get('.semi-tag-content').contains('Japan').should('not.exist');
  26. cy.get('.semi-tree-select-selection').eq(8).contains('China');
  27. cy.get('.semi-tree-select-selection').eq(8).trigger('mouseover');
  28. cy.get('.semi-tree-select-clearbtn').click();
  29. cy.get('.semi-tagInput-wrapper .semi-tag').should('not.exist');
  30. // multiple When triggerSearch, clicking the clear button will trigger to clear Input
  31. cy.get('input').eq(1).type('dddd');
  32. cy.get('.semi-tree-select-selection').eq(8).trigger('mouseover');
  33. cy.get('.semi-tree-select-clearbtn').click();
  34. cy.get('.semi-tree-select-selection').eq(8).get('input').should('have.value', '');
  35. cy.get('body').click('right');
  36. // wait for the panel close
  37. cy.wait(500);
  38. // single selection When triggerSearch, clicking the clear button will trigger to clear Input
  39. cy.get('input').eq(2).type('dddd');
  40. cy.get('.semi-tree-select-selection').eq(9).trigger('mouseover');
  41. cy.get('.semi-tree-select-clearbtn').click();
  42. cy.get('.semi-tree-select-selection').eq(9).get('input').should('have.value', '');
  43. });
  44. it('clear by key press', () => {
  45. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--check-relation-demo&args=&viewMode=story');
  46. cy.get('.semi-tree-select-selection').eq(8).contains('China');
  47. cy.get('.semi-tree-select-selection').eq(8).trigger('mouseover');
  48. cy.get('.semi-tree-select-clearbtn').focus();
  49. cy.get('.semi-tree-select-clearbtn').type('{enter}');
  50. cy.get('.semi-tagInput-wrapper .semi-tag').should('not.exist');
  51. });
  52. it('onblur / onfocus', () => {
  53. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--on-blur-on-focus&args=&viewMode=story', {
  54. onBeforeLoad(win) {
  55. cy.stub(win.console, 'log').as('consoleLog');
  56. },
  57. });
  58. // 单选,点击 trigger 触发 onFocus, 点击选项触发 onBlur,
  59. cy.get('.semi-tree-select').eq(0).click();
  60. cy.get('@consoleLog').should('be.calledWith', 'focus');
  61. cy.get('.semi-tree-option').eq(0).click();
  62. cy.get('@consoleLog').should('be.calledWith', 'blur');
  63. // 单选,点击 trigger 触发 onFocus,再次点击 trigger 收起面板,但不会触发 onBlur, 点击外部触发 onBlur,
  64. cy.get('.semi-tree-select').eq(0).click();
  65. cy.get('@consoleLog').should('be.calledWith', 'focus');
  66. cy.get('.semi-tree-select').eq(0).click();
  67. cy.get('.semi-tree-select').eq(1).click();
  68. cy.get('@consoleLog').should('be.calledWith', 'blur');
  69. // 多选, 点击 trigger 触发 onFocus,在此点击再次点击收起面板,但不会触发 onBlur, 点击外部触发 onBlur,
  70. cy.get('@consoleLog').should('be.calledWith', 'focus');
  71. cy.get('.semi-tree-select').eq(1).click();
  72. cy.get('.semi-tree-select').eq(2).click();
  73. cy.get('@consoleLog').should('be.calledWith', 'blur');
  74. });
  75. it('filterTreeNode & virtualize', () => {
  76. // 该例子为测试当 filterTreeNode 和 virtualize 功能同时使用时, 点击选中是否符合预期
  77. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--search-position-in-trigger-and-virtualize');
  78. cy.get('.semi-tree-select').eq(0).click();
  79. cy.get('.semi-tree-option').eq(0).click();
  80. cy.get('.semi-tree-select-selection-TriggerSearchItem').eq(0).should('contain.text', '亚洲');
  81. });
  82. it('treeSelect clickTriggerToHide', () => {
  83. // 测试 clickTriggerToHide API 是否符合预期
  84. // 未设置 clickTriggerToHide, 默认为 true, 面板打开状态下再次点击会关闭
  85. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--click-trigger-to-hide');
  86. cy.get('.semi-tree-select').eq(0).click();
  87. cy.get('.semi-tree-select-popover').should('exist');
  88. cy.get('.semi-tree-select').eq(0).click();
  89. cy.get('.semi-tree-select-popover').should('not.exist');
  90. // clickTriggerToHide 设置为 false, 面板打开的状态下再次点击不会关闭
  91. cy.get('.semi-tree-select').eq(1).click();
  92. cy.get('.semi-tree-select-popover').should('exist');
  93. cy.get('.semi-tree-select').eq(1).click();
  94. cy.get('.semi-tree-select-popover').should('exist');
  95. });
  96. it("unRelated + async load", () => {
  97. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--un-related-and-async-load');
  98. cy.get('.semi-checkbox').eq(0).get('.semi-checkbox-inner-checked').should("exist");
  99. cy.get('.semi-icon-tree_triangle_down').eq(0).trigger('click');
  100. // sync load, 1000ms
  101. cy.wait(1000);
  102. cy.get('.semi-checkbox').eq(0).get('.semi-checkbox-inner-checked').should("exist");
  103. });
  104. it('expanded controlled + showFilteredOnly', () => {
  105. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--issue-1542');
  106. // cy.get('.semi-tree-select-selection').eq(0).trigger('click');
  107. cy.get('.semi-tree-select-inputTrigger').eq(0).children(".semi-input").eq(0).type('b');
  108. // showFilteredOnly,因此搜索后的选项应该只有 3 项
  109. cy.get('.semi-tree-option').should('have.length', 3);
  110. // 清空搜索框,由 state 中的 expandedKeys 决定展示展示项,应该只有两项
  111. cy.get('.semi-tree-select-inputTrigger').eq(0).children(".semi-input").eq(0).clear();
  112. cy.get('.semi-tree-option').should('have.length', 2);
  113. cy.get('.semi-tree-select-inputTrigger').eq(0).children(".semi-input").eq(0).type('s');
  114. cy.get('.semi-tree-option').should('have.length', 9);
  115. // 搜索状态下,输入框有值,被筛选的选项点击展开按钮行为正常
  116. cy.get('.semi-tree-option').eq(1).children('.semi-icon-tree_triangle_down').eq(0).trigger('click');
  117. cy.get('.semi-tree-option').should('have.length', 6);
  118. cy.get('body').click();
  119. // 等待弹出层收起
  120. cy.wait(500);
  121. cy.get('.semi-tree-select-selection').eq(0).trigger('click');
  122. // 等待弹出层展开
  123. cy.wait(500);
  124. cy.get('.semi-tree-option').should('have.length', 2);
  125. cy.get('body').click();
  126. // 等待弹出层收起
  127. cy.wait(500);
  128. cy.get('.semi-tree-select-inputTrigger').eq(0).children(".semi-input").eq(0).type('o');
  129. cy.get('.semi-tree-option').should('have.length', 4);
  130. cy.get('.semi-tree-option').eq(3).trigger('click');
  131. cy.wait(1000);
  132. cy.get('.semi-tree-select-selection').eq(0).trigger('click');
  133. cy.wait(1000);
  134. // 此时展开项目由选中项和原来的 state 中的 expandedKeys 决定
  135. cy.get('.semi-tree-option').should('have.length', 2);
  136. cy.get('.semi-icon-tree_triangle_down').eq(0).trigger('click');
  137. cy.get('.semi-tree-option').should('have.length', 4);
  138. });
  139. it('filterTreeNode + loadData', () => {
  140. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--load-data');
  141. cy.get('.semi-tree-select-selection').eq(0).trigger('click');
  142. cy.wait(1000);
  143. cy.get('.semi-tree-option').eq(0).trigger('click');
  144. cy.get('.semi-tree-option-list').should('not.exist');
  145. cy.get('.semi-tree-select-selection').eq(0).trigger('click');
  146. cy.wait(1000);
  147. cy.get('.semi-tree-option.semi-tree-option-level-1.semi-tree-option-selected.semi-tree-option-collapsed').should('exist');
  148. });
  149. it('multiple, checkRelation = unRelated, triggerRender', () => {
  150. cy.visit("http://127.0.0.1:6006/iframe.html?id=treeselect--trigger-render-add-method");
  151. cy.get('.semi-tagInput').eq(1).trigger('click');
  152. cy.get('.semi-tree-option').eq(2).trigger('click');
  153. cy.get('.semi-tree-option').eq(3).trigger('click');
  154. cy.get('.semi-tagInput-wrapper').eq(1).get('.semi-tag-content').should('have.length', 2);
  155. cy.get('.semi-tagInput-wrapper').eq(1).get('.semi-tag-content').eq(0).contains('北京');
  156. cy.get('.semi-tagInput-wrapper').eq(1).get('.semi-tag-content').eq(1).contains('上海');
  157. });
  158. it('multiple, checkRelation = related, triggerRender', () => {
  159. cy.visit("http://127.0.0.1:6006/iframe.html?id=treeselect--trigger-render-add-method");
  160. cy.get('.semi-tagInput').eq(0).trigger('click');
  161. cy.get('.semi-tree-option').eq(2).trigger('click');
  162. cy.get('.semi-tree-option').eq(3).trigger('click');
  163. cy.get('.semi-tagInput-wrapper').eq(1).get('.semi-tag-content').should('have.length', 1);
  164. cy.get('.semi-tagInput-wrapper').eq(1).get('.semi-tag-content').eq(0).contains('亚洲');
  165. });
  166. it('single, triggerRender', () => {
  167. cy.visit("http://127.0.0.1:6006/iframe.html?id=treeselect--trigger-render-add-method");
  168. cy.get('.semi-button').eq(0).trigger('click');
  169. cy.get('.semi-tree-option').eq(0).trigger('click');
  170. cy.get('.semi-button-content-left').eq(0).contains('亚洲');
  171. })
  172. it('default open', () => {
  173. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--multiple')
  174. cy.get('.semi-tree-select-popover').should('have.length', 1);
  175. cy.get('#invisible-span').eq(0).trigger('mousedown');
  176. cy.get('.semi-tree-select-popover').should('not.exist');
  177. })
  178. it('esc close panel', () => {
  179. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--search-position-in-trigger-and-virtualize');
  180. // cy.get('.semi-input').trigger('click');
  181. cy.get('.semi-input').type('中');
  182. cy.get('.semi-tree-select-popover').should('have.length', 1);
  183. cy.get('.semi-input').type('{esc}', { force: true });
  184. cy.get('.semi-tree-select-popover').should('not.exist');
  185. })
  186. it('showFilteredOnly + searchPosition in trigger', () => {
  187. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--show-filtered-only');
  188. // cy.get('.semi-tree-select').trigger('click');
  189. cy.get('.semi-input').type('上');
  190. cy.get('.semi-tree-option').should('have.length', 3);
  191. cy.get('#info').trigger('mousedown');
  192. cy.wait(500);
  193. cy.get('.semi-tree-select').trigger('click');
  194. cy.get('.semi-tree-option').should('have.length', 2);
  195. })
  196. it('keyMaps + search', () => {
  197. cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--filter-and-key-maps');
  198. cy.get('.semi-tree-select').trigger('click');
  199. cy.get('.semi-input').type('1');
  200. cy.get('.semi-tree-option-expand-icon').eq(0).trigger('click');
  201. cy.get('.semi-tree-option-label-text').eq(0).contains('Asia');
  202. })
  203. });