tooltip.spec.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. // tooltip.spec.js created with Cypress
  2. //
  3. // Start writing your Cypress tests below!
  4. // If you're unfamiliar with how Cypress works,
  5. // check out the link below and learn how to write your first test:
  6. // https://on.cypress.io/writing-first-test
  7. /**
  8. * Cypress will default scroll element into view
  9. * @see https://docs.cypress.io/guides/core-concepts/interacting-with-elements#Scrolling
  10. */
  11. describe('tooltip', () => {
  12. it('leftTopOver autoAdjustOverflow', () => {
  13. const viewportWidth = 1200;
  14. const viewportHeight = 660;
  15. const triggerWidth = 200;
  16. const triggerHeight = 32;
  17. const leftTopPosition = { offset: { top: 0, left: 0 } };
  18. const rightBottomPosition = { offset: { top: -viewportHeight + triggerHeight, left: -viewportWidth + triggerWidth } };
  19. cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--left-top-over-auto-adjust-overflow&args=&viewMode=story');
  20. cy.viewport(viewportWidth, viewportHeight);
  21. const dataSelector = `[data-cy=leftTopOver]`;
  22. cy.get(dataSelector).scrollIntoView(leftTopPosition);
  23. cy.get(dataSelector).click({ force: true });
  24. cy.get('[x-placement="leftTopOver"]').should('have.length', 1);
  25. cy.get(dataSelector).scrollIntoView(rightBottomPosition);
  26. cy.get('[x-placement="rightBottomOver"]').should('have.length', 1);
  27. });
  28. it('position with over autoAdjustOverflow', () => {
  29. const viewportWidth = 600;
  30. const viewportHeight = 400;
  31. const overList = ['leftTopOver', 'rightTopOver', 'rightBottomOver', 'leftBottomOver',];
  32. cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--left-top-over-demo&args=&viewMode=story');
  33. cy.viewport(viewportWidth, viewportHeight);
  34. const dataSelector = `[data-cy=toggleVisible]`;
  35. cy.get(dataSelector).click({ force: true });
  36. for (let i=0; i<overList.length; i++){
  37. const dataSelector = `[data-cy=`+ overList[i] + `]`;
  38. cy.get(dataSelector).click({ force: true });
  39. cy.get('[x-placement="'+ overList[overList.length - 1 - i] +'"]').should('have.length', 1);
  40. }
  41. });
  42. it('autoFocusHover', () => {
  43. cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--auto-focus-content-demo&args=&viewMode=story');
  44. const dataSelector = `[data-cy=hover]`;
  45. const input = `[data-cy=hoverInput]`;
  46. cy.get(dataSelector).trigger('mouseover');
  47. cy.get(input).should('be.focused');
  48. });
  49. it('autoFocusHoverNoMotion', () => {
  50. cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--auto-focus-content-demo&args=&viewMode=story');
  51. const dataSelector = `[data-cy=hoverNoMotion]`;
  52. const input = `[data-cy=hoverNoMotionInput]`;
  53. cy.get(dataSelector).trigger('mouseover');
  54. cy.get(input).should('be.focused');
  55. });
  56. it('autoFocusClick', () => {
  57. cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--auto-focus-content-demo&args=&viewMode=story');
  58. const dataSelector = `[data-cy=click]`;
  59. const input = `[data-cy=clickInput]`;
  60. cy.get(dataSelector).click({ force: true });
  61. cy.get(input).should('be.focused');
  62. });
  63. it('autoFocusClickNoMotion', () => {
  64. cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--auto-focus-content-demo&args=&viewMode=story');
  65. const dataSelector = `[data-cy=clickNoMotion]`;
  66. const input = `[data-cy=clickNoMotionInput]`;
  67. cy.get(dataSelector).click({ force: true });
  68. cy.get(input).should('be.focused');
  69. });
  70. it('autoFocusControlled', () => {
  71. cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--auto-focus-content-demo&args=&viewMode=story');
  72. const trigger = `[data-cy=controlled]`;
  73. const disableBtn = `[data-cy=controlledDisableBtn]`;
  74. const input = `[data-cy=controlledInput]`;
  75. // 校验受控功能
  76. cy.get(disableBtn).click({ force: true });
  77. cy.get(input).should('not.exist');
  78. cy.get(trigger).click({ force: true });
  79. cy.get(input).should('be.focused');
  80. });
  81. it('autoFocusControlledNoMotion', () => {
  82. cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--auto-focus-content-demo&args=&viewMode=story');
  83. const trigger = `[data-cy=controlledNoMotion]`;
  84. const disableBtn = `[data-cy=controlledNoMotionDisableBtn]`;
  85. const input = `[data-cy=controlledNoMotionInput]`;
  86. // 校验受控功能
  87. cy.get(disableBtn).click({ force: true });
  88. cy.get(input).should('not.exist');
  89. cy.get(trigger).click({ force: true });
  90. cy.get(input).should('be.focused');
  91. });
  92. it.skip('adjustPosIfNeed', () => {
  93. const viewportWidth = 400;
  94. const viewportHeight = 200;
  95. const topAndLeft = ['topLeft', 'top', 'topRight', 'leftTop', 'left', 'leftBottom'];
  96. const bottomAndRight = ['bottomLeft', 'bottom', 'bottomRight', 'rightTop', 'right', 'rightBottom'];
  97. cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--adjust-pos-if-need&args=&viewMode=story');
  98. cy.viewport(viewportWidth, viewportHeight);
  99. for (let i=0; i<topAndLeft.length; i++){
  100. const dataSelector = `[data-cy=`+ topAndLeft[i] + `]`;
  101. cy.get(dataSelector).click({ force: true });
  102. cy.get('[x-placement="'+ bottomAndRight[i] +'"]').should('have.length', 1);
  103. }
  104. for (let i=bottomAndRight.length-1; i>=0; i--){
  105. const dataSelector = `[data-cy=`+ bottomAndRight[i] + `]`;
  106. cy.get(dataSelector).click({ force: true });
  107. cy.get('[x-placement="'+ topAndLeft[i] +'"]').should('have.length', 1);
  108. }
  109. });
  110. });