carousel.spec.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. describe('carousel', () => {
  2. it('ref method with control', () => {
  3. cy.visit('http://127.0.0.1:6006/iframe.html?id=carousel--controlled-usage&args=&viewMode=story');
  4. cy.get('.semi-carousel-content-item-active h3').contains('1');
  5. cy.get('div').contains('prev').click();
  6. cy.get('.semi-carousel-content-item-active h3').contains('5');
  7. cy.get('div').contains('next').click();
  8. cy.get('.semi-carousel-content-item-active h3').contains('1');
  9. cy.clock();
  10. cy.get('div').contains('play').click();
  11. cy.tick(2300);
  12. cy.get('.semi-carousel-content-item-active h3').contains('2');
  13. cy.tick(2300);
  14. cy.get('.semi-carousel-content-item-active h3').contains('3');
  15. cy.get('div').contains('stop').click();
  16. cy.tick(2300);
  17. cy.get('.semi-carousel-content-item-active h3').contains('3');
  18. cy.get('div').contains('play').click();
  19. cy.tick(2300);
  20. cy.get('.semi-carousel-content-item-active h3').contains('4');
  21. cy.get('div').contains('goTo3').click();
  22. cy.get('.semi-carousel-content-item-active h3').contains('3');
  23. });
  24. it('ref method without control', () => {
  25. cy.visit('http://127.0.0.1:6006/iframe.html?id=carousel--ref-usage&args=&viewMode=story');
  26. cy.get('.semi-carousel-content-item-active h3').contains('1');
  27. cy.clock();
  28. cy.get('div').contains('play').click();
  29. cy.tick(2300);
  30. cy.get('.semi-carousel-content-item-active h3').contains('2');
  31. cy.tick(2300);
  32. cy.get('.semi-carousel-content-item-active h3').contains('3');
  33. cy.get('div').contains('stop').click();
  34. cy.tick(4300);
  35. cy.get('.semi-carousel-content-item-active h3').contains('3');
  36. cy.get('div').contains('prev').click();
  37. cy.tick(300);
  38. cy.get('.semi-carousel-content-item-active h3').contains('2');
  39. cy.get('div').contains('goTo3').click();
  40. cy.tick(300);
  41. cy.get('.semi-carousel-content-item-active h3').contains('3');
  42. cy.get('div').contains('next').click();
  43. cy.tick(300);
  44. cy.get('.semi-carousel-content-item-active h3').contains('4');
  45. });
  46. it('mouseover and mouseleave', () => {
  47. cy.visit('http://127.0.0.1:6006/iframe.html?id=carousel--ref-usage&args=&viewMode=story');
  48. cy.get('.semi-carousel-content-item-active h3').contains('1');
  49. cy.clock(new Date().getTime());
  50. cy.get('div').contains('play').click();
  51. cy.tick(2300);
  52. cy.get('.semi-carousel-content-item-active h3').contains('2');
  53. cy.get('.semi-carousel').trigger('mouseover');
  54. cy.tick(400);
  55. cy.get('.semi-carousel-content-item-active h3').contains('2');
  56. cy.clock().invoke('restore');
  57. // todo: mouseleave test
  58. // cy.clock();
  59. // cy.get('#root').trigger('mousemove', 'right');
  60. // cy.wait(3000);
  61. // cy.get('.semi-carousel-content-item-active h3', { timeout: 0 }).contains('3');
  62. });
  63. it('auto play interval', () => {
  64. cy.visit('http://127.0.0.1:6006/iframe.html?id=carousel--auto-play-example&args=&viewMode=story');
  65. cy.get('.semi-carousel-content-item-active h3').contains('1');
  66. cy.wait(1300);
  67. cy.get('.semi-carousel-content-item-active h3').contains('2');
  68. cy.wait(1300);
  69. cy.get('.semi-carousel-content-item-active h3').contains('3');
  70. });
  71. it('slide direction', () => {
  72. cy.visit('http://127.0.0.1:6006/iframe.html?id=carousel--slide-direction&args=&viewMode=story');
  73. cy.get('.semi-carousel-arrow-next').click();
  74. cy.get('.semi-carousel-content-item-active h3').contains('index1');
  75. cy.get('.semi-carousel-content-item-slide-out').contains('index0');
  76. cy.get('.semi-carousel-content-item-slide-in').contains('index1');
  77. });
  78. });