slider.spec.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. describe('slider', () => {
  2. let cyWin;
  3. before(() => {
  4. cy.visit('http://127.0.0.1:6006/iframe.html?id=slider--controlled-slider-demo&args=&viewMode=story', {
  5. onBeforeLoad(win) {
  6. cyWin = win;
  7. },
  8. });
  9. });
  10. beforeEach(() => {
  11. cy.stub(cyWin.console, 'log').as('consoleLog');
  12. });
  13. // afterEach(() => {
  14. // cy.reload();
  15. // });
  16. it('controlled slider', () => {
  17. const parentSelector = '[data-cy=horizontalNoChangeSlider]';
  18. const sliderTrackSelector = `${parentSelector} .semi-slider-rail`;
  19. const sliderHandleSelector = `${parentSelector} .semi-slider-handle`;
  20. // test track click
  21. let handleInitialPos;
  22. cy.get(sliderHandleSelector).then(($handle) => {
  23. handleInitialPos = $handle.position();
  24. });
  25. cy.get(sliderTrackSelector).trigger('click', 'right');
  26. cy.get('@consoleLog').should('be.calledWith', 'value改变了100');
  27. cy.get(sliderHandleSelector).should(($button) => {
  28. expect($button.position()).deep.equal(handleInitialPos);
  29. });
  30. // test knob slide
  31. cy.get(sliderHandleSelector)
  32. .trigger('mousedown')
  33. .trigger('mousemove', { pageX: 600, pageY:0 })
  34. .trigger('mouseup', { force: true });
  35. cy.get(sliderHandleSelector).should(($button) => {
  36. expect($button.position()).deep.equal(handleInitialPos);
  37. });
  38. });
  39. it('controlled slider with onChange', () => {
  40. const parentSelector = `[data-cy=horizontalOnChangeSlider]`;
  41. const sliderTrackSelector = `${parentSelector} .semi-slider-rail`;
  42. const sliderHandleSelector = `${parentSelector} .semi-slider-handle`;
  43. // test track click
  44. cy.get(sliderTrackSelector).trigger('click', 'right');
  45. cy.get('@consoleLog').should('be.calledWith', 'value改变了100');
  46. cy.get(sliderHandleSelector).should('have.css', 'left', '774px');
  47. // test knob slide (pageX 300 = 32%)
  48. cy.get(sliderHandleSelector)
  49. .trigger('mousedown')
  50. .trigger('mousemove', { pageX: 300, pageY:0 })
  51. .trigger('mouseup', { force: true });
  52. // left 32% = 247.68px;
  53. // cy.get(sliderHandleSelector).should('have.css', 'left', '247.68px');
  54. cy.window().then(window => {
  55. const style = window.getComputedStyle(window.document.querySelector(sliderHandleSelector));
  56. expect(Math.ceil(parseFloat(style.left))).eq(248);
  57. });
  58. });
  59. it('controlled range slider', () => {
  60. const parentSelector = `[data-cy=horizontalNoChangeRangeSlider]`;
  61. const sliderTrackSelector = `${parentSelector} .semi-slider-rail`;
  62. const sliderHandleSelector = `${parentSelector} .semi-slider-handle`;
  63. let leftKnobPos, rightKnobPos;
  64. cy.get(sliderHandleSelector).then((handles) => {
  65. leftKnobPos = handles.eq(0).position();
  66. rightKnobPos = handles.eq(1).position();
  67. });
  68. // test track right click
  69. cy.get(sliderTrackSelector).trigger('click', 'right');
  70. cy.get('@consoleLog').should('be.calledWith', 'value改变了10,100');
  71. // test track left click
  72. cy.get(sliderTrackSelector).trigger('click', 'left');
  73. cy.get('@consoleLog').should('be.calledWith', 'value改变了0,30');
  74. // check final knob position
  75. cy.get(sliderHandleSelector).should((handles) => {
  76. expect(handles.eq(0).position()).deep.equal(leftKnobPos);
  77. expect(handles.eq(1).position()).deep.equal(rightKnobPos);
  78. });
  79. // test left knob slide
  80. cy.get(sliderHandleSelector).eq(0)
  81. .trigger('mousedown')
  82. .trigger('mousemove', { pageX: 100, pageY:0 })
  83. .trigger('mouseup', { force: true });
  84. // test right knob slide
  85. cy.get(sliderHandleSelector).eq(1)
  86. .trigger('mousedown')
  87. .trigger('mousemove', { pageX: 600, pageY:0 })
  88. .trigger('mouseup', { force: true });
  89. cy.get(sliderHandleSelector).should((handles) => {
  90. expect(handles.eq(0).position()).deep.equal(leftKnobPos);
  91. expect(handles.eq(1).position()).deep.equal(rightKnobPos);
  92. });
  93. });
  94. it('controlled vertical slider', () => {
  95. const parentSelector = '[data-cy=horizontalNoChangeVerticalSlider]';
  96. const sliderTrackSelector = `${parentSelector} .semi-slider-rail`;
  97. const sliderHandleSelector = `${parentSelector} .semi-slider-handle`;
  98. let handleInitialPos;
  99. cy.get(sliderHandleSelector).then(($handle) => {
  100. handleInitialPos = $handle.position();
  101. });
  102. // test track click
  103. cy.get(sliderTrackSelector).trigger('click', 'bottom');
  104. cy.get('@consoleLog').should('be.calledWith', 'value改变了100');
  105. cy.get(sliderHandleSelector).should(($button) => {
  106. expect($button.position()).deep.equal(handleInitialPos);
  107. });
  108. // test knob slide
  109. cy.get(sliderHandleSelector)
  110. .trigger('mousedown')
  111. .trigger('mousemove', { pageX: 0, pageY:600 })
  112. .trigger('mouseup', { force: true });
  113. cy.get(sliderHandleSelector).should(($button) => {
  114. expect($button.position()).deep.equal(handleInitialPos);
  115. });
  116. });
  117. });